/* AMMG Enterprise AI Platform — brand styles
   Redesign round 2026-10-19: deep navy / teal / sky corporate-modern system.
   Same selectors & layout mechanics as before — visual layer only. */
:root{
  --teal:#0f766e; --teal-deep:#0b5e57; --teal-lt:#5eead4; --teal-bg:#f0fdfa;
  --sky:#1d4ed8; --sky-deep:#1e40af;
  --navy:#10223b; --navy2:#0f2e54; --navy-deep:#08111f; --navy-panel:#0b1727;
  --slate:#475569; --slate-lt:#94a3b8; --line:#dde5ef; --line2:#c3cede;
  --bg:#f7f9fc; --bg-soft:#eef3f9; --bg-softer:#e7eef7;
  --text:#10223b; --muted:#475569;
  --shadow-sm:0 1px 2px rgba(16,34,59,.05), 0 8px 24px -12px rgba(16,34,59,.14);
  --shadow-md:0 2px 4px rgba(16,34,59,.05), 0 20px 44px -16px rgba(16,34,59,.22);
  --shadow-lg:0 4px 8px rgba(8,17,31,.12), 0 32px 64px -24px rgba(8,17,31,.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif; color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;}
::selection{background:rgba(15,118,110,.22);}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible{outline:2px solid var(--sky); outline-offset:2px; border-radius:6px;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
/* nav — deep navy bar */
.site-nav{position:sticky; top:0; z-index:50; background:linear-gradient(180deg,rgba(11,23,39,.97),rgba(16,34,59,.96)); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(94,234,212,.22); box-shadow:0 10px 30px -12px rgba(8,17,31,.45);}
.site-nav .wrap{display:flex; align-items:center; gap:28px; height:68px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:#fff; text-decoration:none;}
.brand:hover{text-decoration:none;}
.brand .mark{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--teal),var(--sky)); color:#fff; display:grid; place-items:center; font-size:18px; font-weight:800; box-shadow:0 6px 16px -4px rgba(29,78,216,.55), inset 0 1px 0 rgba(255,255,255,.35);}
.brand small{display:block; font-size:10px; font-weight:600; color:#8fa3bd; letter-spacing:.08em;}
.nav-links{display:flex; gap:22px; margin-left:12px;}
.nav-links a{color:#c3cede; font-size:14.5px; font-weight:500;}
.nav-links a:hover, .nav-links a.active{color:#fff; text-decoration:none;}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center;}
.btn{display:inline-block; padding:11px 22px; border-radius:10px; font-weight:600; font-size:14.5px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;}
.btn:hover{text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,var(--sky),var(--sky-deep)); color:#fff; box-shadow:0 10px 24px -10px rgba(29,78,216,.65), inset 0 1px 0 rgba(255,255,255,.22);}
.btn-primary:hover{background:linear-gradient(135deg,#2563eb,var(--sky)); transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(29,78,216,.7), inset 0 1px 0 rgba(255,255,255,.22);}
.btn-ghost{border-color:var(--line2); color:var(--navy); background:#fff; box-shadow:var(--shadow-sm);}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-deep); transform:translateY(-1px);}
.btn-light{background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.28);}
.btn-light:hover{background:rgba(255,255,255,.22); transform:translateY(-1px);}
.nav-cta .btn-ghost{background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.3); box-shadow:none;}
.nav-cta .btn-ghost:hover{background:rgba(255,255,255,.15); color:#fff; border-color:rgba(94,234,212,.55);}
/* hero — deep navy, layered glow + faint grid */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(900px 480px at 88% -10%, rgba(29,78,216,.38), rgba(29,78,216,0) 60%),
  radial-gradient(760px 460px at 4% 112%, rgba(15,118,110,.36), rgba(15,118,110,0) 62%),
  linear-gradient(158deg,var(--navy-deep) 0%, var(--navy) 54%, var(--navy-panel) 100%);
  padding:96px 0 80px; text-align:center; color:#dbe4f0;}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(94,234,212,.5), transparent);}
.hero .wrap{position:relative; z-index:1;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-bottom:18px;}
.section .eyebrow, .talent-band .eyebrow{background:var(--teal-bg); border:1px solid #b7ece2; padding:6px 14px; border-radius:999px;}
.hero .eyebrow{background:rgba(94,234,212,.1); border:1px solid rgba(94,234,212,.35); color:var(--teal-lt); padding:6px 14px; border-radius:999px;}
.hero h1{font-size:clamp(40px,5.6vw,66px); font-weight:800; line-height:1.05; letter-spacing:-.03em; color:#fff; max-width:860px; margin:0 auto 20px;}
.hero p.lead{font-size:19.5px; color:#aebdd2; max-width:720px; margin:0 auto 34px;}
.hero .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.hero .btn-ghost{background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.32); box-shadow:none; backdrop-filter:blur(4px);}
.hero .btn-ghost:hover{background:rgba(255,255,255,.15); color:#fff; border-color:rgba(94,234,212,.55);}
/* sections — cloud rhythm, tinted bands instead of white sprawl */
.section{padding:80px 0;}
.section.soft{background:linear-gradient(180deg,var(--bg-soft),var(--bg-softer)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section h2{font-size:clamp(29px,3.4vw,41px); font-weight:800; letter-spacing:-.02em; color:var(--navy); margin-bottom:14px;}
.section .sub{color:var(--slate); font-size:17px; max-width:720px; margin-bottom:36px;}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
.card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#bcd2e8;}
.card h3{font-size:17px; color:var(--navy); margin-bottom:8px;}
.card p{font-size:14.5px; color:var(--slate);}
.card .icon{width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--teal-bg),#e0f2fe); border:1px solid #d3e7f2; display:grid; place-items:center; font-size:22px; margin-bottom:14px;}
.step3{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm);}
.step3 div{padding:28px 26px; border-left:1px solid var(--line);}
.step3 div:first-child{border-left:0;}
.step3 .n{display:inline-block; font-size:12px; font-weight:800; color:var(--teal); letter-spacing:.1em; background:var(--teal-bg); border:1px solid #b7ece2; padding:3px 10px; border-radius:999px;}
.step3 h3{font-size:16px; margin:10px 0 6px; color:var(--navy);}
.step3 p{font-size:14px; color:var(--slate);}
/* dark studio panel */
.studio{background:
  radial-gradient(620px 300px at 92% -10%, rgba(29,78,216,.35), rgba(29,78,216,0) 60%),
  radial-gradient(520px 300px at 0% 115%, rgba(15,118,110,.3), rgba(15,118,110,0) 60%),
  linear-gradient(140deg,var(--navy-panel),var(--navy) 55%,var(--navy2));
  border:1px solid rgba(255,255,255,.09); border-radius:20px; color:#e2e8f0; padding:42px; display:grid; grid-template-columns:1fr 1fr; gap:36px; box-shadow:var(--shadow-lg);}
@media(max-width:860px){.studio{grid-template-columns:1fr;}}
.studio h3{color:#fff; font-size:22px; margin-bottom:10px;}
.studio p{color:#94a3b8; font-size:14.5px;}
.studio .mock-brief{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); border-radius:12px; padding:18px; margin-top:16px; font-size:13.5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.studio ol{list-style:none; margin-top:6px;}
.studio ol li{display:flex; gap:12px; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:12px 14px; margin-bottom:10px; font-size:14px;}
.studio ol .num{width:26px; height:26px; border-radius:50%; background:rgba(94,234,212,.15); color:var(--teal-lt); display:grid; place-items:center; font-size:12px; font-weight:800; flex-shrink:0;}
.studio .fine{font-size:12px; color:#64748b; margin-top:12px;}
/* talent band (homepage — door to the AMMG Talent Board) */
.talent-band{background:
  radial-gradient(560px 260px at 95% 0%, rgba(29,78,216,.32), rgba(29,78,216,0) 60%),
  radial-gradient(480px 260px at 0% 110%, rgba(15,118,110,.3), rgba(15,118,110,0) 60%),
  linear-gradient(140deg,var(--navy-panel),var(--navy) 55%,var(--navy2));
  border:1px solid rgba(255,255,255,.09); border-radius:20px; padding:42px; display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:center; box-shadow:var(--shadow-lg); color:#dbe4f0;}
@media(max-width:860px){.talent-band{grid-template-columns:1fr;}}
.talent-band h2{color:#fff; margin-bottom:12px;}
.talent-band p{color:#aebdd2; font-size:15.5px; max-width:560px;}
.talent-band .eyebrow{background:rgba(94,234,212,.1); border-color:rgba(94,234,212,.35); color:var(--teal-lt);}
.talent-band .talent-cta{text-align:left;}
.talent-band .talent-cta .btn{font-size:15.5px; padding:14px 28px;}
.talent-band .fine{font-size:12.5px; color:#7d90ab; margin-top:12px;}
/* numbered about */
.about-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; margin-top:30px;}
.about-grid .num{font-size:13px; font-weight:800; color:var(--teal-lt); background:linear-gradient(135deg,var(--navy),var(--navy2)); display:inline-block; padding:4px 12px; border-radius:20px; margin-bottom:10px; box-shadow:var(--shadow-sm);}
.about-grid h3{font-size:17px; margin-bottom:8px;}
.about-grid p{font-size:14.5px; color:var(--slate);}
/* notice boxes */
.notice{border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:12px; padding:22px 24px; background:#fff; margin-bottom:16px; box-shadow:var(--shadow-sm);}
.notice h3{font-size:16px; margin-bottom:6px;}
.notice p{font-size:14px; color:var(--slate);}
.pill{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 12px; border-radius:20px; background:var(--teal-bg); color:var(--teal); border:1px solid #99f6e4;}
/* pricing */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:28px;}
.tier-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.tier-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.tier-card.hot{border:2px solid var(--teal); background:linear-gradient(180deg,#fff,#f2fbf9); box-shadow:0 18px 40px -14px rgba(15,118,110,.35);}
.tier-card h3{font-size:18px;}
.tier-card .price{font-size:32px; font-weight:800; color:var(--navy); margin:10px 0 2px;}
.tier-card .per{font-size:13px; color:var(--slate); margin-bottom:14px;}
.tier-card ul{list-style:none; font-size:14px; color:var(--slate); line-height:2;}
.tier-card ul li::before{content:"✓ "; color:var(--teal); font-weight:700;}
.tier-card .btn{margin-top:18px; text-align:center;}
/* portfolio */
.work-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:28px;}
.work-item{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.work-item:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.work-item .ph{height:170px; background:
  radial-gradient(420px 200px at 85% 0%, rgba(29,78,216,.4), rgba(29,78,216,0) 60%),
  linear-gradient(135deg,var(--navy2),var(--teal)); display:grid; place-items:center; color:#fff; font-size:15px; font-weight:600; padding:20px; text-align:center;}
.work-item .body{padding:18px;}
.work-item .body h3{font-size:15.5px; margin-bottom:4px;}
.work-item .body p{font-size:13px; color:var(--slate);}
/* portfolio/software cards defined in page <style> blocks get depth too */
.pf-card{box-shadow:var(--shadow-sm);}
.pf-card:hover{box-shadow:var(--shadow-md);}
/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:28px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-grid ul{margin:16px 0 16px 18px; color:var(--slate); font-size:14.5px;}
.big-mail{font-size:22px; font-weight:700;}
/* footer — deep navy band */
footer{position:relative; background:linear-gradient(180deg,var(--navy-panel),var(--navy-deep)); color:#94a3b8; padding:60px 0 28px; margin-top:0;}
footer::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, rgba(94,234,212,.65), rgba(29,78,216,.65), transparent);}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr;}}
footer h4{color:#fff; font-size:14px; margin-bottom:14px;}
footer a{color:#94a3b8; font-size:13.5px; display:block; margin-bottom:9px;}
footer a:hover{color:var(--teal-lt);}
footer .fine{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
footer .fine span:first-child{flex:1 1 340px;}
/* forms */
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:6px;}
.field input, .field textarea, .field select{width:100%; padding:12px 14px; border:1px solid var(--line2); border-radius:10px; font-size:16px; font-family:inherit; background:#fff; transition:border-color .15s ease, box-shadow .15s ease;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,118,110,.18);}
.field textarea{min-height:120px; resize:vertical;}

/* ============ Mobile & touch polish ============ */
button, a{-webkit-tap-highlight-color:transparent;}
button{touch-action:manipulation;}
.btn{min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
.nav-toggle{display:none;}
.nav-cta-mobile{display:none !important;}
.site-nav .wrap{position:relative;}

@media(max-width:900px){
  .nav-toggle{
    display:grid; place-items:center; margin-left:auto;
    width:44px; height:44px; border-radius:10px; cursor:pointer;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:22px; line-height:1;
  }
  .site-nav .wrap{gap:14px; height:64px;}
  .nav-links{
    display:none; position:absolute; top:64px; left:0; right:0; z-index:60;
    flex-direction:column; gap:0; margin:0; padding:10px 24px 18px;
    background:linear-gradient(180deg,#0d1b2e,#0b1727); border-bottom:1px solid rgba(94,234,212,.22);
    box-shadow:0 18px 32px rgba(8,17,31,.4);
    max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px); overflow-y:auto;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:13px 2px; font-size:16px; color:#dbe4f0; border-top:1px solid rgba(255,255,255,.08); min-height:44px; display:flex; align-items:center;}
  .nav-links a:first-child{border-top:0;}
  .nav-cta{display:none;}
  .nav-cta-mobile{display:inline-flex !important; margin-top:12px; width:100%;}
  .hero{padding:68px 0 56px;}
  .section{padding:56px 0;}
}
@media(max-width:640px){
  .step3 div{border-left:0; border-top:1px solid var(--line);}
  .step3 div:first-child{border-top:0;}
  .wrap{padding:0 18px;}
  .studio{padding:28px 22px;}
  .talent-band{padding:28px 22px;}
  .big-mail{font-size:19px; word-break:break-all;}
}
@media(max-width:560px){
  footer .cols{grid-template-columns:1fr; gap:24px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{transition:none !important; animation:none !important;}
}

/* ============ Motion layer (Colorlib-reference inspired, restrained) ============ */
/* Layered hero entrance — elements arrive in layers, not as one block */
@keyframes heroUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
.hero .eyebrow{animation:heroUp .7s cubic-bezier(.22,.68,.32,1) .02s both;}
.hero h1{animation:heroUp .8s cubic-bezier(.22,.68,.32,1) .1s both;}
.hero p.lead{animation:heroUp .8s cubic-bezier(.22,.68,.32,1) .2s both;}
.hero .cta-row{animation:heroUp .8s cubic-bezier(.22,.68,.32,1) .3s both;}
/* Scroll reveal — .rv is only ever added by site.js, so no-JS visitors see everything */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.68,.32,1);}
.rv.in{opacity:1; transform:none;}

/* ============ Sensory layer — "excite our senses" (CSS-only, cheap-phone safe) ============ */
/* Hero depth: a slow-drifting aurora glow layer under the content (transform only) */
.hero .wrap{position:relative; z-index:1;}
.hero::after{content:""; position:absolute; inset:-18%; pointer-events:none;
  background:radial-gradient(620px 320px at 18% 28%, rgba(29,78,216,.16), rgba(29,78,216,0) 62%), radial-gradient(540px 300px at 82% 74%, rgba(15,118,110,.14), rgba(15,118,110,0) 62%);
  animation:heroDrift 26s ease-in-out infinite alternate;}
@keyframes heroDrift{from{transform:translate3d(-2%, -1%, 0) scale(1);} to{transform:translate3d(2%, 1.5%, 0) scale(1.06);}}
/* Gradient word in the headline, with a slow shimmer */
.grad-word{background:linear-gradient(92deg, #5eead4, #7db4ff 55%, #5eead4); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:wordShimmer 9s linear infinite;}
@keyframes wordShimmer{from{background-position:0% 0;} to{background-position:200% 0;}}
/* Primary buttons: a light sweep crosses on hover */
.btn-primary{position:relative; overflow:hidden;}
.btn-primary::after{content:""; position:absolute; top:0; bottom:0; left:0; width:45%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:translateX(-220%) skewX(-18deg); transition:transform .65s ease; pointer-events:none;}
.btn-primary:hover::after{transform:translateX(340%) skewX(-18deg);}
/* Cards and work items: a soft sheen passes over on hover */
.card, .work-item{position:relative; overflow:hidden;}
.card::after, .work-item::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.13) 50%, transparent 58%); transform:translateX(-130%); transition:transform .8s ease; pointer-events:none;}
.card:hover::after, .work-item:hover::after{transform:translateX(130%);}
/* Talent band shares the hero's drifting glow */
.talent-band{position:relative; overflow:hidden;}
.talent-band > *{position:relative; z-index:1;}
.talent-band::after{content:""; position:absolute; inset:-30%; pointer-events:none;
  background:radial-gradient(520px 280px at 85% 15%, rgba(29,78,216,.18), rgba(29,78,216,0) 62%), radial-gradient(460px 260px at 8% 90%, rgba(15,118,110,.15), rgba(15,118,110,0) 62%);
  animation:heroDrift 30s ease-in-out infinite alternate;}
/* Footer gradient line breathes slowly */
.site-footer::before{background-size:220% 100%; animation:wordShimmer 14s linear infinite;}

/* ============ AI Studio showcase treatment ============ */
.studio{position:relative; overflow:hidden;}
.studio::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, rgba(94,234,212,.75), rgba(29,78,216,.75), transparent);}
@keyframes studioGlow{0%,100%{box-shadow:0 4px 8px rgba(8,17,31,.12), 0 32px 64px -24px rgba(8,17,31,.35), 0 0 0 rgba(29,78,216,0);} 50%{box-shadow:0 4px 8px rgba(8,17,31,.12), 0 32px 64px -24px rgba(8,17,31,.35), 0 0 44px -6px rgba(29,78,216,.28);}}
.studio{animation:studioGlow 7s ease-in-out infinite;}
.studio-bar{grid-column:1 / -1; display:flex; align-items:center; gap:7px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.09);}
.studio-bar .sdot{width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18);}
.studio-bar .sdot:first-child{background:rgba(94,234,212,.65);}
.studio-bar .studio-title{margin-left:10px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#dbe4f0;}
.studio-bar .studio-live{margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--teal-lt); display:inline-flex; align-items:center; gap:7px;}
.studio-bar .studio-live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--teal-lt); box-shadow:0 0 10px rgba(94,234,212,.9);}
.cap-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.cap-chips span{font-size:12px; font-weight:600; color:#c9f5ec; background:rgba(94,234,212,.09); border:1px solid rgba(94,234,212,.28); padding:5px 12px; border-radius:999px;}
.studio ol{position:relative;}
.studio ol::before{content:""; position:absolute; left:26px; top:18px; bottom:18px; width:2px; background:linear-gradient(180deg, rgba(94,234,212,.4), rgba(29,78,216,.15));}
.studio ol li{position:relative;}

/* ============ AI Studio COMPETE layer (2026-10-19) — living product showcase ============ */
/* Device frame: dark bezel ring + screen glare over the studio window */
.studio{border-radius:24px; box-shadow:0 0 0 1px rgba(148,196,255,.14), 0 0 0 9px rgba(10,21,38,.92), 0 34px 70px -28px rgba(8,17,31,.5);}
@keyframes studioGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(148,196,255,.14), 0 0 0 9px rgba(10,21,38,.92), 0 34px 70px -28px rgba(8,17,31,.5), 0 0 0 rgba(29,78,216,0);}
  50%{box-shadow:0 0 0 1px rgba(148,196,255,.2), 0 0 0 9px rgba(10,21,38,.92), 0 34px 70px -28px rgba(8,17,31,.5), 0 0 52px -6px rgba(29,78,216,.3);}}
.studio::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(112deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 26%, rgba(255,255,255,0) 46%);}
.studio > *{position:relative; z-index:1;}
/* Window bar: real product surfaces as mini tabs (Chat · Creative Tools · App Builder) */
.studio-bar{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); margin:-10px -10px 4px; padding:10px 10px 14px; border-radius:14px 14px 0 0;}
.studio-tabs{display:inline-flex; gap:3px; margin-left:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); padding:3px; border-radius:999px;}
.studio-tabs span{font-size:11px; font-weight:600; color:#8fa3bd; padding:3px 10px; border-radius:999px; letter-spacing:.02em; white-space:nowrap;}
.studio-tabs span.on{background:linear-gradient(135deg, rgba(15,118,110,.9), rgba(29,78,216,.9)); color:#fff; box-shadow:0 4px 10px -3px rgba(29,78,216,.6);}
@media(max-width:700px){.studio-tabs{display:none;}}
/* The demo: brief card with a live prompt caret and a light scan */
.studio .mock-brief{position:relative; overflow:hidden;}
.studio .mock-brief::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
  transform:translateX(-130%); animation:briefScan 10.4s ease-in-out infinite;}
@keyframes briefScan{0%{transform:translateX(-130%);} 16%{transform:translateX(130%);} 100%{transform:translateX(130%);}}
.caret{display:inline-block; width:8px; height:1em; margin-left:4px; vertical-align:-.12em; background:var(--teal-lt); border-radius:1px; animation:caretBlink 1.15s steps(1,end) infinite;}
@keyframes caretBlink{0%,55%{opacity:1;} 56%,100%{opacity:0;}}
/* Flow chips light in sequence: Brief → Plan → Modules → Build steps */
.demo-flow{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:14px;}
.df-arrow{color:#5b7292; font-size:11px;}
.df-chip{font-size:11px; font-weight:700; letter-spacing:.05em; color:#9fb4cf; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); padding:4px 11px; border-radius:999px; animation:dfLight 10.4s ease-in-out infinite;}
.df-chip:nth-of-type(3){animation-delay:2.6s;}
.df-chip:nth-of-type(5){animation-delay:5.2s;}
.df-chip:nth-of-type(7){animation-delay:7.8s;}
@keyframes dfLight{
  0%,100%{opacity:.55; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#9fb4cf; box-shadow:none;}
  5%,22%{opacity:1; border-color:rgba(94,234,212,.65); background:rgba(94,234,212,.14); color:#eafffa; box-shadow:0 0 14px -2px rgba(94,234,212,.45);}
  32%{opacity:.55; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#9fb4cf; box-shadow:none;}}
/* Result screen: the plan materializes — skeleton app chrome, module tiles, plan badge */
.demo-result{margin-top:14px; background:rgba(3,9,18,.55); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.dr-bar{display:flex; align-items:center; gap:5px; padding:8px 12px; background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.08);}
.dr-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); flex-shrink:0;}
.dr-dot:first-child{background:rgba(94,234,212,.6);}
.dr-name{margin-left:7px; font-size:11px; color:#8fa3bd; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dr-body{display:grid; grid-template-columns:58px 1fr; gap:12px; padding:14px;}
.dr-side{display:flex; flex-direction:column; gap:7px; padding-top:2px;}
.dr-side span{display:block; height:9px; border-radius:5px; background:rgba(255,255,255,.12); animation:drShimmer 3.2s ease-in-out infinite alternate;}
.dr-side span:nth-child(1){width:84%;}
.dr-side span:nth-child(2){width:62%; animation-delay:.4s;}
.dr-side span:nth-child(3){width:74%; animation-delay:.8s;}
.dr-side span:nth-child(4){width:52%; animation-delay:1.2s;}
@keyframes drShimmer{from{opacity:.45;} to{opacity:.9;}}
.dr-main{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:9px;}
.dr-tile{background:linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.11); border-radius:10px; padding:10px; font-size:11.5px; font-weight:600; color:#dbe4f0; display:flex; flex-direction:column; gap:8px; line-height:1.35; animation:drIn 10.4s ease-in-out infinite;}
.dr-tile:nth-child(2){animation-delay:.3s;}
.dr-tile:nth-child(3){animation-delay:.6s;}
@keyframes drIn{0%,58%{opacity:.35; transform:translateY(5px);} 70%,94%{opacity:1; transform:none;} 100%{opacity:.35; transform:translateY(5px);}}
.dr-ic{width:16px; height:16px; border-radius:5px; background:linear-gradient(135deg,var(--teal),var(--sky)); box-shadow:0 4px 10px -3px rgba(29,78,216,.6); flex-shrink:0;}
.dr-foot{padding:0 14px 14px;}
.plan-pill{background:rgba(94,234,212,.15); border-color:rgba(94,234,212,.35); color:#5eead4; animation:drBadge 10.4s ease-in-out infinite;}
@keyframes drBadge{0%,64%{opacity:.45; transform:scale(.97);} 74%,94%{opacity:1; transform:scale(1);} 100%{opacity:.45; transform:scale(.97);}}
/* Build sequence steps light in step with the demo flow */
.studio ol li{animation:seqLight 10.4s ease-in-out infinite;}
.studio ol li:nth-child(2){animation-delay:2.6s;}
.studio ol li:nth-child(3){animation-delay:5.2s;}
.studio ol li:nth-child(4){animation-delay:7.8s;}
@keyframes seqLight{
  0%,100%{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); box-shadow:none;}
  5%,22%{background:rgba(94,234,212,.09); border-color:rgba(94,234,212,.55); box-shadow:0 0 18px -4px rgba(94,234,212,.35);}
  32%{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); box-shadow:none;}}
/* Capability gallery — what the Studio builds, as product cards */
.cap-gallery{grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px;}
.cap-card{position:relative; overflow:hidden; background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.028)); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px 16px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
.cap-card:hover{transform:translateY(-3px); border-color:rgba(94,234,212,.5); box-shadow:0 16px 30px -16px rgba(0,0,0,.55);}
.cap-card::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.1) 50%, transparent 58%); transform:translateX(-130%); transition:transform .8s ease; pointer-events:none;}
.cap-card:hover::after{transform:translateX(130%);}
.cap-ic{width:42px; height:42px; border-radius:11px; background:linear-gradient(135deg,var(--teal),var(--sky)); display:grid; place-items:center; color:#fff; box-shadow:0 8px 18px -6px rgba(29,78,216,.65), inset 0 1px 0 rgba(255,255,255,.35);}
.cap-ic svg{width:21px; height:21px;}
.cap-card h4{color:#fff; font-size:15px; margin:12px 0 5px;}
.cap-card p{font-size:12.5px; color:#94a3b8; line-height:1.55;}
@media (prefers-reduced-motion: reduce){ .caret{display:none;} }

/* ---- Live AI showcase (homepage section) ---- */
.show-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px}
.show-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(16,34,59,.05)}
.show-media{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy) 0%,var(--sky) 60%,var(--teal) 130%);overflow:hidden}
.show-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.show-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;gap:8px}
.show-ph .ph-big{color:#fff;font-weight:800;font-size:clamp(21px,2.6vw,29px);line-height:1.25;letter-spacing:-.01em}
.show-ph .ph-sub{color:#bae6fd;font-size:14.5px;font-weight:600}
.show-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.show-body h3{font-size:21px}
.show-body p{color:var(--slate);font-size:15.5px}
.show-body .btn{margin-top:auto;align-self:flex-start}
.pill.live{background:#dcfce7;color:#166534}
.pill.soon{background:#fef3c7;color:#92400e}
.pill.svc{background:#e0e7ff;color:#3730a3}
@media (max-width:700px){.show-grid{grid-template-columns:1fr}}