:root{
  --bg:#050610;
  --bg2:#090b16;
  --card:#0c0f1b;
  --text:#f8f8fb;
  --muted:#b4b8c7;
  --line:rgba(255,255,255,.10);
  --purple:#8b5cf6;
  --purple2:#6d28d9;
  --purpleSoft:#a78bfa;
  --green:#32e38c;
  --max:1380px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 86% 8%,rgba(108,42,255,.17),transparent 29%),
    radial-gradient(circle at 2% 0%,rgba(112,69,196,.08),transparent 25%),
    var(--bg);
  line-height:1.65;
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:linear-gradient(#000,transparent 75%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
.container{width:min(92%,var(--max));margin:auto}

/* NAV */
.header{
  position:fixed;inset:0 0 auto;z-index:1000;
  background:rgba(5,6,16,.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.045);
}
.navbar{height:74px;display:flex;align-items:center;gap:40px}
.logo{font-size:1.7rem;font-weight:950;letter-spacing:-.065em;line-height:.85}
.logo span{color:var(--purple)}
.logo small{display:block;font-size:.52rem;letter-spacing:.12em;margin-top:6px}
.desktop-nav{display:flex;gap:34px;margin:auto;font-size:.86rem;font-weight:750}
.desktop-nav a{color:#f0f0f3;transition:.2s}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--purpleSoft)}
.nav-cta{border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:12px 20px;font-size:.82rem;font-weight:800;transition:.2s}
.nav-cta:hover{background:white;color:#070810}
.menu-btn{display:none;background:none;border:0;color:white;font-size:1.5rem}
.mobile-nav{display:none;flex-direction:column;padding:12px 4% 20px;border-top:1px solid var(--line)}
.mobile-nav a{padding:11px 0;color:#d3d5df}

/* TYPO */
.eyebrow{color:#a978ff;font-size:.64rem;font-weight:900;letter-spacing:.17em;margin-bottom:10px;display:block}
h1,h2,h3{letter-spacing:-.045em;line-height:1.02}
h1{font-size:clamp(3.15rem,5.2vw,5.8rem)}
h2{font-size:clamp(2.1rem,3.4vw,3.45rem)}
h3{font-size:1.32rem}
.accent{color:#9b6cff;text-shadow:0 0 35px rgba(139,92,246,.15)}
.muted{color:var(--muted)}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:49px;padding:0 22px;border-radius:6px;
  border:1px solid rgba(255,255,255,.17);
  font-weight:800;font-size:.84rem;transition:.22s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,#7c3aed,#6d28d9);border-color:#8b5cf6}
.btn.secondary{background:rgba(255,255,255,.015)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:31px}

/* HERO */
.hero{padding:116px 0 36px;min-height:660px;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:34px;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:7px 12px;
  color:#c8cbd5;font-size:.65rem;letter-spacing:.035em;
  margin-bottom:22px;background:rgba(255,255,255,.018)
}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.hero h1{font-weight:920;max-width:760px}
.hero .lead{font-size:1.02rem;color:#c0c3cf;max-width:590px;margin-top:24px;line-height:1.75}
.hero-showcase{position:relative}
.hero-showcase img{
  width:100%;height:515px;object-fit:cover;object-position:center;
  border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.5)
}
.hero-showcase:before{
  content:"";position:absolute;right:0;top:55px;width:210px;height:210px;
  background:linear-gradient(145deg,#7137ff,#2d0d9d);border-radius:50%;
  filter:blur(.2px);box-shadow:0 0 65px rgba(112,55,255,.48);z-index:-1
}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);max-width:650px;margin-top:28px}
.metric{padding-right:18px;margin-right:18px;border-right:1px solid rgba(255,255,255,.08)}
.metric:last-child{border-right:0}
.metric .label{font-size:.56rem;color:#b8bbc7}
.metric .label b{color:var(--purpleSoft);margin-right:5px}
.metric strong{display:block;font-size:1.55rem;line-height:1;margin-top:11px}
.metric span{display:block;color:#9297a6;font-size:.59rem;margin-top:8px}

/* SECTIONS */
.section{padding:84px 0}
.section-tight{padding:30px 0 78px}
.section-head-row{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}
.section-head-row p{max-width:570px;color:var(--muted)}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.project-card{
  min-height:250px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);border-radius:12px;
  background:#0b0d16;transition:.3s;box-shadow:0 18px 55px rgba(0,0,0,.25)
}
.project-card:hover{transform:translateY(-5px);border-color:rgba(167,139,250,.42)}
.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.project-card:hover img{transform:scale(1.035)}
.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.28) 58%,rgba(0,0,0,.06))}
.project-copy{position:absolute;z-index:2;left:20px;right:20px;bottom:18px}
.project-copy small{font-size:.6rem;letter-spacing:.08em}
.project-copy h3{margin-top:5px}
.project-copy p{font-size:.75rem;line-height:1.55;color:#e0e2e8;margin-top:8px}
.project-copy .link{display:inline-block;margin-top:11px;font-size:.68rem;font-weight:850}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.service{
  min-height:245px;padding:25px;border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
  transition:.3s
}
.service:hover{transform:translateY(-5px);border-color:rgba(167,139,250,.38)}
.service .icon{
  width:42px;height:42px;border-radius:8px;display:grid;place-items:center;
  color:#ba9dff;background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.24);
  margin-bottom:31px
}
.service p{font-size:.79rem;color:var(--muted);margin-top:10px}
.service .tag{display:inline-block;margin-top:18px;border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:.58rem;color:#c5c8d1}

/* OFFERS */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.offer{
  position:relative;padding:26px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.018)
}
.offer.featured{
  border-color:rgba(139,92,246,.5);
  background:radial-gradient(circle at 50% 0,rgba(139,92,246,.12),transparent 38%),rgba(255,255,255,.02)
}
.ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#7c3aed;border-radius:999px;padding:4px 10px;font-size:.5rem;font-weight:900}
.offer .price{font-size:1.8rem;font-weight:900;margin:15px 0}
.offer p{font-size:.79rem;color:var(--muted);min-height:58px}
.offer ul{list-style:none;display:grid;gap:8px;margin:20px 0 26px}
.offer li{font-size:.76rem;color:#c8cbd5}

/* CTA */
.cta{
  padding:70px 8%;text-align:center;border-radius:16px;border:1px solid var(--line);
  background:radial-gradient(circle at 50% -25%,rgba(124,58,237,.25),transparent 45%),#090b14
}
.cta p{max-width:610px;margin:18px auto 26px;color:var(--muted)}

/* INNER PAGES */
.page-hero{padding:145px 0 55px}
.page-hero p{max-width:720px;color:var(--muted);margin-top:18px}
.case-cover{margin-top:30px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.case-cover img{width:100%;max-height:650px;object-fit:cover}
.case-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:55px}
.case-layout p{color:var(--muted);margin-top:12px}
.case-layout ul{list-style:none;display:grid;gap:9px;margin-top:20px}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:42px}
.form-box{border:1px solid var(--line);border-radius:12px;padding:26px;background:rgba(255,255,255,.02)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.7rem;color:#c6c8d1}
.field input,.field textarea,.field select{background:#090b13;color:white;border:1px solid var(--line);border-radius:6px;padding:12px 13px;outline:none}
.field textarea{min-height:145px}
.notice{font-size:.65rem;color:#7e8493;margin-top:9px}
.lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lab-card{min-height:220px;border:1px solid var(--line);border-radius:12px;padding:25px;background:rgba(255,255,255,.02)}
.orb{width:90px;height:90px;border-radius:50%;margin:28px auto;background:linear-gradient(145deg,#7c3aed,#22d3ee);animation:orb 3s ease-in-out infinite}
@keyframes orb{50%{transform:translateY(-15px) rotate(12deg) scale(1.08)}}

/* CASE STUDY — fiche technique du projet */
.specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec-item{background:#0b0d16;padding:24px 22px}
.spec-item .spec-label{color:#a978ff;font-size:.62rem;font-weight:900;letter-spacing:.14em;display:block;margin-bottom:11px}
.spec-item p{color:#dcdee6;font-size:.82rem;line-height:1.55}
@media(max-width:1000px){.specs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.specs-grid{grid-template-columns:1fr}}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:42px 0 24px}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer-links{display:flex;gap:20px;color:#aeb2bf;font-size:.74rem}

/* ANIM */
.reveal{opacity:0;transform:translateY(22px);transition:.65s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1000px){
  .desktop-nav,.nav-cta{display:none}.menu-btn{display:block;margin-left:auto}
  .hero-grid{grid-template-columns:1fr}.hero-showcase img{height:auto}
  .projects-grid,.services-grid,.offers{grid-template-columns:1fr 1fr}
  .case-layout,.contact-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .hero{padding-top:115px}.hero h1{font-size:clamp(3rem,13vw,4.8rem)}
  .metrics{grid-template-columns:1fr 1fr;gap:18px}.metric{border:0}
  .projects-grid,.services-grid,.offers,.lab-grid{grid-template-columns:1fr}
  .section-head-row,.footer-row{align-items:flex-start;flex-direction:column}
  .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
  .actions{flex-direction:column}.btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}


/* V3 — richer portfolio + lab */
.lab-grid{grid-template-columns:repeat(3,1fr)}
.lab-card{
  position:relative;overflow:hidden;min-height:300px;
  background:
    radial-gradient(circle at 90% 5%,rgba(139,92,246,.11),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
}
.lab-card.wide{grid-column:span 2}
.lab-icon{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  color:#c3a9ff;background:rgba(139,92,246,.10);
  border:1px solid rgba(139,92,246,.28);font-size:1.2rem;margin-bottom:28px
}
.lab-card p{margin-top:10px}
.mini-browser{
  margin-top:25px;border:1px solid rgba(255,255,255,.12);border-radius:10px;
  background:#080a13;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.25)
}
.mini-bar{height:31px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:5px;padding:0 10px}
.mini-bar i{width:6px;height:6px;border-radius:50%;background:#505462}
.mini-screen{height:125px;padding:18px;background:radial-gradient(circle at 70% 30%,rgba(139,92,246,.18),transparent 35%)}
.mini-screen b,.mini-screen span{display:block;border-radius:999px;background:#373b49}
.mini-screen b{width:54%;height:12px;margin-top:20px;background:#9d79ff}
.mini-screen span{width:75%;height:5px;margin-top:12px}
.mini-screen span:last-child{width:48%}
.devices{height:150px;display:flex;align-items:end;justify-content:center;gap:10px;margin-top:18px}
.devices div{border:2px solid #545968;background:#0a0c15;border-radius:8px;box-shadow:0 15px 35px rgba(0,0,0,.25)}
.devices .pc{width:185px;height:112px}.devices .tab{width:82px;height:105px}.devices .phone{width:46px;height:88px}
.gauge-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.gauge{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#8b5cf6 94%,#252938 0);position:relative}
.gauge:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#0b0e18}
.gauge span{position:relative;font-weight:900}.gauge small{position:absolute;top:94px;width:110px;text-align:center;color:#8f94a3;font-size:.57rem}
.security-demo{display:grid;gap:10px;margin-top:25px}
.security-demo div{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:.74rem;color:#c9ccd5}
.security-demo b{color:#a98aff;font-size:.63rem}
.code-window{margin-top:22px;border:1px solid var(--line);border-radius:10px;background:#070912;padding:18px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem;color:#b9becb;line-height:1.9}
.code-window em{font-style:normal;color:#a98aff}.code-window strong{color:#5ee6a4}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.process-card{border-top:1px solid var(--line);padding-top:22px}
.process-card span{color:#8b5cf6;font-size:.68rem;font-weight:900}.process-card h3{margin-top:15px}.process-card p{color:var(--muted);font-size:.78rem;margin-top:9px}
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.trust-item{padding:24px;border-right:1px solid var(--line);background:rgba(255,255,255,.015)}
.trust-item:last-child{border-right:0}.trust-item strong{display:block;font-size:1.1rem}.trust-item span{color:#8f94a3;font-size:.65rem}
.project-card img{image-rendering:auto}
.case-cover img{min-height:520px}
@media(max-width:1000px){
  .lab-grid{grid-template-columns:1fr 1fr}.lab-card.wide{grid-column:span 2}
  .process-grid,.trust-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .lab-grid{grid-template-columns:1fr}.lab-card.wide{grid-column:auto}
  .process-grid,.trust-strip{grid-template-columns:1fr}.trust-item{border-right:0;border-bottom:1px solid var(--line)}
  .case-cover img{min-height:300px}
}

/* V6 — exact approved photorealistic direction */
.hero-showcase{
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:#070811;
  box-shadow:0 35px 100px rgba(0,0,0,.48);
}
.hero-showcase img{
  width:100%;
  height:520px;
  object-fit:cover;
  object-position:center;
  border-radius:20px;
}
.project-card{
  min-height:330px;
  border-color:rgba(255,255,255,.12);
}
.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:none;
}
.project-card:after{
  background:linear-gradient(180deg,rgba(3,4,10,.03) 15%,rgba(3,4,10,.16) 48%,rgba(3,4,10,.94) 100%);
}
.project-copy{
  text-shadow:0 2px 12px rgba(0,0,0,.65);
}
.case-cover{
  background:#080912;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.case-cover img{
  width:100%;
  height:min(68vh,720px);
  object-fit:cover;
  object-position:center;
}
@media(max-width:700px){
  .hero-showcase img{height:350px}
  .project-card{min-height:315px}
  .case-cover img{height:390px}
}


/* V7 — double résolution propre : CARD / FULL */
.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* La page projet ne force plus une petite image à remplir 1400–1600 px. */
.case-cover{
  width:min(1120px, calc(100% - 40px));
  margin:38px auto 0;
  border-radius:18px;
  overflow:hidden;
  background:#080912;
  border:1px solid rgba(255,255,255,.10);
}
.case-cover img{
  display:block;
  width:100%;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
}

/* Hero sans petit bouton/flèche flottante */
.hero-showcase{
  position:relative;
  overflow:visible;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-showcase img{
  width:100%;
  height:auto !important;
  max-height:none;
  object-fit:contain;
  border:0 !important;
  border-radius:0 !important;
  background:transparent;
  box-shadow:none;
}
.hero-showcase .scroll,
.hero-showcase .scroll-down,
.hero-showcase .arrow,
.hero-showcase [class*="arrow"],
.hero-showcase [class*="scroll"]{
  display:none !important;
}

/* On évite tout agrandissement agressif sur grands écrans. */
@media(min-width:1400px){
  .case-cover{width:min(1180px, calc(100% - 80px))}
}
@media(max-width:700px){
  .case-cover{width:calc(100% - 28px);margin-top:24px;border-radius:14px}
}


/* =========================================================
   V8 HERO — visuel réellement intégré au fond de la page
   ========================================================= */

.hero{
  position:relative;
  min-height:720px;
  overflow:hidden;
  isolation:isolate;
}

.hero .container{
  position:relative;
  z-index:3;
}

.hero-grid{
  display:block !important;
  position:relative;
}

.hero-grid > .reveal:first-child{
  width:min(48%, 690px);
  position:relative;
  z-index:4;
}

/* Le visuel n'est plus une "carte" : aucun cadre, aucune ombre rectangulaire. */
.hero-showcase{
  position:absolute !important;
  z-index:1;
  top:98px;
  right:-2vw;
  width:min(64vw, 1030px);
  min-height:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:none;
}

.hero-showcase::before,
.hero-showcase::after{
  display:none !important;
  content:none !important;
}

.hero-showcase img{
  display:block;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Fond lumineux local : il prolonge visuellement le violet de l'image dans la page. */
.hero::after{
  content:"";
  position:absolute;
  z-index:0;
  width:62vw;
  height:620px;
  right:-8vw;
  top:55px;
  background:
    radial-gradient(circle at 45% 35%, rgba(122,72,255,.18), transparent 38%),
    radial-gradient(circle at 80% 48%, rgba(78,36,180,.11), transparent 46%);
  filter:blur(18px);
  pointer-events:none;
}

/* Désactive absolument toute flèche ajoutée au hero par les anciennes versions. */
.hero .scroll-indicator,
.hero .scroll-down,
.hero .hero-arrow,
.hero [class*="scroll-indicator"],
.hero-showcase [class*="arrow"],
.hero-showcase [class*="scroll"]{
  display:none !important;
}

/* Les métriques restent au-dessus du visuel. */
.hero .metrics{
  position:relative;
  z-index:5;
}

/* Desktop large : le visuel déborde légèrement vers la droite,
   comme un objet posé dans la composition plutôt qu'une image encadrée. */
@media(min-width:1250px){
  .hero-showcase{
    right:-4vw;
    width:min(66vw, 1080px);
  }
}

/* Tablettes : on repasse en composition verticale mais toujours sans cadre. */
@media(max-width:1000px){
  .hero{
    min-height:auto;
    overflow:hidden;
  }
  .hero-grid{
    display:flex !important;
    flex-direction:column;
    gap:38px;
  }
  .hero-grid > .reveal:first-child{
    width:100%;
  }
  .hero-showcase{
    position:relative !important;
    top:auto;
    right:auto;
    width:112%;
    margin-left:-6%;
    margin-top:8px;
  }
}

/* ============================================================
   V9 — HERO FINAL
   Objectif : uniquement laptop + téléphone intégrés au fond.
   Aucun rectangle, aucun faux menu, aucune flèche.
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-grid {
  position: relative !important;
  display: block !important;
  min-height: 650px;
}

.hero-grid > .reveal:first-child {
  position: relative;
  z-index: 5;
  width: min(48%, 680px);
}

/* Annule TOUT ce qui donnait l'impression d'une carte/image. */
.hero-showcase,
.hero-showcase.reveal {
  position: absolute !important;
  z-index: 2 !important;
  top: 80px !important;
  right: -4.5vw !important;
  width: min(67vw, 1080px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.hero-showcase::before,
.hero-showcase::after {
  content: none !important;
  display: none !important;
}

.hero-showcase img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Prolonge la lumière violette derrière les appareils dans le vrai fond HTML. */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 66vw;
  height: 650px;
  top: 15px;
  right: -12vw;
  background:
    radial-gradient(circle at 48% 42%, rgba(130, 78, 255, .18), transparent 38%),
    radial-gradient(circle at 78% 48%, rgba(86, 40, 190, .12), transparent 48%);
  filter: blur(28px);
  pointer-events: none;
}

/* Suppression absolue de la flèche / scroll indicator des anciennes versions. */
.hero-showcase .arrow,
.hero-showcase .scroll,
.hero-showcase .scroll-down,
.hero-showcase .scroll-indicator,
.hero-showcase [class*="arrow"],
.hero-showcase [class*="scroll"],
.hero .hero-arrow,
.hero .scroll-indicator,
.hero .scroll-down {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Les cartes projets utilisent leurs miniatures. Les pages projet utilisent FULL. */
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-cover {
  width: min(1080px, calc(100% - 48px)) !important;
  margin: 38px auto 0 !important;
}

.case-cover img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Responsive */
@media (max-width: 1000px) {
  .hero-grid {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
  }

  .hero-grid > .reveal:first-child {
    width: 100%;
  }

  .hero-showcase,
  .hero-showcase.reveal {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 116% !important;
    margin: 18px 0 0 -8% !important;
  }
}

@media (max-width: 700px) {
  .hero-showcase,
  .hero-showcase.reveal {
    width: 128% !important;
    margin-left: -14% !important;
  }

  .case-cover {
    width: calc(100% - 28px) !important;
  }
}

/* =========================================================
   V14 — premium interaction & commercial polish
   ========================================================= */
.header{transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.header.scrolled{background:rgba(5,6,16,.92);border-bottom-color:rgba(255,255,255,.09);box-shadow:0 12px 40px rgba(0,0,0,.22)}
.navbar{height:78px}
.logo{display:inline-flex;align-items:center;gap:10px;letter-spacing:0}
.brand-symbol{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(167,139,250,.34);border-radius:10px;background:linear-gradient(145deg,rgba(139,92,246,.18),rgba(255,255,255,.02));font-size:.95rem;letter-spacing:-.04em;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(109,40,217,.14)}
.brand-word{font-size:1.12rem;font-weight:950;letter-spacing:-.05em;line-height:.8}.brand-word>span{color:var(--purple)}.brand-word small{display:block;font-size:.44rem;letter-spacing:.15em;margin-top:7px;color:#c5c8d3}
.desktop-nav a{position:relative;padding:29px 0}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:17px;height:1px;background:var(--purpleSoft);transition:right .25s}.desktop-nav a:hover:after,.desktop-nav a.active:after{right:0}
.nav-cta{background:rgba(255,255,255,.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.nav-cta span{color:var(--purpleSoft)}

.btn{position:relative;overflow:hidden}.btn:before{content:"";position:absolute;inset:-2px;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.14),transparent 70%);transform:translateX(-120%);transition:transform .6s}.btn:hover:before{transform:translateX(120%)}
.btn.primary{box-shadow:0 12px 36px rgba(109,40,217,.24)}.btn.primary:hover{box-shadow:0 18px 44px rgba(109,40,217,.36)}

.hero{padding-top:126px}.hero-grid{min-height:660px}.hero-copy{padding-top:26px}.hero .lead{font-size:1.06rem}.hero-showcase{top:54px !important;right:-5vw !important;width:min(69vw,1120px)!important;animation:heroFloat 7s ease-in-out infinite}.hero-showcase img{filter:drop-shadow(0 40px 45px rgba(0,0,0,.34))!important}
@keyframes heroFloat{50%{transform:translateY(-7px)}}
.hero-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.hero-proof span{padding:8px 11px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.018);color:#b8bcc9;font-size:.61rem;letter-spacing:.015em}
.metrics{display:none!important}

.section-head-row{margin-bottom:36px}.section-head-row>p{font-size:.88rem;line-height:1.8}
.premium-projects{gap:18px}.project-card{min-height:390px;border-radius:16px;isolation:isolate}.project-card img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s}.project-card:hover img{transform:scale(1.06);filter:brightness(.82)}.project-card:after{transition:opacity .35s}.project-card:hover{transform:translateY(-7px);box-shadow:0 30px 70px rgba(0,0,0,.38)}
.project-overlay{position:absolute;z-index:3;left:18px;right:18px;top:18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.project-index,.project-open{font-size:.58rem;letter-spacing:.08em;font-weight:850;padding:7px 9px;border-radius:999px;background:rgba(5,6,16,.62);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px)}.project-open{opacity:0;transform:translateY(-5px);transition:.3s}.project-card:hover .project-open{opacity:1;transform:none}.project-copy{bottom:21px}.project-copy .link{color:#cdbdff;transform:translateY(4px);transition:.3s}.project-card:hover .project-copy .link{transform:none}
.center-action{text-align:center;margin-top:28px}

.service{position:relative;overflow:hidden;min-height:265px}.service:after{content:"";position:absolute;width:130px;height:130px;right:-70px;top:-70px;border-radius:50%;background:rgba(139,92,246,.09);filter:blur(2px);transition:.35s}.service:hover:after{transform:scale(1.45)}.service .icon{font-size:1.05rem}

.before-after{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:430px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#080a13;box-shadow:0 30px 80px rgba(0,0,0,.28)}.compare-panel{padding:24px;position:relative}.compare-before{background:#eef0f4;color:#16181e}.compare-after{background:radial-gradient(circle at 80% 20%,rgba(139,92,246,.18),transparent 35%),#070811}.compare-label{font-size:.58rem;font-weight:900;letter-spacing:.12em;opacity:.65}.compare-divider{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.3);z-index:4}.compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0d0f18;border:1px solid rgba(255,255,255,.18);color:white}.legacy-site,.modern-site{height:310px;margin-top:30px;border-radius:12px;overflow:hidden}.legacy-site{padding:18px;background:white;border:1px solid #d9dce4}.legacy-nav{height:18px;background:#dedfe5;margin-bottom:42px}.legacy-title{width:64%;height:34px;background:#262a33}.legacy-copy{width:82%;height:9px;background:#c7cad2;margin-top:18px}.legacy-copy.short{width:55%;margin-top:8px}.legacy-button{width:120px;height:34px;background:#555a66;margin-top:28px}.legacy-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:42px}.legacy-boxes i{height:65px;background:#e5e6eb}.modern-site{position:relative;padding:28px;background:linear-gradient(135deg,#080912,#0c0b18);border:1px solid rgba(255,255,255,.08)}.modern-kicker{width:82px;height:7px;background:#8b5cf6}.modern-title{width:58%;height:56px;margin-top:24px;background:linear-gradient(90deg,#fff 0 72%,#9b6cff 72%)}.modern-copy{width:42%;height:8px;background:#6d7180;margin-top:22px}.modern-button{width:132px;height:38px;margin-top:26px;background:#7c3aed;border-radius:5px}.modern-visual{position:absolute;right:26px;bottom:22px;width:43%;height:200px;border-radius:12px;background:radial-gradient(circle at 40% 35%,#6e3eff,transparent 28%),linear-gradient(145deg,#181526,#080912);border:1px solid rgba(255,255,255,.08);box-shadow:0 28px 55px rgba(0,0,0,.35)}.modern-visual span{position:absolute;inset:35px 30px;border:2px solid rgba(255,255,255,.18);border-radius:10px;transform:perspective(300px) rotateY(-10deg)}

.process-line{position:relative;gap:28px}.process-line:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#8b5cf6 0 0,rgba(255,255,255,.1) 0);transition:background 1.4s ease}.process-line.visible:before{background:linear-gradient(90deg,#8b5cf6 0 100%,rgba(255,255,255,.1) 100%)}.process-card{position:relative;padding-top:28px}.process-card:before{content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:#7c3aed;box-shadow:0 0 18px rgba(139,92,246,.7)}

.premium-offers{align-items:stretch}.offer{display:flex;flex-direction:column;min-height:430px;padding:30px;border-radius:16px;transition:.3s}.offer:hover{transform:translateY(-5px);border-color:rgba(167,139,250,.32)}.offer.featured{transform:translateY(-10px);box-shadow:0 28px 75px rgba(65,29,145,.2)}.offer.featured:hover{transform:translateY(-15px)}.offer-kicker{font-size:.55rem;letter-spacing:.13em;color:#9a9ead;font-weight:850}.offer .btn{margin-top:auto}.offer li{padding:2px 0}.ribbon{top:17px;left:auto;right:18px;transform:none}
.feature-chips{display:flex;flex-wrap:wrap;gap:12px}.feature-chips span,.tech-pills span{padding:12px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.018);font-size:.72rem;color:#c8cbd5;transition:.25s}.feature-chips span:hover,.tech-pills span:hover{border-color:rgba(167,139,250,.38);transform:translateY(-2px)}

.floating-cta{position:fixed;right:24px;bottom:22px;z-index:900;display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:999px;background:rgba(10,11,20,.82);border:1px solid rgba(167,139,250,.26);box-shadow:0 18px 55px rgba(0,0,0,.35);backdrop-filter:blur(16px);font-size:.7rem;font-weight:850;transition:.3s}.floating-cta span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#7c3aed}.floating-cta:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.55)}

/* Project case studies */
.case-hero{padding:150px 0 30px}.case-intro{max-width:920px}.case-intro>p{max-width:720px;color:var(--muted);font-size:1rem;margin-top:22px}.case-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;color:#9ba0ae;font-size:.64rem}.case-meta b{color:#d7d9e0;margin-right:7px;font-size:.56rem;letter-spacing:.08em}.case-cover-premium{width:100%;max-width:none;margin-top:42px;border-radius:20px;background:linear-gradient(180deg,#0a0c14,#06070d);padding:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 100px rgba(0,0,0,.34)}.case-cover-premium img{border-radius:13px;width:100%;height:auto;object-fit:contain}.case-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden}.case-summary-grid>div{padding:24px;border-right:1px solid var(--line);background:rgba(255,255,255,.014)}.case-summary-grid>div:last-child{border-right:0}.case-summary-grid span{display:block;color:#8b5cf6;font-size:.6rem;font-weight:900}.case-summary-grid small{display:block;color:#808594;font-size:.52rem;letter-spacing:.12em;margin-top:18px}.case-summary-grid strong{display:block;font-size:.84rem;line-height:1.55;margin-top:7px}.narrative-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:85px}.case-aside{position:sticky;top:125px;align-self:start}.case-aside p{color:var(--muted);margin-top:20px}.case-chapters{display:grid;gap:0}.case-chapter{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:30px 0;border-top:1px solid var(--line)}.case-chapter:last-child{border-bottom:1px solid var(--line)}.chapter-number{color:#8b5cf6;font-size:.66rem;font-weight:900}.case-chapter p{color:var(--muted);margin-top:12px}.feature-stage{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;padding:42px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 0 0,rgba(139,92,246,.1),transparent 36%),rgba(255,255,255,.012)}.feature-stage p{color:var(--muted);margin-top:16px}.feature-stage ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}.feature-stage li{padding:12px;border-bottom:1px solid var(--line);font-size:.78rem;color:#cfd1d9}.technical-note{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:center}.tech-pills{display:flex;flex-wrap:wrap;gap:10px}.case-actions{justify-content:center}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}.projects-grid .reveal:nth-child(2),.services-grid .reveal:nth-child(2),.process-grid .reveal:nth-child(2){transition-delay:.08s}.projects-grid .reveal:nth-child(3),.services-grid .reveal:nth-child(3),.process-grid .reveal:nth-child(3){transition-delay:.16s}.services-grid .reveal:nth-child(4),.process-grid .reveal:nth-child(4){transition-delay:.24s}

@media(max-width:1000px){
  .hero-showcase{animation:none}.before-after{grid-template-columns:1fr}.compare-divider{display:none}.narrative-grid,.feature-stage,.technical-note{grid-template-columns:1fr;gap:34px}.case-aside{position:static}.case-summary-grid{grid-template-columns:1fr 1fr}.case-summary-grid>div:nth-child(2){border-right:0}.case-summary-grid>div{border-bottom:1px solid var(--line)}.case-summary-grid>div:nth-last-child(-n+2){border-bottom:0}.premium-offers .offer.featured{transform:none}.premium-offers .offer.featured:hover{transform:translateY(-5px)}
}
@media(max-width:700px){
  .navbar{height:70px}.brand-symbol{width:31px;height:31px}.brand-word{font-size:1rem}.hero{padding-top:108px}.hero-grid{min-height:auto!important}.hero-copy{padding-top:0}.hero-showcase{width:124%!important;margin-left:-12%!important;margin-top:8px!important}.hero-proof{gap:7px}.hero-proof span{font-size:.56rem;padding:7px 9px}.project-card{min-height:350px}.project-open{opacity:1;transform:none}.before-after{min-height:0}.compare-panel{padding:18px}.legacy-site,.modern-site{height:270px}.modern-visual{width:46%;height:160px;right:17px}.case-hero{padding-top:118px}.case-intro h1{font-size:clamp(2.7rem,12vw,4rem)}.case-meta{display:grid;gap:8px}.case-cover-premium{width:100%;padding:6px;margin-top:28px;border-radius:14px}.case-cover-premium img{border-radius:9px}.case-summary-grid{grid-template-columns:1fr}.case-summary-grid>div{border-right:0!important;border-bottom:1px solid var(--line)!important}.case-summary-grid>div:last-child{border-bottom:0!important}.case-chapter{grid-template-columns:40px 1fr}.feature-stage{padding:24px}.feature-stage ul{grid-template-columns:1fr}.floating-cta{left:14px;right:14px;bottom:12px;justify-content:center;padding:10px 13px}.footer-row{padding-bottom:72px}.ribbon{position:static;display:inline-block;margin-bottom:12px}.offer{min-height:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important;transition:none!important}.hero-showcase{animation:none!important}.btn,.project-card,.service,.offer,.floating-cta{transition:none!important}}

/* V15 — premium motion system & richer interface */
:root{--mx:50%;--my:50%;--scroll-progress:0%}html{scroll-behavior:smooth}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(124,58,237,.055),transparent 62%)}body:after{content:"";position:fixed;left:0;top:0;width:var(--scroll-progress);height:2px;background:linear-gradient(90deg,#6d28d9,#a78bfa);z-index:9999;box-shadow:0 0 14px rgba(139,92,246,.45)}.header{transition:background .35s,border-color .35s,box-shadow .35s}.header.scrolled{box-shadow:0 12px 45px rgba(0,0,0,.18)}.desktop-nav a{position:relative}.desktop-nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:-9px;height:1px;background:#a78bfa;transition:.3s}.desktop-nav a:hover:after,.desktop-nav a.active:after{left:0;right:0}.brand-symbol{position:relative;overflow:hidden}.brand-symbol:after{content:"";position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4),transparent 65%);transform:translateX(-80%) rotate(12deg);transition:.7s}.logo:hover .brand-symbol:after{transform:translateX(80%) rotate(12deg)}.btn,.nav-cta{position:relative;overflow:hidden}.btn:before,.nav-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.12),transparent 65%);transform:translateX(-120%);transition:.65s}.btn:hover:before,.nav-cta:hover:before{transform:translateX(120%)}.hero-copy h1 .accent{text-shadow:0 0 34px rgba(139,92,246,.18)}.hero-showcase{will-change:transform}.project-card{transform-style:preserve-3d;will-change:transform}.project-card:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(380px circle at var(--card-x,50%) var(--card-y,50%),rgba(167,139,250,.14),transparent 55%);opacity:0;transition:.35s}.project-card:hover:before{opacity:1}.service,.offer,.experience-card{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s}.service:hover,.experience-card:hover{transform:translateY(-6px);border-color:rgba(167,139,250,.28);box-shadow:0 24px 70px rgba(0,0,0,.22)}.process-card{transition:.4s}.process-card:hover{transform:translateY(-5px);border-color:rgba(167,139,250,.28);background:rgba(139,92,246,.035)}.feature-chips span{transition:.3s}.feature-chips span:hover{transform:translateY(-3px);border-color:rgba(167,139,250,.4);background:rgba(139,92,246,.07);color:#fff}.experience-section{overflow:hidden}.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.experience-card{position:relative;min-height:330px;padding:26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));overflow:hidden}.experience-no{font-size:.58rem;color:#8b5cf6;font-weight:900}.experience-card h3{margin-top:25px}.experience-card p{color:var(--muted);font-size:.78rem;line-height:1.7;margin-top:10px}.experience-demo{height:145px;margin-top:22px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#080a12;position:relative;overflow:hidden}.demo-cursor:before{content:"";position:absolute;width:62px;height:62px;border:1px solid rgba(167,139,250,.35);border-radius:50%;left:18%;top:22%;animation:dc 5s ease-in-out infinite}.demo-cursor i{position:absolute;width:88px;height:42px;border-radius:8px;background:#8b5cf6;right:14%;bottom:18%;box-shadow:0 0 28px rgba(139,92,246,.25)}.demo-cursor b{position:absolute;width:7px;height:7px;border-radius:50%;background:white;left:38%;top:40%;box-shadow:0 0 0 6px rgba(255,255,255,.08);animation:dd 5s ease-in-out infinite}.demo-type{display:flex;flex-direction:column;justify-content:center;padding:28px;gap:12px}.demo-type i{display:block;height:8px;border-radius:9px;background:linear-gradient(90deg,#a78bfa,#3b276d);transform-origin:left;animation:dl 4.2s ease-in-out infinite}.demo-type i:nth-child(2){width:78%;animation-delay:.2s}.demo-type i:nth-child(3){width:52%;animation-delay:.4s}.demo-depth i{position:absolute;width:54%;height:60%;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(255,255,255,.015));left:23%;top:20%;animation:dep 5s ease-in-out infinite}.demo-depth i:nth-child(2){transform:translate(-18px,12px);opacity:.55}.demo-depth i:nth-child(3){transform:translate(18px,-12px);opacity:.3}@keyframes dc{50%{transform:translate(115px,42px)}}@keyframes dd{50%{transform:translate(115px,42px)}}@keyframes dl{0%,100%{transform:scaleX(.55);opacity:.45}50%{transform:scaleX(1);opacity:1}}@keyframes dep{50%{translate:0 -7px;rotate:.7deg}}.marquee-section{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.marquee-track{display:flex;width:max-content;align-items:center;gap:26px;animation:mq 30s linear infinite;color:#8e93a2}.marquee-track span{font-size:.7rem;letter-spacing:.16em;font-weight:850}.marquee-track i{font-style:normal;color:#7c3aed;font-size:.55rem}@keyframes mq{to{transform:translateX(-50%)}}.value-stage{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:60px;min-height:430px;padding:55px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 78% 45%,rgba(124,58,237,.1),transparent 28%),rgba(255,255,255,.01);overflow:hidden}.value-copy p{max-width:610px;color:var(--muted);margin-top:18px}.text-link{display:inline-flex;gap:9px;margin-top:24px;font-size:.72rem;font-weight:850;color:#c4b5fd}.value-orbit{height:300px;position:relative;display:grid;place-items:center}.orbit-core{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:#0a0b13;border:1px solid rgba(167,139,250,.35);box-shadow:0 0 60px rgba(124,58,237,.2)}.orbit-core span{font-size:1.7rem;font-weight:950;color:#a78bfa}.orbit{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:flex-start;justify-content:center;animation:orb 16s linear infinite}.orbit i{font-style:normal;font-size:.55rem;background:#080912;border:1px solid var(--line);border-radius:999px;padding:7px 10px;transform:translateY(-50%)}.orbit-a{width:170px;height:170px}.orbit-b{width:230px;height:230px;animation-duration:23s;animation-direction:reverse}.orbit-c{width:290px;height:290px;animation-duration:31s}@keyframes orb{to{transform:rotate(360deg)}}.case-cover-premium{overflow:hidden}.case-cover-premium img{transition:transform .8s,filter .5s}.case-cover-premium:hover img{transform:scale(1.012);filter:brightness(1.04)}.case-chapter{transition:.35s}.case-chapter:hover{padding-left:10px;background:linear-gradient(90deg,rgba(139,92,246,.035),transparent)}@media(max-width:900px){.experience-grid{grid-template-columns:1fr}.value-stage{grid-template-columns:1fr;padding:34px}}@media(max-width:700px){body:before{display:none}.value-stage{padding:25px}.value-orbit{transform:scale(.82);margin:-20px 0}.marquee-track{animation-duration:22s}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track,.orbit,.demo-cursor:before,.demo-cursor b,.demo-type i,.demo-depth i{animation:none!important}body:before{display:none}}


/* ==========================================================
   V16 — Cinematic homepage / premium visual expansion
   ========================================================== */
.js .home-page.intro-lock{overflow:hidden}
.cinematic-intro{position:fixed;inset:0;z-index:20000;background:#04050a;color:#fff;display:grid;place-items:center;overflow:hidden;transition:visibility 0s 2.65s}
.cinematic-intro.is-done{visibility:hidden;pointer-events:none}
.intro-noise{position:absolute;inset:0;opacity:.16;background-image:radial-gradient(rgba(255,255,255,.28) .55px,transparent .55px);background-size:5px 5px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.intro-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(167,139,250,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.045) 1px,transparent 1px);background-size:70px 70px;transform:perspective(650px) rotateX(63deg) translateY(33%);transform-origin:center bottom;opacity:.55}
.intro-beam{position:absolute;width:48vw;height:48vw;border-radius:50%;filter:blur(100px);opacity:.2}
.intro-beam-a{background:#5b21b6;left:-20%;top:-35%;animation:introBeamA 2.2s ease-out both}.intro-beam-b{background:#312e81;right:-24%;bottom:-45%;animation:introBeamB 2.3s ease-out both}
.intro-stage{position:relative;width:min(820px,84vw);display:grid;justify-items:center;text-align:center;z-index:3}
.intro-mark{width:70px;height:70px;border:1px solid rgba(167,139,250,.35);border-radius:18px;display:grid;place-items:center;box-shadow:0 0 80px rgba(124,58,237,.18);opacity:0;transform:scale(.7) rotate(-12deg);animation:introMark .7s .12s cubic-bezier(.2,.8,.2,1) forwards}
.intro-mark span{font-size:2rem;font-weight:950;color:#a78bfa}.intro-label{font-size:.62rem;letter-spacing:.28em;color:#8e93a2;margin-top:22px;opacity:0;animation:introFade .45s .45s forwards}
.intro-title{margin-top:28px;display:grid;overflow:hidden}.intro-title span{font-size:clamp(2.6rem,7vw,6.7rem);line-height:.88;letter-spacing:-.065em;font-weight:950;transform:translateY(115%);animation:introTitle .72s cubic-bezier(.16,1,.3,1) forwards}.intro-title span:first-child{color:#f4f1ff;animation-delay:.52s}.intro-title span:last-child{color:#8b5cf6;animation-delay:.68s}
.intro-loader{width:min(460px,70vw);height:1px;background:rgba(255,255,255,.08);margin-top:36px;overflow:hidden;opacity:0;animation:introFade .35s .75s forwards}.intro-loader i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#6d28d9,#c4b5fd);transform-origin:left;animation:introLoad 1.45s .8s cubic-bezier(.2,.8,.2,1) forwards}
.intro-meta{width:min(460px,70vw);display:flex;justify-content:space-between;margin-top:12px;font-size:.52rem;letter-spacing:.16em;color:#666d7f;opacity:0;animation:introFade .35s .8s forwards}.intro-percent{color:#c4b5fd;min-width:26px}
.intro-curtain{position:absolute;top:0;bottom:0;width:51%;background:#04050a;z-index:5;transform:translateX(0);animation-duration:.9s;animation-delay:1.85s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.76,0,.24,1)}.curtain-left{left:0;animation-name:curtainLeft}.curtain-right{right:0;animation-name:curtainRight}
@keyframes introMark{to{opacity:1;transform:scale(1) rotate(0)}}@keyframes introFade{to{opacity:1}}@keyframes introTitle{to{transform:translateY(0)}}@keyframes introLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes curtainLeft{to{transform:translateX(-102%)}}@keyframes curtainRight{to{transform:translateX(102%)}}@keyframes introBeamA{from{transform:translate(-20%,-10%) scale(.6)}to{transform:translate(25%,20%) scale(1)}}@keyframes introBeamB{from{transform:translate(15%,20%) scale(.55)}to{transform:translate(-20%,-5%) scale(1)}}

.cinematic-hero{position:relative;overflow:hidden;isolation:isolate}
.hero-ambient{position:absolute;inset:0;pointer-events:none;z-index:-1}.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at 66% 48%,#000 0,transparent 68%);opacity:.36}
.ambient-ring{position:absolute;border:1px solid rgba(139,92,246,.12);border-radius:50%;animation:ringFloat 12s ease-in-out infinite}.ring-one{width:560px;height:560px;right:3%;top:7%}.ring-two{width:760px;height:760px;right:-12%;top:-4%;animation-delay:-4s}
.ambient-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#a78bfa;box-shadow:0 0 20px #8b5cf6}.dot-one{right:25%;top:23%;animation:dotDrift 8s ease-in-out infinite}.dot-two{right:7%;bottom:25%;animation:dotDrift 10s -3s ease-in-out infinite}
@keyframes ringFloat{50%{transform:translateY(-16px) scale(1.025);opacity:.58}}@keyframes dotDrift{50%{transform:translate(25px,-20px);opacity:.35}}
.hero-title-cinematic{overflow:visible}.hero-line{display:block;width:max-content;max-width:100%}.hero-line.accent{position:relative}.hero-line.accent:after{content:"";position:absolute;left:0;right:0;bottom:.03em;height:1px;background:linear-gradient(90deg,transparent,#7c3aed 25%,#c4b5fd 70%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .9s 3.05s}.intro-complete .hero-line.accent:after{transform:scaleX(1)}
.hero-stagger,.hero-device-enter{opacity:0}.intro-complete .hero-stagger{animation:heroStagger .8s cubic-bezier(.16,1,.3,1) forwards}.intro-complete .stagger-1{animation-delay:.12s}.intro-complete .stagger-2{animation-delay:.2s}.intro-complete .stagger-3{animation-delay:.28s}.intro-complete .stagger-4{animation-delay:.36s}.intro-complete .stagger-5{animation-delay:.46s}.intro-complete .stagger-6{animation-delay:.56s}.intro-complete .stagger-7{animation-delay:.66s}
.intro-complete .hero-device-enter{animation:deviceEntrance 1.25s .22s cubic-bezier(.16,1,.3,1) forwards}
@keyframes heroStagger{from{opacity:0;transform:translateY(32px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes deviceEntrance{from{opacity:0;transform:translate3d(80px,20px,0) rotateY(-8deg) scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hero-scroll-cue{position:absolute;left:26px;bottom:44px;display:flex;align-items:center;gap:12px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.48rem;letter-spacing:.24em;color:#656b79;z-index:4}.hero-scroll-cue i{display:block;width:1px;height:50px;background:linear-gradient(#8b5cf6,transparent);animation:scrollCue 1.8s ease-in-out infinite}@keyframes scrollCue{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.3}50%{transform:scaleY(1);opacity:1}}

.sector-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.sector-card{min-height:245px;border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;justify-content:space-between;align-items:flex-end;position:relative;overflow:hidden;background:#080a10;transition:.5s cubic-bezier(.2,.7,.2,1)}.sector-card:before{content:"";position:absolute;inset:0;opacity:.75;transition:.5s}.sector-food:before{background:radial-gradient(circle at 70% 20%,rgba(161,44,31,.24),transparent 40%),linear-gradient(135deg,transparent,rgba(92,20,10,.15))}.sector-craft:before{background:radial-gradient(circle at 75% 15%,rgba(217,119,6,.15),transparent 38%),linear-gradient(135deg,transparent,rgba(120,78,24,.08))}.sector-shop:before{background:radial-gradient(circle at 75% 15%,rgba(37,99,235,.13),transparent 38%),linear-gradient(135deg,transparent,rgba(30,58,138,.08))}.sector-studio:before{background:radial-gradient(circle at 75% 15%,rgba(139,92,246,.22),transparent 40%),linear-gradient(135deg,transparent,rgba(76,29,149,.09))}.sector-card:after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.035);border-radius:12px;transition:.5s}.sector-card:hover{transform:translateY(-7px);border-color:rgba(167,139,250,.23)}.sector-card:hover:after{inset:12px;border-color:rgba(167,139,250,.13)}.sector-card>*{position:relative;z-index:2}.sector-num{position:absolute;top:26px;left:28px;font-size:.54rem;color:#696f7e}.sector-card small{font-size:.55rem;letter-spacing:.16em;color:#8f95a3}.sector-card h3{font-size:clamp(1.2rem,2vw,2rem);max-width:440px;margin-top:9px;line-height:1.04}.sector-card>i{font-style:normal;width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:50%;display:grid;place-items:center;color:#c4b5fd;transition:.35s}.sector-card:hover>i{transform:rotate(45deg);background:#8b5cf6;color:white;border-color:#8b5cf6}

.device-lab{min-height:570px;border:1px solid var(--line);border-radius:24px;padding:55px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;overflow:hidden;position:relative;background:radial-gradient(circle at 78% 46%,rgba(109,40,217,.17),transparent 34%),linear-gradient(135deg,#070910,#090b12)}.device-copy{position:relative;z-index:3}.device-copy p{color:var(--muted);max-width:520px;margin-top:18px}.device-tabs{display:flex;gap:8px;margin-top:28px}.device-tabs span{padding:8px 13px;border:1px solid var(--line);border-radius:999px;font-size:.55rem;color:#777e8d}.device-tabs .active{color:#fff;border-color:rgba(167,139,250,.35);background:rgba(139,92,246,.1)}.device-stage{position:relative;height:420px}.device-orbit-glow{position:absolute;width:420px;height:420px;border-radius:50%;right:7%;top:1%;background:radial-gradient(circle,rgba(124,58,237,.28),transparent 66%);filter:blur(15px);animation:deviceGlow 5s ease-in-out infinite}@keyframes deviceGlow{50%{transform:scale(1.08);opacity:.6}}
.mini-laptop{position:absolute;width:72%;right:8%;top:13%;transform:perspective(900px) rotateY(-8deg) rotateX(2deg);animation:laptopFloat 6s ease-in-out infinite}.mini-screen{aspect-ratio:16/10;background:#090b13;border:7px solid #20232b;border-radius:16px 16px 7px 7px;padding:26px;box-shadow:0 35px 70px rgba(0,0,0,.45),0 0 45px rgba(124,58,237,.11)}.mini-base{height:12px;background:linear-gradient(#6a6f78,#2d3139);border-radius:0 0 40px 40px;transform:perspective(100px) rotateX(40deg);margin:-1px -7% 0}.mini-nav{width:34%;height:6px;border-radius:5px;background:rgba(255,255,255,.15);margin-bottom:38px}.mini-copy-line{height:14px;width:62%;border-radius:8px;background:#ebe7ff;margin-bottom:9px}.mini-copy-line.wide{width:78%;height:23px;background:linear-gradient(90deg,#fff,#9b7cf4)}.mini-cta{width:100px;height:28px;border-radius:5px;background:#7c3aed;margin-top:20px}.mini-ui-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:38px}.mini-ui-grid i{height:62px;border-radius:8px;background:linear-gradient(135deg,rgba(139,92,246,.23),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.07)}
.mini-phone{position:absolute;width:24%;right:1%;bottom:5%;padding:5px;border-radius:25px;background:#20232b;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:phoneFloat 5s -1.2s ease-in-out infinite}.mini-phone-screen{aspect-ratio:9/18.5;background:#090a10;border-radius:21px;padding:23px 11px 12px;position:relative;overflow:hidden}.mini-phone-screen b{position:absolute;top:7px;left:34%;width:32%;height:7px;border-radius:10px;background:#020205}.mini-mobile-title{height:11px;width:76%;background:#ede9fe;border-radius:8px;margin:34px 0 18px}.mini-mobile-card{height:90px;border-radius:9px;background:linear-gradient(140deg,rgba(139,92,246,.5),rgba(23,20,44,.8));border:1px solid rgba(167,139,250,.2)}.mini-mobile-button{height:25px;margin-top:18px;border-radius:6px;background:#7c3aed}
@keyframes laptopFloat{50%{transform:perspective(900px) rotateY(-5deg) rotateX(1deg) translateY(-10px)}}@keyframes phoneFloat{50%{transform:translateY(-13px) rotate(1deg)}}

.manifesto{min-height:520px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:80px 1fr 330px;align-items:center;gap:35px;padding:60px 0;position:relative}.manifesto-side{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.5rem;letter-spacing:.2em;color:#5f6572}.manifesto-big{font-size:clamp(3.1rem,7vw,7rem);font-weight:950;letter-spacing:-.075em;line-height:.84;margin-top:35px}.manifesto-big span{color:#8b5cf6}.manifesto-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:45px}.manifesto-bottom>p{color:var(--muted);max-width:520px}.manifesto-points{display:grid;grid-template-columns:1fr 1fr;gap:13px;font-size:.54rem;letter-spacing:.12em;color:#8c92a1}.manifesto-sphere{width:280px;height:280px;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,rgba(167,139,250,.18),rgba(10,11,18,.4) 40%,#06070b 68%);box-shadow:inset -24px -28px 55px rgba(0,0,0,.75),0 0 80px rgba(109,40,217,.13);animation:sphereFloat 7s ease-in-out infinite}.manifesto-sphere:before{content:"";position:absolute;inset:-18px;border:1px solid rgba(167,139,250,.12);border-radius:50%;animation:sphereRing 11s linear infinite}.manifesto-sphere i{position:absolute;inset:18%;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:rotateX(65deg)}.manifesto-sphere i:nth-child(2){transform:rotateY(65deg)}.manifesto-sphere i:nth-child(3){transform:rotate(45deg) scale(.7)}.manifesto-sphere b{font-size:4rem;color:#a78bfa;text-shadow:0 0 30px rgba(139,92,246,.3)}@keyframes sphereFloat{50%{transform:translateY(-12px) rotate(2deg)}}@keyframes sphereRing{to{transform:rotate(360deg)}}

.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);transition:background .3s}.faq-list details:hover{background:rgba(139,92,246,.025)}.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:55px 1fr 32px;align-items:center;min-height:82px;font-size:clamp(.95rem,1.5vw,1.25rem);font-weight:750}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:.52rem;color:#7c3aed}.faq-list summary i{font-style:normal;font-size:1.25rem;color:#8b91a0;transition:.3s}.faq-list details[open] summary i{transform:rotate(45deg);color:#c4b5fd}.faq-list details p{color:var(--muted);max-width:780px;padding:0 32px 28px 55px;line-height:1.75}

.section-head-row h2,.cta h2{position:relative}.section-head-row.reveal.visible h2,.cta.reveal.visible h2{animation:headingFocus .85s cubic-bezier(.16,1,.3,1) both}@keyframes headingFocus{from{filter:blur(7px);letter-spacing:-.02em;opacity:.2}to{filter:blur(0);opacity:1}}
.reveal.visible{transition-duration:.8s}
.project-card img{transition:transform .85s cubic-bezier(.16,1,.3,1),filter .5s}.project-card:hover img{transform:scale(1.045)}
.cta{position:relative;overflow:hidden}.cta:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-60px;top:-100px;border:1px solid rgba(167,139,250,.12);box-shadow:0 0 70px rgba(124,58,237,.1);animation:ctaOrbit 8s ease-in-out infinite}@keyframes ctaOrbit{50%{transform:translate(-25px,22px) scale(1.12)}}

@media(max-width:1100px){.manifesto{grid-template-columns:50px 1fr 250px}.manifesto-sphere{width:230px;height:230px}.device-lab{grid-template-columns:1fr;padding:42px}.device-stage{margin-top:15px}}
@media(max-width:850px){.sector-grid{grid-template-columns:1fr}.manifesto{grid-template-columns:1fr}.manifesto-side{display:none}.manifesto-sphere{margin:0 auto}.manifesto-bottom{grid-template-columns:1fr}.device-lab{padding:32px}.device-stage{height:350px}.mini-laptop{width:78%;right:12%}.mini-phone{width:25%}.hero-scroll-cue{display:none}}
@media(max-width:620px){.cinematic-intro .intro-title span{font-size:clamp(2.7rem,15vw,4.4rem)}.intro-stage{width:90vw}.intro-grid{background-size:42px 42px}.hero-line{width:auto}.sector-card{min-height:210px;padding:24px}.device-lab{padding:25px;min-height:620px}.device-stage{height:315px;margin-top:25px}.mini-laptop{width:93%;right:6%;top:12%}.mini-screen{padding:17px}.mini-phone{width:30%;right:-3%}.manifesto{padding:35px 0}.manifesto-big{font-size:clamp(3.2rem,16vw,5rem)}.manifesto-sphere{width:205px;height:205px}.faq-list summary{grid-template-columns:38px 1fr 25px;min-height:74px;font-size:.95rem}.faq-list details p{padding-left:38px;padding-right:10px}.hero-grid-lines{background-size:45px 45px}}
@media(prefers-reduced-motion:reduce){.cinematic-intro{display:none!important}.home-page.intro-lock{overflow:auto}.hero-stagger,.hero-device-enter{opacity:1!important;animation:none!important}.ambient-ring,.ambient-dot,.hero-scroll-cue i,.device-orbit-glow,.mini-laptop,.mini-phone,.manifesto-sphere,.manifesto-sphere:before,.cta:before{animation:none!important}}

body{transition:opacity .22s ease,filter .22s ease}.page-leaving{opacity:.15;filter:blur(5px)}


/* ==========================================================
   V18 FINAL — reliable hero device animation + comet cursor
   ========================================================== */
.cinematic-intro{display:none!important}
.premium-cursor{display:none!important}
.hero-stagger,.hero-device-enter{opacity:1!important;animation:none!important}
.hero-line.accent:after{transform:scaleX(1)!important}

/* Real separate laptop/phone assets: pure CSS entrance, no JS dependency. */
.hero-device-animation{
  position:absolute!important;
  z-index:2!important;
  top:54px!important;
  right:-5vw!important;
  width:min(69vw,1120px)!important;
  height:620px!important;
  min-height:620px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none;
  perspective:1200px;
  transform-style:preserve-3d;
}
.hero-device-animation::before,
.hero-device-animation::after{display:none!important;content:none!important}

.hero-device-animation > img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.hero-laptop-real{
  z-index:2;
  transform-origin:43% 79%;
  animation:v18LaptopOpen 1.55s .08s cubic-bezier(.16,1,.3,1) both,
            v18LaptopIdle 7s 2.2s ease-in-out infinite;
}
.hero-phone-real{
  z-index:4;
  transform-origin:86% 58%;
  animation:v18PhoneArrive 1.05s .75s cubic-bezier(.16,1,.3,1) both,
            v18PhoneIdle 5.8s 2.15s ease-in-out infinite;
}
.hero-device-aura{
  position:absolute;
  z-index:0;
  width:74%;height:62%;
  right:0;top:19%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.25),rgba(76,29,149,.07) 44%,transparent 72%);
  filter:blur(50px);
  animation:v18AuraOn 1s .72s ease-out both,v18AuraIdle 5.8s 2s ease-in-out infinite;
}
.hero-laptop-flash{
  position:absolute;z-index:3;
  left:26%;top:16%;width:46%;height:49%;
  border-radius:15px;opacity:0;
  mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 26%,rgba(255,255,255,.18) 48%,transparent 66%),
             radial-gradient(circle at 62% 42%,rgba(167,139,250,.28),transparent 55%);
  box-shadow:inset 0 0 35px rgba(167,139,250,.12),0 0 34px rgba(124,58,237,.1);
  animation:v18ScreenBoot .9s 1.04s ease-out both,v18ScreenBreathe 5s 2.2s ease-in-out infinite;
}
.hero-phone-flash{
  position:absolute;z-index:5;
  right:1.7%;top:27%;width:17%;height:43%;
  border-radius:25px;opacity:0;
  mix-blend-mode:screen;
  background:linear-gradient(110deg,transparent 24%,rgba(255,255,255,.2) 50%,transparent 70%),
             radial-gradient(circle at 50% 42%,rgba(167,139,250,.3),transparent 60%);
  box-shadow:0 0 30px rgba(124,58,237,.15);
  animation:v18ScreenBoot .72s 1.48s ease-out both,v18ScreenBreathe 4.7s 2.3s ease-in-out infinite;
}

@keyframes v18LaptopOpen{
  0%{opacity:0;transform:translate3d(8px,85px,0) rotateX(74deg) rotateZ(-1.3deg) scale(.93);filter:brightness(.5) saturate(.75) blur(6px)}
  25%{opacity:1}
  65%{transform:translate3d(0,-8px,0) rotateX(-4deg) scale(1.015);filter:brightness(.92) saturate(.98) blur(0)}
  100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) scale(1);filter:none}
}
@keyframes v18PhoneArrive{
  0%{opacity:0;transform:translate3d(95px,12px,0) rotateY(-28deg) rotateZ(4deg) scale(.84);filter:brightness(.4) blur(6px)}
  48%{opacity:1}
  76%{transform:translate3d(-7px,-4px,0) rotateY(4deg) rotateZ(-1deg) scale(1.025);filter:brightness(.9) blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes v18ScreenBoot{
  0%{opacity:0;filter:brightness(.1)}
  18%{opacity:.95;filter:brightness(2.2)}
  34%{opacity:.18;filter:brightness(.5)}
  52%{opacity:.78;filter:brightness(1.45)}
  70%{opacity:.35;filter:brightness(.85)}
  100%{opacity:.43;filter:brightness(1)}
}
@keyframes v18ScreenBreathe{0%,100%{opacity:.27}50%{opacity:.47}}
@keyframes v18AuraOn{from{opacity:0;transform:scale(.7)}to{opacity:.9;transform:scale(1)}}
@keyframes v18AuraIdle{0%,100%{opacity:.68;transform:scale(1)}50%{opacity:.92;transform:scale(1.055)}}
@keyframes v18LaptopIdle{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes v18PhoneIdle{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -11px;rotate:.4deg}}

/* New global cursor */
.site-cursor-v18{
  position:fixed;left:0;top:0;width:0;height:0;
  z-index:50000;pointer-events:none;opacity:0;
  transition:opacity .16s ease;
}
.site-cursor-v18.is-visible{opacity:1}
.site-cursor-v18 span{position:fixed;left:0;top:0;pointer-events:none}
.cursor-core-v18{
  width:7px;height:7px;border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.95),0 0 20px rgba(167,139,250,.86),0 0 36px rgba(124,58,237,.5);
  z-index:3;transition:.18s ease;
}
.cursor-trail-v18{
  width:28px;height:3px;border-radius:999px;
  transform-origin:right center;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.07),rgba(196,181,253,.65));
  z-index:2;opacity:.8;
}
.cursor-halo-v18{
  width:105px;height:105px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(139,92,246,.115),rgba(124,58,237,.03) 44%,transparent 72%);
  filter:blur(8px);z-index:1;opacity:.72;transition:.25s ease;
}
.site-cursor-v18.cursor-hover-v18 .cursor-core-v18{
  width:10px;height:10px;background:#c4b5fd;
  box-shadow:0 0 10px rgba(255,255,255,.9),0 0 30px rgba(139,92,246,.95),0 0 52px rgba(109,40,217,.62);
}
.site-cursor-v18.cursor-hover-v18 .cursor-halo-v18{width:145px;height:145px;opacity:.95}

/* Old V17 device layers, if cached in CSS, cannot interfere. */
.device-layer,.device-intro-glow,.laptop-screen-light,.phone-screen-light{display:none!important}

@media(pointer:fine){
  body,a,button,summary,.project-card,.service,.sector-card,.offer,.feature-chips span{cursor:none!important}
}
@media(pointer:coarse){.site-cursor-v18{display:none!important}}
@media(max-width:1000px){
  .hero-device-animation{
    position:relative!important;top:auto!important;right:auto!important;
    width:116%!important;height:500px!important;min-height:500px!important;
    margin:18px 0 0 -8%!important;
  }
}
@media(max-width:700px){
  .hero-device-animation{
    width:128%!important;height:370px!important;min-height:370px!important;
    margin-left:-14%!important;
  }
  .hero-laptop-flash{left:25%;top:18%;width:47%;height:45%}
  .hero-phone-flash{right:1%;top:29%;width:18%;height:40%}
}
@media(prefers-reduced-motion:reduce){
  .hero-laptop-real,.hero-phone-real{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .hero-device-aura{animation:none!important;opacity:.55!important}
  .hero-laptop-flash,.hero-phone-flash{animation:none!important;opacity:.18!important}
}


/* ==========================================================
   V19 — clean device masks + single direct cursor
   ========================================================== */

/* Disable every older cursor layer. */
.premium-cursor,
.site-cursor-v18,
.cursor-core-v18,
.cursor-trail-v18,
.cursor-halo-v18{display:none!important}

/* One single cursor element. No dot, no ring, no delayed trail. */
.site-cursor-v19{
  position:fixed;
  left:0;
  top:0;
  width:11px;
  height:11px;
  z-index:60000;
  pointer-events:none;
  opacity:0;
  border-radius:3px;
  background:linear-gradient(135deg,#ffffff 0%,#d8ccff 38%,#9d7cff 100%);
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:
    0 0 7px rgba(255,255,255,.95),
    0 0 16px rgba(167,139,250,.82),
    0 0 32px rgba(124,58,237,.42);
  transition:
    opacity .12s ease,
    width .16s ease,
    height .16s ease,
    border-radius .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}
.site-cursor-v19.is-visible{opacity:1}
.site-cursor-v19.is-hovering{
  width:15px;
  height:15px;
  border-radius:4px;
  background:linear-gradient(135deg,#fff,#c4b5fd 45%,#8b5cf6 100%);
  box-shadow:
    0 0 9px rgba(255,255,255,1),
    0 0 22px rgba(167,139,250,.95),
    0 0 42px rgba(124,58,237,.5);
}

/* Ensure the two device assets remain totally independent visually. */
.hero-laptop-real,
.hero-phone-real{
  object-fit:contain!important;
  background:transparent!important;
}
.hero-phone-real{
  /* Slightly more visible separation from the laptop */
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.26))!important;
}
.hero-laptop-real{
  filter:drop-shadow(0 28px 36px rgba(0,0,0,.24))!important;
}

@media(pointer:fine){
  body,a,button,summary,.project-card,.service,.sector-card,.offer,.feature-chips span{cursor:none!important}
}
@media(pointer:coarse){
  .site-cursor-v19{display:none!important}
}


/* ==========================================================
   V20 — Dynamic accent color system
   Violet home → blue/cyan → warm projects → green pricing
   ========================================================== */

:root{
  --accent:#8b5cf6;
  --accent-2:#c4b5fd;
  --accent-rgb:139,92,246;
  --accent-deep:#5b21b6;
  --accent-soft:rgba(139,92,246,.12);
  --accent-glow:rgba(139,92,246,.22);
}

/* Smoothly recolor the interface without changing the dark premium base. */
body,
.header,
.btn,
.nav-cta,
.floating-cta,
.project-card,
.service,
.offer,
.process-card,
.trust-strip,
.value-stage,
.device-lab,
.manifesto,
.faq-list details{
  transition:
    background-color .7s ease,
    border-color .7s ease,
    box-shadow .7s ease,
    color .45s ease;
}

/* Shared accent targets */
.accent,
.eyebrow,
.link,
.text-link,
.process-card > span,
.experience-no,
.manifesto-big span,
.orbit-core span,
.project-copy .link{
  color:var(--accent)!important;
}

.btn.primary,
.nav-cta,
.floating-cta,
.mini-cta,
.mini-mobile-button{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  box-shadow:0 12px 35px rgba(var(--accent-rgb),.18);
}

.btn.primary:hover,
.nav-cta:hover,
.floating-cta:hover{
  box-shadow:0 16px 45px rgba(var(--accent-rgb),.3)!important;
}

.desktop-nav a:after{
  background:var(--accent-2)!important;
}
.brand-word > span,
.brand-symbol,
.badge i{
  color:var(--accent)!important;
}
.brand-symbol{
  border-color:rgba(var(--accent-rgb),.32)!important;
  box-shadow:0 0 28px rgba(var(--accent-rgb),.10)!important;
}

body:before{
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(var(--accent-rgb),.065),transparent 62%)!important;
}
body:after{
  background:linear-gradient(90deg,var(--accent-deep),var(--accent-2))!important;
  box-shadow:0 0 14px rgba(var(--accent-rgb),.45)!important;
}

.hero-copy h1 .accent{
  text-shadow:0 0 34px rgba(var(--accent-rgb),.22)!important;
}
.hero-line.accent:after{
  background:linear-gradient(90deg,transparent,var(--accent) 25%,var(--accent-2) 70%,transparent)!important;
}
.hero-device-aura,
.device-intro-glow{
  background:radial-gradient(circle,rgba(var(--accent-rgb),.26),rgba(var(--accent-rgb),.07) 45%,transparent 72%)!important;
}
.hero-laptop-flash,
.hero-phone-flash{
  box-shadow:0 0 34px rgba(var(--accent-rgb),.13)!important;
}

.project-card:hover,
.service:hover,
.sector-card:hover,
.offer:hover,
.process-card:hover{
  border-color:rgba(var(--accent-rgb),.30)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.24),0 0 48px rgba(var(--accent-rgb),.055)!important;
}
.project-card:before{
  background:radial-gradient(380px circle at var(--card-x,50%) var(--card-y,50%),rgba(var(--accent-rgb),.15),transparent 55%)!important;
}

.feature-chips span:hover,
.device-tabs .active{
  border-color:rgba(var(--accent-rgb),.42)!important;
  background:rgba(var(--accent-rgb),.09)!important;
}
.orbit-core{
  border-color:rgba(var(--accent-rgb),.36)!important;
  box-shadow:0 0 60px rgba(var(--accent-rgb),.20)!important;
}
.value-stage{
  background:
    radial-gradient(circle at 78% 45%,rgba(var(--accent-rgb),.12),transparent 30%),
    rgba(255,255,255,.01)!important;
}
.device-lab{
  background:
    radial-gradient(circle at 78% 46%,rgba(var(--accent-rgb),.18),transparent 34%),
    linear-gradient(135deg,#070910,#090b12)!important;
}
.device-orbit-glow{
  background:radial-gradient(circle,rgba(var(--accent-rgb),.30),transparent 66%)!important;
}
.manifesto-sphere{
  background:radial-gradient(circle at 35% 30%,rgba(var(--accent-rgb),.20),rgba(10,11,18,.4) 40%,#06070b 68%)!important;
  box-shadow:inset -24px -28px 55px rgba(0,0,0,.75),0 0 80px rgba(var(--accent-rgb),.14)!important;
}
.manifesto-sphere b{color:var(--accent-2)!important}
.marquee-track i{color:var(--accent)!important}
.faq-list summary span{color:var(--accent)!important}
.faq-list details[open] summary i{color:var(--accent-2)!important}

/* Single cursor follows the current page/section accent. */
.site-cursor-v19{
  background:linear-gradient(135deg,#fff 0%,var(--accent-2) 42%,var(--accent) 100%)!important;
  box-shadow:
    0 0 7px rgba(255,255,255,.95),
    0 0 17px rgba(var(--accent-rgb),.86),
    0 0 34px rgba(var(--accent-rgb),.45)!important;
}
.site-cursor-v19.is-hovering{
  background:linear-gradient(135deg,#fff,var(--accent-2) 45%,var(--accent) 100%)!important;
  box-shadow:
    0 0 9px rgba(255,255,255,1),
    0 0 24px rgba(var(--accent-rgb),.98),
    0 0 45px rgba(var(--accent-rgb),.52)!important;
}

/* Page / section ambience */
.color-ambient-v20{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(800px circle at 88% 14%,rgba(var(--accent-rgb),.15),transparent 62%),
    radial-gradient(600px circle at 10% 78%,rgba(var(--accent-rgb),.055),transparent 66%);
  transition:background 1s ease;
}

/* Per-project color identity inside project cards on home/projects pages. */
.project-card[href*="restaurant"]{
  --card-accent:220,72,45;
}
.project-card[href*="studio-digital"]{
  --card-accent:139,92,246;
}
.project-card[href*="architecture"]{
  --card-accent:132,157,181;
}
.project-card[href*="restaurant"]:hover{
  border-color:rgba(220,72,45,.34)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.25),0 0 55px rgba(220,72,45,.08)!important;
}
.project-card[href*="studio-digital"]:hover{
  border-color:rgba(139,92,246,.34)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.25),0 0 55px rgba(139,92,246,.08)!important;
}
.project-card[href*="architecture"]:hover{
  border-color:rgba(132,157,181,.34)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.25),0 0 55px rgba(132,157,181,.08)!important;
}

/* Optional page-specific ambient tint on body. */
body.theme-blue{--accent:#3b82f6;--accent-2:#93c5fd;--accent-rgb:59,130,246;--accent-deep:#1d4ed8}
body.theme-cyan{--accent:#06b6d4;--accent-2:#67e8f9;--accent-rgb:6,182,212;--accent-deep:#0e7490}
body.theme-green{--accent:#10b981;--accent-2:#6ee7b7;--accent-rgb:16,185,129;--accent-deep:#047857}
body.theme-warm{--accent:#ef5b3c;--accent-2:#f6ad7b;--accent-rgb:239,91,60;--accent-deep:#b83224}
body.theme-amber{--accent:#d6a15b;--accent-2:#f5d7a1;--accent-rgb:214,161,91;--accent-deep:#9a6b2f}
body.theme-violet{--accent:#8b5cf6;--accent-2:#c4b5fd;--accent-rgb:139,92,246;--accent-deep:#5b21b6}

/* Keep colors premium, not full-screen solid. */
section[data-accent]{
  position:relative;
}
section[data-accent]::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.55;
  transition:background 1s ease,opacity .8s ease;
}
section[data-accent="violet"]::before{
  background:radial-gradient(700px circle at 88% 20%,rgba(139,92,246,.11),transparent 64%);
}
section[data-accent="blue"]::before{
  background:radial-gradient(760px circle at 84% 35%,rgba(59,130,246,.10),transparent 65%);
}
section[data-accent="cyan"]::before{
  background:radial-gradient(760px circle at 78% 40%,rgba(6,182,212,.09),transparent 65%);
}
section[data-accent="warm"]::before{
  background:radial-gradient(780px circle at 78% 42%,rgba(239,91,60,.09),transparent 66%);
}
section[data-accent="green"]::before{
  background:radial-gradient(760px circle at 82% 38%,rgba(16,185,129,.10),transparent 65%);
}


/* ==========================================================
   V22 — photorealistic hero devices, no artificial cuts
   ========================================================== */
.hero-device-animation,
.hero-laptop-real,
.hero-phone-real,
.hero-laptop-flash,
.hero-phone-flash,
.hero-device-aura,
.device-layer,
.device-intro-glow,
.laptop-screen-light,
.phone-screen-light{
  display:none!important;
}

.hero-realistic-stage{
  position:absolute!important;
  z-index:2!important;
  top:28px!important;
  right:-3.5vw!important;
  width:min(67vw,1080px)!important;
  height:640px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:none;
  isolation:isolate;
  perspective:1200px;
}
.hero-realistic-stage::before,
.hero-realistic-stage::after{display:none!important;content:none!important}

.hero-realistic-devices{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.34)) saturate(1.02)!important;
  opacity:0;
  transform-origin:52% 70%;
  animation:
    heroRealIn 1.35s .12s cubic-bezier(.16,1,.3,1) forwards,
    heroRealFloat 7s 1.7s ease-in-out infinite;
  z-index:2;
}
.hero-realistic-glow{
  position:absolute;
  z-index:0;
  width:72%;
  height:58%;
  right:5%;
  top:22%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.26),rgba(var(--accent-rgb),.07) 44%,transparent 72%);
  filter:blur(48px);
  opacity:0;
  animation:heroRealGlow 1s .55s ease-out forwards,heroRealGlowIdle 5.6s 1.7s ease-in-out infinite;
}
@keyframes heroRealIn{
  0%{opacity:0;transform:translate3d(70px,30px,0) rotateY(-8deg) rotateX(2deg) scale(.94);filter:blur(6px) brightness(.65)}
  55%{opacity:1;filter:blur(0) brightness(.92)}
  78%{transform:translate3d(-4px,-3px,0) rotateY(1.5deg) rotateX(0) scale(1.012)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes heroRealFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -8px}
}
@keyframes heroRealGlow{
  from{opacity:0;transform:scale(.72)}
  to{opacity:.9;transform:scale(1)}
}
@keyframes heroRealGlowIdle{
  0%,100%{opacity:.64;transform:scale(1)}
  50%{opacity:.9;transform:scale(1.06)}
}

@media(max-width:1000px){
  .hero-realistic-stage{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    width:116%!important;
    height:520px!important;
    margin:20px 0 0 -8%!important;
  }
}
@media(max-width:700px){
  .hero-realistic-stage{
    width:128%!important;
    height:390px!important;
    margin-left:-14%!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-realistic-devices{opacity:1!important;transform:none!important;animation:none!important}
  .hero-realistic-glow{opacity:.55!important;animation:none!important}
}


/* ==========================================================
   V23 — fixed violet homepage + restrained professional hero
   ========================================================== */

/* Homepage never changes accent while scrolling. */
body.home-page{
  --accent:#8b5cf6!important;
  --accent-2:#c4b5fd!important;
  --accent-rgb:139,92,246!important;
  --accent-deep:#5b21b6!important;
}
body.home-page section[data-accent]::before{
  background:radial-gradient(760px circle at 84% 36%,rgba(139,92,246,.075),transparent 66%)!important;
}

/* More restrained integration: image itself carries the devices. */
.hero-realistic-stage{
  top:42px!important;
  right:-2vw!important;
  width:min(66vw,1060px)!important;
  height:620px!important;
  overflow:hidden!important;
  border-radius:34px!important;
  opacity:1!important;
  transform:none!important;
}
.hero-realistic-devices{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:64% center!important;
  filter:none!important;
  opacity:0;
  transform-origin:56% 70%;
  clip-path:inset(0 100% 0 0 round 28px);
  animation:
    v23HeroReveal 1.55s .12s cubic-bezier(.16,1,.3,1) forwards,
    v23HeroFloat 8s 2s ease-in-out infinite!important;
}
.hero-realistic-glow{
  width:64%!important;
  height:52%!important;
  right:4%!important;
  top:24%!important;
  filter:blur(62px)!important;
  opacity:0;
  animation:v23GlowIn 1.2s .55s ease-out forwards,v23GlowIdle 7s 2s ease-in-out infinite!important;
}
@keyframes v23HeroReveal{
  0%{
    opacity:0;
    clip-path:inset(0 100% 0 0 round 28px);
    transform:translate3d(50px,20px,0) scale(.975);
    filter:blur(5px) brightness(.62);
  }
  40%{
    opacity:1;
    filter:blur(0) brightness(.82);
  }
  72%{
    clip-path:inset(0 0 0 0 round 28px);
    transform:translate3d(-3px,-2px,0) scale(1.008);
    filter:brightness(.98);
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0 round 28px);
    transform:none;
    filter:none;
  }
}
@keyframes v23HeroFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}
@keyframes v23GlowIn{
  from{opacity:0;transform:scale(.78)}
  to{opacity:.58;transform:scale(1)}
}
@keyframes v23GlowIdle{
  0%,100%{opacity:.42;transform:scale(1)}
  50%{opacity:.62;transform:scale(1.045)}
}

@media(max-width:1000px){
  .hero-realistic-stage{
    width:112%!important;
    height:500px!important;
    margin-left:-6%!important;
    border-radius:28px!important;
  }
}
@media(max-width:700px){
  .hero-realistic-stage{
    width:120%!important;
    height:370px!important;
    margin-left:-10%!important;
    border-radius:22px!important;
  }
}


/* ==========================================================
   V24 — hero contains devices only
   ========================================================== */
.hero-realistic-stage{
  top:64px!important;
  right:-1vw!important;
  width:min(62vw,980px)!important;
  height:560px!important;
  overflow:visible!important;
  border-radius:0!important;
  background:transparent!important;
}
.hero-realistic-devices{
  object-fit:contain!important;
  object-position:center!important;
  clip-path:none!important;
  border-radius:0!important;
  background:transparent!important;
  filter:drop-shadow(0 38px 48px rgba(0,0,0,.34))!important;
  animation:v24DevicesEnter 1.55s .12s cubic-bezier(.16,1,.3,1) forwards,
            v24DevicesFloat 8s 2s ease-in-out infinite!important;
}
.hero-realistic-glow{
  width:67%!important;
  height:54%!important;
  right:3%!important;
  top:26%!important;
  opacity:.48!important;
}
@keyframes v24DevicesEnter{
  0%{
    opacity:0;
    transform:translate3d(85px,25px,0) scale(.94) rotateY(-8deg);
    filter:blur(7px) brightness(.58);
  }
  45%{
    opacity:1;
    filter:blur(0) brightness(.9);
  }
  75%{
    transform:translate3d(-5px,-3px,0) scale(1.012) rotateY(1.5deg);
    filter:brightness(1);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}
@keyframes v24DevicesFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -6px}
}
@media(max-width:1000px){
  .hero-realistic-stage{
    width:110%!important;
    height:500px!important;
    margin-left:-5%!important;
  }
}
@media(max-width:700px){
  .hero-realistic-stage{
    width:122%!important;
    height:360px!important;
    margin-left:-11%!important;
  }
}


/* ==========================================================
   V25 — new generated laptop + phone hero
   ========================================================== */
.hero-realistic-stage{
  top:48px!important;
  right:-2vw!important;
  width:min(63vw,1000px)!important;
  height:590px!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:transparent!important;
}
.hero-realistic-devices{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  clip-path:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  animation:v25HeroEnter 1.5s .12s cubic-bezier(.16,1,.3,1) forwards,
            v25HeroIdle 8s 1.9s ease-in-out infinite!important;
}
.hero-realistic-glow{
  display:none!important;
}
@keyframes v25HeroEnter{
  0%{
    opacity:0;
    transform:translate3d(70px,28px,0) scale(.95);
    filter:blur(5px) brightness(.72);
  }
  55%{
    opacity:1;
    filter:blur(0) brightness(.95);
  }
  78%{
    transform:translate3d(-4px,-3px,0) scale(1.01);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}
@keyframes v25HeroIdle{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}
@media(max-width:1000px){
  .hero-realistic-stage{
    width:112%!important;
    height:500px!important;
    margin-left:-6%!important;
  }
}
@media(max-width:700px){
  .hero-realistic-stage{
    width:120%!important;
    height:360px!important;
    margin-left:-10%!important;
  }
}


/* ==========================================================
   V26 — true transparent hero asset (devices only)
   ========================================================== */
.hero-realistic-stage{
  top:54px!important;
  right:-2vw!important;
  width:min(64vw,1020px)!important;
  height:590px!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}
.hero-realistic-devices{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 34px 42px rgba(0,0,0,.32))!important;
  animation:v26DevicesIn 1.45s .12s cubic-bezier(.16,1,.3,1) forwards,
            v26DevicesIdle 8s 1.9s ease-in-out infinite!important;
}
.hero-realistic-glow{
  display:block!important;
  width:62%!important;
  height:48%!important;
  right:6%!important;
  top:27%!important;
  opacity:.32!important;
  filter:blur(58px)!important;
}
@keyframes v26DevicesIn{
  0%{opacity:0;transform:translate3d(70px,22px,0) scale(.955);filter:blur(5px)}
  58%{opacity:1;filter:blur(0)}
  78%{transform:translate3d(-4px,-2px,0) scale(1.008)}
  100%{opacity:1;transform:none}
}
@keyframes v26DevicesIdle{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}


/* V28 — exact user-supplied laptop + phone hero */
.hero-realistic-stage{
  top:48px!important;
  right:-2vw!important;
  width:min(64vw,1020px)!important;
  height:600px!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
}
.hero-realistic-devices{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  animation:v28HeroIn 1.35s .12s cubic-bezier(.16,1,.3,1) forwards,
            v28HeroIdle 8s 1.8s ease-in-out infinite!important;
}
.hero-realistic-glow{display:none!important}

@keyframes v28HeroIn{
  0%{opacity:0;transform:translate3d(70px,20px,0) scale(.96)}
  65%{opacity:1;transform:translate3d(-3px,-2px,0) scale(1.006)}
  100%{opacity:1;transform:none}
}
@keyframes v28HeroIdle{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}


/* ==========================================================
   V29 — production polish: seamless hero + true HD projects
   ========================================================== */
html:not(.js) .reveal,
html:not(.js) .process-line{
  opacity:1!important;
  transform:none!important;
}

:focus-visible{
  outline:2px solid var(--accent,#8b5cf6);
  outline-offset:4px;
}

.mobile-nav.open{display:flex}

.cinematic-hero{
  position:relative;
  min-height:760px;
  padding:118px 0 54px;
  overflow:clip;
  background:
    radial-gradient(680px circle at 80% 48%,rgba(139,92,246,.105),transparent 66%),
    linear-gradient(180deg,rgba(5,6,16,.18),rgba(5,6,16,.02));
}
.cinematic-hero .hero-ambient,
.cinematic-hero .hero-scroll-cue,
.cinematic-hero .hero-realistic-glow,
.cinematic-hero .hero-showcase::before,
.cinematic-hero .hero-showcase::after{
  display:none!important;
  content:none!important;
}
.cinematic-hero .hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(10px,2vw,34px);
  min-height:610px;
}
.cinematic-hero .hero-copy{
  position:relative;
  z-index:4;
  width:100%!important;
  padding-top:24px;
}
.cinematic-hero .hero-realistic-stage{
  position:relative!important;
  inset:auto!important;
  width:116%!important;
  height:auto!important;
  aspect-ratio:3/2;
  margin:46px -12% 0 -4%!important;
  overflow:visible!important;
  pointer-events:auto;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.cinematic-hero .hero-realistic-devices{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  animation:v29DevicesIn 1.2s .08s cubic-bezier(.16,1,.3,1) forwards,
            v29DevicesIdle 8s 1.5s ease-in-out infinite!important;
}
@keyframes v29DevicesIn{
  0%{opacity:0;transform:translate3d(55px,18px,0) scale(.975)}
  72%{opacity:1;transform:translate3d(-3px,-2px,0) scale(1.004)}
  100%{opacity:1;transform:none}
}
@keyframes v29DevicesIdle{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}

.project-card{
  min-height:0!important;
  aspect-ratio:3/2;
  background:#080a12;
}
.project-card img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.project-card::after{
  background:linear-gradient(to top,rgba(2,3,8,.96),rgba(2,3,8,.32) 58%,rgba(2,3,8,.04))!important;
}

.case-cover,
.case-cover-premium{
  width:min(1240px,calc(100% - 48px))!important;
  margin:42px auto 0!important;
  padding:10px!important;
  border-radius:20px!important;
  background:#080a12!important;
  border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.34)!important;
}
.case-cover img,
.case-cover-premium img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:3/2;
  object-fit:cover!important;
  border-radius:13px!important;
}

@media(max-width:1000px){
  .cinematic-hero{
    min-height:auto;
    padding-bottom:34px;
  }
  .cinematic-hero .hero-grid{
    display:flex!important;
    flex-direction:column;
    min-height:0;
  }
  .cinematic-hero .hero-realistic-stage{
    width:112%!important;
    margin:4px 0 0 -6%!important;
  }
  .project-card{aspect-ratio:4/3}
}

@media(max-width:700px){
  .cinematic-hero{
    padding-top:108px;
    background:radial-gradient(460px circle at 70% 64%,rgba(139,92,246,.1),transparent 68%);
  }
  .cinematic-hero .hero-copy{padding-top:0}
  .cinematic-hero .hero-realistic-stage{
    width:116%!important;
    margin:10px 0 0 -8%!important;
  }
  .cinematic-hero .hero-realistic-devices{
    animation:v29DevicesIn .85s ease-out forwards!important;
  }
  .project-card{
    aspect-ratio:6/5;
    min-height:290px!important;
  }
  .case-cover,
  .case-cover-premium{
    width:calc(100% - 28px)!important;
    margin-top:28px!important;
    padding:5px!important;
    border-radius:14px!important;
  }
  .case-cover img,
  .case-cover-premium img{border-radius:9px!important}
}

@media(prefers-reduced-motion:reduce){
  .cinematic-hero .hero-realistic-devices{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}


/* ==========================================================
   V30 — refined typography, independent hero devices,
   premium responsive device gallery
   ========================================================== */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.2,1.35,.35,1);
}

/* A lighter, calmer type hierarchy. */
h1,h2,h3{
  text-wrap:balance;
}
h1,h2{
  font-weight:720;
  letter-spacing:-.058em;
}
h2{
  font-size:clamp(2rem,3.15vw,3.2rem);
  line-height:.98;
}
.cinematic-hero .hero-title-cinematic{
  max-width:690px;
  font-size:clamp(2.85rem,3.7vw,4.05rem);
  font-weight:520;
  line-height:.97;
  letter-spacing:-.068em;
}
.cinematic-hero .hero-line{
  width:auto;
}
.cinematic-hero .hero-line.accent{
  width:max-content;
  max-width:100%;
  color:transparent;
  background:linear-gradient(105deg,#bba8ff 0%,#8b5cf6 48%,#d9d0ff 100%);
  background-size:180% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:none;
  animation:heroTitleGradient 7s ease-in-out infinite;
}
@keyframes heroTitleGradient{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

/* More contemporary navigation and controls across the site. */
.header{
  inset:12px 12px auto;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(7,8,18,.68);
  box-shadow:0 16px 55px rgba(0,0,0,.12);
}
.header.scrolled{
  background:rgba(7,8,18,.88);
  border-color:rgba(255,255,255,.11);
  box-shadow:0 20px 70px rgba(0,0,0,.32);
}
.navbar{height:66px}
.desktop-nav{gap:30px;font-size:.76rem}
.desktop-nav a{padding:24px 0}
.desktop-nav a:after{bottom:13px}
.nav-cta,.btn{
  border-radius:999px;
}
.nav-cta{padding:10px 17px}
.badge{
  padding:7px 13px;
  font-size:.59rem;
  letter-spacing:.075em;
  backdrop-filter:blur(12px);
}
.project-card,.service,.offer,.experience-card,.cta,.value-stage{
  border-radius:20px;
}

/* Hero: one transparent source, split into independently moving devices. */
.cinematic-hero{
  min-height:790px;
  padding-top:125px;
  background:
    radial-gradient(640px circle at 82% 45%,rgba(124,58,237,.13),transparent 66%),
    radial-gradient(430px circle at 70% 86%,rgba(76,29,149,.08),transparent 70%);
}
.cinematic-hero::after{
  content:"";
  position:absolute;
  width:440px;
  height:440px;
  right:3%;
  top:24%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.11),transparent 68%);
  filter:blur(26px);
  pointer-events:none;
  animation:heroAura 7s ease-in-out infinite;
}
@keyframes heroAura{
  50%{transform:scale(1.14) translate(-14px,9px);opacity:.7}
}
.cinematic-hero .hero-grid{
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  min-height:635px;
}
.cinematic-hero .hero-copy{
  padding-top:10px;
}
.cinematic-hero .hero-realistic-stage{
  width:120%!important;
  aspect-ratio:3/2;
  margin:38px -15% 0 -5%!important;
  perspective:1400px;
  isolation:isolate;
}
.hero-device{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  will-change:transform,filter;
}
.hero-device img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  max-width:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 36px 42px rgba(0,0,0,.32))!important;
}
.hero-device-laptop{
  z-index:1;
  clip-path:inset(0 24% 0 0);
  transform-origin:42% 74%;
  animation:
    heroLaptopEnter 1.45s .08s var(--ease-out) both,
    heroLaptopIdle 7.5s 1.6s ease-in-out infinite;
}
.hero-device-phone{
  z-index:3;
  clip-path:inset(0 0 0 72%);
  transform-origin:84% 70%;
  animation:
    heroPhoneEnter 1.25s .35s var(--ease-spring) both,
    heroPhoneIdle 6.2s 1.75s ease-in-out infinite;
}
.hero-screen-light{
  position:absolute;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
  opacity:.32;
  mix-blend-mode:screen;
}
.hero-screen-light::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(105deg,transparent 36%,rgba(211,198,255,.22) 50%,transparent 64%);
  transform:translateX(-80%);
  animation:screenSweep 6.8s 2.1s ease-in-out infinite;
}
.laptop-light{
  left:14.7%;
  top:15.6%;
  width:53.4%;
  height:49.2%;
  border-radius:4px;
}
.phone-light{
  left:77.8%;
  top:26.2%;
  width:13.1%;
  height:46.8%;
  border-radius:16px;
}
@keyframes heroLaptopEnter{
  0%{opacity:0;transform:translate3d(62px,35px,0) rotateX(10deg) rotateY(-8deg) scale(.94);filter:blur(7px)}
  68%{opacity:1;filter:blur(0);transform:translate3d(-5px,-3px,0) rotateX(-1deg) rotateY(1deg) scale(1.008)}
  100%{opacity:1;transform:none}
}
@keyframes heroPhoneEnter{
  0%{opacity:0;transform:translate3d(120px,28px,0) rotate(9deg) scale(.82);filter:blur(6px)}
  72%{opacity:1;filter:blur(0);transform:translate3d(-6px,-5px,45px) rotate(-1.5deg) scale(1.025)}
  100%{opacity:1;transform:translate3d(0,0,34px)}
}
@keyframes heroLaptopIdle{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:0 -7px;rotate:-.15deg}
}
@keyframes heroPhoneIdle{
  0%,100%{translate:0 0 34px;rotate:0deg}
  50%{translate:2px -15px 42px;rotate:.55deg}
}
@keyframes screenSweep{
  0%,18%{transform:translateX(-85%) rotate(4deg);opacity:0}
  38%{opacity:1}
  58%,100%{transform:translateX(85%) rotate(4deg);opacity:0}
}

/* Responsive showcase with three recognisable, animated devices. */
.device-lab{
  min-height:650px;
  grid-template-columns:.78fr 1.22fr;
  gap:clamp(30px,4vw,74px);
  padding:clamp(34px,4.3vw,64px);
  border-radius:30px;
  background:
    radial-gradient(540px circle at 77% 45%,rgba(139,92,246,.17),transparent 67%),
    linear-gradient(145deg,#070810 0%,#0a0b15 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 35px 100px rgba(0,0,0,.25);
}
.device-copy h2{
  max-width:600px;
  font-size:clamp(2.2rem,3.3vw,3.55rem);
  font-weight:560;
  line-height:.98;
}
.device-copy h2 .accent{
  color:transparent;
  background:linear-gradient(110deg,#faf8ff,#a78bfa 48%,#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:none;
}
.device-copy p{
  max-width:500px;
  font-size:.9rem;
  line-height:1.85;
}
.device-tabs{gap:9px}
.device-tabs button{
  appearance:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 14px;
  background:rgba(255,255,255,.018);
  color:#7f8593;
  font:750 .58rem/1 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.035em;
  cursor:pointer;
  transition:color .3s,border-color .3s,background .3s,transform .3s,box-shadow .3s;
}
.device-tabs button:hover{
  color:#d9dbe3;
  transform:translateY(-2px);
  border-color:rgba(167,139,250,.26);
}
.device-tabs button.active{
  color:#fff;
  border-color:rgba(167,139,250,.42);
  background:rgba(139,92,246,.12);
  box-shadow:0 0 28px rgba(109,40,217,.13);
}
.device-stage{
  height:520px;
  min-width:0;
  perspective:1500px;
  isolation:isolate;
  transition:transform .55s var(--ease-out);
}
.device-orbit-glow{
  width:460px;
  height:460px;
  right:2%;
  top:3%;
  opacity:.7;
  filter:blur(32px);
}
.responsive-device{
  position:absolute;
  transform-style:preserve-3d;
  transition:scale .65s var(--ease-out),filter .65s,opacity .65s;
  will-change:translate,scale,filter;
}
.responsive-device .site-screen{
  position:relative;
  overflow:hidden;
  background:#070910;
  border:1px solid rgba(255,255,255,.055);
}
.responsive-device .site-screen::after{
  content:"";
  position:absolute;
  inset:-55% -70%;
  background:linear-gradient(108deg,transparent 44%,rgba(193,177,255,.11) 50%,transparent 56%);
  transform:translateX(-34%);
  animation:deviceScreenSheen 7s 1.6s ease-in-out infinite;
  pointer-events:none;
}
.device-camera{
  position:absolute;
  z-index:4;
  left:50%;
  top:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#020307;
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
}
.desktop-device{
  z-index:2;
  width:76%;
  left:0;
  top:7%;
  animation:desktopDeviceFloat 7.4s ease-in-out infinite;
}
.desktop-frame{
  position:relative;
  aspect-ratio:16/10;
  padding:10px 10px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:linear-gradient(145deg,#333742,#11131a 44%,#282b33);
  box-shadow:0 35px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.18);
}
.desktop-frame .site-screen{
  width:100%;
  height:100%;
  border-radius:10px;
}
.desktop-stand{
  position:absolute;
  left:38%;
  top:100%;
  width:24%;
  height:55px;
  margin-top:-1px;
  background:linear-gradient(90deg,#14161c,#666b75 48%,#20232a);
  clip-path:polygon(39% 0,61% 0,71% 74%,90% 84%,94% 100%,6% 100%,10% 84%,29% 74%);
  filter:drop-shadow(0 12px 8px rgba(0,0,0,.35));
}
.desktop-stand i{
  position:absolute;
  left:7%;
  right:7%;
  bottom:0;
  height:5px;
  border-radius:50%;
  background:#555a63;
}
.screen-browser{
  height:22px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 8px;
  background:#11141d;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.screen-browser i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#4a4e59;
}
.screen-browser span{
  width:45%;
  height:6px;
  margin:auto;
  border-radius:10px;
  background:#1d202b;
}
.screen-site{
  position:relative;
  height:calc(100% - 22px);
  padding:12px;
  background:
    radial-gradient(circle at 78% 30%,rgba(124,58,237,.22),transparent 38%),
    #080a12;
}
.screen-nav{
  display:flex;
  align-items:center;
  gap:8px;
  height:12px;
}
.screen-nav b{
  width:24px;
  height:6px;
  border-radius:2px;
  background:linear-gradient(90deg,#c4b5fd,#7c3aed);
}
.screen-nav span{
  width:17px;
  height:3px;
  border-radius:3px;
  background:#4a4e5b;
}
.screen-nav em{
  width:25px;
  height:8px;
  margin-left:auto;
  border-radius:10px;
  background:#7c3aed;
}
.screen-hero{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  align-items:center;
  gap:10px;
  min-height:62%;
}
.screen-hero-copy,.tablet-hero,.mobile-hero{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.screen-hero-copy small,.tablet-hero small,.mobile-hero small{
  width:29px;
  height:3px;
  border-radius:4px;
  margin-bottom:8px;
  background:#8b5cf6;
}
.screen-hero-copy strong,.tablet-hero strong,.mobile-hero strong{
  width:88%;
  height:8px;
  margin-bottom:4px;
  border-radius:3px;
  background:#eceaf7;
}
.screen-hero-copy strong.short{width:64%}
.screen-hero-copy p,.tablet-hero p,.mobile-hero p{
  width:72%;
  height:4px;
  margin-top:7px;
  border-radius:4px;
  background:#555a67;
}
.screen-hero-copy i,.tablet-hero i,.mobile-hero i{
  width:38px;
  height:11px;
  margin-top:10px;
  border-radius:10px;
  background:linear-gradient(90deg,#7c3aed,#a78bfa);
}
.screen-art,.tablet-art,.mobile-art{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(167,139,250,.16);
  background:radial-gradient(circle at 34% 30%,#8755f1,transparent 21%),linear-gradient(140deg,#21173c,#090b13 70%);
}
.screen-art{
  height:96px;
  border-radius:8px;
}
.screen-art span,.tablet-art span,.mobile-art span{
  position:absolute;
  width:70%;
  height:145%;
  right:-18%;
  top:-35%;
  border:1px solid rgba(216,205,255,.25);
  border-radius:45% 55% 52% 48%;
  rotate:35deg;
}
.screen-art span:nth-child(2){
  right:8%;
  top:12%;
  scale:.65;
  opacity:.5;
}
.screen-art b,.tablet-art b,.mobile-art b{
  position:absolute;
  width:32px;
  height:32px;
  left:15%;
  top:34%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d7caff,#6d28d9 34%,#110d1f 70%);
  box-shadow:0 0 26px rgba(139,92,246,.34);
  animation:screenOrb 4.8s ease-in-out infinite;
}
.screen-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.screen-cards i,.tablet-cards i,.mobile-content i{
  border:1px solid rgba(255,255,255,.055);
  border-radius:5px;
  background:linear-gradient(145deg,rgba(139,92,246,.13),rgba(255,255,255,.018));
}
.screen-cards i{height:29px}

.tablet-device{
  z-index:3;
  width:30%;
  right:7%;
  top:16%;
  animation:tabletDeviceFloat 6.5s -.9s ease-in-out infinite;
}
.tablet-frame{
  position:relative;
  aspect-ratio:4/5.55;
  padding:9px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:21px;
  background:linear-gradient(145deg,#3d414a,#111319 48%,#282b33);
  box-shadow:0 32px 62px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.18);
}
.tablet-screen{
  width:100%;
  height:100%;
  border-radius:13px;
}
.tablet-site{height:100%;padding:13px 11px}
.tablet-site .screen-nav span{width:14px}
.tablet-hero{margin-top:20px}
.tablet-hero strong{height:7px}
.tablet-art{
  height:42%;
  margin-top:15px;
  border-radius:8px;
}
.tablet-art b{width:27px;height:27px}
.tablet-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:8px;
}
.tablet-cards i{height:28px}

.mobile-device{
  z-index:5;
  width:17%;
  right:-1%;
  bottom:3%;
  animation:mobileDeviceFloat 5.8s -1.5s ease-in-out infinite;
}
.mobile-frame{
  position:relative;
  aspect-ratio:9/19.4;
  padding:6px;
  border:1px solid rgba(255,255,255,.21);
  border-radius:22px;
  background:linear-gradient(145deg,#434751,#101217 48%,#272a31);
  box-shadow:0 30px 62px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.18);
}
.mobile-speaker{
  position:absolute;
  z-index:6;
  left:50%;
  top:10px;
  width:34%;
  height:8px;
  transform:translateX(-50%);
  border-radius:8px;
  background:#020306;
}
.mobile-screen{
  width:100%;
  height:100%;
  border-radius:16px;
}
.mobile-site{height:100%;padding:18px 8px 8px}
.mobile-site .screen-nav b{width:16px;height:5px}
.mobile-site .screen-nav em{width:8px;height:6px;background:#5e6370}
.mobile-hero{margin-top:17px}
.mobile-hero strong{width:90%;height:6px}
.mobile-hero strong:nth-of-type(2){width:66%}
.mobile-hero p{width:78%;height:3px}
.mobile-hero i{width:30px;height:9px}
.mobile-art{
  height:30%;
  margin-top:12px;
  border-radius:7px;
}
.mobile-art b{width:20px;height:20px}
.mobile-content{
  display:grid;
  gap:5px;
  margin-top:7px;
}
.mobile-content i{height:19px}

.device-stage[data-active-device="desktop"] .desktop-device,
.device-stage[data-active-device="tablet"] .tablet-device,
.device-stage[data-active-device="mobile"] .mobile-device{
  filter:brightness(1.13) saturate(1.08);
  scale:1.035;
}
.device-stage[data-active-device="desktop"] .tablet-device,
.device-stage[data-active-device="desktop"] .mobile-device,
.device-stage[data-active-device="tablet"] .desktop-device,
.device-stage[data-active-device="tablet"] .mobile-device,
.device-stage[data-active-device="mobile"] .desktop-device,
.device-stage[data-active-device="mobile"] .tablet-device{
  filter:brightness(.67) saturate(.75);
  scale:.97;
}
@keyframes desktopDeviceFloat{
  0%,100%{translate:0 0;rotate:-.25deg}
  50%{translate:0 -8px;rotate:.2deg}
}
@keyframes tabletDeviceFloat{
  0%,100%{translate:0 0 30px;rotate:.4deg}
  50%{translate:2px -12px 38px;rotate:-.45deg}
}
@keyframes mobileDeviceFloat{
  0%,100%{translate:0 0 60px;rotate:-.6deg}
  50%{translate:1px -15px 70px;rotate:.75deg}
}
@keyframes deviceScreenSheen{
  0%,18%{transform:translateX(-35%)}
  50%,100%{transform:translateX(35%)}
}
@keyframes screenOrb{
  50%{transform:translateY(-4px) scale(1.08);filter:brightness(1.2)}
}

/* Extra motion polish without adding visual clutter. */
.project-card img{
  transition:transform .9s var(--ease-out),filter .55s!important;
}
.project-card:hover img{transform:scale(1.055)!important}
.service,.experience-card,.offer,.process-card{
  transition:transform .55s var(--ease-out),border-color .4s,box-shadow .55s!important;
}
.eyebrow{
  letter-spacing:.2em;
}
.section-head-row h2{
  max-width:820px;
}
.reveal{
  transition-timing-function:var(--ease-out);
}

@media(max-width:1100px){
  .device-lab{
    grid-template-columns:1fr;
    min-height:930px;
  }
  .device-copy{max-width:720px}
  .device-stage{
    width:min(100%,720px);
    height:540px;
    margin:10px auto 0;
  }
}
@media(max-width:1000px){
  .header{inset:8px 8px auto}
  .cinematic-hero .hero-title-cinematic{
    max-width:760px;
    font-size:clamp(3.2rem,8vw,5.2rem);
  }
  .cinematic-hero .hero-realistic-stage{
    width:112%!important;
    margin:0 0 0 -6%!important;
  }
}
@media(max-width:700px){
  .header{
    inset:7px 7px auto;
    border-radius:15px;
  }
  .navbar{height:62px}
  .mobile-nav{padding:10px 18px 17px}
  .cinematic-hero{
    min-height:auto;
    padding-top:112px;
  }
  .cinematic-hero .hero-title-cinematic{
    font-size:clamp(2.65rem,12vw,3.85rem);
    line-height:.96;
    letter-spacing:-.062em;
  }
  .cinematic-hero .hero-realistic-stage{
    width:120%!important;
    margin:10px 0 0 -10%!important;
  }
  .hero-device-laptop{
    clip-path:inset(0 22% 0 0);
  }
  .hero-device-phone{
    clip-path:inset(0 0 0 70%);
  }
  .device-lab{
    min-height:760px;
    padding:27px 20px;
    border-radius:24px;
  }
  .device-copy h2{
    font-size:clamp(2.2rem,10vw,3.1rem);
  }
  .device-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
  .device-tabs button{padding:9px 6px}
  .device-stage{
    height:375px;
    margin-top:16px;
  }
  .desktop-device{width:80%;top:8%}
  .desktop-frame{padding:6px 6px 8px;border-radius:12px}
  .desktop-frame .site-screen{border-radius:7px}
  .desktop-stand{height:38px}
  .screen-browser{height:16px;padding:0 5px}
  .screen-site{height:calc(100% - 16px);padding:8px}
  .screen-hero{min-height:58%}
  .screen-art{height:66px}
  .screen-cards i{height:18px}
  .tablet-device{width:31%;right:6%;top:15%}
  .tablet-frame{padding:6px;border-radius:15px}
  .tablet-screen{border-radius:9px}
  .tablet-site{padding:9px 7px}
  .mobile-device{width:18%;right:-1%;bottom:2%}
  .mobile-frame{padding:4px;border-radius:15px}
  .mobile-screen{border-radius:11px}
  .mobile-speaker{top:7px;height:5px}
  .mobile-site{padding:13px 6px 6px}
}
@media(max-width:420px){
  .device-lab{min-height:735px}
  .device-stage{height:330px}
  .desktop-device{width:82%}
  .tablet-device{width:32%;right:5%}
  .mobile-device{width:19%}
  .screen-nav span:nth-of-type(n+2){display:none}
  .screen-hero-copy p{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-device,
  .hero-screen-light::before,
  .cinematic-hero::after,
  .responsive-device,
  .responsive-device .site-screen::after,
  .screen-art b,
  .tablet-art b,
  .mobile-art b{
    animation:none!important;
  }
  .hero-device{opacity:1!important;transform:none!important}
}


/* ==========================================================
   V31 — seamless opening devices + true before/after redesign
   ========================================================== */

/* The hero is now built from two independent devices. No duplicated image,
   crop boundary or rectangular asset edge can appear between them. */
.cinematic-hero .hero-device-theatre{
  width:112%!important;
  height:530px!important;
  aspect-ratio:auto!important;
  margin:24px -13% 0 -5%!important;
  overflow:visible!important;
  perspective:1500px;
  transform-style:preserve-3d;
}
.hero-device-theatre::before{
  content:""!important;
  display:block!important;
  position:absolute;
  width:560px;
  height:390px;
  left:10%;
  top:8%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,55,214,.18),rgba(52,24,103,.07) 42%,transparent 72%);
  filter:blur(28px);
  opacity:.78;
  animation:deviceTheatreAura 7s 2.7s ease-in-out infinite;
}
.hero-device-theatre::after{display:none!important}

.hero-laptop{
  position:absolute;
  z-index:2;
  left:0;
  top:66px;
  width:min(78%,570px);
  height:420px;
  transform-style:preserve-3d;
  perspective:1400px;
  opacity:0;
  animation:
    heroLaptopSceneIn 1.05s .12s var(--ease-out) forwards,
    heroLaptopSceneFloat 7.4s 2.85s ease-in-out infinite;
}
.hero-laptop-lid{
  position:absolute;
  z-index:4;
  left:3.5%;
  top:0;
  width:93%;
  aspect-ratio:16/10.25;
  padding:5px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:13px 13px 7px 7px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.18),transparent 14%),
    linear-gradient(132deg,#4a4e57 0%,#20232a 24%,#080a0f 66%,#31353d 100%);
  box-shadow:
    0 28px 75px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.75);
  transform-origin:50% 100%;
  backface-visibility:hidden;
  transform:rotateX(-91deg);
  animation:laptopLidOpen 1.65s .52s cubic-bezier(.18,.82,.21,1) forwards;
}
.hero-laptop-lid::before{
  content:"";
  position:absolute;
  z-index:8;
  left:50%;
  top:4px;
  width:5px;
  height:5px;
  border-radius:50%;
  translate:-50% 0;
  background:#030407;
  box-shadow:0 0 0 1px rgba(255,255,255,.045),0 0 5px rgba(98,77,150,.3);
}
.hero-laptop-bezel{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.045);
  border-radius:8px 8px 4px 4px;
  background:#020308;
  box-shadow:inset 0 0 20px rgba(0,0,0,.85);
}
.hero-web-screen{
  position:absolute;
  inset:2px;
  overflow:hidden;
  padding:12px 14px 10px;
  color:#f5f2ff;
  border-radius:6px;
  background:
    radial-gradient(circle at 82% 29%,rgba(129,84,246,.14),transparent 35%),
    linear-gradient(128deg,rgba(255,255,255,.025),transparent 40%),
    #07080d;
  opacity:0;
  filter:brightness(.1) saturate(.2);
  animation:laptopScreenOn .7s 1.72s ease-out forwards;
}
.hero-screen-nav{
  display:flex;
  align-items:center;
  gap:14px;
  height:18px;
  color:#747986;
}
.hero-screen-nav b{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:5px;
  color:#f3efff;
  font:720 6px/1 Inter,sans-serif;
  letter-spacing:.15em;
}
.hero-screen-nav b i{
  width:5px;
  height:5px;
  border:1px solid #bda7ff;
  border-radius:50%;
  background:rgba(154,117,239,.28);
  box-shadow:0 0 7px rgba(154,117,239,.52);
}
.hero-screen-nav span{
  color:#7e828d;
  font:550 4.5px/1 Inter,sans-serif;
}
.hero-screen-nav em{
  padding:5px 8px;
  color:#e9e3f8;
  border:1px solid rgba(190,169,247,.28);
  border-radius:20px;
  font:620 4.5px/1 Inter,sans-serif;
  font-style:normal;
}
.hero-screen-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:16px;
  min-height:72%;
}
.hero-screen-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-screen-copy small{
  margin-bottom:11px;
  color:#9d80ed;
  font:720 4.3px/1 Inter,sans-serif;
  letter-spacing:.2em;
}
.hero-screen-copy strong{
  display:block;
  font:560 clamp(15px,1.65vw,22px)/.98 Inter,sans-serif;
  letter-spacing:-.06em;
}
.hero-screen-copy strong.violet{color:#b29af5;font-weight:520}
.hero-screen-copy p{
  width:86%;
  height:auto;
  margin:11px 0 0;
  color:#737885;
  background:none;
  box-shadow:none;
  font:420 4.6px/1.65 Inter,sans-serif;
}
.hero-screen-copy button,
.hero-phone-screen button{
  border:0;
  color:#141019;
  background:#c5adff;
  font:680 5px/1 Inter,sans-serif;
  pointer-events:none;
}
.hero-screen-copy button{
  margin-top:14px;
  padding:7px 10px;
  border-radius:3px;
}
.hero-screen-copy button i,
.hero-phone-screen button i{
  margin-left:5px;
  font-style:normal;
}
.hero-screen-art{
  position:relative;
  height:158px;
  overflow:hidden;
  border:1px solid rgba(199,180,255,.11);
  border-radius:8px;
  background:
    radial-gradient(circle at 72% 40%,rgba(111,72,222,.22),transparent 29%),
    linear-gradient(145deg,#12101a 0%,#090a0f 70%);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 38px rgba(0,0,0,.28);
}
.hero-art-grid{
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:20px 20px;
}
.hero-art-index{
  position:absolute;
  left:11px;
  top:10px;
  color:#d8cff0;
  font:620 5px/1 Inter,sans-serif;
}
.hero-art-index span{color:#676b76}
.hero-art-orb{
  position:absolute;
  width:82px;
  height:82px;
  right:15%;
  top:20%;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#ebe4ff 0 4%,#a485f4 12%,#5b35ad 31%,#221637 53%,#0c0a11 72%);
  box-shadow:0 0 40px rgba(129,78,239,.28),inset -13px -14px 24px rgba(0,0,0,.62);
  animation:heroScreenOrb 5s 2.4s ease-in-out infinite;
}
.hero-art-orb i{position:absolute;inset:-18px;border:1px solid rgba(198,179,245,.13);border-radius:50%;transform:rotateX(68deg) rotateZ(-14deg)}
.hero-art-note{position:absolute;left:11px;bottom:10px;display:flex;flex-direction:column;gap:4px}
.hero-art-note small{color:#6f7380;font:650 3.7px/1 Inter,sans-serif;letter-spacing:.14em}
.hero-art-note strong{color:#e9e4f5;font:540 7px/1 Inter,sans-serif}
.hero-screen-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,.055);
}
.hero-screen-grid i{
  height:25px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#767a85;
  border-right:1px solid rgba(255,255,255,.055);
  font:500 4.2px/1 Inter,sans-serif;
  font-style:normal;
}
.hero-screen-grid i:last-child{border-right:0}
.hero-screen-grid b{color:#a88cef;font:650 4px/1 Inter,sans-serif}
.hero-laptop-boot{
  position:absolute;
  z-index:6;
  inset:0;
  display:grid;
  place-items:center;
  background:#020307;
  animation:laptopBootAway .65s 1.74s ease forwards;
}
.hero-laptop-boot span{
  width:8px;
  height:8px;
  border:1px solid rgba(177,145,255,.5);
  border-top-color:#b99cff;
  border-radius:50%;
  animation:bootSpin .7s linear infinite;
}
.hero-screen-shine,
.hero-phone-glass{
  position:absolute;
  z-index:7;
  inset:-45%;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 39%,rgba(235,228,255,.13) 48%,transparent 57%);
  translate:-56% 0;
  animation:deviceGlassSweep 7s 2.8s ease-in-out infinite;
}
.hero-laptop-hinge{
  position:absolute;
  z-index:5;
  left:17%;
  top:339px;
  width:66%;
  height:9px;
  border-radius:9px;
  background:linear-gradient(90deg,#08090d,#555a64 22%,#16181e 52%,#636873 80%,#08090d);
  box-shadow:0 2px 5px rgba(0,0,0,.7);
}
.hero-laptop-base{
  position:absolute;
  z-index:3;
  left:1%;
  top:335px;
  width:98%;
  height:82px;
  transform-origin:50% 0;
  transform:rotateX(66deg);
  border:1px solid rgba(255,255,255,.22);
  border-radius:7px 7px 16px 16px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.23),transparent 12% 83%,rgba(255,255,255,.08)),
    linear-gradient(155deg,#4b4f58,#1a1c22 52%,#353941);
  box-shadow:0 55px 60px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.23);
}
.hero-keyboard{
  position:absolute;
  left:8%;
  right:8%;
  top:8px;
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:3px;
  padding:5px;
  border-radius:7px;
  background:rgba(4,5,8,.27);
}
.hero-keyboard span{
  height:6px;
  border-radius:2px;
  background:linear-gradient(145deg,#30333a,#111318);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 1px 1px rgba(0,0,0,.8);
}
.hero-trackpad{
  position:absolute;
  left:37%;
  bottom:7px;
  width:26%;
  height:22px;
  border:1px solid rgba(0,0,0,.38);
  border-radius:5px;
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.hero-laptop-lip{
  position:absolute;
  z-index:2;
  left:-1%;
  top:407px;
  width:102%;
  height:10px;
  border-radius:0 0 50% 50%;
  background:linear-gradient(90deg,#15171c,#686d76 23%,#30333a 50%,#757a83 78%,#14161a);
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.38));
}

.hero-phone{
  position:absolute;
  z-index:8;
  right:5%;
  top:128px;
  width:145px;
  aspect-ratio:9/19.2;
  opacity:0;
  transform-style:preserve-3d;
  animation:
    heroPhoneSceneIn 1.15s .72s var(--ease-spring) forwards,
    heroPhoneSceneFloat 6.2s 3.1s ease-in-out infinite;
}
.hero-phone-frame{
  position:absolute;
  inset:0;
  padding:4px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  border-radius:27px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.28),transparent 16%),
    linear-gradient(135deg,#555a64,#111319 35%,#08090d 67%,#4a4f59);
  box-shadow:
    0 37px 58px rgba(0,0,0,.55),
    inset 0 1px rgba(255,255,255,.3),
    inset -2px -2px 4px rgba(0,0,0,.7);
}
.hero-phone-frame::before,
.hero-phone-frame::after{
  content:"";
  position:absolute;
  left:-3px;
  width:3px;
  border-radius:3px 0 0 3px;
  background:#333740;
}
.hero-phone-frame::before{top:68px;height:42px}
.hero-phone-frame::after{top:121px;height:28px}
.hero-phone-island{
  position:absolute;
  z-index:10;
  left:50%;
  top:10px;
  width:42px;
  height:13px;
  translate:-50% 0;
  border-radius:15px;
  background:#020306;
  box-shadow:0 1px 0 rgba(255,255,255,.055);
}
.hero-phone-screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  padding:28px 9px 9px;
  border:1px solid rgba(255,255,255,.04);
  border-radius:23px;
  color:#f7f5ff;
  background:
    radial-gradient(circle at 78% 28%,rgba(139,92,246,.13),transparent 32%),
    #07080d;
  opacity:0;
  filter:brightness(.05) saturate(.1);
  animation:phoneScreenOn .75s 1.78s ease-out forwards;
}
.phone-ui-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.phone-ui-nav b{display:flex;align-items:center;gap:4px;color:#f1edfb;font:680 5px/1 Inter,sans-serif;letter-spacing:.13em}
.phone-ui-nav b i{width:4px;height:4px;border:1px solid #b49af4;border-radius:50%}
.phone-ui-nav em{display:grid;gap:3px}
.phone-ui-nav em span{width:11px;height:1px;background:#777b86}
.phone-ui-art{
  position:relative;
  height:82px;
  margin:14px 0 10px;
  overflow:hidden;
  border:1px solid rgba(191,170,255,.12);
  border-radius:7px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    #0d0c13;
  background-size:14px 14px;
}
.phone-ui-art i{
  position:absolute;
  width:56px;
  height:56px;
  right:11px;
  top:11px;
  border:1px solid rgba(211,197,246,.13);
  border-radius:50%;
  transform:rotateX(67deg);
}
.phone-ui-art b{
  position:absolute;
  width:39px;
  height:39px;
  right:19px;
  top:19px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#eee8ff,#9474e8 15%,#452888 39%,#0d0a13 73%);
  box-shadow:0 0 22px rgba(129,78,239,.25);
}
.phone-art-index{position:absolute;z-index:2;left:7px;top:7px;color:#cfc5e7;font:620 4px/1 Inter,sans-serif}
.phone-art-index span{color:#5f626c}
.phone-ui-art>small{position:absolute;z-index:2;left:7px;bottom:7px;color:#85808e;font:620 3.5px/1 Inter,sans-serif;letter-spacing:.09em}
.hero-phone-screen>small{
  display:block;
  margin-top:18px;
  color:#9a78ef;
  font:700 3.5px/1 Inter,sans-serif;
  letter-spacing:.18em;
}
.hero-phone-screen>strong{
  display:block;
  margin-top:8px;
  font:560 12px/.98 Inter,sans-serif;
  letter-spacing:-.05em;
}
.hero-phone-screen>strong em{
  color:#a989ff;
  font-style:normal;
}
.hero-phone-screen>p{
  width:90%;
  height:auto;
  margin:9px 0 0;
  color:#757985;
  background:none;
  font:420 4px/1.55 Inter,sans-serif;
}
.hero-phone-screen>button{
  margin-top:10px;
  padding:6px 8px;
  border-radius:3px;
}
.phone-ui-foot{display:flex;justify-content:space-between;padding-top:7px;color:#696d78;border-top:1px solid rgba(255,255,255,.06);font:500 3.5px/1 Inter,sans-serif}
.hero-phone-boot{
  position:absolute;
  z-index:8;
  inset:4px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:15px;
  border-radius:23px;
  background:#020307;
  animation:phoneBootAway .65s 1.82s ease forwards;
}
.hero-phone-boot .boot-mark{
  color:#b499ff;
  font:800 20px/1 Inter,sans-serif;
  opacity:0;
  scale:.7;
  animation:phoneBootMark .65s 1.15s var(--ease-spring) forwards;
}
.hero-phone-boot span{
  width:36px;
  height:2px;
  overflow:hidden;
  border-radius:3px;
  background:#171922;
}
.hero-phone-boot span::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  transform-origin:left;
  background:linear-gradient(90deg,#7040db,#b69cff);
  animation:phoneBootBar .78s 1.12s ease-in-out both;
}
.hero-device-shadow{
  position:absolute;
  z-index:0;
  height:24px;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  filter:blur(15px);
}
.laptop-shadow{left:2%;bottom:23px;width:72%}
.phone-shadow{right:0;bottom:63px;width:22%;opacity:.8}

@keyframes heroLaptopSceneIn{
  from{opacity:0;transform:translate3d(58px,26px,0) scale(.95);filter:blur(7px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes heroLaptopSceneFloat{
  0%,100%{transform:translateY(0) rotateY(0)}
  50%{transform:translateY(-7px) rotateY(-.45deg)}
}
@keyframes laptopLidOpen{
  0%,12%{transform:rotateX(-91deg)}
  72%{transform:rotateX(5deg)}
  88%{transform:rotateX(-2deg)}
  100%{transform:rotateX(0)}
}
@keyframes laptopScreenOn{
  0%{opacity:0;filter:brightness(.05) saturate(.1)}
  30%{opacity:.85;filter:brightness(1.8) saturate(.6)}
  55%{opacity:.65;filter:brightness(.55) saturate(.8)}
  100%{opacity:1;filter:brightness(1) saturate(1)}
}
@keyframes laptopBootAway{
  0%,55%{opacity:1}
  100%{opacity:0;visibility:hidden}
}
@keyframes bootSpin{to{rotate:360deg}}
@keyframes heroPhoneSceneIn{
  from{opacity:0;transform:translate3d(95px,34px,50px) rotateY(-15deg) rotateZ(8deg) scale(.86);filter:blur(6px)}
  72%{opacity:1;filter:none;transform:translate3d(-5px,-6px,55px) rotateY(1deg) rotateZ(-1.2deg) scale(1.025)}
  to{opacity:1;transform:translate3d(0,0,52px)}
}
@keyframes heroPhoneSceneFloat{
  0%,100%{transform:translate3d(0,0,52px) rotateZ(0)}
  50%{transform:translate3d(2px,-13px,61px) rotateZ(.55deg)}
}
@keyframes phoneBootMark{to{opacity:1;scale:1}}
@keyframes phoneBootBar{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes phoneBootAway{
  0%,48%{opacity:1}
  100%{opacity:0;visibility:hidden}
}
@keyframes phoneScreenOn{
  0%{opacity:0;filter:brightness(.05) saturate(.1)}
  38%{opacity:1;filter:brightness(1.65) saturate(.7)}
  100%{opacity:1;filter:brightness(1) saturate(1)}
}
@keyframes heroScreenOrb{
  50%{transform:translateY(-5px) scale(1.07);filter:brightness(1.16)}
}
@keyframes deviceGlassSweep{
  0%,18%{translate:-56% 0;opacity:0}
  38%{opacity:1}
  58%,100%{translate:56% 0;opacity:0}
}
@keyframes deviceTheatreAura{
  50%{scale:1.08;translate:-8px 7px;opacity:.58}
}

/* Interactive redesign comparison: one neutral local-business brief,
   presented as a generic template and as a bespoke premium direction. */
.before-after[data-compare]{
  --compare:48%;
  position:relative;
  display:block;
  width:100%;
  min-height:540px;
  aspect-ratio:16/8.4;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:#07080d;
  box-shadow:0 38px 100px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.05);
}
.compare-site{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.compare-premium{
  z-index:1;
  color:#fff;
  background:
    radial-gradient(circle at 23% 46%,rgba(121,78,223,.15),transparent 33%),
    linear-gradient(145deg,#080910,#0b0a12 56%,#07080c);
}
.premium-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    radial-gradient(circle at 70% 35%,rgba(157,122,242,.11),transparent 28%);
  background-size:52px 52px,52px 52px,auto;
  mask-image:linear-gradient(90deg,black,transparent 84%);
}
.premium-nav{
  position:absolute;
  z-index:2;
  left:clamp(22px,3vw,46px);
  right:clamp(22px,3vw,46px);
  top:clamp(22px,3vw,38px);
  display:flex;
  align-items:center;
  gap:28px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.premium-nav b{
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:9px;
  font:680 clamp(.58rem,.9vw,.78rem)/1 Inter,sans-serif;
  letter-spacing:.16em;
}
.premium-nav b i{width:8px;height:8px;border:1px solid #b69df5;border-radius:50%;background:rgba(155,119,241,.24);box-shadow:0 0 12px rgba(155,119,241,.5)}
.premium-nav div{display:flex;gap:23px}
.premium-nav div span{
  color:rgba(255,255,255,.68);
  font-size:clamp(.42rem,.66vw,.62rem);
}
.premium-nav>em{
  padding:9px 14px;
  color:#f0ebfd;
  border:1px solid rgba(190,169,247,.32);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  font:800 clamp(.42rem,.66vw,.6rem)/1 Inter,sans-serif;
  font-style:normal;
}
.premium-visual{position:absolute;left:clamp(25px,5vw,74px);top:24%;width:42%;height:59%;overflow:hidden;border:1px solid rgba(207,190,248,.13);border-radius:clamp(14px,2vw,24px);background:radial-gradient(circle at 62% 43%,rgba(130,88,230,.2),transparent 34%),linear-gradient(145deg,#14131c,#090a0f 67%);box-shadow:0 32px 80px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.045)}
.premium-visual-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px}
.premium-visual-orb{position:absolute;width:clamp(130px,18vw,245px);aspect-ratio:1;right:9%;top:13%;border-radius:50%;background:radial-gradient(circle at 34% 27%,#eee9ff 0 4%,#ae91f3 11%,#6540b7 29%,#251938 52%,#0d0b12 73%);box-shadow:0 0 70px rgba(123,78,220,.27),inset -28px -32px 54px rgba(0,0,0,.58)}
.premium-visual-orb i{position:absolute;inset:-14%;border:1px solid rgba(210,196,247,.13);border-radius:50%;transform:rotateX(67deg) rotateZ(-13deg)}
.premium-visual-orb i:nth-child(2){inset:-30%;opacity:.48;transform:rotateX(72deg) rotateZ(21deg)}
.premium-visual-orb b{position:absolute;width:10%;aspect-ratio:1;right:5%;top:19%;border-radius:50%;background:#c6b2f6;box-shadow:0 0 16px rgba(198,178,246,.7)}
.premium-visual-index{position:absolute;left:18px;top:17px;color:#b7adc9;font:620 clamp(.42rem,.62vw,.58rem)/1 Inter,sans-serif}
.premium-visual>small{position:absolute;left:18px;bottom:17px;color:#787482;font:650 clamp(.38rem,.55vw,.5rem)/1 Inter,sans-serif;letter-spacing:.16em}
.premium-copy{
  position:absolute;
  z-index:2;
  left:55%;
  top:51%;
  width:40%;
  translate:0 -43%;
}
.premium-copy>small{
  color:#9f82ea;
  font:750 clamp(.44rem,.72vw,.65rem)/1 Inter,sans-serif;
  letter-spacing:.17em;
}
.premium-copy>strong{
  display:block;
  margin-top:18px;
  font:520 clamp(2.05rem,4.7vw,5rem)/.9 Inter,sans-serif;
  letter-spacing:-.072em;
}
.premium-copy>strong em{color:#b49cf1;font-style:normal;font-weight:480}
.premium-copy>p{
  max-width:430px;
  margin:21px 0 0;
  color:rgba(255,255,255,.68);
  font:400 clamp(.58rem,.9vw,.82rem)/1.7 Inter,sans-serif;
}
.premium-copy>div{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:25px;
}
.premium-copy>div i{
  padding:11px 16px;
  color:#141019;
  background:#c4adfa;
  font:800 clamp(.45rem,.7vw,.62rem)/1 Inter,sans-serif;
  font-style:normal;
}
.premium-copy>div span{
  padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.5);
  font-size:clamp(.45rem,.72vw,.64rem);
}
.premium-foot{
  position:absolute;
  z-index:2;
  left:clamp(24px,5vw,72px);
  right:clamp(24px,5vw,72px);
  bottom:25px;
  display:flex;
  gap:34px;
  color:rgba(255,255,255,.54);
  font:700 clamp(.4rem,.62vw,.55rem)/1 Inter,sans-serif;
  letter-spacing:.1em;
}
.compare-legacy{
  z-index:3;
  color:#202020;
  clip-path:inset(0 calc(100% - var(--compare)) 0 0);
  background:#f4f1e8;
  font-family:Arial,Helvetica,sans-serif;
}
.legacy-top{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  color:#6a0c0c;
  border-bottom:4px solid #8e1717;
  background:#fff;
}
.legacy-top b{
  font-size:clamp(1rem,1.7vw,1.45rem);
  font-family:"Times New Roman",serif;
}
.legacy-top span{font-size:clamp(.4rem,.7vw,.62rem);font-weight:700}
.legacy-banner{
  display:grid;
  place-items:center;
  height:38px;
  color:#fff;
  background:linear-gradient(#a92121,#6f0909);
  font-size:clamp(.5rem,.8vw,.72rem);
  font-weight:bold;
  text-decoration:underline;
}
.legacy-main{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:24px;
  min-height:57%;
  padding:28px 30px 18px;
  background:
    repeating-linear-gradient(0deg,rgba(109,20,20,.025) 0 1px,transparent 1px 4px),
    #f4f1e8;
}
.legacy-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-top:12px;
}
.legacy-text strong{
  color:#790e0e;
  font:700 clamp(1.4rem,2.8vw,2.5rem)/1 "Times New Roman",serif;
}
.legacy-text small{
  margin-top:10px;
  color:#555;
  font-size:clamp(.55rem,.95vw,.82rem);
  font-weight:bold;
}
.legacy-text p{
  max-width:440px;
  margin:17px 0 0;
  color:#4b4b4b;
  font-size:clamp(.52rem,.82vw,.75rem);
  line-height:1.55;
}
.legacy-text button{
  margin-top:20px;
  padding:10px 14px;
  color:#fff;
  border:2px outset #be5050;
  border-radius:0;
  background:linear-gradient(#b62828,#6d0707);
  font:700 clamp(.45rem,.72vw,.63rem)/1 Arial,sans-serif;
  pointer-events:none;
}
.legacy-stock{
  position:relative;
  width:100%;
  height:100%;
  min-height:205px;
  overflow:hidden;
  border:6px solid white;
  background:
    linear-gradient(145deg,transparent 49.5%,#a8a8a8 50% 50.5%,transparent 51%),
    linear-gradient(35deg,transparent 49.5%,#aaa 50% 50.5%,transparent 51%),
    #d0d0d0;
  box-shadow:0 0 0 1px #bbb,4px 5px 0 rgba(0,0,0,.12);
}
.legacy-stock span{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;padding:7px 10px;color:#777;border:1px solid #aaa;background:#dedede;font:700 clamp(.48rem,.75vw,.68rem)/1 Arial,sans-serif}
.legacy-stock i{position:absolute;left:19%;bottom:17%;width:26%;height:29%;background:#b7b7b7;clip-path:polygon(50% 0,100% 100%,0 100%)}
.legacy-stock b{position:absolute;right:17%;top:18%;width:12%;aspect-ratio:1;border-radius:50%;background:#bababa}
.legacy-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0 30px;
  border:1px solid #c8c2b4;
  background:#e5dfd2;
}
.legacy-columns div{
  min-height:72px;
  padding:10px 14px;
  border-right:1px solid #bbb3a3;
}
.legacy-columns div:last-child{border-right:0}
.legacy-columns b{
  display:block;
  margin-bottom:7px;
  color:#761010;
  font:700 clamp(.56rem,.88vw,.78rem)/1 "Times New Roman",serif;
}
.legacy-columns span{
  color:#565656;
  font-size:clamp(.43rem,.68vw,.62rem);
  line-height:1.45;
}
.legacy-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:25px;
  display:grid;
  place-items:center;
  color:#777;
  background:#d8d3c8;
  font-size:clamp(.38rem,.58vw,.52rem);
}
.compare-caption{
  position:absolute;
  z-index:15;
  top:18px;
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:none;
  transition:opacity .25s;
}
.compare-caption span{
  padding:7px 10px;
  border-radius:999px;
  font:850 .56rem/1 Inter,sans-serif;
  letter-spacing:.1em;
}
.compare-caption small{
  font:650 .58rem/1 Inter,sans-serif;
}
.compare-caption-before{left:18px;color:#701010}
.compare-caption-before span{color:white;background:#841414}
.compare-caption-after{right:18px;color:white}
.compare-caption-after span{color:#17111f;background:#c4adfa}
.compare-caption-after small{color:rgba(255,255,255,.72)}
.compare-range{
  position:absolute;
  z-index:20;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:ew-resize;
  opacity:0;
}
.compare-divider{
  z-index:12;
  left:var(--compare);
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 20px rgba(0,0,0,.35);
  pointer-events:none;
}
.compare-divider span{
  width:50px;
  height:50px;
  gap:10px;
  border:2px solid rgba(255,255,255,.9);
  background:#0b0c12;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.compare-divider span i{
  color:#fff;
  font:500 1.2rem/1 Inter,sans-serif;
  font-style:normal;
}
.before-after:focus-within{
  outline:2px solid rgba(167,139,250,.8);
  outline-offset:5px;
}
.before-after.is-dragging .compare-divider span{scale:1.1}

@media(max-width:1100px){
  .cinematic-hero .hero-device-theatre{
    width:min(100%,760px)!important;
    margin:4px auto 0!important;
  }
}
@media(max-width:760px){
  .cinematic-hero .hero-device-theatre{
    width:116%!important;
    height:440px!important;
    margin:2px 0 0 -8%!important;
  }
  .hero-laptop{
    top:72px;
    width:82%;
    scale:.83;
    transform-origin:left top;
  }
  .hero-phone{
    right:2%;
    top:112px;
    width:115px;
  }
  .laptop-shadow{bottom:54px}
  .phone-shadow{bottom:76px}
  .before-after[data-compare]{
    min-height:470px;
    aspect-ratio:auto;
    border-radius:18px;
  }
  .premium-nav{gap:10px}
  .premium-nav div{display:none}
  .premium-copy{left:47%;width:49%;top:48%}
  .premium-copy>strong{font-size:clamp(2.35rem,10vw,4.4rem)}
  .premium-copy>p{max-width:290px}
  .premium-foot{gap:14px}
  .legacy-top{height:62px;padding:0 18px}
  .legacy-main{grid-template-columns:1fr;gap:12px;padding:20px 18px 12px}
  .legacy-main>img,.legacy-stock{min-height:118px;max-height:145px}
  .legacy-text{padding-top:0}
  .legacy-text p{margin-top:10px}
  .legacy-text button{margin-top:12px}
  .legacy-columns{margin:0 18px}
  .legacy-columns div{min-height:58px;padding:8px}
  .compare-caption small{display:none}
}
@media(max-width:470px){
  .cinematic-hero .hero-device-theatre{
    width:122%!important;
    height:355px!important;
    margin:-2px 0 0 -11%!important;
  }
  .hero-laptop{
    top:50px;
    width:88%;
    scale:.62;
  }
  .hero-phone{
    right:0;
    top:82px;
    width:88px;
  }
  .hero-phone-frame{border-radius:22px;padding:4px}
  .hero-phone-screen,.hero-phone-boot{border-radius:18px}
  .hero-phone-island{top:9px;width:36px;height:11px}
  .hero-phone-screen{padding:25px 7px 8px}
  .phone-ui-art{height:65px;margin:12px 0 9px}
  .hero-phone-screen>strong{font-size:9px}
  .hero-phone-screen>button{padding:5px 8px}
  .laptop-shadow{bottom:60px}
  .phone-shadow{bottom:70px}
  .before-after[data-compare]{min-height:430px}
  .premium-copy{left:47%;width:50%}
  .premium-copy>p{display:none}
  .premium-copy>div{margin-top:18px}
  .premium-foot{left:20px;right:20px;gap:9px}
  .premium-foot span:last-child{display:none}
  .legacy-banner{height:31px}
  .legacy-main{min-height:60%}
  .legacy-text p{max-width:260px}
  .legacy-columns div:nth-child(2){display:none}
  .legacy-columns{grid-template-columns:1fr 1fr}
  .compare-divider span{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .hero-laptop,
  .hero-laptop-lid,
  .hero-web-screen,
  .hero-laptop-boot,
  .hero-screen-shine,
  .hero-screen-art b,
  .hero-phone,
  .hero-phone-screen,
  .hero-phone-boot,
  .hero-phone-boot .boot-mark,
  .hero-phone-boot span::after,
  .hero-phone-glass,
  .hero-device-theatre::before{
    animation:none!important;
  }
  .hero-laptop,
  .hero-phone,
  .hero-web-screen,
  .hero-phone-screen{opacity:1!important;filter:none!important}
  .hero-laptop-lid{transform:rotateX(0)!important}
  .hero-laptop-boot,
  .hero-phone-boot{display:none!important}
}


/* ==========================================================
   V33 — ultrathin laptop deck, no dark bar below
   ========================================================== */
.hero-laptop-base{
  top:337px;
  height:46px;
  transform:perspective(760px) rotateX(69deg);
  border-color:rgba(255,255,255,.2);
  border-radius:5px 5px 11px 11px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.2),transparent 13% 84%,rgba(255,255,255,.07)),
    linear-gradient(160deg,#555a63 0%,#25282e 47%,#3e424a 100%);
  box-shadow:
    0 18px 24px rgba(0,0,0,.24),
    inset 0 1px rgba(255,255,255,.24);
}
.hero-keyboard{
  left:9%;
  right:9%;
  top:4px;
  gap:2px;
  padding:3px;
  border-radius:5px;
  background:rgba(4,5,8,.19);
}
.hero-keyboard span{
  height:3px;
  border-radius:1px;
  background:linear-gradient(145deg,#34373e,#17191e);
  box-shadow:inset 0 .5px rgba(255,255,255,.11);
}
.hero-trackpad{
  left:39%;
  bottom:4px;
  width:22%;
  height:10px;
  border-color:rgba(0,0,0,.3);
  border-radius:3px;
}
.hero-laptop-lip,
.laptop-shadow{
  display:none!important;
}


/* ==========================================================
   V34 — genuine mobile interface
   Mobile is recomposed instead of shrinking the desktop layout.
   ========================================================== */
@media(max-width:1000px){
  html{scroll-padding-top:86px}
  body.menu-open{overflow:hidden}

  .header{
    inset:8px 8px auto;
    overflow:visible;
    border-radius:17px;
  }
  .header:has(.mobile-nav.open){
    background:rgba(7,8,18,.97);
    border-color:rgba(167,139,250,.2);
    box-shadow:0 24px 80px rgba(0,0,0,.55);
  }
  .navbar{
    width:calc(100% - 24px);
    height:64px;
    gap:18px;
  }
  .menu-btn{
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    flex:0 0 43px;
    margin-left:auto;
    padding:0;
    color:#f7f4ff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;
    background:
      radial-gradient(circle at 30% 20%,rgba(167,139,250,.13),transparent 55%),
      rgba(255,255,255,.035);
    box-shadow:inset 0 1px rgba(255,255,255,.07);
    font-size:1.08rem;
    line-height:1;
    transition:transform .28s var(--ease-out),border-color .28s,background .28s;
  }
  .menu-btn[aria-expanded="true"]{
    border-color:rgba(167,139,250,.36);
    background:rgba(139,92,246,.12);
    transform:rotate(90deg);
  }
  .mobile-nav{
    display:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:0 8px 8px;
    padding:10px;
    max-height:calc(100dvh - 88px);
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:
      radial-gradient(circle at 95% 0,rgba(139,92,246,.11),transparent 34%),
      rgba(8,9,18,.96);
    box-shadow:inset 0 1px rgba(255,255,255,.035);
  }
  .mobile-nav.open{
    display:grid;
    animation:mobileMenuIn .32s var(--ease-out) both;
  }
  .mobile-nav a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:12px 14px;
    color:#dfe1e9;
    border:1px solid rgba(255,255,255,.065);
    border-radius:11px;
    background:rgba(255,255,255,.018);
    font-size:.79rem;
    font-weight:720;
  }
  .mobile-nav a[aria-current="page"]{
    color:#fff;
    border-color:rgba(167,139,250,.29);
    background:rgba(139,92,246,.1);
  }
  .mobile-nav a:nth-last-child(2){
    color:#fff;
    border-color:rgba(167,139,250,.28);
    background:linear-gradient(135deg,rgba(124,58,237,.26),rgba(109,40,217,.13));
  }
  @keyframes mobileMenuIn{
    from{opacity:0;transform:translateY(-8px) scale(.985)}
    to{opacity:1;transform:none}
  }

  .cinematic-hero{
    min-height:auto;
    padding:112px 0 26px;
    overflow:hidden;
    background:
      radial-gradient(520px circle at 50% 70%,rgba(109,40,217,.13),transparent 70%),
      linear-gradient(180deg,rgba(5,6,16,.12),transparent);
  }
  .cinematic-hero::after{
    width:360px;
    height:360px;
    right:-18%;
    top:47%;
    opacity:.65;
  }
  .cinematic-hero .hero-grid{
    display:flex!important;
    flex-direction:column;
    min-height:0;
    gap:10px;
  }
  .cinematic-hero .hero-copy{
    max-width:760px;
    padding-top:0;
  }
  .cinematic-hero .hero-device-theatre{
    width:min(106%,760px)!important;
    height:440px!important;
    margin:2px auto 0!important;
  }
  .hero-laptop{
    left:1%;
    top:54px;
    width:82%;
    scale:.84;
    transform-origin:left top;
  }
  .hero-phone{
    right:2%;
    top:100px;
    width:110px;
  }

  .section,.section-tight{padding:72px 0}
  .section-head-row{
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
    margin-bottom:30px;
  }
  .section-head-row>p{max-width:680px}
  .projects-grid,.services-grid,.offers{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .device-lab{
    grid-template-columns:1fr;
    min-height:880px;
    padding:40px;
  }
  .device-copy{max-width:720px}
  .device-stage{
    width:min(100%,720px);
    height:500px;
    margin:10px auto 0;
  }
  .narrative-grid,.feature-stage,.technical-note{
    grid-template-columns:1fr;
    gap:36px;
  }
  .case-aside{position:static}
  .floating-cta{display:none}
}

@media(max-width:700px){
  :root{--mobile-gutter:18px}
  body{
    padding-bottom:78px;
    background:
      radial-gradient(circle at 100% 0,rgba(108,42,255,.14),transparent 23%),
      #050610;
  }
  body:before{
    background-size:48px 48px;
    opacity:.65;
  }
  .container{
    width:calc(100% - (var(--mobile-gutter) * 2));
  }

  .header{
    inset:7px 7px auto;
    border-radius:16px;
  }
  .navbar{
    width:calc(100% - 22px);
    height:60px;
  }
  .brand-symbol{
    width:32px;
    height:32px;
    border-radius:9px;
  }
  .brand-word{font-size:1rem}
  .brand-word small{font-size:.4rem}
  .menu-btn{
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:12px;
  }
  .mobile-nav{
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin:0 7px 7px;
    padding:8px;
  }
  .mobile-nav a{
    min-height:46px;
    padding:11px 12px;
    font-size:.75rem;
  }

  h2{
    font-size:clamp(2rem,9.4vw,2.75rem);
    line-height:1;
    letter-spacing:-.055em;
  }
  h3{font-size:1.25rem}
  .eyebrow{
    margin-bottom:9px;
    font-size:.59rem;
    letter-spacing:.17em;
  }
  .section-head-row h2 br,
  .device-copy h2 br,
  .cta h2 br,
  .value-copy h2 br{display:none}

  .cinematic-hero{
    padding:102px 0 16px;
  }
  .badge{
    margin-bottom:18px;
    padding:7px 10px;
    font-size:.54rem;
    letter-spacing:.055em;
  }
  .cinematic-hero .hero-title-cinematic{
    max-width:560px;
    font-size:clamp(2.3rem,10.6vw,3.25rem);
    font-weight:520;
    line-height:.94;
    letter-spacing:-.067em;
  }
  .cinematic-hero .hero-line{
    display:inline!important;
    width:auto;
    max-width:100%;
  }
  .cinematic-hero .hero-line.accent{width:auto}
  .cinematic-hero .hero-line.accent::after{display:none}
  .hero .lead{
    max-width:540px;
    margin-top:20px;
    font-size:.97rem;
    line-height:1.7;
  }
  .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:25px;
  }
  .btn{
    width:100%;
    min-height:52px;
    padding:0 18px;
    border-radius:14px;
    font-size:.8rem;
  }
  .hero-proof{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:18px;
  }
  .hero-proof span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 8px;
    text-align:center;
    font-size:.54rem;
  }
  .cinematic-hero .hero-device-theatre{
    width:112%!important;
    height:320px!important;
    margin:6px 0 0 -6%!important;
  }
  .hero-device-theatre::before{
    width:360px;
    height:260px;
    left:2%;
    top:5%;
  }
  .hero-laptop{
    left:1%;
    top:27px;
    width:91%;
    scale:.7;
    transform-origin:left top;
  }
  .hero-phone{
    right:2%;
    top:62px;
    width:82px;
  }
  .laptop-shadow,.phone-shadow{display:none!important}

  .section{padding:64px 0}
  .section-tight{padding:43px 0}
  .section-head-row{
    gap:14px;
    margin-bottom:25px;
  }
  .section-head-row>p{
    font-size:.88rem;
    line-height:1.7;
  }

  .projects-grid,.services-grid,.offers,.lab-grid,
  .experience-grid,.sector-grid{
    grid-template-columns:1fr;
    gap:13px;
  }
  .project-card{
    min-height:340px!important;
    aspect-ratio:5/4;
    border-radius:18px;
  }
  .project-overlay{left:14px;right:14px;top:14px}
  .project-index,.project-open{
    padding:6px 8px;
    font-size:.54rem;
  }
  .project-copy{left:18px;right:18px;bottom:18px}
  .project-copy p{
    max-width:320px;
    font-size:.76rem;
  }
  .project-copy .link{font-size:.68rem}
  .center-action{margin-top:20px}

  .service{
    min-height:0;
    padding:23px;
    border-radius:17px;
  }
  .service .icon{margin-bottom:24px}
  .service p{
    font-size:.84rem;
    line-height:1.7;
  }
  .sector-card{
    min-height:188px;
    padding:23px;
    border-radius:17px;
  }
  .sector-card:after{inset:12px}
  .sector-num{top:22px;left:23px}
  .sector-card h3{
    max-width:285px;
    font-size:1.45rem;
    line-height:1.04;
  }
  .sector-card>i{
    width:39px;
    height:39px;
    flex:0 0 39px;
  }

  .device-lab{
    min-height:665px;
    padding:25px 19px;
    border-radius:22px;
    gap:8px;
  }
  .device-copy h2{
    font-size:clamp(2rem,9.7vw,2.75rem);
  }
  .device-copy p{
    margin-top:15px;
    font-size:.86rem;
    line-height:1.72;
  }
  .device-tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:21px;
  }
  .device-tabs button{
    min-height:42px;
    padding:8px 4px;
    font-size:.54rem;
  }
  .device-stage{
    width:100%;
    height:305px;
    margin-top:12px;
  }
  .device-orbit-glow{
    width:300px;
    height:300px;
    right:-8%;
    top:0;
  }
  .desktop-device{width:81%;left:0;top:11%}
  .desktop-frame{padding:5px 5px 7px;border-radius:11px}
  .desktop-frame .site-screen{border-radius:6px}
  .desktop-stand{height:31px}
  .screen-browser{height:14px;padding:0 5px}
  .screen-site{height:calc(100% - 14px);padding:7px}
  .screen-hero{min-height:59%;gap:6px}
  .screen-art{height:58px}
  .screen-cards i{height:16px}
  .tablet-device{width:32%;right:5%;top:18%}
  .tablet-frame{padding:5px;border-radius:13px}
  .tablet-screen{border-radius:8px}
  .tablet-site{padding:8px 6px}
  .tablet-hero{margin-top:13px}
  .tablet-art{margin-top:9px}
  .mobile-device{width:19%;right:-1%;bottom:2%}
  .mobile-frame{padding:3px;border-radius:13px}
  .mobile-screen{border-radius:10px}
  .mobile-speaker{top:6px;height:5px}
  .mobile-site{padding:12px 5px 5px}

  .experience-card{
    min-height:285px;
    padding:22px;
    border-radius:17px;
  }
  .experience-demo{height:125px}

  .process-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    padding-left:8px;
  }
  .process-line:before{
    left:11px;
    right:auto;
    top:4px;
    bottom:12px;
    width:1px;
    height:auto;
    background:linear-gradient(#8b5cf6,rgba(139,92,246,.12));
  }
  .process-card{
    min-height:0;
    padding:0 0 30px 40px;
    border:0;
  }
  .process-card:last-child{padding-bottom:0}
  .process-card:before{
    left:-1px;
    top:3px;
  }
  .process-card h3{margin-top:8px}
  .process-card p{
    margin-top:7px;
    font-size:.82rem;
  }

  .trust-strip{
    grid-template-columns:1fr 1fr;
    border-radius:17px;
  }
  .trust-item{
    min-height:105px;
    padding:19px;
    border:0;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .trust-item:nth-child(2n){border-right:0}
  .trust-item:nth-last-child(-n+2){border-bottom:0}
  .trust-item strong{font-size:1rem}

  .value-stage{
    min-height:0;
    padding:27px 21px;
    border-radius:19px;
  }
  .value-orbit{
    height:235px;
    margin:-8px 0 -18px;
    transform:scale(.72);
  }
  .manifesto{
    min-height:0;
    padding:30px 0;
    gap:28px;
  }
  .manifesto-big{
    margin-top:22px;
    font-size:clamp(3.2rem,15vw,4.7rem);
    line-height:.86;
  }
  .manifesto-bottom{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:30px;
  }
  .manifesto-points{gap:10px}
  .manifesto-sphere{
    width:190px;
    height:190px;
  }
  .manifesto-sphere b{font-size:3rem}

  .offer{
    min-height:0;
    padding:24px;
    border-radius:18px;
  }
  .offer.featured,.offer.featured:hover{transform:none}
  .offer .price{font-size:1.75rem}
  .offer p{min-height:0}
  .offer ul{margin-bottom:22px}
  .ribbon{
    position:static;
    align-self:flex-start;
    margin-bottom:12px;
  }
  .feature-chips,.tech-pills{gap:8px}
  .feature-chips span,.tech-pills span{
    padding:10px 12px;
    font-size:.68rem;
  }
  .faq-list summary{
    grid-template-columns:34px 1fr 25px;
    min-height:72px;
    gap:8px;
    font-size:.92rem;
    line-height:1.35;
  }
  .faq-list details p{
    padding:0 4px 24px 42px;
    font-size:.84rem;
  }

  .cta{
    padding:38px 21px;
    border-radius:20px;
  }
  .cta p{
    margin:15px auto 22px;
    font-size:.88rem;
  }
  .cta .actions{margin-top:22px}

  .page-hero,.case-hero{
    padding:112px 0 34px;
  }
  .page-hero h1,.case-intro h1{
    font-size:clamp(2.55rem,11.4vw,3.55rem);
    line-height:.95;
    letter-spacing:-.06em;
  }
  .page-hero p,.case-intro>p{
    margin-top:17px;
    font-size:.93rem;
    line-height:1.72;
  }
  .case-meta{
    display:grid;
    gap:8px;
    margin-top:22px;
  }
  .case-cover,.case-cover-premium{
    width:100%!important;
    margin-top:24px!important;
    padding:4px!important;
    border-radius:13px!important;
  }
  .case-cover img,.case-cover-premium img{
    border-radius:9px!important;
  }
  .case-summary-grid{
    grid-template-columns:1fr;
    border-radius:16px;
  }
  .case-summary-grid>div{
    padding:20px;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }
  .case-summary-grid>div:last-child{border-bottom:0!important}
  .case-summary-grid small{margin-top:12px}
  .narrative-grid,.feature-stage,.technical-note{gap:28px}
  .case-aside h2{font-size:2.15rem}
  .case-chapter{
    grid-template-columns:32px 1fr;
    gap:12px;
    padding:24px 0;
  }
  .case-chapter p{
    font-size:.84rem;
    line-height:1.7;
  }
  .feature-stage{
    padding:23px;
    border-radius:17px;
  }
  .feature-stage ul{grid-template-columns:1fr}

  .contact-grid{gap:24px}
  .form-box{
    padding:20px;
    border-radius:17px;
  }
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .field input,.field textarea,.field select{
    min-height:52px;
    padding:13px 14px;
    border-radius:10px;
    font-size:16px;
  }
  .field textarea{min-height:145px}

  footer{padding:35px 0 22px}
  .footer-row{
    align-items:flex-start;
    flex-direction:column;
    gap:25px;
    padding-bottom:56px;
  }
  .footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    gap:0;
    border-top:1px solid var(--line);
  }
  .footer-links a{
    min-height:44px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--line);
  }

  .floating-cta{
    display:flex;
    left:14px;
    right:14px;
    bottom:max(10px,env(safe-area-inset-bottom));
    min-height:54px;
    justify-content:center;
    padding:8px 11px 8px 18px;
    border-color:rgba(167,139,250,.35);
    background:rgba(8,9,18,.92);
    box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.08);
    font-size:.74rem;
    opacity:0;
    pointer-events:none;
    transform:translateY(18px);
  }
  body.show-floating-cta .floating-cta{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .floating-cta span{
    width:34px;
    height:34px;
  }
}

@media(max-width:620px){
  /* A side-by-side desktop comparison becomes two readable mobile panels. */
  .before-after[data-compare]{
    min-height:748px;
    aspect-ratio:auto;
    border-radius:19px;
    background:#080910;
  }
  .before-after[data-compare]::after{
    content:"";
    position:absolute;
    z-index:8;
    left:15px;
    right:15px;
    top:368px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(167,139,250,.35),transparent);
  }
  .compare-site{
    inset:auto 0 auto;
    height:355px;
  }
  .compare-legacy{
    top:0;
    clip-path:none;
  }
  .compare-premium{
    top:385px;
    z-index:4;
  }
  .compare-range,.compare-divider{display:none}
  .compare-caption{top:12px}
  .compare-caption-before{left:12px}
  .compare-caption-after{
    top:397px;
    right:12px;
  }
  .compare-caption span{
    padding:6px 9px;
    font-size:.51rem;
  }

  .legacy-top{
    height:52px;
    padding:0 14px;
  }
  .legacy-top span{max-width:58%;text-align:right}
  .legacy-banner{height:27px}
  .legacy-main{
    grid-template-columns:1.1fr .9fr;
    gap:10px;
    width:100%;
    height:183px;
    min-height:183px;
    padding:16px 14px 10px;
  }
  .legacy-text strong{font-size:1.25rem}
  .legacy-text small{margin-top:6px}
  .legacy-text p{
    margin-top:8px;
    font-size:.53rem;
  }
  .legacy-text button{
    margin-top:9px;
    padding:7px 9px;
  }
  .legacy-stock{
    min-height:125px;
    max-height:145px;
    border-width:4px;
  }
  .legacy-columns{
    height:68px;
    margin:0 14px;
  }
  .legacy-columns div{
    min-height:0;
    padding:8px;
  }
  .legacy-footer{height:25px}

  .premium-nav{
    left:16px;
    right:16px;
    top:16px;
    padding-bottom:12px;
  }
  .premium-nav div,.premium-nav>em{display:none}
  .premium-visual{
    left:16px;
    top:74px;
    width:43%;
    height:225px;
    border-radius:13px;
  }
  .premium-visual-orb{
    width:105px;
    right:4%;
    top:22%;
  }
  .premium-copy{
    left:50%;
    top:55%;
    width:47%;
    translate:0 -45%;
  }
  .premium-copy>small{
    font-size:.38rem;
    letter-spacing:.12em;
  }
  .premium-copy>strong{
    margin-top:11px;
    font-size:clamp(1.55rem,8.4vw,2.25rem);
    line-height:.91;
  }
  .premium-copy>p{
    display:block;
    margin-top:11px;
    font-size:.48rem;
    line-height:1.55;
  }
  .premium-copy>div{
    gap:8px;
    margin-top:12px;
  }
  .premium-copy>div i{
    padding:7px 8px;
    font-size:.42rem;
  }
  .premium-copy>div span{font-size:.4rem}
  .premium-foot{
    left:16px;
    right:16px;
    bottom:13px;
    gap:12px;
    font-size:.39rem;
  }
}

@media(max-width:410px){
  :root{--mobile-gutter:16px}
  .mobile-nav a{font-size:.71rem}
  .cinematic-hero .hero-title-cinematic{
    font-size:clamp(2.2rem,10.4vw,2.9rem);
  }
  .hero .lead{font-size:.91rem}
  .cinematic-hero .hero-device-theatre{
    width:116%!important;
    height:292px!important;
    margin-left:-8%!important;
  }
  .hero-laptop{
    top:22px;
    width:95%;
    scale:.65;
  }
  .hero-phone{
    right:1%;
    top:55px;
    width:73px;
  }
  .hero-phone-frame{border-radius:20px;padding:4px}
  .hero-phone-screen,.hero-phone-boot{border-radius:17px}
  .hero-phone-island{top:8px;width:33px;height:10px}
  .hero-phone-screen{padding:23px 6px 7px}
  .phone-ui-art{height:58px}
  .hero-proof span{font-size:.51rem}
  .project-card{min-height:310px!important}
  .device-lab{min-height:640px}
  .device-stage{height:275px}
  .faq-list summary{font-size:.86rem}
  .trust-item{padding:16px}
}

@media(hover:none){
  .project-card:hover,.service:hover,.offer:hover,.experience-card:hover,
  .sector-card:hover,.process-card:hover,.btn:hover{
    transform:none!important;
  }
  .project-card:hover img{transform:none!important}
  .project-card:before{display:none}
}

@media(prefers-reduced-motion:reduce){
  .mobile-nav.open{animation:none}
}


/* ==========================================================
   V35 — compact mobile devices and pricing
   ========================================================== */
.offer-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.offer-title-row h3{margin-top:5px}
.offer-title-row .price{
  flex:0 0 auto;
  margin:0;
  text-align:right;
}
.offer .price small{
  display:block;
  margin-bottom:5px;
  color:#818695;
  font-size:.48rem;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.offer-details{margin:0 0 24px}
.offer-details summary{display:none}
.offer-details>ul{display:grid}

@media(max-width:700px){
  .cinematic-hero{
    overflow:hidden;
  }
  .cinematic-hero .hero-device-theatre{
    width:100%!important;
    height:232px!important;
    margin:14px 0 0!important;
    overflow:visible!important;
  }
  .hero-device-theatre::before{
    width:300px;
    height:205px;
    left:1%;
    top:0;
    filter:blur(23px);
  }
  .hero-laptop{
    left:0;
    top:16px;
    width:270px;
    height:200px;
    scale:1;
    transform-origin:left top;
  }
  .hero-laptop-lid{
    padding:3px;
    border-radius:9px 9px 5px 5px;
  }
  .hero-laptop-bezel{border-radius:6px 6px 3px 3px}
  .hero-web-screen{padding:7px 8px 6px}
  .hero-screen-nav{
    height:12px;
    gap:6px;
  }
  .hero-screen-nav span,.hero-screen-nav em{display:none}
  .hero-screen-layout{
    grid-template-columns:1fr .92fr;
    gap:7px;
    min-height:calc(100% - 12px);
  }
  .hero-screen-copy small{
    margin-bottom:6px;
    font-size:3px;
  }
  .hero-screen-copy strong{font-size:10px}
  .hero-screen-copy p{
    width:94%;
    margin-top:6px;
    font-size:3.3px;
  }
  .hero-screen-copy button{
    margin-top:7px;
    padding:5px 7px;
    font-size:3.5px;
  }
  .hero-screen-art{
    height:102px;
    border-radius:5px;
  }
  .hero-art-orb{
    width:50px;
    height:50px;
    right:12%;
    top:23%;
  }
  .hero-art-note{left:7px;bottom:7px}
  .hero-art-note small{display:none}
  .hero-art-note strong{font-size:4.7px}
  .hero-screen-grid{display:none}
  .hero-laptop-hinge{
    left:17%;
    top:162px;
    width:66%;
    height:5px;
  }
  .hero-laptop-base{
    left:1%;
    top:161px;
    width:98%;
    height:29px;
    border-radius:4px 4px 8px 8px;
  }
  .hero-keyboard{
    left:9%;
    right:9%;
    top:3px;
    gap:1px;
    padding:2px;
  }
  .hero-keyboard span{height:2px}
  .hero-trackpad{
    left:39%;
    bottom:3px;
    width:22%;
    height:6px;
  }
  .hero-phone{
    right:0;
    top:40px;
    width:70px;
  }
  .hero-phone-frame{
    border-radius:20px;
    padding:3px;
  }
  .hero-phone-screen,.hero-phone-boot{border-radius:17px}
  .hero-phone-island{
    top:7px;
    width:31px;
    height:9px;
  }
  .hero-phone-screen{padding:22px 6px 6px}
  .hero-phone-screen>small{margin-top:11px;font-size:2.7px}
  .hero-phone-screen>strong{margin-top:6px;font-size:8px}
  .hero-phone-screen>p{margin-top:6px;font-size:3px}
  .hero-phone-screen>button{margin-top:7px;padding:4px 6px;font-size:3px}
  .phone-ui-art{
    height:52px;
    margin:8px 0 6px;
  }
  .phone-ui-art i{width:38px;height:38px;right:5px;top:7px}
  .phone-ui-art b{width:27px;height:27px;right:11px;top:12px}
  .phone-ui-foot{padding-top:5px;font-size:2.7px}

  .offers{
    gap:10px!important;
  }
  .premium-offers .offer.featured,
  .offers .offer.featured{
    order:-1;
  }
  .offer{
    min-height:0!important;
    padding:18px!important;
    border-radius:16px!important;
    background:
      linear-gradient(120deg,rgba(255,255,255,.025),transparent 48%),
      rgba(255,255,255,.012);
    box-shadow:none!important;
  }
  .offer.featured{
    border-color:rgba(167,139,250,.38);
    background:
      radial-gradient(circle at 100% 0,rgba(139,92,246,.16),transparent 38%),
      linear-gradient(120deg,rgba(255,255,255,.035),transparent 48%),
      #0a0a15;
  }
  .offer-title-row{
    align-items:flex-end;
    gap:12px;
    padding-right:0;
  }
  .offer.featured .offer-title-row{padding-top:27px}
  .offer-title-row h3{
    margin-top:4px;
    font-size:1.32rem;
  }
  .offer-title-row .price{
    margin:0!important;
    font-size:1.45rem!important;
    line-height:1;
  }
  .offer .price small{
    margin-bottom:4px;
    font-size:.43rem;
  }
  .offer>p{
    margin-top:13px;
    font-size:.78rem;
    line-height:1.55;
  }
  .offer-details{
    margin:15px 0 13px;
    border-top:1px solid rgba(255,255,255,.075);
    border-bottom:1px solid rgba(255,255,255,.075);
  }
  .offer-details summary{
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:#c7cad4;
    cursor:pointer;
    list-style:none;
    font-size:.72rem;
    font-weight:720;
  }
  .offer-details summary::-webkit-details-marker{display:none}
  .offer-details summary i{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    flex:0 0 25px;
    border:1px solid rgba(167,139,250,.25);
    border-radius:50%;
    color:#b99cff;
    font-size:.85rem;
    font-style:normal;
    transition:transform .25s,background .25s;
  }
  .offer-details>ul{
    display:none;
    grid-template-columns:1fr 1fr;
    gap:7px 12px;
    margin:0 0 14px!important;
  }
  .offer-details[open]>ul{display:grid}
  .offer-details[open] summary i{
    transform:rotate(45deg);
    background:rgba(139,92,246,.12);
  }
  .offer-details li{
    padding:0!important;
    font-size:.68rem;
    line-height:1.4;
  }
  .offer .btn{
    min-height:46px;
    margin-top:0!important;
    border-radius:12px;
    font-size:.73rem;
  }
  .ribbon{
    position:absolute!important;
    top:15px!important;
    right:16px!important;
    left:auto!important;
    margin:0!important;
    padding:5px 8px;
    font-size:.47rem;
  }
}

@media(max-width:350px){
  .cinematic-hero .hero-device-theatre{height:215px!important}
  .hero-laptop{
    width:240px;
    top:18px;
  }
  .hero-laptop-hinge{top:145px}
  .hero-laptop-base{top:144px;height:27px}
  .hero-phone{width:62px;top:42px}
  .offer-details>ul{grid-template-columns:1fr}
}

/* ==========================================================
   V22 — instant native navigation and reliable browser history
   ========================================================== */
@view-transition{
  navigation:auto;
}

body,
body.page-leaving{
  opacity:1;
  filter:none;
  transition:none;
}

.header{
  view-transition-name:site-header;
}

main{
  view-transition-name:site-content;
}

::view-transition-group(site-header){
  z-index:10000;
}

::view-transition-old(site-header),
::view-transition-new(site-header){
  animation:none;
  mix-blend-mode:normal;
}

::view-transition-old(site-content){
  animation:page-out .12s ease-out both;
}

::view-transition-new(site-content){
  animation:page-in .3s cubic-bezier(.16,1,.3,1) both;
}

@keyframes page-out{
  to{
    opacity:0;
    transform:translateY(-4px);
  }
}

@keyframes page-in{
  from{
    opacity:0;
    transform:translateY(9px);
  }
}

main>section:not(:first-child),
footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 760px;
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(site-content),
  ::view-transition-new(site-content){
    animation-duration:.001ms;
  }
}

/* ==========================================================
   V23 — legal footer and transparent privacy controls
   ========================================================== */
.site-footer{
  position:relative;
  padding:0;
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 12% 0%,rgba(139,92,246,.08),transparent 34%),
    #060710;
  content-visibility:auto;
  contain-intrinsic-size:auto 340px;
}

.footer-shell{
  padding-top:48px;
  padding-bottom:24px;
}

.footer-main{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(480px,1.3fr);
  gap:70px;
  align-items:start;
}

.footer-brand-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.footer-brand-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(167,139,250,.42);
  border-radius:12px;
  color:#f4efff;
  background:linear-gradient(145deg,rgba(139,92,246,.28),rgba(139,92,246,.06));
  box-shadow:inset 0 1px rgba(255,255,255,.08);
  font-size:.94rem;
  font-weight:900;
}

.footer-brand-link>span:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.footer-brand-link strong{
  color:#f6f4fb;
  font-size:.9rem;
  letter-spacing:.03em;
}

.footer-brand-link small{
  color:#777d8d;
  font-size:.48rem;
  font-weight:800;
  letter-spacing:.16em;
}

.footer-brand p{
  max-width:370px;
  margin-top:18px;
  color:#8f95a5;
  font-size:.75rem;
  line-height:1.65;
}

.footer-legal-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 28px;
}

.footer-legal-links a,
.footer-legal-links button{
  min-height:43px;
  display:flex;
  align-items:center;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:0;
  color:#aeb3c1;
  background:none;
  font:inherit;
  font-size:.7rem;
  text-align:left;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}

.footer-legal-links a:hover,
.footer-legal-links button:hover{
  color:#fff;
  border-color:rgba(167,139,250,.45);
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:42px;
  padding-top:19px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#676d7c;
  font-size:.61rem;
  line-height:1.5;
}

.privacy-notice{
  position:fixed;
  z-index:12000;
  left:22px;
  right:22px;
  bottom:20px;
  max-width:940px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:16px 17px 16px 19px;
  border:1px solid rgba(167,139,250,.28);
  border-radius:18px;
  background:rgba(8,9,18,.94);
  box-shadow:0 24px 80px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(20px);
}

.privacy-notice[hidden],
.privacy-panel[hidden]{
  display:none;
}

.privacy-notice-copy{
  display:flex;
  align-items:center;
  gap:14px;
}

.privacy-icon{
  flex:0 0 auto;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid rgba(167,139,250,.3);
  border-radius:12px;
  color:#c4b5fd;
  background:rgba(139,92,246,.09);
  font-size:1.1rem;
}

.privacy-notice strong{
  display:block;
  margin-bottom:3px;
  color:#f6f3fc;
  font-size:.76rem;
}

.privacy-notice p{
  max-width:620px;
  color:#9298a7;
  font-size:.64rem;
  line-height:1.55;
}

.privacy-notice-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
}

.privacy-notice-actions a{
  color:#b4a1e7;
  font-size:.65rem;
}

.privacy-acknowledge{
  min-height:40px;
  padding:0 17px;
  border:1px solid rgba(167,139,250,.42);
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  font-size:.67rem;
  font-weight:800;
  cursor:pointer;
}

.privacy-panel{
  position:fixed;
  z-index:13000;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
}

.privacy-panel-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,3,8,.72);
  backdrop-filter:blur(9px);
}

.privacy-panel-card{
  position:relative;
  z-index:1;
  width:min(100%,620px);
  max-height:min(760px,calc(100vh - 36px));
  overflow:auto;
  padding:34px;
  border:1px solid rgba(167,139,250,.25);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(139,92,246,.14),transparent 36%),
    #0a0b14;
  box-shadow:0 35px 110px rgba(0,0,0,.7);
}

.privacy-panel-close{
  position:absolute;
  top:17px;
  right:17px;
  width:35px;
  height:35px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  color:#d8d9e1;
  background:rgba(255,255,255,.04);
  font-size:1.1rem;
  cursor:pointer;
}

.privacy-panel-card h2{
  margin-top:10px;
  font-size:clamp(1.9rem,5vw,2.7rem);
}

.privacy-panel-card>p{
  margin-top:12px;
  color:#9298a7;
  font-size:.76rem;
  line-height:1.65;
}

.privacy-choice-list{
  display:grid;
  margin-top:25px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  overflow:hidden;
}

.privacy-choice-list>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:17px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.privacy-choice-list>div:last-child{
  border-bottom:0;
}

.privacy-choice-list span{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.privacy-choice-list strong{
  color:#e8e7ed;
  font-size:.72rem;
}

.privacy-choice-list small{
  color:#7f8594;
  font-size:.61rem;
  line-height:1.45;
}

.privacy-choice-list b{
  flex:0 0 auto;
  color:#86efac;
  font-size:.61rem;
}

.privacy-choice-list b.is-off{
  color:#8c92a0;
}

.privacy-panel-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
}

.privacy-panel-actions>a{
  color:#b8a5ee;
  font-size:.66rem;
}

.privacy-panel-actions .btn{
  width:auto;
  min-height:42px;
  padding:0 20px;
}

body.privacy-panel-open{
  overflow:hidden;
}

/* Legal pages */
.legal-page .page-hero{
  padding-bottom:52px;
}

.legal-wrap{
  display:grid;
  grid-template-columns:220px minmax(0,760px);
  gap:70px;
  align-items:start;
}

.legal-toc{
  position:sticky;
  top:110px;
  display:grid;
  gap:3px;
  padding:15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.018);
}

.legal-toc span{
  padding:7px 8px 9px;
  color:#696f7f;
  font-size:.53rem;
  font-weight:900;
  letter-spacing:.13em;
}

.legal-toc a{
  padding:9px 8px;
  border-radius:8px;
  color:#9ea4b3;
  font-size:.67rem;
}

.legal-toc a:hover{
  color:#fff;
  background:rgba(139,92,246,.08);
}

.legal-content{
  min-width:0;
}

.legal-summary{
  margin-bottom:28px;
  padding:19px 21px;
  border:1px solid rgba(167,139,250,.2);
  border-radius:14px;
  color:#b8bdca;
  background:rgba(139,92,246,.05);
  font-size:.75rem;
  line-height:1.7;
}

.legal-section{
  scroll-margin-top:115px;
  padding:30px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.legal-section:first-of-type{
  padding-top:0;
}

.legal-section:last-child{
  border-bottom:0;
}

.legal-section h2{
  margin-bottom:14px;
  color:#f3f1f7;
  font-size:1.25rem;
}

.legal-section h3{
  margin:19px 0 8px;
  color:#dddbe4;
  font-size:.85rem;
}

.legal-section p,
.legal-section li{
  color:#9aa0af;
  font-size:.76rem;
  line-height:1.78;
}

.legal-section p+p{
  margin-top:12px;
}

.legal-section ul{
  display:grid;
  gap:7px;
  margin:12px 0 0 17px;
}

.legal-section a{
  color:#bba7f0;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-date{
  display:inline-flex;
  margin-top:18px;
  color:#6f7584;
  font-size:.61rem;
}

@media(max-width:900px){
  .footer-main{
    grid-template-columns:1fr;
    gap:34px;
  }
  .legal-wrap{
    grid-template-columns:1fr;
    gap:28px;
  }
  .legal-toc{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .legal-toc span{
    grid-column:1/-1;
  }
}

@media(max-width:620px){
  .footer-shell{
    padding-top:36px;
    padding-bottom:22px;
  }
  .footer-main{
    gap:29px;
  }
  .footer-legal-links{
    grid-template-columns:1fr;
  }
  .footer-legal-links a,
  .footer-legal-links button{
    min-height:46px;
    font-size:.72rem;
  }
  .footer-bottom{
    flex-direction:column;
    gap:5px;
    margin-top:28px;
  }
  .privacy-notice{
    left:12px;
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    align-items:stretch;
    flex-direction:column;
    gap:14px;
    padding:15px;
    border-radius:16px;
  }
  .privacy-notice-copy{
    align-items:flex-start;
  }
  .privacy-icon{
    width:35px;
    height:35px;
  }
  .privacy-notice p{
    font-size:.62rem;
  }
  .privacy-notice-actions{
    justify-content:flex-end;
  }
  .privacy-panel-card{
    padding:28px 18px 20px;
    border-radius:18px;
  }
  .privacy-choice-list>div{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .privacy-panel-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .privacy-panel-actions .btn{
    width:100%;
  }
  .legal-page .page-hero{
    padding-bottom:34px;
  }
  .legal-toc{
    grid-template-columns:1fr;
    padding:11px;
  }
  .legal-toc span{
    grid-column:auto;
  }
  .legal-section{
    padding:25px 0;
  }
}