/* ============================================================================
   TRYAMBAK — marketing theme v2 (LIGHT, like the original site)
   Same clean kore.ai-style light look: cool light ground, ink text, aqua accent,
   white cards, black buttons. Adds the new agent-studio structure on top.
   Loads AFTER tokens.css. Class scope: html.d / body.d · prefix .d-
   ============================================================================ */

:root{
  --bg:        #F0F6F9;   /* page ground (cool light) — same as before */
  --bg-2:      #FFFFFF;   /* white sections / cards */
  --bg-3:      #FFFFFF;   /* cards */
  --hair:      #D9E0E3;   /* hairline */
  --hair-2:    #E5E9F1;   /* fainter hairline */
  --tx:        #181818;   /* primary text (ink) */
  --tx-mut:    #65717C;   /* secondary */
  --tx-faint:  #8A94A0;   /* faint */
  --aqua:      #0AA6C7;   /* brand aqua */
  --aqua-ink:  #076C82;   /* deep aqua for text on light */
  --aqua-soft: #E1F5F9;   /* aqua tint fill */
  --warm:      #B9770C;   /* warm accent for the human/"your call" side */
  --warm-soft: #FAF0DD;
}

*{box-sizing:border-box;}
html.d, body.d{margin:0;padding:0;}
body.d{
  background:
    radial-gradient(1100px 560px at 82% -10%, rgba(10,166,199,.10), transparent 62%),
    var(--bg);
  color:var(--tx); font-family:var(--font-sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.d a{color:inherit; text-decoration:none;}
.d ::selection{background:rgba(10,166,199,.20);}
.d-wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad);}
.d-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--aqua-ink);}
.d-eyebrow .n{font-variant-numeric:tabular-nums; color:var(--tx-faint);}
.d h1,.d h2,.d h3{font-weight:500; letter-spacing:var(--tracking-title); margin:0; color:var(--tx); line-height:1.14;}
.d .lead{color:var(--tx-mut); font-size:19px; line-height:1.55;}
.d .aqua{color:var(--aqua-ink);}

/* ---- buttons (black ink primary, like before) ---- */
.d-btn{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600;
  letter-spacing:.01em; padding:13px 22px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s var(--ease), filter .15s var(--ease), background .15s, border-color .15s;}
.d-btn:active{transform:translateY(1px);}
.d-btn.primary{background:var(--ink); color:#fff; box-shadow:0 10px 24px -14px rgba(24,24,24,.6);}
.d-btn.primary:hover{filter:brightness(1.12);}
.d-btn.ghost{background:#fff; color:var(--tx); border-color:var(--hair);}
.d-btn.ghost:hover{border-color:var(--ink);}
.d-btn svg{flex:none;}

/* ---- nav ---- */
.d-nav{position:sticky; top:0; z-index:100; backdrop-filter:blur(12px);
  background:rgba(240,246,249,.82); border-bottom:1px solid var(--hair);}
.d-nav .row{display:flex; align-items:center; gap:22px; height:66px;}
.d-brand{display:flex; align-items:center; gap:10px;}
.d-brand .name{font-weight:600; letter-spacing:-.02em; font-size:17px; color:var(--tx);}
.d-brand svg{color:var(--aqua);}
.d-nav nav{display:flex; gap:26px; margin-left:14px;}
.d-nav nav a{font-size:14.5px; color:var(--tx-mut); transition:color .15s;}
.d-nav nav a:hover{color:var(--tx);}
.d-nav .spacer{flex:1;}
.d-nav .d-btn{padding:10px 17px; font-size:13.5px;}
@media (max-width:820px){ .d-nav nav{display:none;} }

/* ---- hero ---- */
.d-hero{padding:clamp(48px,9vw,108px) 0 clamp(40px,6vw,68px); position:relative;}
.d-hero h1{font-size:clamp(38px,6.4vw,66px); letter-spacing:var(--tracking-hero); max-width:16ch;}
.d-hero .lead{margin-top:22px; max-width:52ch; font-size:clamp(17px,2.3vw,21px);}
.d-hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}
.d-hero .undercta{margin-top:16px; font-size:13.5px; color:var(--tx-faint);}
.d-hero .undercta b{color:var(--tx-mut); font-weight:600;}
.d-trustbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:44px;
  padding-top:22px; border-top:1px solid var(--hair); color:var(--tx-faint); font-size:13px;}
.d-trustbar .lbl{letter-spacing:.14em; text-transform:uppercase; font-size:11px;}
.d-trustbar .pill{display:inline-flex; align-items:center; gap:7px; color:var(--tx-mut);
  border:1px solid var(--hair); border-radius:999px; padding:6px 13px; font-size:12.5px; background:#fff;}
.d-trustbar .pill svg{color:var(--aqua);}

/* ---- sections ---- */
.d-section{padding:clamp(56px,8vw,100px) 0; border-top:1px solid var(--hair-2);}
.d-section.tight{padding:clamp(40px,6vw,72px) 0;}
.d-section.alt{background:#fff;}
.d-shead{max-width:66ch;}
.d-shead h2{font-size:var(--text-h2); margin-top:14px;}
.d-shead .lead{margin-top:16px;}

/* ---- how we work (numbered steps) ---- */
.d-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px;}
.d-step{background:#fff; border:1px solid var(--hair); border-radius:16px; padding:22px 20px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-1);}
.d-step .no{font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--aqua-ink); font-variant-numeric:tabular-nums;}
.d-step h3{font-size:19px; margin-top:14px;}
.d-step p{color:var(--tx-mut); font-size:14.5px; margin:9px 0 0; line-height:1.55;}
.d-step::after{content:""; position:absolute; inset:0 0 auto auto; width:120px; height:120px;
  background:radial-gradient(circle at 80% 10%, rgba(10,166,199,.10), transparent 70%);}
@media (max-width:900px){.d-steps{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.d-steps{grid-template-columns:1fr;}}

/* ---- flagship cards ("see it work") ---- */
.d-flags{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px;}
.d-flag{display:flex; flex-direction:column; background:#fff; border:1px solid var(--hair);
  border-radius:18px; overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s;}
.d-flag:hover{border-color:var(--aqua); transform:translateY(-3px); box-shadow:var(--shadow-2);}
.d-flag .top{padding:20px 22px 0;}
.d-flag .kind{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua-ink);}
.d-flag h3{font-size:21px; margin-top:10px;}
.d-flag .who{font-size:12.5px; color:var(--tx-faint); margin-top:5px;}
.d-flag p{color:var(--tx-mut); font-size:14.5px; line-height:1.55; padding:12px 22px 0; margin:0;}
.d-flag .arc{display:flex; flex-wrap:wrap; gap:6px; padding:14px 22px 0;}
.d-flag .arc span{font-size:11.5px; color:var(--aqua-ink); background:var(--aqua-soft);
  border:1px solid #c7ebf2; border-radius:999px; padding:4px 10px;}
.d-flag .act{padding:20px 22px 22px; margin-top:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.d-flag .act .d-btn{padding:10px 16px; font-size:13px;}
.d-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:22px; font-size:12.5px; color:var(--tx-mut);}
.d-legend span{display:inline-flex; align-items:center; gap:6px;}
@media (max-width:820px){.d-flags{grid-template-columns:1fr;}}

/* ---- device frame (hosts a prototype iframe) ---- */
.d-frame{border:1px solid var(--hair); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:var(--shadow-3);}
.d-frame .bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--hair-2);
  background:var(--bg);}
.d-frame .bar i{width:10px; height:10px; border-radius:50%; background:#cdd6db;}
.d-frame .bar .t{margin-left:8px; font-size:12px; color:var(--tx-faint);}
.d-frame .stage{position:relative; width:100%; aspect-ratio:16/10; background:#fff;}
.d-frame .stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ---- who it's for ---- */
.d-aud{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px;}
.d-aud .a{border:1px solid var(--hair); border-radius:14px; padding:18px 18px; background:#fff;}
.d-aud .a h3{font-size:16px;}
.d-aud .a p{color:var(--tx-mut); font-size:13.5px; margin:8px 0 0; line-height:1.5;}
@media (max-width:820px){.d-aud{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.d-aud{grid-template-columns:1fr;}}

/* ---- trust band ---- */
.d-trust{background:linear-gradient(180deg,var(--aqua-soft),#fff); border-radius:20px;
  border:1px solid #c7ebf2; padding:clamp(28px,5vw,48px);}
.d-trust h2{font-size:var(--text-h3);}
.d-trust .lead{margin-top:14px; max-width:60ch;}
.d-trust .pts{display:flex; gap:22px; flex-wrap:wrap; margin-top:22px;}
.d-trust .pt{display:flex; gap:10px; align-items:flex-start; max-width:280px;}
.d-trust .pt svg{color:var(--aqua-ink); flex:none; margin-top:2px;}
.d-trust .pt b{color:var(--tx); font-weight:600; font-size:14.5px;}
.d-trust .pt span{display:block; color:var(--tx-mut); font-size:13.5px; margin-top:3px; line-height:1.5;}

/* ---- big CTA ---- */
.d-cta{text-align:center; padding:clamp(56px,8vw,96px) 0; border-top:1px solid var(--hair-2);}
.d-cta h2{font-size:var(--text-h2); max-width:20ch; margin:14px auto 0;}
.d-cta .lead{margin:16px auto 0; max-width:48ch;}
.d-cta .d-btn{margin-top:28px;}

/* ---- contact form ---- */
.d-form{max-width:620px; margin:34px auto 0; text-align:left; background:#fff; border:1px solid var(--hair-2); border-radius:var(--radius-lg); padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-2);}
.d-form .frow{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.d-form label{display:block; font-size:13.5px; font-weight:600; color:var(--tx); margin-top:16px;}
.d-form .frow label{margin-top:0;}
.d-form .opt{font-weight:400; color:var(--tx-faint);}
.d-form input, .d-form textarea{width:100%; margin-top:7px; font:inherit; font-size:15px; font-weight:400; color:var(--tx); background:#fff; border:1px solid var(--hair); border-radius:var(--radius-sm); padding:11px 13px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);}
.d-form textarea{resize:vertical; line-height:1.55;}
.d-form input::placeholder, .d-form textarea::placeholder{color:var(--tx-faint);}
.d-form input:focus, .d-form textarea:focus{outline:none; border-color:var(--aqua); box-shadow:var(--shadow-focus);}
.d-form .d-btn{margin-top:22px; width:100%; justify-content:center;}
.d-form .d-btn:disabled{opacity:.6; cursor:default;}
.d-form .fresult{font-size:13.5px; margin:14px 0 0; text-align:center; color:var(--tx-mut); min-height:1px;}
.d-form .fresult.ok{color:#1E9E6A; font-weight:500;}
.d-form .fresult.err{color:#C4483B;}
@media(max-width:560px){.d-form .frow{grid-template-columns:1fr; gap:0;} .d-form .frow label+label{margin-top:16px;}}

/* ---- footer ---- */
.d-footer{border-top:1px solid var(--hair); padding:40px 0 54px; color:var(--tx-faint); font-size:13.5px; background:#fff;}
.d-footer .row{display:flex; gap:20px; flex-wrap:wrap; align-items:center;}
.d-footer .name{color:var(--tx); font-weight:600;}
.d-footer .spacer{flex:1;}
.d-footer a{color:var(--tx-mut);} .d-footer a:hover{color:var(--aqua-ink);}
.d-footer .fine{margin-top:20px; color:var(--tx-faint); font-size:12.5px; max-width:70ch; line-height:1.5;}

/* ---- optimize / accuracy band ---- */
.d-optband{display:grid; grid-template-columns:1fr 1.15fr; gap:34px; align-items:center; margin-top:22px;
  background:#fff; border:1px solid var(--hair); border-radius:18px; padding:clamp(24px,4vw,38px); box-shadow:var(--shadow-1);}
.d-optband .txt h3{font-size:var(--text-h3); margin-top:12px;}
.d-optband .txt p{color:var(--tx-mut); font-size:15px; line-height:1.6; margin:12px 0 0;}
.d-optband .txt p b{color:var(--tx); font-weight:600;}
.d-chart{margin:0;}
.d-chart svg{display:block; background:#fff; border:1px solid var(--hair-2); border-radius:12px; padding:6px;}
.d-chart figcaption{font-size:12px; color:var(--tx-faint); margin-top:8px; text-align:center;}
@media (max-width:760px){.d-optband{grid-template-columns:1fr;}}

/* ---- agent card (dark full-bleed neural mesh) ---- */
.d-agentcard{position:relative; display:block; height:clamp(300px,40vw,420px); border-radius:18px; overflow:hidden; background:#0B0E13; text-decoration:none; color:#fff; box-shadow:var(--shadow-3); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.d-agentcard:hover{transform:translateY(-3px); box-shadow:0 44px 84px -36px rgba(10,166,199,.5);}
.d-agentcard .mesh-svg{position:absolute; inset:0; width:100%; height:100%;}
.mesh-line{stroke:#45CFE8; fill:none; stroke-width:1; opacity:.22;}
.mesh-flow{stroke:#45CFE8; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:4 13; opacity:.9; animation:mesh-dsh 2.2s linear infinite;}
.mesh-node{fill:#45CFE8; animation:mesh-np 3s ease-in-out infinite;}
@keyframes mesh-dsh{to{stroke-dashoffset:-238;}}
@keyframes mesh-np{0%,100%{opacity:.32;} 50%{opacity:1;}}
.ac-ov{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(20px,3vw,34px); background:linear-gradient(180deg,rgba(11,14,19,.12),rgba(11,14,19,.32) 52%,rgba(11,14,19,.86));}
.ac-lab{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#45CFE8;}
.ac-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.ac-ttl{display:flex; flex-direction:column; gap:9px; font-size:clamp(22px,3vw,31px); font-weight:500; letter-spacing:-.02em; color:#fff; max-width:24ch;}
.ac-ttl .ac-sub{font-size:14.5px; font-weight:400; color:#A9B4BE; letter-spacing:0; line-height:1.5; max-width:44ch;}
.ac-btn{flex:none; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#04121a; background:#45CFE8; border-radius:11px; padding:12px 20px; box-shadow:0 12px 28px -12px rgba(69,207,232,.7);}
.d-agentcard:hover .ac-btn{filter:brightness(1.07);}
@media (prefers-reduced-motion:reduce){.mesh-node,.mesh-flow{animation:none;}}

/* ---- Secure by design section ---- */
.d-sec-intro{max-width:66ch; margin:22px 0 0; font-size:19px; line-height:1.62; color:var(--tx-mut);}
.d-sec-intro em{color:var(--aqua-ink); font-style:normal;}
.d-pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px;}
.d-pillar{background:#fff; border:1px solid var(--hair-2); border-radius:var(--radius-md); padding:22px 20px; box-shadow:var(--shadow-1); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);}
.d-pillar:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:#C7EBF2;}
.d-pillar .ic{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--aqua-soft); color:var(--aqua-ink); margin-bottom:14px;}
.d-pillar h4{font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--tx); margin:0; line-height:1.25;}
.d-pillar p{font-size:13.5px; line-height:1.5; color:var(--tx-mut); margin:9px 0 0;}
@media(max-width:900px){.d-pillars{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.d-pillars{grid-template-columns:1fr;}}

.d-reassure{margin-top:46px; border:1px solid var(--hair-2); border-radius:var(--radius-lg); background:linear-gradient(180deg,#ffffff,#FaFDFE); padding:clamp(24px,3vw,34px);}
.d-reassure .rh h3{font-size:var(--text-h3); margin-top:10px; max-width:32ch;}
.d-reassure .rgrid{display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; margin-top:26px;}
.d-reassure .qa .q{display:flex; gap:10px; align-items:flex-start; font-weight:600; font-size:15.5px; color:var(--tx); line-height:1.35;}
.d-reassure .qa .q svg{flex:none; color:var(--aqua); margin-top:1px;}
.d-reassure .qa .a{margin:8px 0 0 27px; color:var(--tx-mut); font-size:14px; line-height:1.55;}
@media(max-width:700px){.d-reassure .rgrid{grid-template-columns:1fr;}}

.d-proc{margin-top:46px;}
.d-proc .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:22px;}
.d-proc .st{position:relative; padding-right:20px;}
.d-proc .st .n{position:relative; z-index:1; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid var(--hair); color:var(--aqua-ink); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; margin-bottom:12px;}
.d-proc .st b{display:block; font-size:14.5px; font-weight:600; color:var(--tx);}
.d-proc .st>div>span{display:block; font-size:12.5px; color:var(--tx-mut); line-height:1.5; margin-top:4px;}
.d-proc .st::before{content:""; position:absolute; left:34px; right:2px; top:15px; height:1px; background:var(--hair); z-index:0;}
.d-proc .st:last-child::before{display:none;}
@media(max-width:820px){.d-proc .steps{grid-template-columns:1fr 1fr; gap:22px 18px;} .d-proc .st::before{display:none;} .d-proc .st{padding-right:0;}}
@media(max-width:480px){.d-proc .steps{grid-template-columns:1fr;}}

.d-gated{margin-top:50px; background:var(--dark); border-radius:var(--radius-lg); padding:clamp(28px,4vw,46px); display:grid; grid-template-columns:1.3fr .85fr; gap:clamp(24px,4vw,48px); align-items:center; box-shadow:0 30px 64px -40px rgba(0,0,0,.6);}
.d-gated .ge{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-aqua);}
.d-gated h3{color:#fff; font-size:clamp(22px,2.6vw,30px); margin-top:12px; line-height:1.18;}
.d-gated .gtext p{color:var(--on-dark-muted); font-size:15px; line-height:1.62; margin-top:14px; max-width:54ch;}
.d-gated .gcta{display:flex; flex-direction:column; align-items:flex-start; gap:13px;}
.d-gbtn{display:inline-flex; align-items:center; gap:9px; background:var(--aqua); color:#fff; font-weight:600; font-size:14.5px; padding:14px 22px; border-radius:var(--radius-sm); box-shadow:0 16px 34px -16px rgba(10,166,199,.8); transition:filter .15s var(--ease), gap .15s var(--ease);}
.d-gbtn:hover{filter:brightness(1.09); gap:12px;}
.d-gated .gsub{color:var(--on-dark-muted); font-size:12.5px; line-height:1.5; max-width:36ch;}
@media(max-width:800px){.d-gated{grid-template-columns:1fr; gap:24px;}}

/* ---- showcase grid (light illustrated flagship cards) ---- */
.d-showgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:22px; margin-top:38px;}
.d-showcard{grid-column:span 2;}
.d-showcard:nth-child(4){grid-column:2 / span 2;}
.d-showcard:nth-child(5){grid-column:4 / span 2;}
.d-showcard{display:flex; flex-direction:column; background:#fff; border:1px solid #E8EDF0; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(24,24,24,.04); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);}
.d-showcard:hover{transform:translateY(-4px); box-shadow:0 26px 52px -30px rgba(10,166,199,.38); border-color:#C7EBF2;}
.sc-illus{overflow:hidden; padding:26px 26px 0; background:linear-gradient(150deg,#E6F5F9 0%, #F4FBFC 62%); border-bottom:1px solid #EAF1F3;}
.sc-svg{display:block; width:100%; height:auto; margin-bottom:-34px;}
.sc-meta{flex:1; padding:22px 24px 24px;}
.sc-meta h3{font-size:21px; font-weight:500; letter-spacing:-.02em; color:#181818; line-height:1.15;}
.sc-meta p{font-size:14.5px; color:#65717C; line-height:1.5; margin-top:9px;}
.sc-cta{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#076C82; margin-top:15px; transition:gap .15s var(--ease);}
.d-showcard:hover .sc-cta{gap:11px;}
.d-showcaption{text-align:center; color:#65717C; font-size:13.5px; max-width:66ch; margin:30px auto 0; line-height:1.6;}
@media(max-width:920px){.d-showgrid{grid-template-columns:repeat(2,1fr);} .d-showcard,.d-showcard:nth-child(4),.d-showcard:nth-child(5){grid-column:auto;}}
@media(max-width:600px){.d-showgrid{grid-template-columns:1fr;}}

/* ---- mesh grid (flagship walkthrough cards) ---- */
.d-meshgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px;}
.d-meshcard{position:relative; display:block; height:clamp(230px,25vw,272px); border-radius:16px; overflow:hidden; background:#0B0E13; text-decoration:none; color:#fff; box-shadow:var(--shadow-2); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.d-meshcard:hover{transform:translateY(-3px); box-shadow:0 34px 66px -34px rgba(10,166,199,.5);}
.d-meshcard .mesh-svg{position:absolute; inset:0; width:100%; height:100%;}
.mc-ov{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:22px 24px; background:linear-gradient(180deg,rgba(11,14,19,.14),rgba(11,14,19,.34) 52%,rgba(11,14,19,.9));}
.mc-kind{font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#45CFE8;}
.mc-body .mc-ttl{font-size:20px; font-weight:500; letter-spacing:-.02em; color:#fff;}
.mc-body .mc-desc{font-size:13px; color:#A9B4BE; line-height:1.5; margin-top:7px; max-width:44ch;}
.mc-cta{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#45CFE8; margin-top:14px; transition:gap .15s var(--ease);}
.d-meshcard:hover .mc-cta{gap:11px;}
@media(max-width:760px){.d-meshgrid{grid-template-columns:1fr;}}

/* ---- demo poster (opens full-screen in a new tab) ---- */
.d-poster{display:block; border:1px solid var(--hair); border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:var(--shadow-3); text-decoration:none; color:inherit; transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.d-poster:hover{transform:translateY(-3px); box-shadow:0 30px 64px -32px rgba(24,24,24,.5);}
.d-poster .bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--hair-2); background:var(--bg);}
.d-poster .bar i{width:10px; height:10px; border-radius:50%; background:#cdd6db;}
.d-poster .bar .t{margin-left:8px; font-size:12px; color:var(--tx-faint);}
.pstage{position:relative; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  text-align:center; padding:24px; background:radial-gradient(680px 320px at 50% 34%, var(--aqua-soft), #fff);}
.pstage .chip{position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  letter-spacing:.02em; color:var(--aqua-ink); background:#fff; border:1px solid #c7ebf2; border-radius:999px; padding:5px 12px;}
.pstage .playbtn{width:68px; height:68px; border-radius:50%; background:var(--aqua); color:#fff; display:grid; place-items:center;
  box-shadow:0 16px 34px -12px rgba(10,166,199,.75); transition:filter .15s, transform .15s;}
.d-poster:hover .playbtn{filter:brightness(1.08); transform:scale(1.04);}
.pstage .ptitle{font-size:21px; font-weight:500; letter-spacing:-.01em; color:var(--ink); max-width:24ch; margin-top:4px;}
.pstage .psub{font-size:13px; color:var(--tx-mut);}

/* ---- centered section head ---- */
.d-center{text-align:center; max-width:62ch; margin:0 auto;}
.d-center h2{font-size:var(--text-h2); margin-top:14px;}
.d-center .lead{margin:16px auto 0; max-width:60ch;}

/* ---- the problem ---- */
.d-prob{display:grid; grid-template-columns:1.25fr .85fr; gap:44px; align-items:start; margin-top:44px;}
.d-prob-list .pi{font-size:19px; color:var(--tx); line-height:1.4; padding:22px 2px; max-width:36ch;}
.d-prob-list .pi + .pi{border-top:1px solid var(--hair);}
.d-prob-note{border-left:2px solid var(--aqua); padding:4px 0 4px 20px; color:var(--tx-mut); font-size:16px; line-height:1.6; margin-top:26px;}
@media(max-width:820px){.d-prob{grid-template-columns:1fr; gap:12px;} .d-prob-note{margin-top:6px;}}

/* ---- living software comparison ---- */
.d-compare{display:grid; grid-template-columns:1fr 1fr; max-width:960px; margin:46px auto 0; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-2);}
.cc{padding:clamp(24px,4vw,38px);}
.cc.off{background:#fff; border:1px solid var(--hair);}
.cc.living{background:#0E1116; color:#E9EEF2;}
.cc .lbl{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px;}
.cc.off .lbl{color:var(--tx-faint);}
.cc.living .lbl{color:#45CFE8;}
.cc .li{font-size:15.5px; line-height:1.4; padding:9px 0; display:flex; gap:12px; align-items:flex-start;}
.cc .li .m{flex:none; font-weight:600;}
.cc.off .li{color:var(--tx-mut);} .cc.off .li .m{color:var(--tx-faint);}
.cc.living .li .m{color:#45CFE8;}
@media(max-width:640px){.d-compare{grid-template-columns:1fr;}}

/* ---- flow / value band ---- */
.d-flow{display:grid; grid-template-columns:1.12fr .88fr; gap:46px; align-items:center;}
.flow-left h2{font-size:var(--text-h2); max-width:15ch; margin-top:12px;}
.flow-left .sub{color:var(--tx-mut); font-size:16px; line-height:1.55; margin-top:16px; max-width:46ch;}
.d-flow-vis{margin-top:22px;}
.d-flow-svg{width:100%; height:auto; display:block; overflow:visible;}
.flow-glow{transform-box:fill-box; transform-origin:center; animation:flowpulse 3.2s ease-in-out infinite;}
@keyframes flowpulse{0%,100%{opacity:.10;} 50%{opacity:.24;}}
.flow-right{display:flex; flex-direction:column; gap:24px;}
.d-flow-pt .no{font-size:15px; font-weight:700; color:var(--aqua); font-variant-numeric:tabular-nums; letter-spacing:.03em;}
.d-flow-pt h3{font-size:20px; margin-top:5px;}
.d-flow-pt p{color:var(--tx-mut); font-size:14.5px; margin-top:7px; line-height:1.55; max-width:36ch;}
@media (max-width:860px){ .d-flow{grid-template-columns:1fr; gap:30px;} .flow-left h2{max-width:none;} }
@media (prefers-reduced-motion:reduce){ .flow-glow{animation:none;} }

/* fade-in on scroll */
.d-rise{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.d-rise.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.d-rise{opacity:1; transform:none; transition:none;}}