:root{--ink:#0f172a;--ink2:#1e293b;--muted:#5b677a;--teal:#0f766e;--cyan:#06b6d4;--bg:#f8fafc;--white:#fff;--line:#e2e8f0;--soft:#eef6f6;--max:1180px;--radius:24px;--shadow:0 18px 60px rgba(15,23,42,.08);--shadow2:0 30px 90px rgba(15,23,42,.14)}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
main,.section,.page-hero,.hero,.hero-grid,.container{max-width:100%}
html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.skip{position:absolute;left:-9999px}.skip:focus{left:18px;top:18px;z-index:9999;background:#fff;padding:10px 14px;border-radius:12px}.container{width:min(calc(100% - 36px),var(--max));margin-inline:auto}.section{padding:112px 0;position:relative}.section-tight{padding:78px 0}.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}h1,h2,h3{letter-spacing:-.045em;line-height:1.05;margin:0}h1{font-size:clamp(3.2rem,7vw,6.9rem);max-width:1000px}h2{font-size:clamp(2.25rem,4.8vw,4.8rem);max-width:900px}h3{font-size:clamp(1.35rem,2vw,2rem)}.lead{font-size:clamp(1.15rem,1.8vw,1.45rem);color:var(--muted);max-width:820px}.copy{color:var(--muted);font-size:1.04rem}.gradient-text{background:linear-gradient(115deg,var(--ink) 10%,var(--teal) 48%,var(--cyan));background-clip:text;-webkit-background-clip:text;color:transparent}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;border-radius:14px;border:1px solid transparent;font-weight:800;transition:.25s ease}.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:var(--teal);transform:translateY(-2px)}.btn-secondary{background:#fff;border-color:var(--line);color:var(--ink)}.btn-secondary:hover{border-color:#94a3b8;transform:translateY(-2px)}.btn-cyan{background:var(--cyan);color:var(--ink)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.tag{font-size:.88rem;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.75);color:#334155;font-weight:700}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(248,250,252,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.72)}.nav{height:76px;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.brand img{width:54px;height:38px;object-fit:contain}.brand-name{font-weight:900;letter-spacing:-.025em}.brand-name small{display:block;font-weight:700;font-size:.7rem;color:var(--muted);letter-spacing:.04em}.menu{display:flex;align-items:center;gap:18px;margin-left:auto;font-weight:750;font-size:.94rem}.menu a{color:#334155}.menu a:hover,.menu a.active{color:var(--teal)}.header-cta{margin-left:8px}.nav-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;width:44px;height:44px;border-radius:13px}
.hero{min-height:calc(100vh - 76px);display:flex;align-items:center;overflow:hidden;padding:76px 0 70px}.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center}.hero .lead{margin-top:26px}.hero-orbit{position:relative;aspect-ratio:1/1;max-width:530px;margin-left:auto}.orbit-core{position:absolute;inset:20%;border-radius:34px;background:linear-gradient(145deg,#fff,#eaf8f7);box-shadow:var(--shadow2);border:1px solid #dbe7ea;display:flex;align-items:center;justify-content:center;z-index:3}.orbit-core .screen{width:76%;aspect-ratio:4/3;border-radius:18px;background:var(--ink);padding:11px;box-shadow:0 25px 80px rgba(15,23,42,.25)}.screen-inner{height:100%;background:linear-gradient(160deg,#f8fafc,#dff9f4);border-radius:12px;display:grid;grid-template-columns:.33fr .67fr;overflow:hidden}.screen-sidebar{background:#0f766e;padding:10px}.screen-content{padding:14px}.skel{height:8px;border-radius:999px;background:#dbe4ea;margin:7px 0}.skel.big{height:45px;border-radius:10px;background:linear-gradient(90deg,#cffafe,#ccfbf1)}
.orbit{
  position:absolute;
  inset:6%;
  border:1px solid rgba(15,118,110,.18);
  border-radius:50%;
  pointer-events:none;
  animation:none;
  overflow:visible;
}
.orbit.o2{
  inset:0;
  border-color:rgba(6,182,212,.18);
  animation:none;
}

/* moving luminous flow on each circular rail */
.orbit::before,
.orbit::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  pointer-events:none;
  will-change:transform;
  -webkit-mask:radial-gradient(farthest-side,
      transparent calc(100% - 3px),
      #000 calc(100% - 2px),
      #000 calc(100% - 1px),
      transparent 100%);
  mask:radial-gradient(farthest-side,
      transparent calc(100% - 3px),
      #000 calc(100% - 2px),
      #000 calc(100% - 1px),
      transparent 100%);
}
.orbit::before{
  background:conic-gradient(
    from 0deg,
    transparent 0 18deg,
    rgba(6,182,212,.15) 24deg,
    rgba(6,182,212,.95) 39deg,
    rgba(103,232,249,.95) 45deg,
    rgba(6,182,212,.24) 53deg,
    transparent 64deg 168deg,
    rgba(15,118,110,.15) 174deg,
    rgba(20,184,166,.85) 190deg,
    rgba(94,234,212,.95) 197deg,
    rgba(15,118,110,.18) 207deg,
    transparent 218deg 360deg
  );
  filter:drop-shadow(0 0 5px rgba(6,182,212,.55));
  animation:orbitFlowCW 7.5s linear infinite;
}
.orbit::after{
  inset:-1px;
  background:repeating-conic-gradient(
    from 0deg,
    transparent 0deg 24deg,
    rgba(255,255,255,.0) 24deg 26deg,
    rgba(6,182,212,.72) 26deg 28deg,
    transparent 28deg 55deg
  );
  opacity:.7;
  animation:orbitFlowCW 13s linear infinite reverse;
}
.orbit.o2::before{
  background:conic-gradient(
    from 90deg,
    transparent 0 44deg,
    rgba(15,118,110,.14) 50deg,
    rgba(20,184,166,.88) 66deg,
    rgba(103,232,249,1) 71deg,
    rgba(6,182,212,.25) 80deg,
    transparent 92deg 220deg,
    rgba(6,182,212,.12) 226deg,
    rgba(6,182,212,.8) 242deg,
    rgba(103,232,249,.95) 248deg,
    transparent 260deg 360deg
  );
  animation:orbitFlowCCW 11s linear infinite;
}
.orbit.o2::after{
  background:repeating-conic-gradient(
    from 180deg,
    transparent 0deg 32deg,
    rgba(20,184,166,.8) 32deg 34deg,
    transparent 34deg 70deg
  );
  opacity:.55;
  animation:orbitFlowCCW 17s linear infinite reverse;
}
@keyframes orbitFlowCW{to{transform:rotate(360deg)}}
@keyframes orbitFlowCCW{to{transform:rotate(-360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.proof{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.45)}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.proof-item strong{display:block;font-size:1.06rem}.proof-item span{color:var(--muted);font-size:.9rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.3s ease;position:relative;overflow:hidden}.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#b7d8d6}.card .num{font-size:.78rem;color:var(--teal);font-weight:900;letter-spacing:.12em;margin-bottom:34px}.card p{color:var(--muted)}.card .arrow{position:absolute;right:22px;top:22px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg);transition:.25s}.card:hover .arrow{background:var(--ink);color:#fff;transform:rotate(-35deg)}
.dark-section{background:var(--ink);color:#fff;overflow:hidden}.dark-section .eyebrow{color:#67e8f9}.dark-section .lead,.dark-section .copy{color:#bdc8d8}.system-flow{margin-top:56px;display:grid;grid-template-columns:repeat(6,1fr);position:relative;gap:10px}.system-flow:before{content:"";position:absolute;height:2px;left:7%;right:7%;top:28px;background:linear-gradient(90deg,var(--teal),var(--cyan),#8b5cf6);opacity:.75}.flow-step{text-align:center;position:relative;z-index:2}.flow-dot{width:56px;height:56px;border-radius:18px;margin:auto;background:#162338;border:1px solid #334155;display:grid;place-items:center;font-weight:900;color:#67e8f9;box-shadow:0 12px 35px rgba(0,0,0,.3)}.flow-step p{color:#94a3b8;font-size:.88rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.sticky-copy{position:sticky;top:130px;align-self:start}.stack{display:grid;gap:15px}.feature{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line)}.feature strong{display:block;font-size:1.07rem;margin-bottom:5px}.feature span{color:var(--muted)}.feature-icon{width:42px;height:42px;border-radius:13px;background:var(--soft);color:var(--teal);display:grid;place-items:center;margin-bottom:18px;font-weight:900}
.commerce-map{background:#fff;border:1px solid var(--line);border-radius:32px;padding:34px;box-shadow:var(--shadow)}.map-row{display:flex;align-items:center;gap:10px;margin:12px 0}.map-box{flex:1;padding:16px;border-radius:16px;background:var(--bg);border:1px solid var(--line);font-weight:800;text-align:center}.map-arrow{color:var(--teal);font-weight:900}
.funnel{margin-top:42px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:30px;overflow:hidden}.funnel-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.funnel-stage{padding:22px 12px;text-align:center;border-radius:16px;color:#fff;font-weight:900}.funnel-stage:nth-child(1){background:#0f172a}.funnel-stage:nth-child(2){background:#164e63}.funnel-stage:nth-child(3){background:#0f766e}.funnel-stage:nth-child(4){background:#0891b2}.funnel-stage:nth-child(5){background:#06b6d4;color:#083344}.funnel-stage small{display:block;font-weight:650;opacity:.8;margin-top:6px}.funnel-note{text-align:center;color:var(--muted);margin-top:20px}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}.ai-case{background:#fff;border:1px solid var(--line);border-radius:24px;padding:25px}.ai-case .pipe{margin-top:20px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pipe span{padding:8px 10px;border-radius:10px;background:var(--bg);font-size:.78rem;font-weight:800}.pipe b{color:var(--cyan)}
.project-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:44px}.project{min-height:420px;border-radius:30px;overflow:hidden;position:relative;padding:34px;background:linear-gradient(155deg,#fff,#eaf7f6);border:1px solid var(--line);display:flex;flex-direction:column}.project.dark{background:linear-gradient(145deg,#0f172a,#1e293b);color:#fff;border:0}.project .project-tags{margin-top:auto;display:flex;gap:7px;flex-wrap:wrap}.project-tags span{font-size:.78rem;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(148,163,184,.24)}.project.dark .project-tags span{background:rgba(255,255,255,.08);color:#dbeafe}.project-visual{position:absolute;right:-38px;bottom:-25px;width:62%;aspect-ratio:4/3;border-radius:24px 0 0 0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow2);padding:14px;transform:rotate(-3deg);transition:.5s ease}.project:hover .project-visual{transform:rotate(0) translate(-8px,-5px)}.project-visual .mini-ui{height:100%;background:linear-gradient(145deg,#ecfeff,#f8fafc);border-radius:14px;padding:14px}.project.dark .project-visual{background:#152238;border-color:#334155}.project.dark .mini-ui{background:linear-gradient(145deg,#0f766e,#0f172a)}
.about-grid{display:grid;grid-template-columns:.76fr 1.24fr;gap:64px;align-items:center}.portrait{border-radius:32px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.portrait img{width:100%;aspect-ratio:1/1.12;object-fit:cover;object-position:center 25%}.credentials{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}.cred{padding:15px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:.9rem;font-weight:800}.timeline{margin-top:34px;border-left:2px solid #cbd5e1;padding-left:23px}.timeline div{position:relative;margin:0 0 19px}.timeline div:before{content:"";position:absolute;left:-30px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--cyan);border:3px solid var(--bg)}.timeline strong{display:block}.timeline span{color:var(--muted);font-size:.9rem}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}.price{font-size:2rem;font-weight:950;letter-spacing:-.04em;margin:22px 0 6px}
.advisor{background:linear-gradient(140deg,#ecfeff,#fff);border:1px solid #cbe8ea;border-radius:34px;padding:48px;box-shadow:var(--shadow)}.advisor-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.advisor-option{border:1px solid var(--line);background:#fff;border-radius:15px;padding:14px;text-align:left;font-weight:750}.advisor-option:hover{border-color:var(--teal);background:#f0fdfa}.advisor-progress{height:6px;background:#dce7e8;border-radius:99px;overflow:hidden;margin-top:25px}.advisor-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--cyan));width:20%;transition:.3s}.advisor-result{display:none;margin-top:24px;padding:20px;border-radius:20px;background:var(--ink);color:#fff}.advisor-result.show{display:block}
.resources{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:38px}.article-card{padding:28px;border-radius:26px;background:#fff;border:1px solid var(--line)}.article-card.big{min-height:310px;background:linear-gradient(150deg,#fff,#e6faf8)}.faq{max-width:900px;margin-top:38px}details{border-top:1px solid var(--line);padding:20px 0}details:last-child{border-bottom:1px solid var(--line)}summary{font-size:1.12rem;font-weight:850;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}summary:after{content:"+";font-size:1.4rem;color:var(--teal)}details[open] summary:after{content:"–"}details p{color:var(--muted);max-width:780px}
.footer{background:#07111f;color:#fff;padding:78px 0 110px}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,.7fr);gap:36px}.footer p,.footer a{color:#aebbc9}.footer a:hover{color:#fff}.footer h4{margin:0 0 14px}.footer-bottom{border-top:1px solid #1e293b;margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;gap:15px;color:#64748b;font-size:.85rem}
.quick-contact{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;align-items:center;gap:8px}.quick-contact a{background:var(--ink);color:#fff;border-radius:999px;min-height:48px;padding:0 17px;display:flex;align-items:center;font-weight:850;box-shadow:var(--shadow2)}.quick-contact .wa{background:#0f766e}.mobile-bar{display:none}
.page-hero{padding:92px 0 64px}.page-hero h1{font-size:clamp(3rem,6vw,6rem)}.breadcrumbs{font-size:.86rem;color:var(--muted);margin-bottom:26px}.content-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:56px}.sidebar-card{position:sticky;top:110px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px}.service-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px}.service-item{padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line)}.service-item strong{display:block;margin-bottom:4px}.service-item span{color:var(--muted);font-size:.9rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}.delay1{transition-delay:.08s}.delay2{transition-delay:.16s}.delay3{transition-delay:.24s}.parallax{will-change:transform}
@media(max-width:980px){.menu,.header-cta{display:none}.nav-toggle{display:block}.menu.open{display:flex;position:fixed;left:16px;right:16px;top:82px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow2)}.hero{min-height:auto;padding:60px 0 78px}.hero-grid,.split,.about-grid,.content-grid{grid-template-columns:1fr}.hero-orbit{margin:28px auto 0;max-width:470px;width:100%}.cards,.ai-grid,.shop-grid{grid-template-columns:repeat(2,1fr)}.system-flow{grid-template-columns:repeat(3,1fr);row-gap:28px}.system-flow:before{display:none}.project-grid,.resources{grid-template-columns:1fr}.sticky-copy,.sidebar-card{position:static}.proof-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.funnel-row{grid-template-columns:1fr 1fr}.funnel-stage:last-child{grid-column:1/-1}}
@media(max-width:640px){body{padding-bottom:68px}.container{width:min(calc(100% - 26px),var(--max))}.section{padding:80px 0}.section-tight{padding:56px 0}.nav{height:68px}.brand img{width:46px}h1{font-size:clamp(2.75rem,13vw,4.2rem)}h2{font-size:clamp(2.05rem,10vw,3.2rem)}.hero{padding-top:45px}.hero-grid{gap:26px}.hero-orbit{max-width:390px}.node{font-size:.68rem;padding:7px 9px}.proof-grid,.cards,.ai-grid,.shop-grid,.credentials,.advisor-options,.service-list{grid-template-columns:1fr}.system-flow{grid-template-columns:repeat(2,1fr)}.project{min-height:370px;padding:27px}.project-visual{width:70%}.commerce-map,.funnel,.advisor{padding:22px}.map-row{flex-direction:column}.map-arrow{transform:rotate(90deg)}.funnel-row{grid-template-columns:1fr}.funnel-stage:last-child{grid-column:auto}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.quick-contact{display:none}.mobile-bar{position:fixed;bottom:0;left:0;right:0;height:68px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1.2fr;z-index:1200;padding:7px 8px calc(7px + env(safe-area-inset-bottom))}.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.77rem;font-weight:850;border-right:1px solid var(--line)}.mobile-bar a:last-child{border-right:0;background:var(--ink);color:#fff;border-radius:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}


@media(max-width:640px){
  .hero,.page-hero{overflow:hidden}
  .hero-grid{overflow:hidden}
  .hero-orbit{max-width:340px;width:100%;margin:20px auto 0;overflow:visible}
  .orbit-core{inset:21%}
  .node{max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .node.n1{left:1%;top:12%}
  .node.n2{right:1%;top:24%}
  .node.n3{left:0;bottom:21%}
  .node.n4{right:2%;bottom:11%}
  .node.n5{left:33%;top:2%}
  .glow{right:-130px;top:-90px;width:280px;height:280px}
}



@media(max-width:980px){
  .hero,.page-hero{overflow:hidden}
  .hero-orbit{overflow:visible}
  .node{max-width:32vw}
}



/* ===== V3.2 iOS horizontal overflow hard-fix ===== */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  position:relative;
  touch-action:pan-y pinch-zoom;
}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
.site-header,main,.hero,.page-hero,.section,.proof,.footer,.mobile-bar{
  width:100%;
  max-width:100vw;
}
.container,.nav,.hero-grid,.split,.about-grid,.content-grid{
  min-width:0;
}
.site-header{overflow-x:clip}
.nav{width:100%;max-width:100%}
.brand{min-width:0;flex:0 1 auto}
.brand-name{min-width:0}
.hero{contain:paint}
.hero-grid{overflow:visible}
.hero-orbit{
  contain:layout paint;
  isolation:isolate;
}
.mobile-bar{
  left:0!important;
  right:0!important;
  overflow:hidden;
}


@media(max-width:640px){
  .hero-orbit{
    width:min(84vw,340px);
    max-width:84vw;
    margin-inline:auto;
  }
  .node{
    font-size:.66rem;
    max-width:38vw;
  }
  .node.n1{left:2%}
  .node.n2{right:2%}
  .node.n3{left:1%}
  .node.n4{right:1%}
  .node.n5{left:50%;transform:translateX(-50%)}
  .brand-name{font-size:.96rem}
  .brand-name small{font-size:.65rem}
}


/* =========================================================
   V3.3 — mobile layout reset + SVG animated flow rails
   ========================================================= */

/* A real horizontal viewport lock. Keep layout width independent
   from decorative elements and iOS' restored horizontal scroll. */
html{
  inline-size:100%;
  max-inline-size:100%;
  overflow-x:hidden!important;
}
body{
  inline-size:100%;
  max-inline-size:100%;
  overflow-x:hidden!important;
  margin-inline:0!important;
}
@supports (overflow:clip){
  html,body{overflow-x:clip!important}
}
body > *{
  max-inline-size:100%;
}
.site-header,main,.hero,.proof,.section,.page-hero,.footer{
  inline-size:100%;
  max-inline-size:100%;
}
.container{
  box-sizing:border-box;
  max-inline-size:min(var(--max),calc(100vw - 36px));
  min-inline-size:0;
}
.hero-grid,.hero-copy,.split,.about-grid,.content-grid{
  min-inline-size:0;
}
.hero-copy{
  inline-size:100%;
  max-inline-size:100%;
}
.hero-copy h1,
.hero-copy p{
  max-inline-size:100%;
  overflow-wrap:anywhere;
}
.hero .actions,
.hero .tagrow{
  max-inline-size:100%;
}

/* SVG rings are geometry, not layout. They can never increase scrollWidth. */
.flow-rings{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:1;
}
.ring-base,.ring-flow{
  fill:none;
  vector-effect:non-scaling-stroke;
  transform-origin:250px 250px;
}
.ring-base{
  stroke-width:1.4;
}
.ring-base-outer{stroke:rgba(6,182,212,.22)}
.ring-base-inner{stroke:rgba(15,118,110,.22)}

.ring-flow{
  stroke-linecap:round;
  stroke-width:3.1;
  filter:drop-shadow(0 0 4px rgba(6,182,212,.45));
  will-change:stroke-dashoffset;
}
.ring-flow-outer{
  stroke:#06b6d4;
  stroke-dasharray:76 160 12 94 44 190;
  animation:ringDashOuter 5.4s linear infinite;
}
.ring-flow-outer-2{
  stroke:#67e8f9;
  stroke-width:2.2;
  opacity:.85;
  stroke-dasharray:12 74 8 120 28 210;
  animation:ringDashOuter2 8.5s linear infinite;
}
.ring-flow-inner{
  stroke:#14b8a6;
  stroke-dasharray:56 126 10 82 35 160;
  animation:ringDashInner 6.8s linear infinite;
}
.ring-flow-inner-2{
  stroke:#5eead4;
  stroke-width:2;
  opacity:.9;
  stroke-dasharray:8 50 18 96 7 140;
  animation:ringDashInner2 9.4s linear infinite;
}
@keyframes ringDashOuter{to{stroke-dashoffset:-582}}
@keyframes ringDashOuter2{to{stroke-dashoffset:452}}
@keyframes ringDashInner{to{stroke-dashoffset:469}}
@keyframes ringDashInner2{to{stroke-dashoffset:-377}}

/* Old CSS orbit layers are no longer used in the home hero. */
.hero-orbit > .orbit{display:none!important}

/* The node pills stay inside the circle's own box. */
.hero-orbit .node{
  box-sizing:border-box;
  z-index:5;
  margin:0;
}

@media(max-width:980px){
  .hero{
    display:block;
    min-height:auto;
    overflow:hidden!important;
    contain:none;
  }
  .hero .container{
    max-inline-size:calc(100vw - 32px);
    margin-inline:auto!important;
  }
  .hero-grid{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
  }
  .hero-copy{
    display:block;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    transform:none!important;
  }
  .hero-orbit{
    position:relative;
    display:block;
    width:min(88vw,440px)!important;
    max-width:min(88vw,440px)!important;
    aspect-ratio:1/1;
    margin:42px auto 8px!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    contain:layout paint;
    overflow:visible!important;
  }
  .parallax{transform:none!important}
}

@media(max-width:640px){
  .container{
    width:auto!important;
    max-inline-size:calc(100vw - 26px)!important;
    margin-inline:auto!important;
  }
  .site-header .container{
    max-inline-size:calc(100vw - 20px)!important;
  }
  .nav{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .brand{
    min-width:0!important;
    max-width:calc(100vw - 82px)!important;
  }
  .brand img{
    flex:0 0 auto;
  }
  .brand-name{
    min-width:0!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hero{
    padding:42px 0 62px!important;
  }
  .hero .container{
    width:auto!important;
    max-inline-size:calc(100vw - 26px)!important;
  }
  .hero-copy{
    padding:0!important;
  }
  .hero-copy h1{
    font-size:clamp(2.65rem,12.5vw,4rem)!important;
    line-height:1.02;
    letter-spacing:-.055em;
  }
  .hero-copy .lead{
    font-size:1.08rem;
    line-height:1.55;
  }
  .hero-copy .actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .hero-copy .actions .btn{
    width:100%;
  }
  .hero-copy .tagrow{
    display:flex;
    gap:8px;
    overflow:visible!important;
  }
  .hero-copy .tag{
    max-width:100%;
  }

  .hero-orbit{
    width:min(86vw,340px)!important;
    max-width:min(86vw,340px)!important;
    margin-top:34px!important;
  }
  .orbit-core{
    inset:21%!important;
  }
  .hero-orbit .node{
    font-size:.64rem!important;
    padding:7px 9px!important;
    max-width:38vw!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .hero-orbit .node.n1{left:1%!important;top:13%!important}
  .hero-orbit .node.n2{right:1%!important;top:25%!important}
  .hero-orbit .node.n3{left:1%!important;bottom:22%!important}
  .hero-orbit .node.n4{right:1%!important;bottom:11%!important}
  .hero-orbit .node.n5{
    left:50%!important;
    right:auto!important;
    top:1%!important;
    transform:translateX(-50%)!important;
  }

  .mobile-bar{
    width:100vw!important;
    max-width:100vw!important;
    overflow:hidden!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .ring-flow{animation:none!important}
}


/* =========================================================
   V3.4 — definitive mobile hero reset
   ========================================================= */
@media(max-width:980px){
  .hero{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    align-items:initial!important;
    justify-content:initial!important;
    padding:38px 0 54px!important;
    overflow:hidden!important;
  }
  .hero .container{
    width:auto!important;
    max-width:calc(100vw - 32px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
  }
  .hero-grid{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:34px!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }
  .hero-copy{
    order:1!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    height:auto!important;
  }
  .hero-copy > *{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
  }
  .hero-orbit{
    order:2!important;
    position:relative!important;
    float:none!important;
    clear:both!important;
    inset:auto!important;
    transform:none!important;
    margin:4px auto 0!important;
  }
  .hero .glow{
    display:none!important;
  }
}

@media(max-width:640px){
  .hero{
    padding-top:28px!important;
    padding-bottom:44px!important;
  }
  .hero .container{
    max-width:calc(100vw - 26px)!important;
  }
  .hero-grid{
    gap:28px!important;
  }
  .hero-copy .eyebrow{
    margin-top:0!important;
    margin-bottom:16px!important;
  }
  .hero-copy h1{
    margin-top:0!important;
    margin-bottom:0!important;
  }
  .hero-copy .lead{
    margin-top:24px!important;
    margin-bottom:0!important;
  }
  .hero-copy .actions{
    margin-top:24px!important;
  }
  .hero-copy .tagrow{
    margin-top:18px!important;
  }
  .hero-orbit{
    width:min(86vw,336px)!important;
    max-width:min(86vw,336px)!important;
    margin-top:8px!important;
  }
  .proof{
    margin-top:0!important;
  }
  body{
    padding-bottom:84px!important;
  }
}


/* =========================================================
   V3.6 — mobile hamburger menu, Safari/iOS safe
   ========================================================= */
.site-header{overflow:visible!important}

.menu-backdrop{display:none}

@media(max-width:980px){
  .site-header{overflow:visible!important}
  .nav{position:relative}

  .menu{
    display:flex!important;
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:0!important;
    right:0!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:14px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    background:rgba(255,255,255,.98)!important;
    border:1px solid var(--line)!important;
    border-radius:22px!important;
    box-shadow:0 28px 80px rgba(15,23,42,.18)!important;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    z-index:1402!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px) scale(.985);
    transform-origin:top center;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    max-height:calc(100dvh - 105px);
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }

  .menu.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0) scale(1)!important;
  }

  .menu a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:10px 13px;
    border-radius:13px;
    font-size:1rem;
  }

  .menu a:hover,
  .menu a:active,
  .menu a.active{
    background:#f1f5f9;
  }

  .nav-toggle{
    display:grid!important;
    place-items:center;
    position:relative;
    z-index:1403!important;
    flex:0 0 44px;
    font-size:1.25rem;
    line-height:1;
    color:var(--teal);
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  .menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:1390;
    background:rgba(15,23,42,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
  }

  .menu-backdrop.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  body.mobile-menu-open{
    overflow-y:hidden!important;
  }
}

@media(min-width:981px){
  .menu-backdrop{display:none!important}
}


/* =========================================================
   V3.7 — publications + portfolio draft
   ========================================================= */
.publication-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:38px;
}
.publication-card{
  min-height:360px;
  display:flex;
  flex-direction:column;
}
.publication-card h3{
  font-size:clamp(1.5rem,2.5vw,2.15rem);
}
.publication-card .actions{
  margin-top:auto;
  padding-top:20px;
}
.publication-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.83rem;
  font-weight:800;
}
.academy-band{
  margin-top:18px;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(120deg,#fff,#eefaf7);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.academy-band p{margin-bottom:0}
.resource-coming{grid-template-columns:1fr 1fr}

.portfolio-status{
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:13px 16px;
  border:1px solid #cbe7d7;
  background:#f3fbf6;
  border-radius:16px;
  color:#334155;
  max-width:800px;
}
.portfolio-status strong{color:var(--ink)}
.portfolio-status > span:last-child{color:var(--muted)}
.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 5px rgba(15,118,110,.10);
}
.project-status{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-bottom:15px;
  padding:6px 9px;
  border-radius:999px;
  background:#ecfdf5;
  border:1px solid #d1fae5;
  color:var(--teal);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}
.project.dark .project-status,
.portfolio-draft.dark .project-status{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:#99f6e4;
}
.portfolio-draft-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.portfolio-draft{
  min-height:350px;
  display:flex;
  flex-direction:column;
  padding:32px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(145deg,#fff,#f2faf8);
}
.portfolio-draft.dark{
  color:#fff;
  border-color:#20314a;
  background:linear-gradient(145deg,#0f172a,#19263a);
}
.portfolio-draft.dark p{color:#cbd5e1}
.portfolio-draft .project-tags{margin-top:auto;padding-top:30px;display:flex;gap:7px;flex-wrap:wrap}
.portfolio-roadmap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:28px;
}
.portfolio-roadmap div{
  padding:20px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
}
.portfolio-roadmap strong{display:block;margin-bottom:7px}
.portfolio-roadmap span{color:var(--muted);font-size:.9rem}

@media(max-width:820px){
  .publication-grid,.portfolio-draft-grid{grid-template-columns:1fr}
  .publication-card{min-height:0}
  .academy-band{align-items:flex-start;flex-direction:column}
  .portfolio-roadmap{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .portfolio-roadmap{grid-template-columns:1fr}
  .publication-meta{flex-direction:column;gap:3px}
}


/* =========================================================
   V3.8 — orbit geometry + labels + polished desktop nav
   ========================================================= */

/* Desktop orbit: explicit dimensions stop the grid item collapsing. */
@media(min-width:981px){
  .hero-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);
    gap:48px;
  }
  .hero-orbit{
    width:min(100%,500px)!important;
    max-width:500px!important;
    min-width:420px;
    justify-self:end;
    align-self:center;
    margin-left:auto!important;
    margin-right:0!important;
  }
}

/* Restore the pill UI lost when the original orbit CSS was replaced. */
.hero-orbit .node{
  position:absolute!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  min-height:38px;
  padding:8px 12px!important;
  background:rgba(255,255,255,.94)!important;
  color:var(--ink)!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  box-shadow:0 12px 32px rgba(15,23,42,.10)!important;
  font-size:.78rem;
  line-height:1;
  font-weight:850;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  z-index:8!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hero-orbit .node::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  flex:0 0 8px;
  margin-right:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(6,182,212,.09);
}
.hero-orbit .node.n1{left:1%!important;top:14%!important}
.hero-orbit .node.n2{right:-1%!important;top:27%!important}
.hero-orbit .node.n3{left:-2%!important;bottom:27%!important}
.hero-orbit .node.n4{right:1%!important;bottom:12%!important}
.hero-orbit .node.n5{
  left:50%!important;
  right:auto!important;
  top:1%!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
}

/* Polished desktop header. */
@media(min-width:981px){
  .site-header .container{
    width:min(calc(100% - 34px),1320px)!important;
    max-width:1320px!important;
  }
  .nav{
    height:74px;
    gap:18px;
  }
  .brand{
    gap:10px;
    flex:0 0 auto;
  }
  .brand img{
    width:48px;
    height:36px;
  }
  .brand-name{
    font-size:.96rem;
    line-height:1.05;
  }
  .brand-name small{
    margin-top:4px;
    font-size:.64rem;
  }
  .menu{
    margin-left:auto;
    gap:5px;
    font-size:.86rem;
    font-weight:780;
    white-space:nowrap;
  }
  .menu > a,
  .nav-more-toggle{
    min-height:40px;
    display:flex;
    align-items:center;
    padding:0 10px;
    border-radius:11px;
    white-space:nowrap;
  }
  .menu > a:hover,
  .menu > a.active,
  .nav-more:hover .nav-more-toggle,
  .nav-more:focus-within .nav-more-toggle{
    color:var(--teal);
    background:#eef6f6;
  }
  .header-cta{
    min-height:44px;
    padding:0 16px;
    margin-left:4px;
    font-size:.86rem;
    border-radius:12px;
    white-space:nowrap;
  }

  .nav-more{
    position:relative;
  }
  .nav-more-toggle{
    border:0;
    background:transparent;
    color:#334155;
    font-weight:780;
    cursor:pointer;
  }
  .nav-more-toggle span{
    margin-left:5px;
    font-size:.8rem;
    transition:transform .2s ease;
  }
  .nav-more-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:170px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 22px 60px rgba(15,23,42,.14);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:.18s ease;
    z-index:1500;
  }
  .nav-more:hover .nav-more-menu,
  .nav-more:focus-within .nav-more-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .nav-more:hover .nav-more-toggle span,
  .nav-more:focus-within .nav-more-toggle span{
    transform:rotate(180deg);
  }
  .nav-more-menu a{
    display:flex;
    min-height:42px;
    align-items:center;
    padding:0 11px;
    border-radius:10px;
    color:#334155;
  }
  .nav-more-menu a:hover,
  .nav-more-menu a.active{
    color:var(--teal);
    background:#f1f5f9;
  }
}

/* On mobile, "Altro" becomes normal visible links inside hamburger. */
@media(max-width:980px){
  .nav-more{
    display:contents!important;
  }
  .nav-more-toggle{
    display:none!important;
  }
  .nav-more-menu{
    display:contents!important;
  }
  .nav-more-menu a{
    display:flex!important;
  }
}

/* Phone positioning: keep all labels as pills and within the visual. */
@media(max-width:640px){
  .hero-orbit .node{
    min-height:34px;
    max-width:44vw!important;
    padding:7px 9px!important;
    font-size:.66rem!important;
    box-shadow:0 8px 22px rgba(15,23,42,.09)!important;
  }
  .hero-orbit .node::before{
    width:7px;height:7px;flex-basis:7px;margin-right:6px;
  }
  .hero-orbit .node.n1{left:0!important;top:14%!important}
  .hero-orbit .node.n2{right:0!important;top:27%!important}
  .hero-orbit .node.n3{left:0!important;bottom:26%!important}
  .hero-orbit .node.n4{right:0!important;bottom:11%!important}
  .hero-orbit .node.n5{
    left:50%!important;
    top:0!important;
    transform:translateX(-50%)!important;
  }
}


/* =========================================================
   V4.0 — shop products, courses, notification signup
   ========================================================= */
.payment-strip{
  margin-top:28px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.payment-strip div{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.payment-strip strong{font-size:.95rem}
.payment-strip span{font-weight:800;color:var(--teal)}
.payment-strip small{max-width:570px;color:var(--muted);line-height:1.4}
.payment-strip-bottom{margin-top:34px}

.service-shop-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:40px;
}
.service-product{
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:27px;
  border-radius:24px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 10px 35px rgba(15,23,42,.035);
  transition:.25s ease;
}
.service-product:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service-product.featured{background:linear-gradient(150deg,#fff,#eef9f6);border-color:#c6e1d9}
.product-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:25px}
.product-type{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--teal)}
.product-price{font-weight:950;font-size:1.25rem;letter-spacing:-.03em}
.service-product p{color:var(--muted)}
.service-product ul{padding-left:19px;color:#475569;margin:12px 0 24px}
.service-product .btn{margin-top:auto}

.sprint-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:38px;
}
.sprint-card{
  padding:23px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
}
.sprint-card > span{display:block;color:var(--teal);font-weight:950;margin-bottom:16px}
.sprint-card p{color:var(--muted);margin-bottom:0}

.coming-badge{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #fed7aa;
  background:#fff7ed;
  color:#9a3412;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:14px;
}
.coming-dot{
  width:9px;height:9px;border-radius:50%;
  background:#f97316;
  box-shadow:0 0 0 5px rgba(249,115,22,.11);
  flex:0 0 9px;
}
.big-coming{font-size:.78rem}

.course-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:40px;
}
.course-card{
  min-height:360px;
  padding:24px;
  border-radius:24px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  flex-direction:column;
}
.course-card.featured-course{
  background:linear-gradient(150deg,#fff,#eef9f6);
  border-color:#c8e4db;
}
.course-icon{
  width:50px;height:50px;border-radius:15px;
  display:grid;place-items:center;
  margin:5px 0 24px;
  background:var(--ink);
  color:#fff;
  font-weight:950;
  letter-spacing:-.03em;
}
.course-card p{color:var(--muted)}
.course-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:22px}
.course-tags span{padding:6px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:.7rem;font-weight:800;color:#475569}

.notify-section{background:linear-gradient(180deg,var(--bg),#eef7f4)}
.notify-panel{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:50px;
  align-items:center;
  padding:46px;
  border-radius:32px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
}
.notify-form{
  display:grid;
  gap:14px;
}
.notify-form label{display:grid;gap:7px;font-weight:800;font-size:.9rem}
.notify-form input[type="email"],.notify-form select{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid #cbd5e1;
  border-radius:13px;
  background:#fff;
  color:var(--ink);
}
.notify-form input:focus,.notify-form select:focus{outline:2px solid rgba(15,118,110,.2);border-color:var(--teal)}
.consent-check{grid-template-columns:auto 1fr!important;align-items:flex-start;gap:10px!important;font-weight:600!important;color:var(--muted)}
.consent-check input{margin-top:4px}
.consent-check a{text-decoration:underline}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.notify-feedback{min-height:24px;margin:0;color:var(--teal);font-weight:750}

.formation-teaser{background:linear-gradient(180deg,#fff,var(--bg))}
.mini-course-stack{display:grid;gap:11px}
.mini-course-stack > div{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  align-items:center;
  padding:17px 19px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
}
.mini-course-stack .coming-dot{grid-row:1/3}
.mini-course-stack strong{line-height:1.2}
.mini-course-stack small{color:var(--muted)}
.formation-cta{padding-top:0}

@media(max-width:1040px){
  .service-shop-grid{grid-template-columns:repeat(2,1fr)}
  .course-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .sprint-grid{grid-template-columns:1fr 1fr}
  .notify-panel{grid-template-columns:1fr;padding:30px}
  .payment-strip{align-items:flex-start;flex-direction:column;gap:8px}
}
@media(max-width:600px){
  .service-shop-grid,.sprint-grid,.course-grid{grid-template-columns:1fr}
  .service-product,.course-card{min-height:0}
  .notify-panel{padding:22px}
}


/* =========================================================
   V4.1 — Web App product showcase
   ========================================================= */
.apps-status{
  margin-top:28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 15px;
  border:1px solid #fed7aa;
  background:#fff7ed;
  border-radius:16px;
}
.apps-status strong{color:#9a3412}
.apps-status span:last-child{color:var(--muted)}

.app-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:42px;
}
.app-card{
  min-height:600px;
  padding:27px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:28px;
  background:#fff;
  box-shadow:0 12px 38px rgba(15,23,42,.04);
  transition:.28s ease;
}
.app-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}
.app-card-family{
  background:linear-gradient(155deg,#fff,#eef8f5);
  border-color:#c9e3da;
}
.app-card-ai{
  background:linear-gradient(155deg,#fff,#f0f4ff);
}
.app-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:25px;
}
.app-logo{
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius:17px;
  background:var(--ink);
  color:#fff;
  font-weight:950;
  letter-spacing:-.04em;
  box-shadow:0 12px 30px rgba(15,23,42,.14);
}
.app-card .coming-badge{margin:0}
.app-card p{color:var(--muted)}
.app-card ul{
  padding-left:19px;
  color:#475569;
  margin:12px 0 28px;
}
.app-card .app-interest{margin-top:auto}

.app-philosophy{
  background:linear-gradient(180deg,#fff,var(--bg));
}
.app-teaser-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:32px;
}
.app-mini{
  padding:17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.app-mini strong{display:block}
.app-mini span{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}
.apps-teaser{
  background:linear-gradient(180deg,var(--bg),#eef7f4);
}
.apps-crosslink{background:#fff}

@media(max-width:1050px){
  .app-grid{grid-template-columns:repeat(2,1fr)}
  .app-teaser-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .app-grid,.app-teaser-row{grid-template-columns:1fr}
  .app-card{min-height:0}
}


/* =========================================================
   V4.2 — portfolio selection state
   ========================================================= */
.portfolio-selection-status{
  margin-top:28px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  max-width:860px;
  padding:17px 19px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 35px rgba(15,23,42,.04);
}
.portfolio-selection-status > div{display:grid;gap:4px}
.portfolio-selection-status strong{color:var(--ink)}
.portfolio-selection-status span{color:var(--muted)}

.selection-pulse{
  position:relative;
  width:11px;
  height:11px;
  margin-top:5px;
  flex:0 0 11px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(15,118,110,.34);
  animation:selectionPulse 1.8s ease-out infinite;
}
@keyframes selectionPulse{
  0%{box-shadow:0 0 0 0 rgba(15,118,110,.34)}
  70%{box-shadow:0 0 0 10px rgba(15,118,110,0)}
  100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}
}

.portfolio-selection-panel{
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:52px;
  align-items:center;
  padding:36px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(145deg,#fff,var(--bg));
}
.selection-categories{display:flex;flex-wrap:wrap;gap:9px}
.selection-categories span{
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:.78rem;
  font-weight:850;
}
.portfolio-method{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:28px;
}
.portfolio-method > div,
.portfolio-preview-grid > div{
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.portfolio-method strong,
.portfolio-preview-grid strong{display:block;margin-bottom:7px}
.portfolio-method span,
.portfolio-preview-grid span{color:var(--muted);font-size:.9rem}

.portfolio-preview-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:30px;
}
@media(max-width:820px){
  .portfolio-selection-panel{grid-template-columns:1fr;gap:28px;padding:26px}
  .portfolio-method{grid-template-columns:1fr 1fr}
  .portfolio-preview-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .portfolio-method{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .selection-pulse{animation:none}
}

/* V4.3 cache bump: navigation + waitlist backend update */


/* =========================================================
   V4.4 — mobile menu clickable fix
   The backdrop must stay BELOW the sticky header stacking context.
   ========================================================= */
@media(max-width:980px){
  .site-header{
    z-index:1500!important;
    isolation:isolate;
  }

  .menu{
    z-index:1502!important;
    pointer-events:none!important;
  }

  .menu.open{
    pointer-events:auto!important;
  }

  .menu.open a,
  .menu.open .nav-more,
  .menu.open .nav-more-menu,
  .menu.open .nav-more-menu a{
    pointer-events:auto!important;
  }

  .nav-toggle{
    z-index:1503!important;
  }

  .menu-backdrop,
  .menu-backdrop.open{
    z-index:1490!important;
  }
}

/* ===== GV Consulting V4.6 production ===== */
.live-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  font-size:.82rem;font-weight:800;letter-spacing:.02em;color:#0f5f59;
  background:rgba(15,118,110,.10);border:1px solid rgba(15,118,110,.18)
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:#0f766e;
  box-shadow:0 0 0 5px rgba(15,118,110,.10);flex:0 0 auto
}
.app-card-real{
  border-color:rgba(15,118,110,.28)!important;
  background:linear-gradient(180deg,rgba(15,118,110,.055),rgba(255,255,255,.96))
}
.app-card-real .app-logo{background:rgba(15,118,110,.12);color:#0f5f59}
@media(max-width:720px){.live-badge{font-size:.78rem}}