/* ============================================================
   KISS Production — Design System
   Light · Premium · Editorial · Hype
   ============================================================ */

:root{
  --paper:#EEF1F6;
  --paper-2:#E2E7F0;
  --card:#FFFFFF;
  --ink:#0A1426;
  --ink-2:#3D475A;
  --muted:#7B869B;
  --line:rgba(10,20,38,.12);
  --line-2:rgba(10,20,38,.06);

  --brand:#004C99;
  --hot:#0A5FCC;
  --azure:#33A4FF;
  --grad:linear-gradient(115deg,#003E80 0%,#0A5FCC 50%,#33A4FF 100%);
  --grad-soft:linear-gradient(115deg,rgba(0,76,153,.10),rgba(51,164,255,.12));

  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;

  --ease:cubic-bezier(.22,1,.36,1);
  --container:1280px;

  --f-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  background-color:var(--paper);
  background-image:radial-gradient(circle, rgba(10,20,38,.05) 1px, transparent 1.6px);
  background-size:30px 30px;
  background-attachment:fixed;
}
body{
  font-family:var(--f-body);
  background:transparent;
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--hot);color:#fff}

/* ---------- Grain / texture overlay ---------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Animated background life ---------- */
body::after{
  content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 38% at 10% 14%, rgba(10,95,204,.28), transparent 60%),
    radial-gradient(34% 34% at 90% 10%, rgba(51,164,255,.26), transparent 60%),
    radial-gradient(46% 46% at 80% 88%, rgba(0,76,153,.22), transparent 62%),
    radial-gradient(32% 32% at 22% 86%, rgba(51,164,255,.20), transparent 62%);
  filter:blur(10px);
  animation:bgdrift 22s ease-in-out infinite alternate;
}
@keyframes bgdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-3.5%,0) scale(1.1)}
}

.container{max-width:var(--container);margin:0 auto;padding:0 28px}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.eyebrow{
  font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px}
.grad-text{ color:var(--hot); }

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.site-header.scrolled{
  padding:14px 28px;background:rgba(238,241,246,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.brand .dot{width:13px;height:13px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(10,95,204,.18)}
.brand .logo{height:30px;width:auto;display:block}
.brand .bt{display:flex;flex-direction:column;line-height:1.04}
.site-footer .brand .logo{height:34px}
.brand small{font-weight:500;color:var(--muted);font-size:12px;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  font-family:var(--f-display);font-weight:500;font-size:15px;padding:9px 15px;border-radius:100px;
  color:var(--ink-2);transition:color .25s,background .25s;position:relative;
}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--ink);background:rgba(14,14,14,.05)}
.header-right{display:flex;align-items:center;gap:14px}

.lang-toggle{display:flex;align-items:center;background:rgba(14,14,14,.06);border-radius:100px;padding:3px}
.lang-toggle button{font-family:var(--f-display);font-weight:600;font-size:13px;padding:6px 12px;border-radius:100px;color:var(--muted);transition:.25s}
.lang-toggle button.active{background:var(--ink);color:#fff}

.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:600;font-size:15px;
  padding:13px 24px;border-radius:100px;transition:transform .3s var(--ease),box-shadow .3s,background .3s;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(14,14,14,.22)}
.btn-grad{background:var(--grad);color:#fff;background-size:160% 160%}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(10,95,204,.34);background-position:100% 0}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translate(4px,-4px)}

.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;padding:170px 0 70px;overflow:hidden}
.hero-blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none;
}
.hero-blob.b1{width:520px;height:520px;background:radial-gradient(circle,#1F74E0,transparent 70%);top:-120px;right:-80px;animation:float1 14s ease-in-out infinite}
.hero-blob.b2{width:420px;height:420px;background:radial-gradient(circle,#33A4FF,transparent 70%);bottom:-160px;left:-60px;animation:float2 17s ease-in-out infinite}
@keyframes float1{50%{transform:translate(-40px,40px) scale(1.1)}}
@keyframes float2{50%{transform:translate(40px,-30px) scale(1.08)}}

/* Subtle decorative shapes (editorial, light) */
.hero::after,.page-hero::after{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  border:1.5px solid rgba(10,95,204,.16);right:5%;top:16%;z-index:0;pointer-events:none;
  animation:floaty 12s ease-in-out infinite;
}
.hero::before,.page-hero::before{
  content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:var(--grad);
  left:7%;bottom:22%;z-index:0;pointer-events:none;opacity:.55;animation:floaty 7.5s ease-in-out infinite .4s;
}
.page-hero::after{width:220px;height:220px;top:24%}
.cta::after{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.14);right:-40px;bottom:-70px;z-index:1;pointer-events:none;
  animation:floaty 13s ease-in-out infinite;
}

.hero-blob{transition:translate .6s var(--ease)}
.hv-card{transition:transform .5s var(--ease),box-shadow .5s,translate .45s var(--ease)}
.btn{transition:transform .3s var(--ease),box-shadow .3s,background .3s,translate .25s var(--ease)}
.hero-inner{position:relative;z-index:2}
.hero h1{
  font-size:clamp(34px,5.6vw,76px);line-height:.96;letter-spacing:-.03em;font-weight:700;
}
.hero h1 .line{display:block;overflow:hidden;white-space:nowrap}
.hero h1 .line span{display:block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero h1 .line:nth-child(3) span{animation-delay:.24s}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{
  max-width:540px;margin-top:30px;font-size:clamp(17px,2vw,21px);color:var(--ink-2);
  opacity:0;animation:fade .9s var(--ease) .5s forwards;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;opacity:0;animation:fade .9s var(--ease) .65s forwards}
@keyframes fade{to{opacity:1}}

.hero-meta{
  display:flex;gap:38px;flex-wrap:wrap;margin-top:60px;padding-top:30px;border-top:1px solid var(--line);
  opacity:0;animation:fade .9s var(--ease) .8s forwards;
}
.hero-meta .stat .n{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,4vw,46px);letter-spacing:-.02em}
.hero-meta .stat .l{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}

/* Hero two-column with visual */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.hero-visual{position:relative;height:540px;opacity:0;animation:fade 1s var(--ease) .4s forwards}
.hv-card{position:absolute;border-radius:20px;overflow:hidden;box-shadow:0 34px 70px rgba(10,20,38,.20);border:7px solid #fff;background:#fff}
.hv-card img{width:100%;height:100%;object-fit:cover}
.hv-1{width:60%;top:0;right:2%;aspect-ratio:3/4;animation:floaty 7.5s ease-in-out infinite}
.hv-2{width:52%;bottom:4%;left:0;aspect-ratio:4/3;animation:floaty 8.5s ease-in-out infinite .6s;z-index:2}
.hv-3{width:30%;top:14%;left:8%;aspect-ratio:1/1;animation:floaty 6.5s ease-in-out infinite 1s;z-index:3}
.hv-badge{position:absolute;right:0;top:42%;z-index:4;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 20px 50px rgba(10,20,38,.18);display:flex;align-items:center;gap:12px;animation:floaty 9s ease-in-out infinite .3s}
.hv-badge .dotg{width:36px;height:36px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:700}
.hv-badge .dotg img{width:56%;height:56%;object-fit:contain;display:block}
.hv-badge b{font-family:var(--f-display);font-size:15px;display:block;line-height:1.1}
.hv-badge span{font-size:12px;color:var(--muted)}
@keyframes floaty{50%{transform:translateY(-16px)}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-visual{display:none}}

/* ---------- Marquee ---------- */
.marquee{padding:26px 0;border-block:1px solid var(--line);overflow:hidden;background:var(--ink);color:var(--paper)}
.marquee.light{background:transparent;color:var(--ink);border-color:var(--line)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:scroll 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,3vw,34px);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:48px;white-space:nowrap}
.marquee-track span::after{content:"✦";color:var(--hot);font-size:.6em}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{position:relative}
.section{padding:clamp(70px,10vw,130px) 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:54px;flex-wrap:wrap}
.section-head h2{font-size:clamp(34px,5.5vw,72px);max-width:14ch}
.section-head .lead{max-width:380px;color:var(--ink-2);font-size:17px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* Gallery image reveal: fade + slight zoom + blur lifting, staggered */
.work-card.reveal{transition:opacity .7s var(--ease),transform .85s var(--ease),filter .7s var(--ease),box-shadow .5s}
.work-card.reveal:not(.in){opacity:0;transform:translateY(28px) scale(.95);filter:blur(10px)}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:2000;transition:width .12s linear;box-shadow:0 0 10px rgba(10,95,204,.5)}

/* Reduced-motion : on calme uniquement les boucles de fond,
   on garde révélations / parallaxe / marquee (pilotés au scroll/souris). */
@media (prefers-reduced-motion: reduce){
  .hero-blob,body::after{animation:none!important}
}

/* ---------- Intro / values ---------- */
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.intro-grid p.big{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.6vw,32px);line-height:1.25;letter-spacing:-.015em}
.intro-grid p.big b,.hl{background:var(--grad);color:#fff;font-weight:700;padding:.02em .2em;border-radius:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.values{display:grid;gap:18px}
.value{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md);padding:26px 28px;transition:transform .4s var(--ease),box-shadow .4s}
.value:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,14,14,.08)}
.value h3{font-size:22px;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.value .ic{width:34px;height:34px;border-radius:10px;background:var(--grad-soft);display:grid;place-items:center;font-size:18px}
.value p{color:var(--ink-2);font-size:15.5px}

/* ---------- Services cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:34px 30px;
  position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s;min-height:280px;
  display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 56px rgba(14,14,14,.1)}
.svc .num{font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--hot);letter-spacing:.1em}
.svc h3{font-size:26px;margin:14px 0 12px}
.svc p{color:var(--ink-2);font-size:15.5px;margin-bottom:18px}
.svc ul{list-style:none;margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-size:13px;font-family:var(--f-display);font-weight:500;padding:6px 12px;border:1px solid var(--line);border-radius:100px;color:var(--ink-2)}
.svc li.etc{background:#fff;color:var(--muted);border:1px solid var(--line);font-style:italic}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.svc:hover::after{transform:scaleX(1)}

/* ---------- Work gallery ---------- */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.work-card{
  position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--paper-2);
  cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s;
}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);aspect-ratio:4/3}
.work-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(10,20,38,.18);z-index:2}
.work-card:hover img{transform:scale(1.06)}

/* Grouped-by-type sections */
.work-group{margin-bottom:clamp(48px,7vw,90px)}
.work-group:last-child{margin-bottom:0}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.group-head h2{font-size:clamp(26px,3.4vw,42px);display:flex;align-items:center;gap:14px}
.group-head .gnum{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--hot);background:var(--grad-soft);padding:5px 13px;border-radius:100px}
.group-head p{color:var(--muted);font-size:15px;max-width:34ch;text-align:right}
.work-card .ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  background:linear-gradient(180deg,transparent 40%,rgba(10,10,10,.78));opacity:0;transition:opacity .45s;color:#fff;
}
.work-card:hover .ov{opacity:1}
.work-card .ov .c{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.85}
.work-card .ov .t{font-family:var(--f-display);font-weight:600;font-size:20px;margin-top:4px}
.work-card .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:100px;opacity:0;transform:translateY(-6px);transition:.4s}
.work-card:hover .tag{opacity:1;transform:none}
/* spans for masonry feel */
.s-lg{grid-column:span 6}
.s-md{grid-column:span 4}
.s-sm{grid-column:span 3}
.s-lg .img-wrap,.s-lg img{aspect-ratio:16/10}

/* ---------- Filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.filters button{
  font-family:var(--f-display);font-weight:500;font-size:14px;padding:10px 18px;border-radius:100px;
  border:1px solid var(--line);color:var(--ink-2);transition:.3s;
}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Clients strip ---------- */
.clients-band{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.client-cell{display:grid;place-items:center;padding:34px 20px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transition:background .3s}
.client-cell:hover{background:var(--paper-2)}
.client-cell img{height:54px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:.4s}
.client-cell:hover img{filter:none;opacity:1;transform:scale(1.06)}
.client-name{font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--muted);transition:color .35s,transform .35s}
.client-cell:hover .client-name{color:var(--brand);transform:scale(1.04)}

/* Logo strip (official client SVG, white-on-navy marquee) */
.logo-strip{background:var(--ink);border-radius:var(--r-lg);overflow:hidden;padding:34px 0;position:relative}
.logo-strip.flush{border-radius:0;margin:0}
/* organic ribbon edges on the flush brand band */
.logo-strip.flush::before,.logo-strip.flush::after{content:"";position:absolute;left:0;width:100%;height:20px;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;z-index:1}
.logo-strip.flush::before{top:0;transform:translateY(-99%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 20' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C420,-4 1020,-4 1440,20 Z' fill='%230A1426'/%3E%3C/svg%3E")}
.logo-strip.flush::after{bottom:0;transform:translateY(99%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 20' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C420,24 1020,24 1440,0 Z' fill='%230A1426'/%3E%3C/svg%3E")}
/* organic wave into the footer */
.site-footer{position:relative;overflow:hidden}
/* Lignes animées en haut du footer (vie discrète, bord droit) */
.footer-lines{position:absolute;top:0;left:0;width:100%;height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(51,164,255,.7),rgba(255,255,255,.9),rgba(51,164,255,.7),transparent);
  background-size:50% 100%;background-repeat:no-repeat;animation:lineSweep 3.8s linear infinite}
@keyframes lineSweep{0%{background-position:-60% 0}100%{background-position:160% 0}}
.footer-lines::after{content:"";position:absolute;inset:0;top:0;height:64px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 17px);
  -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent);
  animation:linesDrift 7s linear infinite}
@keyframes linesDrift{to{background-position:17px 0}}
.logo-strip .lm-track{display:flex;flex-wrap:nowrap;align-items:center;width:max-content;will-change:transform}
.lm-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0 8px}
.lm-logo img{height:62px;width:auto;max-width:none;display:block;opacity:.92}
@media(max-width:720px){.lm-logo img{height:48px}}

/* ---------- Big numbers ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat-card{background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:38px 30px}
.stat-card:nth-child(2){background:var(--grad);color:#fff}
.stat-card .n{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,5vw,64px);letter-spacing:-.03em;line-height:1}
.stat-card .l{margin-top:10px;font-size:14.5px;opacity:.82}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:32px 30px;display:flex;flex-direction:column;gap:18px;transition:transform .4s var(--ease)}
.quote:hover{transform:translateY(-5px)}
.quote .mark{font-family:var(--f-display);font-weight:700;font-size:54px;line-height:.5;color:var(--hot);height:24px}
.quote p{font-size:16px;color:var(--ink-2);flex:1}
.quote .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line-2);padding-top:16px}
.quote .who .av{width:40px;height:40px;border-radius:50%;background:var(--grad-soft);display:grid;place-items:center;overflow:hidden}
.quote .who .av img{width:100%;height:100%;object-fit:contain;padding:6px}
.quote .who>div{display:flex;flex-direction:column;line-height:1.3}
.quote .who b{font-family:var(--f-display);font-size:15px}
.quote .who span{font-size:13px;color:var(--muted)}

/* ---------- CTA ---------- */
.cta{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);color:var(--paper);padding:clamp(50px,8vw,90px);text-align:center}
.cta .blob{position:absolute;width:600px;height:600px;border-radius:50%;background:var(--grad);filter:blur(90px);opacity:.45;top:-200px;left:50%;transform:translateX(-50%)}
.cta-inner{position:relative;z-index:2}
.cta h2{font-size:clamp(34px,6vw,76px);line-height:.98}
.cta p{max-width:480px;margin:20px auto 34px;opacity:.8;font-size:18px}

/* ---------- Legal / prose page ---------- */
.legal{max-width:820px;margin:0 auto}
.legal h2{font-size:clamp(22px,2.6vw,30px);margin:34px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-2);font-size:16px;line-height:1.7}
.legal ul{margin:10px 0 10px 22px}
.legal a{color:var(--hot);text-decoration:underline}
.legal .updated{color:var(--muted);font-size:14px;margin-top:8px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);padding:70px 0 34px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer .brand{color:var(--paper);font-size:24px;margin-bottom:16px}
.site-footer p.fdesc{color:rgba(244,242,236,.6);max-width:300px;font-size:15px}
.fcol h4{font-family:var(--f-display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,236,.5);margin-bottom:18px;font-weight:600}
.fcol a,.fcol p{display:block;color:rgba(244,242,236,.85);font-size:15px;margin-bottom:11px;transition:color .25s;width:fit-content}
.fcol a:hover{color:var(--hot)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:14px;color:rgba(244,242,236,.5);font-size:13.5px}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(10,10,10,.92);display:none;align-items:center;justify-content:center;padding:40px;backdrop-filter:blur(6px)}
.lightbox.open{display:flex;animation:fade .35s ease forwards;opacity:1}
.lightbox img{max-width:90vw;max-height:86vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lightbox .close{position:absolute;top:24px;right:30px;color:#fff;font-size:30px;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:.3s}
.lightbox .close:hover{background:rgba(255,255,255,.15);transform:rotate(90deg)}
.lightbox .nav-btn{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:30px;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:.3s}
.lightbox .nav-btn:hover{background:rgba(255,255,255,.15)}
.lightbox .prev{left:26px}.lightbox .next{right:26px}
.lightbox .cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;font-family:var(--f-display);font-weight:500}
.lightbox .cap small{display:block;color:var(--hot);letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin-bottom:4px}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:160px 0 50px;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(44px,8vw,108px);line-height:.94;letter-spacing:-.03em}
.page-hero .lead{max-width:560px;margin-top:24px;font-size:clamp(17px,2vw,21px);color:var(--ink-2)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--f-display);font-weight:500;font-size:14px;margin-bottom:8px}
.field input,.field textarea{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 18px;
  font-family:var(--f-body);font-size:16px;color:var(--ink);transition:border .25s,box-shadow .25s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--hot);box-shadow:0 0 0 4px rgba(10,95,204,.14)}
.field textarea{min-height:140px;resize:vertical}
.info-row{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.info-row .ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;font-size:20px}
.info-row h4{font-family:var(--f-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-weight:600}
.info-row p{font-size:17px}
.form-note{font-size:13px;color:var(--muted);margin-top:10px}
.form-ok{display:none;background:var(--grad-soft);border:1px solid rgba(10,95,204,.28);border-radius:var(--r-md);padding:18px 22px;color:var(--ink);font-family:var(--f-display);font-weight:500;margin-top:14px}
.form-ok.show{display:block;animation:fade .4s ease forwards}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md);padding:30px 26px;position:relative}
.step .n{font-family:var(--f-display);font-weight:700;font-size:46px;line-height:1;color:var(--hot)}
.step h3{font-size:20px;margin:12px 0 8px}
.step p{color:var(--ink-2);font-size:15px}

/* ---------- Responsive ---------- */
/* ---------- Video work cards ---------- */
.work-card.is-video .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  transition:transform .4s var(--ease),background .3s;pointer-events:none;
}
.work-card.is-video .play::after{content:"";margin-left:4px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink)}
.work-card.is-video:hover .play{transform:translate(-50%,-50%) scale(1.12);background:#fff}
.work-card.is-video .badge-motion{position:absolute;top:14px;right:14px;z-index:3;background:var(--grad);color:#fff;font-family:var(--f-display);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:100px}
.lightbox video{max-width:90vw;max-height:86vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.5);background:#000}

/* ---------- Celia AI agent ---------- */
.celia-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;height:560px;box-shadow:0 30px 70px rgba(14,14,14,.08)}
.celia-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line-2);background:var(--paper)}
.celia-ava{width:48px;height:48px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-weight:700;font-size:20px;flex:none;position:relative}
.celia-ava img,.fab-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.celia-ava::after{content:"";position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;background:#27c93f;border:2.5px solid var(--card)}
.celia-head h3{font-size:19px;line-height:1.1}
.celia-head p{font-size:13px;color:var(--muted)}
.celia-body{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:14px}
.cmsg{max-width:80%;padding:13px 17px;border-radius:18px;font-size:15px;line-height:1.5;animation:fade .4s ease}
.cmsg.bot{background:var(--paper-2);border-bottom-left-radius:5px;align-self:flex-start}
.cmsg.user{background:var(--ink);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.cmsg.bot a{color:var(--hot);font-weight:600;text-decoration:underline}
.celia-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 18px;background:var(--paper-2);border-radius:18px;border-bottom-left-radius:5px}
.celia-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.celia-typing span:nth-child(2){animation-delay:.2s}.celia-typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.celia-sugg{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 14px}
.celia-sugg button{font-family:var(--f-display);font-weight:500;font-size:13px;padding:8px 14px;border:1px solid var(--line);border-radius:100px;color:var(--ink-2);transition:.25s}
.celia-sugg button:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.celia-input{display:flex;gap:10px;padding:16px 18px;border-top:1px solid var(--line-2)}
.celia-input input{flex:1;border:1px solid var(--line);border-radius:100px;padding:13px 18px;font-family:var(--f-body);font-size:15px;background:var(--paper);transition:border .25s,box-shadow .25s}
.celia-input input:focus{outline:none;border-color:var(--hot);box-shadow:0 0 0 4px rgba(10,95,204,.14)}
.celia-input button{width:48px;height:48px;border-radius:50%;background:var(--grad);color:#fff;font-size:20px;flex:none;display:grid;place-items:center;transition:transform .3s var(--ease)}
.celia-input button:hover{transform:scale(1.08)}
.celia-note{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}

/* Floating launcher */
.celia-fab{position:fixed;right:24px;bottom:24px;z-index:1500;display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:12px 20px 12px 14px;border-radius:100px;box-shadow:0 16px 40px rgba(14,14,14,.28);transition:transform .35s var(--ease),box-shadow .35s;cursor:pointer}
.celia-fab:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(14,14,14,.34)}
.celia-fab .fab-ava{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:17px}
.celia-fab .fab-txt{font-family:var(--f-display);font-weight:600;font-size:14.5px;line-height:1.1}
.celia-fab .fab-txt small{display:block;font-weight:400;font-size:11.5px;opacity:.7}
.celia-pop{position:fixed;right:24px;bottom:24px;z-index:1600;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 48px);display:none;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 80px rgba(14,14,14,.32);transform-origin:bottom right}
.celia-pop.open{display:flex;animation:popin .4s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.celia-pop .celia-wrap{height:100%;border-radius:0;border:none;box-shadow:none}
.celia-pop .celia-close{position:absolute;top:18px;right:18px;z-index:5;color:var(--ink-2);font-size:20px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:.25s}
.celia-pop .celia-close:hover{background:var(--line-2)}
@media(max-width:720px){.celia-fab .fab-txt{display:none}.celia-fab{padding:14px}}

@media(max-width:1024px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .clients-band{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .intro-grid{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .container{padding:0 20px}
  .nav{display:none}
  .nav.open{display:flex;position:fixed;inset:0;top:0;background:var(--paper);flex-direction:column;justify-content:center;align-items:center;gap:8px;z-index:999}
  .nav.open a{font-size:28px;padding:14px}
  .burger{display:flex;z-index:1001}
  .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .header-right .btn{display:none}
  .svc-grid,.quotes,.stats-grid,.contact-grid,.steps{grid-template-columns:1fr}
  .clients-band{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .group-head{flex-direction:column;gap:6px}
  .group-head p{text-align:left}
  .hero-meta{gap:24px}
  .section-head{margin-bottom:36px}
}