/* =====================================================================
   MEDIPLAY corporate layer (2026-11-05): identity on top of site.css
   Deep night background, Mediplay purple #8F7BE8 / #4A3A8C, orange #F5722E, Montserrat.
   ===================================================================== */
body{font-size:16px;line-height:1.7;background:var(--bg-0)}
h1,h2,h3{font-family:var(--sans)}
h1{font-weight:700;letter-spacing:-.035em;line-height:1.04;font-size:clamp(38px,5.4vw,80px);max-width:13ch}
h2{font-weight:700;letter-spacing:-.03em;line-height:1.1;font-size:clamp(28px,3.6vw,50px)}
h3{font-weight:700;letter-spacing:-.015em;line-height:1.25}
h1 em,h2 em,.quote em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-weight:400;color:var(--m-d);font-size:clamp(16px,1.3vw,18px)}
.lead b{font-weight:600}
.mono,.kick,.crumbs,.card .tag,.metrics span,.step .n,.exp .n,.timeline b,.badge,.vs-row.head,.evi b,.facts b,.contact dt,.foot h4,.win-bar,.hud,.ln .sp,.call-head .caller small,.status{font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.chip{font-family:var(--sans);letter-spacing:.02em;text-transform:none;font-size:13px;font-weight:500}
.kick{color:var(--org)}
.kick::before{background:var(--grad);height:2px;width:22px;border-radius:2px}
.dot{background:var(--org);box-shadow:0 0 10px var(--org)}
.btn{font-weight:600;font-size:14.5px;border-radius:12px}
.btn.pri{background:var(--grad);border:0;color:#fff;box-shadow:0 10px 30px -12px rgba(245,114,46,.6)}
.btn.pri:hover{background:var(--grad);filter:brightness(1.08);box-shadow:0 14px 34px -10px rgba(245,114,46,.75)}
.btn.ink{background:var(--vio-deep);border-color:var(--vio-deep);color:#fff}
.btn.ink:hover{background:#5A48A6;border-color:#5A48A6}
.btn .k{font-family:var(--sans);font-weight:600}

/* nav: fully opaque once scrolled, so page text never shows through it */
.nav.solid,.nav.open{background:rgba(7,5,15,.97);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--l-d)}
.brand{gap:12px;letter-spacing:0}
.brand .brand-mark{width:40px;height:40px;flex:none}
.brand .brand-name{display:block;font-size:20px;font-weight:800;letter-spacing:.005em;color:var(--t-d);line-height:1}
.brand .brand-name span{color:var(--org)}
.brand .brand-sub{display:block;font-size:8.5px;font-weight:600;letter-spacing:.42em;color:var(--d-d);margin-top:4px;text-transform:uppercase}
.links{font-weight:500}
.links a[aria-current]::after{background:var(--grad);height:2px}
.lang{font-family:var(--sans);font-weight:600}

/* sections: night tones with a soft corporate glow, never white */
.light,.white{background:radial-gradient(ellipse 80% 60% at 15% 0%,rgba(74,58,140,.22),transparent 60%),var(--bg-1);border-top:1px solid var(--l-d)}
.card,.exp article,.shots figure,.form,.who div{background:var(--white)}
.card:hover,.exp article:hover,.shots figure:hover{border-color:rgba(143,123,232,.5)}
.card .go span{color:var(--org)}
.feat .ic,.light .feat .ic,.white .feat .ic{border-color:rgba(143,123,232,.3);color:var(--org);background:rgba(143,123,232,.08)}
.feat>div:hover,.light .feat>div:hover,.white .feat>div:hover{background:rgba(143,123,232,.06)}
.seg input:checked+span{background:var(--grad);color:#fff;border-color:transparent}
.field input,.field select,.field textarea{background:var(--bg-0);color:var(--t-d);border-color:var(--l-d2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--vio);background:var(--bg-0);box-shadow:0 0 0 3px rgba(143,123,232,.35)}
.field label{color:var(--t-d)}
.faq summary{font-weight:600;font-size:17px}
.timeline{border-color:var(--l-d)}
.timeline div::before{background:var(--grad)}
.win{box-shadow:0 60px 120px -50px rgba(74,58,140,.7),0 0 0 1px var(--l-d2)}
.win-stage .poster .play,.film .cover .play{background:var(--grad);box-shadow:0 0 0 12px rgba(143,123,232,.16),0 20px 40px -10px rgba(245,114,46,.6)}
.phone{box-shadow:0 0 0 1px var(--l-d2),0 60px 120px -40px rgba(143,123,232,.45),inset 0 0 0 2px #1d1830}
.app-btn{background:var(--grad);box-shadow:0 12px 24px -10px rgba(245,114,46,.7)}
.app-btn.dark{background:#1B1530;box-shadow:none}
.app-av{background:var(--grad)}
.app-list .row.sel{color:var(--org)}
.ring{background:conic-gradient(var(--org) var(--p,62%),#E7E4EE 0)}
.wave i.on{background:var(--org)}
.call-ctl button.pp{background:var(--grad)}
.ln.ai .sp{color:var(--org)}
.call-head .av{background:rgba(143,123,232,.14);color:var(--vio)}
.cta{background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(143,123,232,.22),transparent 60%),radial-gradient(ellipse 50% 70% at 95% 80%,rgba(245,114,46,.14),transparent 60%),var(--bg-0)}
.cta::after{display:none}
.phero{background:radial-gradient(ellipse 60% 70% at 85% 20%,rgba(74,58,140,.35),transparent 65%),radial-gradient(ellipse 40% 50% at 95% 90%,rgba(245,114,46,.10),transparent 60%),var(--bg-0)}
.phero .grid-bg{opacity:.3}
.foot{background:var(--bg-0)}
video::cue{font-family:var(--sans)}

/* ---------- home hero: the two programs at work ---------- */
.hero2{position:relative;padding:calc(var(--nav-h) + 80px) 0 104px;overflow:hidden;background:radial-gradient(ellipse 55% 65% at 78% 40%,rgba(74,58,140,.45),transparent 65%),radial-gradient(ellipse 35% 45% at 92% 85%,rgba(245,114,46,.16),transparent 60%),var(--bg-0)}
.hero2>.wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
.hero2 h1{max-width:11ch}
.hero2 .status{margin-bottom:28px}
.stage{position:relative;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;justify-self:end;width:100%;max-width:680px;padding-top:34px}
.stage .phone{width:250px}
.stage .col{position:relative}
.stage .tagline{position:absolute;top:-30px;left:0;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--m-d);white-space:nowrap;display:flex;gap:8px;align-items:center}
.stage .tagline i{width:8px;height:8px;border-radius:50%;background:var(--vio)}
.stage .col.v .tagline i{background:var(--org)}
.vcard{position:relative;border:1px solid var(--l-d2);border-radius:20px;background:rgba(15,11,31,.92);overflow:hidden;box-shadow:0 40px 80px -40px rgba(74,58,140,.8)}
.vcard .vh{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--l-d)}
.vcard .vh .av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(143,123,232,.16);color:var(--vio);flex:none}
.vcard .vh .av svg{width:20px;height:20px}
.vcard .vh b{display:block;font-size:14px;font-weight:700;line-height:1.3}
.vcard .vh small{display:block;font-size:11.5px;color:var(--m-d)}
.vcard .vh{flex-wrap:wrap;row-gap:8px}
.vcard .vh>div{flex:1;min-width:0}
.vcard .vh .st{flex-basis:100%;padding-left:52px;margin-left:0;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--d-d);white-space:nowrap}
.vcard[data-s="ring"] .vh .st,.vcard[data-s="talk"] .vh .st{color:var(--org)}
.vcard[data-s="done"] .vh .st{color:var(--ok)}
.vcard .vw{display:flex;align-items:center;gap:3px;height:56px;padding:0 18px;border-bottom:1px solid var(--l-d)}
.vcard .vw i{flex:1;height:6%;min-height:3px;border-radius:2px;background:var(--ink4);transition:height .16s}
.vcard[data-s="talk"] .vw i{background:linear-gradient(#8F7BE8,#F5722E)}
.vcard .vl{padding:14px 18px 6px;display:grid;gap:12px;align-content:start;min-height:190px}
.vcard .vl p{font-size:13px;line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.vcard .vl p.on{opacity:1;transform:none}
.vcard .vl p b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--org);margin-bottom:2px}
.vcard .vl p.cu b{color:var(--m-d)}
.vcard .vr{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px 18px;opacity:.12;transition:opacity .5s}
.vcard[data-s="done"] .vr{opacity:1}
.vcard .vr span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--l-d2)}
.vcard .vr span svg{width:13px;height:13px}
.vcard .vr .g{color:var(--ok);border-color:rgba(52,211,153,.35)}
.vcard .vr .y{color:var(--warn);border-color:rgba(251,191,36,.35)}
.done-card{text-align:center}
.done-card .ok-big{width:62px;height:62px;margin:4px auto 10px;border-radius:50%;background:#E3F7EE;color:#12A26B;display:grid;place-items:center}
.done-card .ok-big svg{width:30px;height:30px}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.thumbs img{border-radius:10px;aspect-ratio:3/4;object-fit:cover;width:100%}

/* ---------- two moments ---------- */
.moments{display:grid;grid-template-columns:1fr 56px 1fr;align-items:stretch}
.moment{border:1px solid var(--l-d2);border-radius:var(--r);background:var(--white);padding:32px;display:flex;flex-direction:column}
.moment .pt{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:99px;background:rgba(143,123,232,.14);color:#B5A8F5;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;width:max-content}
.moment.v .pt{background:rgba(245,114,46,.14);color:var(--org)}
.moment h3{font-size:24px;margin:18px 0 24px}
.moment ol{list-style:none;display:grid;gap:18px;counter-reset:m}
.moment li{display:grid;grid-template-columns:34px 1fr;gap:14px;counter-increment:m}
.moment li::before{content:counter(m);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--ink4);color:var(--t-d)}
.moment li b{display:block;font-weight:700;font-size:15.5px;line-height:1.4}
.moment li span{font-size:14.5px;color:var(--m-d)}
.moment .more{margin-top:auto;padding-top:26px}
.joint{display:flex;align-items:center;justify-content:center;padding:0 6px}
.joint i{width:100%;height:2px;background:var(--grad);position:relative}
.joint i::after{content:"";position:absolute;right:-2px;top:-5px;border-left:10px solid #F5722E;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- product blocks (home) ---------- */
.pblock{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.pblock.rev{grid-template-columns:1.1fr .9fr}
.pblock.rev>.txt{order:2}
.pblock .txt h2{margin-top:16px}
.pblock .txt p.sub{margin-top:20px;max-width:none}
.points{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.points div{border:1px solid var(--l-d);border-radius:14px;padding:16px 18px;background:rgba(143,123,232,.05)}
.points b{display:block;font-weight:700;font-size:15px}
.points span{font-size:13.5px;color:var(--m-d)}

/* ---------- before / after ---------- */
.ba{border:1px solid var(--l-d2);border-radius:var(--r);overflow:hidden;background:var(--white)}
.ba-row{display:grid;grid-template-columns:.8fr 1fr 1.25fr;border-top:1px solid var(--l-d)}
.ba-row:first-child{border-top:0}
.ba-row>div{padding:20px 24px;font-size:15px}
.ba-row .q{font-weight:700}
.ba-row .old{color:#8A83A8}
.ba-row .new{color:var(--t-d);background:rgba(143,123,232,.08)}
.ba-row .new::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:10px;border-radius:6px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;vertical-align:1px}
.ba-row.head>div{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding-top:16px;padding-bottom:16px}
.ba-row.head .new::before{display:none}
.ba-row.head .new{color:var(--org)}

/* ---------- rollout ---------- */
.roll{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.roll div{border:1px solid var(--l-d);border-radius:var(--r);padding:24px;background:var(--white)}
.roll b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;font-weight:800}
.roll h3{font-size:18px;margin:16px 0 8px}
.roll p{font-size:14.5px;color:var(--m-d)}

/* ---------- engineering background ---------- */
.bglist{border-top:1px solid var(--l-d)}
.bglist div{display:grid;grid-template-columns:240px 1fr 140px;gap:24px;padding:22px 0;border-bottom:1px solid var(--l-d);align-items:baseline}
.bglist b{font-weight:700}
.bglist span{color:var(--m-d);font-size:15px}
.bglist em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);text-align:right}
.bglist em.run{color:var(--warn)}
.strip-note{display:flex;align-items:center;justify-content:space-between;gap:32px;border:1px solid var(--l-d2);border-radius:var(--r);padding:28px 32px;background:rgba(143,123,232,.06)}
.strip-note p{font-size:17px;max-width:70ch;color:var(--m-d)}
.strip-note p b{font-weight:700;color:var(--t-d)}

@media (max-width:1100px){
  .stage .phone{width:220px}
  .roll{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  :root{--nav-h:68px}
  .hero2{padding:calc(var(--nav-h) + 40px) 0 72px}
  .hero2>.wrap,.pblock,.pblock.rev{grid-template-columns:1fr;gap:40px}
  .pblock.rev>.txt{order:0}
  .stage{justify-self:center;max-width:560px}
  .moments{grid-template-columns:1fr;gap:0}
  .joint{height:44px;padding:0}.joint i{width:2px;height:100%}
  .joint i::after{right:-5px;top:auto;bottom:-2px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid #F5722E;border-bottom:0}
  .ba-row{grid-template-columns:1fr}
  .ba-row.head{display:none}
  .ba-row .q{padding-bottom:4px}
  .ba-row .old{padding-top:4px;padding-bottom:12px}
  .ba-row .old::before{content:"Önce: "}
  html[lang="en"] .ba-row .old::before{content:"Before: "}
  .bglist div{grid-template-columns:1fr;gap:4px}
  .bglist em{text-align:left}
  .strip-note{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .stage{grid-template-columns:1fr;gap:56px;justify-items:center}
  .stage .phone{width:240px}
  .stage .col.v{width:100%}
  .points,.roll{grid-template-columns:1fr}
  .moment{padding:24px}
  .brand .brand-name{font-size:18px}
  .brand .brand-mark{width:36px;height:36px}
}

/* ---------- home hero v3: problem → program → result ---------- */
.hero3{position:relative;padding:calc(var(--nav-h) + 44px) 0 88px;background:radial-gradient(ellipse 55% 50% at 80% 10%,rgba(74,58,140,.42),transparent 65%),radial-gradient(ellipse 40% 40% at 10% 95%,rgba(245,114,46,.10),transparent 60%),var(--bg-0)}
.h3-top{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:end;margin-bottom:36px}
.h3-top h1{max-width:15ch;font-size:clamp(36px,4.3vw,62px);line-height:1.06}
.h3-top .status{margin-bottom:24px}
.h3-side .lead{margin:0;max-width:none}
.h3-side .ctas{margin-top:28px}
.dg{position:relative;border:1px solid var(--l-d2);border-radius:24px;padding:26px 30px 30px;background:linear-gradient(180deg,rgba(17,12,32,.92),rgba(10,7,24,.92));box-shadow:0 50px 100px -50px rgba(74,58,140,.6)}
.dg-head,.dg-grid{display:grid;grid-template-columns:1fr 240px 1fr;column-gap:104px}
.dg-head{margin-bottom:16px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A83A8}
.dg-head span:nth-child(1){color:#F59E9E}
.dg-head span:nth-child(2){text-align:center}
.dg-head span:nth-child(3){color:#7EE0B8}
.dg-grid{position:relative}
.dg-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.dg-lines path{fill:none}
.dg-lines .b{stroke:rgba(178,168,215,.2);stroke-width:1.5;stroke-dasharray:3 7;animation:dgf 1.8s linear infinite}
.dg-lines .a{stroke:url(#dgg);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:10 9;opacity:0;transition:opacity .45s;animation:dgf .8s linear infinite}
.dg-lines .a.on{opacity:1}
@keyframes dgf{to{stroke-dashoffset:-19}}
.dg-col{position:relative;z-index:1}
.dg-col.p,.dg-col.s{display:grid;gap:12px}
.dg-col.h{display:grid;grid-template-rows:1fr 1fr;gap:12px}
.dg-c{display:flex;gap:14px;align-items:center;padding:14px 18px;border:1px solid var(--l-d);border-radius:14px;background:var(--bg-1);transition:border-color .45s,background .45s,transform .45s;min-height:74px;cursor:default}
.dg-c p{font-size:14.5px;line-height:1.45;color:var(--m-d);transition:color .45s;text-wrap:balance}
.dg-c .mk{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:15px}
.dg-c .mk svg{width:16px;height:16px}
.dg-c .mk.q{background:rgba(248,113,113,.12);color:#F87171}
.dg-c .mk.ok{background:rgba(52,211,153,.12);color:var(--ok)}
.dg-c.p.on{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.07)}
.dg-c.s.on{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.07)}
.dg-c.on p{color:var(--t-d)}
.dg-hub{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;border-radius:18px;padding:18px;border:1px solid rgba(143,123,232,.35);background:linear-gradient(180deg,rgba(74,58,140,.4),rgba(15,11,31,.95));transition:box-shadow .45s,transform .45s,border-color .45s}
.dg-hub.v{border-color:rgba(245,114,46,.35);background:linear-gradient(180deg,rgba(245,114,46,.18),rgba(15,11,31,.95))}
.dg-hub .hic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--vio-deep);color:#fff;margin-bottom:8px;box-shadow:0 10px 24px -10px rgba(143,123,232,.8)}
.dg-hub.v .hic{background:var(--org);box-shadow:0 10px 24px -10px rgba(245,114,46,.8)}
.dg-hub .hic svg{width:26px;height:26px}
.dg-hub b{font-size:17px;font-weight:700;line-height:1.25}
.dg-hub small{font-size:12.5px;color:var(--m-d)}
.dg-hub.on{transform:scale(1.03);border-color:rgba(143,123,232,.8);box-shadow:0 22px 50px -20px rgba(143,123,232,.8)}
.dg-hub.v.on{border-color:rgba(245,114,46,.8);box-shadow:0 22px 50px -20px rgba(245,114,46,.7)}
.dg-m{display:none}
.dg-row{border:1px solid var(--l-d);border-radius:16px;padding:10px;display:grid;gap:4px;background:var(--bg-1);transition:border-color .45s,background .45s}
.dg-row .dg-c{min-height:0;border:0;background:none;padding:8px}
.dg-via{display:inline-flex;align-items:center;gap:8px;margin-left:52px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B5A8F5}
.dg-via svg{width:14px;height:14px}
.dg-via.v{color:var(--org)}
.dg-via::before{content:"↓";font-size:13px;margin-right:2px}
.dg-row.on{border-color:rgba(143,123,232,.45);background:rgba(143,123,232,.07)}
.dg-row.on .dg-c p{color:var(--t-d)}

/* ---------- one job, start to finish ---------- */
.tl2 ol{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.tl2 li{position:relative;display:grid;grid-template-rows:20px 44px auto auto;align-content:start;opacity:.38;transition:opacity .5s}
.tl2 li.on{opacity:1}
.tl2 li::before{content:"";position:absolute;left:9px;right:-29px;top:41px;height:2px;background:var(--ink4);transition:background .5s}
.tl2 li:last-child::before{display:none}
.tl2 li.f.lit::before{background:linear-gradient(90deg,#8F7BE8,#8F7BE8)}
.tl2 li.f.lit:nth-child(4)::before{background:linear-gradient(90deg,#8F7BE8,#F5722E)}
.tl2 li.v.lit::before{background:#F5722E}
.tl2 .tm{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--m-d);line-height:20px;white-space:nowrap}
.tl2 .nd{width:20px;height:20px;border-radius:50%;background:var(--bg-1);border:2px solid var(--ink4);align-self:center;position:relative;z-index:1;transition:all .45s}
.tl2 li.f.on .nd{border-color:var(--vio);background:var(--vio);box-shadow:0 0 0 7px rgba(143,123,232,.18)}
.tl2 li.v.on .nd{border-color:var(--org);background:var(--org);box-shadow:0 0 0 7px rgba(245,114,46,.18)}
.tl2 b{font-size:16px;font-weight:700;line-height:1.3;margin-top:6px}
.tl2 .ds{font-size:14px;color:var(--m-d);margin-top:6px}
.tl2 .tp{display:none}
.tl-axis{display:none}
.tl-br{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:30px}
.tl-br span{position:relative;grid-column:1/5;border-top:2px solid var(--vio);padding-top:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B5A8F5}
.tl-br span.v{grid-column:5/7;border-color:var(--org);color:var(--org)}
.tl-br span::before,.tl-br span::after{content:"";position:absolute;top:-8px;width:2px;height:14px;background:currentColor}
.tl-br span::before{left:0}.tl-br span::after{right:0}

/* ---------- call player v2 ---------- */
.call2{border-radius:22px;background:linear-gradient(180deg,rgba(17,12,32,.96),rgba(10,7,24,.96));border:1px solid var(--l-d2);overflow:hidden;box-shadow:0 50px 100px -50px rgba(74,58,140,.7)}
.c2-top{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--l-d)}
.c2-p{display:flex;align-items:center;gap:12px;min-width:0}
.c2-p.r{text-align:right}
.c2-p b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.c2-p small{display:block;font-size:12px;color:var(--m-d)}
.c2-av{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;font-weight:800;font-size:13px}
.c2-av.ai{background:var(--grad);color:#fff}
.c2-av.ai svg{width:20px;height:20px}
.c2-av.cu{background:var(--ink4);color:var(--t-d)}
.c2-link{flex:1;min-width:24px;height:2px;background:repeating-linear-gradient(90deg,rgba(178,168,215,.4) 0 6px,transparent 6px 12px);background-size:12px 2px}
.call2.playing .c2-link{background:repeating-linear-gradient(90deg,#F5722E 0 6px,transparent 6px 12px);background-size:12px 2px;animation:lnk .6s linear infinite}
@keyframes lnk{to{background-position:12px 0}}
.c2-player{display:flex;align-items:center;gap:18px;padding:18px 22px;border-bottom:1px solid var(--l-d)}
.call2 .pp{flex:none;width:60px;height:60px;min-width:60px;border-radius:50%;padding:0;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(245,114,46,.75);transition:transform .2s,box-shadow .3s}
.call2 .pp:hover{transform:scale(1.06)}
.call2 .pp svg{width:22px;height:22px;display:block}
.call2 .pp[aria-label] svg path[d^="M8"]{transform:translateX(1.5px)}
.call2.playing .pp{box-shadow:0 0 0 9px rgba(143,123,232,.18),0 12px 28px -10px rgba(245,114,46,.75)}
.c2-track{flex:1;min-width:0}
.call2 .wave{height:44px;padding:0;border:0;gap:3px;cursor:pointer}
.call2 .wave i{border-radius:3px}
.c2-meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:12px;color:var(--m-d)}
.c2-meta .t{color:var(--t-d);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--sans);font-size:12.5px}
.call2 .lines.c2-chat{max-height:none;overflow:visible;padding:22px;display:flex;flex-direction:column;gap:14px}
.call2 .ln{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0;border:0;max-width:88%;opacity:1;cursor:pointer;transition:opacity .35s}
.call2.playing .ln{opacity:.45}
.call2 .ln.cu{align-self:flex-end;align-items:flex-end}
.call2 .ln.on,.call2 .ln.done{opacity:1}
.call2 .ln .sp{font-size:10.5px;font-weight:700;letter-spacing:.12em;padding:0 4px}
.call2 .ln.cu .sp{color:var(--m-d)}
.call2 .bub{padding:12px 16px;border-radius:16px 16px 16px 4px;background:rgba(143,123,232,.13);border:1px solid rgba(143,123,232,.28);transition:box-shadow .35s,border-color .35s}
.call2 .ln.cu .bub{border-radius:16px 16px 4px 16px;background:var(--ink3);border-color:var(--l-d2)}
.call2 .bub p{font-size:14.5px;line-height:1.55}
.call2 .bub small{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--m-d)}
.call2 .ln.on .bub{border-color:rgba(143,123,232,.75);box-shadow:0 10px 30px -14px rgba(143,123,232,.8)}
.call2 .ln.cu.on .bub{border-color:rgba(245,114,46,.6);box-shadow:0 10px 30px -14px rgba(245,114,46,.6)}
.c2-res{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 22px 20px;border-top:1px solid var(--l-d);background:rgba(7,5,15,.55)}
.c2-res b{width:100%;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m-d);margin-bottom:2px}
.c2-res span{transition:opacity .4s}

/* ---------- engineering background cards (company) ---------- */
.proj article{background:var(--white);border-color:var(--l-d2)}
.proj article:hover{border-color:rgba(143,123,232,.5)}
.proj .vis{background:var(--bg-0);border-color:var(--l-d)}
.proj .client{font-family:var(--sans);font-weight:700;letter-spacing:.12em;font-size:11px;color:var(--org)}
.proj h3{font-size:21px}
.proj .role{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.proj .role div{border:1px solid var(--l-d);border-radius:12px;padding:12px 14px;background:rgba(143,123,232,.05)}
.proj .role b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m-d);margin-bottom:4px}
.proj .role span{font-size:14px;color:var(--t-d)}
.proj .prog b{font-family:var(--sans);font-weight:700;letter-spacing:.12em}
.proj .foot small{font-family:var(--sans);font-size:12px}
.badge{font-family:var(--sans);font-weight:700}

@media (max-width:1100px){
  .dg-head,.dg-grid{grid-template-columns:1fr 210px 1fr;column-gap:64px}
}
@media (max-width:1000px){
  .h3-top{grid-template-columns:1fr;gap:20px}
  .dg{padding:16px}
  .dg-head,.dg-grid{display:none}
  .dg-m{display:grid;gap:12px}
}
@media (max-width:920px){
  .tl2 ol{grid-template-columns:1fr;gap:0}
  .tl2 li{grid-template-columns:28px 1fr;grid-template-rows:auto;column-gap:14px;padding-bottom:26px}
  .tl2 li::before{left:9px;right:auto;top:24px;bottom:-2px;width:2px;height:auto}
  .tl2 .nd{grid-column:1;grid-row:1;align-self:start;margin-top:0}
  .tl2 .tm{grid-column:2;grid-row:1}
  .tl2 b{grid-column:2;grid-row:2;margin-top:2px}
  .tl2 .ds{grid-column:2;grid-row:3}
  .tl2 .tp{display:inline-flex;grid-column:2;grid-row:4;margin-top:8px;width:max-content;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(143,123,232,.14);color:#B5A8F5}
  .tl2 .tp.v{background:rgba(245,114,46,.14);color:var(--org)}
  .tl-br{display:none}
  .proj .role{grid-template-columns:1fr}
}
@media (max-width:600px){
  .c2-top{flex-wrap:wrap}
  .c2-link{display:none}
  .c2-p.r{margin-left:auto}
  .call2 .ln{max-width:100%}
  .c2-meta{flex-wrap:wrap;row-gap:2px}.c2-meta span:last-child{flex-basis:100%}
  .call2 .wave{gap:1px}
}

.proj .pfoot{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.proj .pfoot a{color:var(--t-d);font-weight:600}
.proj .pfoot a:hover{color:var(--org)}
.proj .pfoot small{font-size:12px;color:#8A83A8}
/* ---------- hero v3, centred layout (2026-11-05) ---------- */
.hero3 .h3-top{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:920px;margin:0 auto 44px}
.hero3 .h3-top .status{margin-bottom:22px}
.hero3 .h3-top h1{max-width:none;font-size:clamp(36px,5vw,70px);line-height:1.05}
.hero3 .h3-top .lead{margin:22px auto 0;max-width:60ch}
.hero3 .h3-top .ctas{justify-content:center;margin-top:30px}

/* ---------- demo-request band (eye-catching) ---------- */
.cta2{padding:96px 0;background:var(--bg-0)}
.cta2-card{position:relative;overflow:hidden;border-radius:30px;padding:64px 64px;display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;color:#fff;
  background:linear-gradient(125deg,#3B2D78 0%,#5B45B8 38%,#8B5FD6 62%,#F5722E 118%);box-shadow:0 60px 120px -40px rgba(91,69,184,.7),0 30px 80px -40px rgba(245,114,46,.6)}
.cta2-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 100% 100%,rgba(245,114,46,.55),transparent 60%),radial-gradient(ellipse 50% 70% at 0% 0%,rgba(255,255,255,.12),transparent 60%);pointer-events:none}
.cta2-card::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent 30%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);pointer-events:none}
.cta2-fx{position:absolute;right:-120px;top:50%;width:560px;height:560px;transform:translateY(-50%);pointer-events:none}
.cta2-fx i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);animation:ring 6s ease-out infinite}
.cta2-fx i:nth-child(2){animation-delay:2s}.cta2-fx i:nth-child(3){animation-delay:4s}
@keyframes ring{0%{transform:scale(.25);opacity:0}20%{opacity:1}100%{transform:scale(1);opacity:0}}
.cta2-l,.cta2-r{position:relative;z-index:1}
.cta2-kick{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cta2 h2{margin-top:20px;font-size:clamp(30px,3.8vw,54px);color:#fff}
.cta2 h2 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:#FFD9C4}
.cta2-l p{margin-top:16px;font-size:18px;color:rgba(255,255,255,.85);max-width:46ch}
.cta2-l ul{list-style:none;display:grid;gap:10px;margin-top:26px}
.cta2-l li{display:flex;gap:12px;align-items:center;font-size:15.5px;font-weight:500}
.cta2-l li svg{width:22px;height:22px;flex:none;padding:4px;border-radius:7px;background:rgba(255,255,255,.2)}
.cta2-r{display:grid;gap:14px;justify-items:stretch}
.cta2-tel{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;background:rgba(7,5,15,.28);border:1px solid rgba(255,255,255,.25);transition:background .2s}
.cta2-tel:hover{background:rgba(7,5,15,.4)}
.cta2-tel .ic{width:48px;height:48px;border-radius:14px;background:#fff;color:#4A3A8C;display:grid;place-items:center;flex:none;animation:tel 2.4s ease-in-out infinite}
.cta2-tel .ic svg{width:22px;height:22px}
@keyframes tel{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.cta2-tel small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.cta2-tel span:last-child{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.cta2-btn{height:56px;background:#fff;color:#2B1F5C;border:0;font-size:16px;font-weight:700;box-shadow:0 14px 30px -12px rgba(7,5,15,.5)}
.cta2-btn:hover{background:#FFF4EE;color:#2B1F5C}
.cta2-ghost{height:52px;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.cta2-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta2-mail{text-align:center;font-size:13.5px;color:rgba(255,255,255,.8)}
.cta2-mail:hover{color:#fff}

/* ---------- admin panel gallery (field page) ---------- */
.pgal{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:repeat(3,auto);gap:20px}
.pgal figure{border:1px solid var(--l-d2);border-radius:18px;overflow:hidden;background:var(--white);transition:border-color .25s,transform .35s var(--ease)}
.pgal figure:hover{border-color:rgba(143,123,232,.5);transform:translateY(-3px)}
.pgal figure.big{grid-row:1/4}
.pgal img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;cursor:zoom-in;border-bottom:1px solid var(--l-d)}
.pgal figure.big img{aspect-ratio:auto;height:calc(100% - 92px);min-height:420px}
.pgal figcaption{padding:16px 20px}
.pgal figcaption b{display:block;font-weight:700;font-size:15.5px}
.pgal figcaption span{font-size:13.5px;color:var(--m-d)}

@media (max-width:920px){
  .cta2{padding:64px 0}
  .cta2-card{grid-template-columns:1fr;padding:40px 28px;gap:32px}
  .cta2-fx{width:420px;height:420px;right:-200px;top:20%}
  .pgal{grid-template-columns:1fr}
  .pgal figure.big{grid-row:auto}
  .pgal figure.big img{height:auto;min-height:0;aspect-ratio:16/10}
}
@media (max-width:560px){
  .cta2-card{padding:32px 20px;border-radius:24px}
  .cta2-tel span:last-child{font-size:22px}
}

/* fixes 2026-11-05 */
[hidden]{display:none!important}
.link svg{width:16px;height:16px;flex:none}
.pgal{grid-template-columns:repeat(3,1fr);grid-template-rows:auto}
.pgal figure.big{grid-row:auto;grid-column:1/-1}
.pgal figure.big img{height:auto;min-height:0;aspect-ratio:2/1;object-position:top center}
@media (max-width:920px){.pgal{grid-template-columns:1fr}.pgal figure.big img{aspect-ratio:16/10}}
/* ---------- hero: rotating word, floating live cards, tighter spacing ---------- */
.hero3 .h3-top{gap:0}
.h3-stage{position:relative}
.hero3 .status .rot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:6px;white-space:nowrap}
.hero3 .status .caret{display:inline-block;width:2px;height:1.1em;margin-left:3px;background:var(--org);vertical-align:-.18em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.h3-float{position:absolute;inset:0;pointer-events:none}
.fl-card{position:absolute;width:228px;display:flex;gap:11px;align-items:center;padding:11px 14px;border-radius:14px;text-align:left;
  background:rgba(17,12,32,.88);border:1px solid var(--l-d2);box-shadow:0 22px 44px -22px rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:flt 7s ease-in-out infinite;transition:border-color .5s,box-shadow .5s}
.fl-card .fi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.fl-card .fi svg{width:18px;height:18px}
.fl-card b{display:block;font-size:12.5px;font-weight:700;line-height:1.3;color:var(--t-d)}
.fl-card small{display:block;font-size:11.5px;color:var(--m-d);line-height:1.35}
.fl-card.f .fi{background:rgba(143,123,232,.18);color:#B5A8F5}
.fl-card.v .fi{background:rgba(245,114,46,.18);color:var(--org)}
.fl-card.g .fi{background:rgba(52,211,153,.16);color:var(--ok)}
.fl-card.r .fi{background:rgba(248,113,113,.16);color:#F87171}
.fl-card.on{border-color:rgba(143,123,232,.75);box-shadow:0 22px 50px -18px rgba(143,123,232,.7)}
.fl-card.v.on{border-color:rgba(245,114,46,.7);box-shadow:0 22px 50px -18px rgba(245,114,46,.6)}
.fl-card.a{left:0;top:-6px}
.fl-card.b{right:0;top:22px;animation-delay:-2s}
.fl-card.c{left:24px;top:268px;animation-delay:-4s}
.fl-card.d{right:16px;top:300px;animation-delay:-5.5s}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:1260px){.h3-float{display:none}}
@media (prefers-reduced-motion:reduce){.fl-card{animation:none}.hero3 .status .caret{display:none}}

/* hero breathing room (2026-11-05, "too close together"): the headline sits on two lines,
   the cards keep to the four clear corners (beside the tag and first line at the top,
   beside the buttons at the bottom) and the diagram starts further down */
.hero3 .h3-top h1 em{display:block}
.hero3 .h3-top{margin-bottom:64px}
.fl-card{width:auto;max-width:300px;white-space:nowrap}
.fl-card.a{left:0;top:12px}
.fl-card.b{right:0;top:44px}
.fl-card.c{left:0;top:auto;bottom:-6px}
.fl-card.d{right:0;top:auto;bottom:-38px}
html[data-theme="light"] .fl-card.f .fi{color:#4A3A8C;background:rgba(143,123,232,.16)}
@media (min-width:561px) and (max-width:920px){.hero3 .h3-top h1{font-size:clamp(40px,6.6vw,60px)}}
@media (min-width:921px){
  .hero3{padding-top:calc(var(--nav-h) + 72px)}
  .hero3 .h3-top{margin-bottom:104px}
  .hero3 .h3-top .status{margin-bottom:30px}
  .hero3 .h3-top h1{font-size:clamp(36px,5.4vw,78px);line-height:1.04}
  .hero3 .h3-top .lead{margin-top:28px}
  .hero3 .h3-top .ctas{margin-top:38px}
}
/* ---------- review fixes (2026-11-05) ---------- */
/* F02 the 5-step Voice timeline: five columns only on wide screens */
@media (min-width:921px){.timeline.t5{grid-template-columns:repeat(5,1fr)}}
/* F05 hero tag: label and typed word in their own boxes, so the pill keeps one height on phones */
.hero3 .status .st-w{white-space:nowrap}
@media (max-width:600px){.hero3 .status{flex-wrap:wrap;justify-content:center;row-gap:2px}.hero3 .status .st-l{white-space:nowrap}.hero3 .status .st-w{flex-basis:100%;text-align:center;min-height:1.7em}.hero3 .status .rot{margin-left:0}}
/* F13 the one-column facts table on the company page: no zig-zag indent */
.thesis .facts div:nth-child(n){padding-left:0;padding-right:0;border-left:0}
/* F39 EN Voice hero card */
.vhero{max-width:480px;width:100%;justify-self:end}
@media (max-width:920px){.vhero{justify-self:start;max-width:560px}}
/* F09 note under the sample call */
.c2-note{margin-top:14px;font-size:12px;line-height:1.5;color:var(--m-d)}