:root{
  --navy:#07111f;
  --navy-2:#0a1728;
  --navy-3:#102235;
  --navy-4:#16304a;
  --ivory:#f3f0e9;
  --muted:#aeb9c6;
  --muted-2:#7f8d9c;
  --gold:#c6a66a;
  --gold-2:#e3c994;
  --line:rgba(198,166,106,.18);
  --line-soft:rgba(243,240,233,.09);
  --glass:rgba(13,27,42,.68);
  --white-glass:rgba(243,240,233,.055);
  --shadow:0 34px 90px rgba(0,0,0,.34);
  --radius:28px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;background:
  radial-gradient(circle at 82% 10%,rgba(39,83,124,.16),transparent 26rem),
  radial-gradient(circle at 15% 34%,rgba(198,166,106,.06),transparent 30rem),
  var(--navy);color:var(--ivory);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
img{display:block;max-width:100%}
::selection{background:rgba(198,166,106,.28);color:var(--ivory)}
.container{width:min(calc(100% - 48px),var(--max));margin:0 auto}
.section{position:relative;padding:150px 0}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-weight:700;margin:0 0 20px}
.display{font-size:clamp(48px,7vw,108px);line-height:.94;letter-spacing:-.055em;font-weight:690;margin:0}
.section-title{font-size:clamp(40px,5.2vw,74px);line-height:1.01;letter-spacing:-.045em;font-weight:650;margin:0;max-width:950px}
.lead{font-size:clamp(19px,2vw,27px);line-height:1.45;color:var(--muted);max-width:830px;margin:26px 0 0}
.small{font-size:14px;color:var(--muted)}
.gold{color:var(--gold-2)}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin-top:48px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .35s,border .35s,backdrop-filter .35s}
.site-header.scrolled{background:rgba(7,17,31,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft)}
.header-inner{height:84px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:13px;min-width:max-content}
.brand img{width:38px;height:38px;object-fit:contain}
.brand-name{font-size:17px;font-weight:700;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a{font-size:14px;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--ivory)}
.langs{display:flex;align-items:center;gap:6px;border:1px solid var(--line-soft);border-radius:999px;padding:4px}
.langs a{font-size:11px;letter-spacing:.08em;color:var(--muted);padding:7px 9px;border-radius:999px}
.langs a.active{background:rgba(198,166,106,.13);color:var(--gold-2)}
.header-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:13px 20px;background:rgba(198,166,106,.08);font-size:14px;font-weight:650;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,color .2s}
.header-cta:hover,.button:hover{transform:translateY(-2px);background:rgba(198,166,106,.14);border-color:rgba(198,166,106,.48)}
.button.primary{background:var(--gold);border-color:var(--gold);color:#0a1420;padding:16px 24px}
.button.primary:hover{background:var(--gold-2);border-color:var(--gold-2)}
.button.ghost{background:transparent;color:var(--muted)}
.mobile-toggle{display:none;border:0;background:none;padding:8px;font-size:24px}

/* hero */
.hero{min-height:100svh;position:relative;display:flex;align-items:center;padding:130px 0 70px;overflow:hidden}
#network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.74}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,17,31,.97) 0%,rgba(7,17,31,.78) 42%,rgba(7,17,31,.20) 78%,rgba(7,17,31,.62) 100%);pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:1050px}
.hero .display{max-width:1050px}
.hero .lead{max-width:790px}
.hero-actions{display:flex;align-items:center;gap:12px;margin-top:42px;flex-wrap:wrap}
.hero-foot{position:absolute;bottom:34px;left:0;right:0;z-index:3}
.hero-foot .container{display:flex;justify-content:space-between;align-items:center;color:var(--muted-2);font-size:12px}
.scroll-mark{display:flex;align-items:center;gap:10px}
.scroll-line{height:1px;width:64px;background:var(--line)}

/* positioning */
.statement{padding-top:180px}
.statement-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:80px;align-items:end}
.statement-note{font-size:18px;color:var(--muted);max-width:420px;margin:0 0 7px auto}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:80px}
.pillar{border-top:1px solid var(--line);padding:26px 4px 0;min-height:190px}
.pillar .num{font-size:12px;color:var(--gold);letter-spacing:.12em;margin-bottom:34px}
.pillar h3{font-size:22px;letter-spacing:-.025em;margin:0 0 13px}
.pillar p{color:var(--muted);font-size:15px;margin:0;max-width:340px}

/* case intro */
.case-intro{padding-bottom:80px}
.case-intro-grid{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:end}
.case-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;color:var(--muted);font-size:14px;margin-top:18px}
.case-list span:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin:0 10px 2px 0}

/* consumer experience */
.consumer-scroll{height:240vh;position:relative}
.consumer-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.consumer-copy{position:absolute;z-index:5;left:max(24px,calc((100vw - var(--max))/2));top:19vh;max-width:490px}
.consumer-copy h3{font-size:clamp(32px,4vw,58px);line-height:1.02;letter-spacing:-.04em;margin:0}
.consumer-copy p{font-size:17px;color:var(--muted);margin:18px 0 0;max-width:450px}
.phone-stage{position:absolute;right:max(20px,calc((100vw - var(--max))/2));width:min(55vw,760px);height:82vh;top:9vh}
.phone{position:absolute;top:50%;left:50%;height:min(74vh,760px);aspect-ratio:720/1600;border-radius:28px;padding:7px;background:linear-gradient(145deg,#24364a,#08101a);box-shadow:0 42px 100px rgba(0,0,0,.48);overflow:hidden;border:1px solid rgba(243,240,233,.12);transition:filter .2s}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.phone-a{transform:translate(-128%,-49%) rotate(-8deg) scale(.83)}
.phone-b{transform:translate(-50%,-50%) scale(1.02);z-index:3}
.phone-c{transform:translate(30%,-49%) rotate(8deg) scale(.83)}
.consumer-glow{position:absolute;width:46vw;height:46vw;border-radius:50%;right:2vw;top:24vh;background:radial-gradient(circle,rgba(198,166,106,.11),rgba(42,87,130,.08) 33%,transparent 68%);filter:blur(20px)}

/* back office showcase */
.ops{background:linear-gradient(180deg,transparent,rgba(13,27,42,.34) 12%,rgba(13,27,42,.34) 88%,transparent)}
.ops-head{display:grid;grid-template-columns:1fr .7fr;gap:60px;align-items:end}
.ops-head .lead{margin:0;max-width:520px;justify-self:end}
.showcase{margin-top:70px;display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
.showcase-tabs{display:flex;flex-direction:column;gap:8px;position:sticky;top:120px}
.showcase-tab{width:100%;text-align:left;border:1px solid var(--line-soft);background:transparent;color:var(--muted);padding:16px 18px;border-radius:14px;cursor:pointer;transition:.25s}
.showcase-tab:hover{color:var(--ivory);border-color:var(--line)}
.showcase-tab.active{color:var(--ivory);background:rgba(198,166,106,.08);border-color:var(--line)}
.showcase-window{border:1px solid var(--line-soft);background:#eef0f1;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);min-height:670px;position:relative}
.browser-bar{height:42px;background:#dfe2e5;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;padding:0 16px;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:#a7adb4}
.browser-label{margin-left:10px;color:#67727d;font-size:11px}
.showcase-image-wrap{height:590px;display:flex;align-items:center;justify-content:center;background:#f6f7f8;position:relative;overflow:hidden}
.showcase-image{width:100%;height:100%;object-fit:contain;transition:opacity .25s,transform .45s cubic-bezier(.2,.7,.2,1)}
.showcase-image.changing{opacity:0;transform:scale(.985)}
.showcase-caption{background:var(--navy-2);padding:24px 26px;display:grid;grid-template-columns:.55fr 1fr;gap:24px;align-items:start}
.showcase-caption strong{font-size:20px;letter-spacing:-.02em}
.showcase-caption p{margin:0;color:var(--muted);font-size:14px}

/* documents strip */
.doc-strip{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.doc-card{position:relative;border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;min-height:440px;background:var(--navy-2)}
.doc-card img{width:100%;height:440px;object-fit:cover;object-position:top;filter:saturate(.9)}
.doc-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,var(--navy-2))}
.doc-card-copy{position:absolute;z-index:2;left:26px;right:26px;bottom:24px}
.doc-card-copy h4{font-size:23px;margin:0 0 6px}
.doc-card-copy p{font-size:14px;color:var(--muted);margin:0;max-width:510px}

/* metrics */
.metrics{padding:180px 0}
.metric-grid{margin-top:74px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metric{display:grid;grid-template-columns:.72fr 1fr;gap:40px;padding:48px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.metric:last-child{border-bottom:0}
.metric-value{font-size:clamp(48px,6vw,88px);line-height:.95;letter-spacing:-.055em;font-weight:650;color:var(--gold-2)}
.metric-copy{padding-top:8px}
.metric-copy h3{font-size:20px;margin:0 0 10px}
.metric-copy p{color:var(--muted);margin:0;max-width:630px}
.metric-note{font-size:13px;color:var(--muted-2);margin-top:24px;max-width:860px}

/* public products */
.public-products{background:linear-gradient(180deg,transparent,rgba(16,34,53,.34),transparent)}
.product-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:66px}
.product-card{border:1px solid var(--line-soft);border-radius:26px;overflow:hidden;background:rgba(243,240,233,.035);transition:transform .3s,border-color .3s}
.product-card:hover{transform:translateY(-5px);border-color:var(--line)}
.product-visual{aspect-ratio:16/9;background:#101b27;overflow:hidden;position:relative}
.product-visual img{width:100%;height:100%;object-fit:cover}
.product-body{padding:26px}
.product-domain{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.product-body h3{font-size:26px;margin:0 0 10px;letter-spacing:-.025em}
.product-body p{color:var(--muted);margin:0 0 20px;font-size:15px}
.product-link{font-size:14px;color:var(--ivory);display:inline-flex;gap:8px;align-items:center}
.product-link span{color:var(--gold)}

/* method */
.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:70px}
.method-card{border:1px solid var(--line-soft);border-radius:22px;padding:28px;min-height:220px;background:linear-gradient(145deg,rgba(243,240,233,.035),rgba(243,240,233,.015));position:relative;overflow:hidden}
.method-card:before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--gold);transition:height .5s}
.method-card:hover:before{height:100%}
.method-no{font-size:11px;letter-spacing:.12em;color:var(--gold);margin-bottom:38px}
.method-card h3{font-size:23px;margin:0 0 12px;letter-spacing:-.025em}
.method-card p{font-size:15px;color:var(--muted);margin:0}
.dependency{margin-top:18px;border:1px solid var(--line);border-radius:24px;padding:34px;background:rgba(198,166,106,.045)}
.dependency h3{font-size:28px;margin:0 0 14px}
.dependency p{color:var(--muted);max-width:880px;margin:0}
.flow{display:flex;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.flow span{font-size:12px;color:var(--muted);border:1px solid var(--line-soft);padding:9px 11px;border-radius:999px}
.flow i{font-style:normal;color:var(--gold)}

/* services */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:68px}
.service{background:var(--navy);padding:38px;min-height:270px;position:relative}
.service h3{font-size:30px;line-height:1.08;letter-spacing:-.03em;margin:0 0 18px;max-width:470px}
.service p{font-size:15px;color:var(--muted);margin:0;max-width:480px}
.service-index{position:absolute;right:28px;top:28px;font-size:11px;color:var(--gold);letter-spacing:.12em}

/* contact */
.contact{padding-bottom:100px}
.contact-wrap{display:grid;grid-template-columns:.7fr 1fr;gap:80px;align-items:start}
.contact-copy{position:sticky;top:120px}
.contact-copy .section-title{font-size:clamp(44px,5vw,70px)}
.contact-copy .lead{font-size:18px}
.whatsapp-direct{display:inline-flex;align-items:center;gap:12px;margin-top:28px;color:var(--gold-2);font-size:15px}
.form{border:1px solid var(--line-soft);border-radius:26px;padding:30px;background:rgba(243,240,233,.025)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin:0 0 8px}
.field input,.field textarea{width:100%;border:1px solid var(--line-soft);background:rgba(7,17,31,.55);color:var(--ivory);border-radius:14px;padding:14px 15px;outline:none;transition:border .2s,background .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:rgba(198,166,106,.58);background:rgba(7,17,31,.78)}
.more-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:0;border-top:1px solid var(--line-soft);padding:20px 0 5px;cursor:pointer;color:var(--ivory);text-align:left}
.more-toggle small{color:var(--muted);display:block;margin-top:4px}
.more-toggle .plus{font-size:24px;color:var(--gold);transition:transform .25s}
.more-toggle.open .plus{transform:rotate(45deg)}
.more-fields{display:none;padding-top:20px}
.more-fields.open{display:block}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.check{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line-soft);border-radius:12px;padding:11px;color:var(--muted);font-size:13px}
.check input{accent-color:var(--gold);margin-top:2px}
.form-actions{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.form-note{font-size:12px;color:var(--muted-2);max-width:360px}

/* footer */
.footer{border-top:1px solid var(--line-soft);padding:32px 0 40px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--muted-2);font-size:12px}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--ivory)}
.footer-brand img{width:30px;height:30px;object-fit:contain}

@media(max-width:980px){
  .nav{display:none}.mobile-toggle{display:block}.header-cta{display:none}.header-inner{height:72px}
  .site-header.menu-open{background:rgba(7,17,31,.96);backdrop-filter:blur(18px)}
  .site-header.menu-open .nav{display:flex;position:absolute;top:72px;left:24px;right:24px;flex-direction:column;align-items:flex-start;background:var(--navy-2);border:1px solid var(--line-soft);padding:22px;border-radius:18px;gap:18px}
  .statement-grid,.case-intro-grid,.ops-head,.contact-wrap{grid-template-columns:1fr;gap:28px}
  .statement-note,.ops-head .lead{margin:0;justify-self:start}
  .pillars{grid-template-columns:1fr;gap:28px}.pillar{min-height:auto;padding-bottom:10px}
  .consumer-scroll{height:auto;padding:80px 0}.consumer-sticky{position:relative;height:auto;display:block;overflow:visible}.consumer-copy{position:relative;left:auto;top:auto;width:min(calc(100% - 48px),var(--max));margin:0 auto 42px}.phone-stage{position:relative;right:auto;top:auto;width:min(calc(100% - 32px),680px);height:650px;margin:0 auto}.consumer-glow{right:20%;top:35%}
  .showcase{grid-template-columns:1fr}.showcase-tabs{position:relative;top:auto;flex-direction:row;overflow-x:auto;padding-bottom:8px}.showcase-tab{min-width:max-content;width:auto}.showcase-window{min-height:auto}.showcase-image-wrap{height:520px}
  .metric{grid-template-columns:1fr;gap:12px}.metric-copy{padding-top:0}
  .product-cards,.method-grid,.services-grid{grid-template-columns:1fr}
  .contact-copy{position:relative;top:auto}
}
@media(max-width:680px){
  .container{width:min(calc(100% - 32px),var(--max))}.section{padding:105px 0}.hero{padding-top:104px}.hero-actions{align-items:stretch}.button{width:100%}.hero-foot{display:none}
  .display{font-size:clamp(46px,14vw,68px)}.section-title{font-size:clamp(38px,11vw,54px)}.lead{font-size:18px}
  .case-list{grid-template-columns:1fr}.phone-stage{height:520px}.phone{height:min(58vh,510px);border-radius:20px}.phone img{border-radius:15px}.phone-a{transform:translate(-120%,-50%) rotate(-7deg) scale(.72)}.phone-b{transform:translate(-50%,-50%) scale(.92)}.phone-c{transform:translate(20%,-50%) rotate(7deg) scale(.72)}
  .showcase-image-wrap{height:370px}.showcase-caption{grid-template-columns:1fr;gap:10px;padding:18px}.showcase-window{border-radius:18px}.doc-strip{grid-template-columns:1fr}.doc-card,.doc-card img{min-height:380px;height:380px}
  .metrics{padding:110px 0}.metric{padding:34px 0}.metric-value{font-size:52px}
  .product-body,.method-card,.service,.form{padding:22px}.method-card{min-height:auto}.service{min-height:230px}.form-row,.check-grid{grid-template-columns:1fr}.contact-wrap{gap:50px}.footer-inner{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.product-card,.button,.header-cta,.showcase-image,.method-card:before{transition:none}#network{display:none}
}

/* v0.2 clarity / breathing section */
.clarity{padding:115px 0 135px;overflow:hidden}
.clarity:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-160px;top:-70px;background:radial-gradient(circle,rgba(54,103,148,.14),rgba(198,166,106,.045) 42%,transparent 70%);filter:blur(6px);pointer-events:none}
.clarity-wrap{position:relative;border-top:1px solid var(--line);padding-top:56px}
.clarity-title{font-size:clamp(44px,6.2vw,86px);line-height:.98;letter-spacing:-.05em;font-weight:650;max-width:1040px;margin:0}
.clarity-lead{font-size:clamp(18px,1.8vw,24px);line-height:1.5;color:var(--muted);max-width:760px;margin:28px 0 0}
.clarity-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}
.clarity-step{min-height:220px;border:1px solid var(--line-soft);border-radius:24px;padding:26px;background:linear-gradient(145deg,rgba(243,240,233,.04),rgba(16,34,53,.15));display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.clarity-step:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-50px;bottom:-55px;border:1px solid rgba(198,166,106,.14)}
.clarity-no{font-size:11px;letter-spacing:.14em;color:var(--gold);margin-bottom:48px}
.clarity-step h3{font-size:25px;line-height:1.08;letter-spacing:-.025em;margin:0 0 10px}
.clarity-step p{font-size:15px;color:var(--muted);margin:0;max-width:320px}

/* v0.2 place services earlier and make it a visual breathing layer */
.services-section{background:linear-gradient(180deg,rgba(16,34,53,.1),rgba(16,34,53,.28),rgba(16,34,53,.06))}

/* v0.2 simplified dependency stages */
.dependency{margin-top:24px;padding:38px}
.dependency>p{font-size:16px;line-height:1.65}
.dependency-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.dependency-stage{position:relative;border:1px solid var(--line-soft);border-radius:18px;padding:22px;background:rgba(7,17,31,.34);min-height:270px}
.dependency-stage:not(:last-child):after{content:"→";position:absolute;right:-13px;top:36px;color:var(--gold);z-index:3;font-size:18px}
.stage-no{display:block;font-size:11px;letter-spacing:.13em;color:var(--gold);margin-bottom:28px}
.dependency-stage h4{font-size:21px;line-height:1.08;letter-spacing:-.02em;margin:0 0 9px}
.dependency-stage>p{font-size:13px;color:var(--muted);margin:0 0 24px;min-height:42px}
.stage-items{display:grid;gap:7px}
.stage-items span{display:block;border-top:1px solid var(--line-soft);padding:9px 0 2px;color:var(--muted);font-size:13px}
.flow{display:none}

@media(max-width:980px){
  .clarity-steps,.dependency-stages{grid-template-columns:1fr}
  .clarity-step{min-height:180px}
  .dependency-stage{min-height:auto}
  .dependency-stage:not(:last-child):after{content:"↓";right:22px;top:auto;bottom:-19px;background:var(--navy);padding:0 5px}
}
@media(max-width:680px){
  .clarity{padding:90px 0 100px}.clarity-wrap{padding-top:40px}.clarity-title{font-size:clamp(38px,11vw,54px)}.clarity-steps{margin-top:42px}.clarity-step{padding:22px}.clarity-no{margin-bottom:34px}
  .dependency{padding:24px}.dependency h3{font-size:25px}.dependency-stages{margin-top:24px}
}

/* v0.4 — client-benefit capture strategy */
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;max-width:900px}.hero-tags span{border:1px solid var(--line-soft);background:rgba(7,17,31,.28);color:var(--muted);border-radius:999px;padding:8px 12px;font-size:12px}
.section-kicker-grid{display:grid;grid-template-columns:1fr .72fr;gap:70px;align-items:end}.section-kicker-grid>.lead{margin:0;justify-self:end;max-width:520px}
.pain-section{background:#ede6da;color:#0b1726}.pain-section .eyebrow{color:#8b6b36}.pain-section .lead{color:#5f6a75}.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:68px}.pain-card{border:1px solid rgba(11,23,38,.12);border-radius:24px;padding:30px;background:rgba(255,255,255,.45);min-height:300px;display:flex;flex-direction:column}.pain-card h3{font-size:27px;line-height:1.08;letter-spacing:-.03em;margin:0 0 15px}.pain-card p{font-size:15px;color:#66717b;margin:0}.pain-card .answer{margin-top:auto;padding-top:26px;border-top:1px solid rgba(11,23,38,.1);display:flex;gap:12px;color:#243343;font-size:14px}.pain-card .answer span{color:#9b773f}
.benefits-section{padding-top:130px}.benefit-list{margin-top:70px;border-top:1px solid var(--line)}.benefit-row{display:grid;grid-template-columns:90px .8fr 1.2fr;gap:28px;align-items:start;padding:34px 0;border-bottom:1px solid var(--line-soft)}.benefit-no{font-size:12px;letter-spacing:.14em;color:var(--gold)}.benefit-row h3{font-size:24px;margin:0;letter-spacing:-.025em}.benefit-row p{margin:0;color:var(--muted);max-width:620px}
.solutions-section{background:linear-gradient(180deg,rgba(16,34,53,.2),rgba(16,34,53,.36),rgba(16,34,53,.16))}.solutions-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:64px}.solution-card{min-height:260px;border:1px solid var(--line-soft);border-radius:24px;padding:30px;background:rgba(243,240,233,.025);position:relative}.solution-arrow{position:absolute;right:24px;top:22px;color:var(--gold);font-size:20px}.solution-card h3{font-size:30px;line-height:1.06;letter-spacing:-.03em;margin:32px 0 16px;max-width:500px}.solution-card p{color:var(--muted);margin:0;max-width:510px}
.conversion-band{padding:0 0 30px}.conversion-inner{border:1px solid var(--line);border-radius:28px;padding:44px 48px;background:linear-gradient(120deg,rgba(198,166,106,.11),rgba(16,34,53,.55));display:flex;align-items:center;justify-content:space-between;gap:40px}.conversion-inner h2{font-size:36px;margin:0 0 10px;letter-spacing:-.035em}.conversion-inner p{color:var(--muted);margin:0;max-width:700px}.conversion-inner .button{flex:0 0 auto}
.case-intro{padding-top:145px}
.consumer-scroll{height:195vh}.consumer-copy{top:22vh}.phone-stage{height:78vh;top:11vh}.phone{height:min(70vh,710px)}
.ops{padding-top:120px}.showcase{margin-top:58px}.doc-strip{display:none}
.light-section{background:#ede6da;color:#0b1726}.light-section .eyebrow{color:#8b6b36}.light-section .lead{color:#5f6a75}.light-section .section-title{color:#0b1726}.light-section .product-card{background:#f7f1e8;border-color:rgba(11,23,38,.11);color:#0b1726}.light-section .product-body p{color:#66717b}.light-section .product-domain,.light-section .product-link{color:#8b6b36}
.risk-list{margin-top:70px;border-top:1px solid var(--line)}.risk-item{display:grid;grid-template-columns:70px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line-soft)}.risk-item>span{color:var(--gold);font-size:12px;letter-spacing:.14em;padding-top:5px}.risk-item h3{font-size:25px;margin:0 0 8px}.risk-item p{color:var(--muted);margin:0;max-width:800px}.flow-panel{margin-top:54px;border:1px solid var(--line);border-radius:24px;padding:30px;background:rgba(198,166,106,.045)}.flow-panel h3{font-size:26px;margin:0 0 22px}.simple-flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.simple-flow span{border:1px solid var(--line-soft);border-radius:999px;padding:9px 12px;color:var(--muted);font-size:12px}.simple-flow i{font-style:normal;color:var(--gold)}
.start-section{padding-top:125px}.start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:62px}.start-step{border-top:1px solid rgba(11,23,38,.18);padding:24px 4px 0}.start-step>span{font-size:11px;letter-spacing:.14em;color:#8b6b36}.start-step h3{font-size:24px;letter-spacing:-.025em;margin:38px 0 10px}.start-step p{color:#65717c;margin:0;max-width:340px}
@media(max-width:980px){.section-kicker-grid{grid-template-columns:1fr;gap:26px}.section-kicker-grid>.lead{justify-self:start}.pain-grid,.solutions-grid{grid-template-columns:1fr}.benefit-row{grid-template-columns:60px 1fr}.benefit-row p{grid-column:2}.conversion-inner{align-items:flex-start;flex-direction:column}.start-grid{grid-template-columns:1fr;gap:26px}.start-step h3{margin-top:18px}.consumer-scroll{height:auto}}
@media(max-width:680px){.hero-tags{margin-top:22px}.pain-card,.solution-card{min-height:auto;padding:22px}.pain-card .answer{margin-top:26px}.benefit-row{grid-template-columns:42px 1fr;gap:14px;padding:26px 0}.benefit-row h3{font-size:21px}.conversion-inner{padding:28px 22px}.conversion-inner h2{font-size:30px}.light-section .product-body{padding:22px}.risk-item{grid-template-columns:38px 1fr;gap:12px}.risk-item h3{font-size:21px}.flow-panel{padding:22px}.start-section{padding-top:95px}}

/* v0.4.2: real mr-do.kz screenshot; preserve full capture instead of cropping */
.product-visual-real{aspect-ratio:1360/919;background:#120f0d}
.product-visual-real img{width:100%;height:100%;object-fit:cover;display:block}


/* v0.4.5 — mobile adaptation corrections from real-device review */
@media (max-width: 680px) {
  /* Hero: avoid duplicating the brand already present in the fixed header
     and keep the value proposition readable within the first screen. */
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding: 108px 0 76px;
  }
  .hero .eyebrow {
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: .18em;
    margin-bottom: 20px;
  }
  .hero .display,
  .display {
    font-size: clamp(39px, 11.5vw, 50px);
    line-height: .98;
    letter-spacing: -.045em;
  }
  .hero .lead {
    font-size: 17px;
    line-height: 1.55;
    margin-top: 24px;
  }
  .hero-actions {
    margin-top: 30px;
  }
  .hero-tags {
    gap: 7px;
    margin-top: 22px;
  }
  .hero-tags span {
    font-size: 11px;
    padding: 7px 10px;
  }

  /* MR.DO case intro: remove desktop-scale vertical spacing. */
  .case-intro {
    padding: 88px 0 48px;
  }
  .case-intro-grid {
    gap: 24px;
    align-items: start;
  }
  .case-intro .section-title {
    font-size: clamp(36px, 10vw, 48px);
    line-height: 1;
  }
  .case-intro .lead {
    font-size: 17px;
    line-height: 1.55;
  }
  .case-list {
    margin-top: 20px;
    gap: 12px;
  }

  /* Consumer showcase: reset late desktop positioning rules.
     On mobile it must participate in normal document flow. */
  .consumer-scroll {
    height: auto !important;
    padding: 46px 0 74px;
    overflow: hidden;
  }
  .consumer-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
  }
  .consumer-copy {
    position: relative;
    left: auto;
    top: auto !important;
    width: min(calc(100% - 32px), var(--max));
    max-width: none;
    margin: 0 auto 34px;
  }
  .consumer-copy h3 {
    font-size: clamp(31px, 9vw, 42px);
    line-height: 1.02;
  }
  .consumer-copy p {
    font-size: 16px;
    line-height: 1.55;
    margin-top: 16px;
  }
  .phone-stage {
    position: relative;
    left: auto;
    right: auto;
    top: auto !important;
    width: 100%;
    max-width: 430px;
    height: 500px;
    margin: 0 auto;
    overflow: visible;
  }
  .phone {
    height: 440px;
    max-height: none;
    border-radius: 20px;
    padding: 5px;
  }
  .phone img {
    border-radius: 15px;
  }
  .phone-a {
    transform: translate(-115%, -50%) rotate(-6deg) scale(.66);
  }
  .phone-b {
    transform: translate(-50%, -50%) scale(.86);
  }
  .phone-c {
    transform: translate(15%, -50%) rotate(6deg) scale(.66);
  }
  .consumer-glow {
    width: 420px;
    height: 420px;
    right: -110px;
    top: 40%;
  }
}

@media (max-width: 390px) {
  .hero .display,
  .display {
    font-size: 39px;
  }
  .section-title {
    font-size: 38px;
  }
  .phone-stage {
    height: 470px;
  }
  .phone {
    height: 415px;
  }
  .phone-a {
    transform: translate(-112%, -50%) rotate(-5deg) scale(.64);
  }
  .phone-b {
    transform: translate(-50%, -50%) scale(.84);
  }
  .phone-c {
    transform: translate(12%, -50%) rotate(5deg) scale(.64);
  }
}


/* v0.4.7 — center the MR.DO quiz screenshots on mobile */
@media (max-width: 680px) {
  .phone-stage {
    width: 100%;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  .phone {
    top: 50%;
    transform-origin: center center;
  }

  .phone-a {
    left: calc(50% - 108px);
    transform: translate(-50%, -50%) rotate(-6deg) scale(.66);
  }

  .phone-b {
    left: 50%;
    transform: translate(-50%, -50%) scale(.86);
  }

  .phone-c {
    left: calc(50% + 108px);
    transform: translate(-50%, -50%) rotate(6deg) scale(.66);
  }
}

@media (max-width: 390px) {
  .phone-a {
    left: calc(50% - 96px);
    transform: translate(-50%, -50%) rotate(-5deg) scale(.64);
  }

  .phone-b {
    left: 50%;
    transform: translate(-50%, -50%) scale(.84);
  }

  .phone-c {
    left: calc(50% + 96px);
    transform: translate(-50%, -50%) rotate(5deg) scale(.64);
  }
}


/* v0.4.8 — real-device fix: viewport-centered quiz composition */
@media (max-width: 680px) {
  .consumer-scroll {
    overflow-x: hidden !important;
  }

  .phone-stage {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden !important;
  }

  .phone-a,
  .phone-b,
  .phone-c {
    left: 50% !important;
    top: 50% !important;
    transform-origin: center center !important;
  }

  .phone-a {
    z-index: 1;
    transform: translate(calc(-50% - 118px), -50%) rotate(-6deg) scale(.64) !important;
  }

  .phone-b {
    z-index: 3;
    transform: translate(-50%, -50%) scale(.84) !important;
  }

  .phone-c {
    z-index: 1;
    transform: translate(calc(-50% + 118px), -50%) rotate(6deg) scale(.64) !important;
  }
}

@media (max-width: 390px) {
  .phone-a {
    transform: translate(calc(-50% - 104px), -50%) rotate(-5deg) scale(.62) !important;
  }

  .phone-b {
    transform: translate(-50%, -50%) scale(.82) !important;
  }

  .phone-c {
    transform: translate(calc(-50% + 104px), -50%) rotate(5deg) scale(.62) !important;
  }
}