@charset "utf-8";

/* ============================================================
   BLINK — Marketing Solutions
   Rebuilt 1:1 from the 1920 × 7257 artboard.

   Every desktop number below is a design pixel measured off the
   artboard, expressed through --s (1 design px → screen px), so the
   layout scales exactly and never exceeds 1:1. Below 900px the same
   content re-flows into a stacked mobile layout.
   ============================================================ */

@font-face{
  font-family:"Shamel";
  src:url("../fonts/ArbFONTS-FFShamelFamily-SansOneBook.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Shamel";
  src:url("../fonts/ArbFONTS-FFShamelFamily-SansOneBold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --s: min(1px, 100vw / 1920);

  --bg:#141223;
  --ink:#eaeaf9;
  --muted:rgba(234,234,249,.74);
  --accent:#892dff;
  --lav:#c9a6ff;
  --pill:#4d4165;
  --rule:rgba(255,255,255,.30);

  --ar:"Shamel","Segoe UI",Tahoma,sans-serif;
  --lat:"Montserrat","Segoe UI",Arial,sans-serif;

}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ar);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100% }

/* the artboard has no headline text of its own, so the page's h1 is carried
   for screen readers and search engines without altering the design */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
h2,h3,p{ margin:0 }
a{ text-decoration:none; color:inherit }
.accent{ color:var(--accent) }

.stage{
  width:calc(1920 * var(--s));
  max-width:100%;
  margin-inline:auto;
  position:relative;
  overflow:hidden;   /* the plate is wider than the page on small screens */
}
.stage > section,
.stage > footer{ position:relative; z-index:1; width:100%; overflow:hidden }


/* --------------------------- pill button --------------------------- */
.pill{
  display:flex; align-items:center; justify-content:flex-start;
  background:var(--pill);
  border-radius:999px;
  color:#fff;
  line-height:1;
  white-space:nowrap;          /* the label must never wrap inside the pill */
  overflow:hidden;             /* and nothing may ever spill outside it */
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pill > span{ white-space:nowrap }
.pill:hover{
  background:#6a4d99;
  transform:translateY(calc(-3 * var(--s)));
  box-shadow:0 calc(14 * var(--s)) calc(34 * var(--s)) rgba(137,45,255,.35);
}
.pill__arrow{
  flex:none; aspect-ratio:1;
  transform:rotate(180deg);        /* artboard arrow points ↘ — the CTA points ↖ */
}
.pill__arrow path{ stroke:#fff; stroke-width:2.4; fill:none; stroke-linecap:square }

/* ================================ HERO ==============================
   Typography-led, built entirely in CSS — no baked artwork, so it scales
   cleanly at every width. Palette and type are the artboard's own.
   ==================================================================== */
.hero{
  min-height:min(100svh, 980px);
  display:flex; flex-direction:column;
  padding:0 clamp(22px, 4vw, 72px) clamp(48px, 6vw, 90px);
  isolation:isolate;
}

/* --- the light behind it all --- */
.hero__orb{
  position:absolute; left:50%; bottom:calc(-1 * clamp(150px, 20vw, 320px));
  width:clamp(700px, 104vw, 1700px); aspect-ratio:2.4/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,
    rgba(226,205,255,.85) 0%, rgba(168,116,236,.62) 18%, rgba(120,62,198,.40) 36%,
    rgba(70,36,128,.20) 56%, rgba(20,18,35,0) 74%);
  filter:blur(6px); opacity:.9; z-index:-2; pointer-events:none;
}
.hero__arc{
  position:absolute; left:50%; top:clamp(60px, 9vw, 150px);
  width:clamp(620px, 78vw, 1180px); aspect-ratio:2/1;
  transform:translateX(-50%);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  border:1px solid rgba(201,166,255,.34);
  border-bottom:0;
  mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%);
  z-index:-2; pointer-events:none;
}
.hero__arc::before{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit;
  border:1px solid rgba(137,45,255,.55); border-bottom:0;
  filter:blur(7px);
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 42% at 50% 8%, rgba(137,45,255,.16), transparent 70%);
}

/* ------------------------------- nav ------------------------------- */
.nav{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:clamp(16px, 3vw, 46px);
  padding-block:clamp(20px, 2.4vw, 34px);
}
.nav__logo{ display:block; width:clamp(112px, 11vw, 176px); flex:none }
.nav__logo img{ width:100% }

.nav__links{
  display:flex; align-items:center; gap:clamp(18px, 2.4vw, 38px);
  margin:0 auto; padding:0; list-style:none;
  font-size:clamp(14px, 1.05vw, 18px); color:rgba(234,234,249,.72);
}
.nav__links a{ position:relative; padding-block:6px; transition:color .25s var(--ease) }
.nav__links a::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--lav); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:#fff }
.nav__links a:hover::after{ transform:scaleX(1) }

.nav__cta{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:clamp(10px, 1vw, 14px) clamp(18px, 1.6vw, 26px);
  border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  font-size:clamp(14px, 1vw, 17px); color:#fff; white-space:nowrap;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta:hover{ background:rgba(137,45,255,.5); border-color:transparent }
.nav__cta .pill__arrow{ width:clamp(12px, .9vw, 15px) }

/* ------------------------------ body ------------------------------- */
.hero__body{
  position:relative; z-index:2;
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding-block:clamp(24px, 4vw, 60px);
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 14px; border-radius:999px;
  border:1px solid rgba(201,166,255,.28); background:rgba(137,45,255,.10);
  font-family:var(--lat); font-size:clamp(12px, .85vw, 14px);
  letter-spacing:.06em; color:var(--lav);
}
.hero__eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(137,45,255,.22);
}
.js .hero__eyebrow .dot{ animation:pulse 3.2s ease-in-out infinite }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(137,45,255,.28) }
  50%    { box-shadow:0 0 0 8px rgba(137,45,255,0) }
}

.hero__title{
  margin:clamp(20px, 2.4vw, 34px) 0 0;
  font-weight:700; line-height:1.3;
  font-size:clamp(40px, 5.2vw, 88px);
  letter-spacing:-.01em;
}
.hero__title .l1{
  display:block; white-space:nowrap;   /* the line must never break */
  background:linear-gradient(180deg,#ffffff 30%, #b9a8e0 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* BLINK sits on its own line beneath */
.hero__title .l2{
  display:flex; justify-content:center;
  margin-top:clamp(10px, 1.2vw, 22px);
}
.hero__word{
  width:clamp(215px, 30vw, 520px); height:auto; flex:none;
  filter:drop-shadow(0 0 30px rgba(160,90,255,.55));
}

.hero__sub{
  margin-top:clamp(16px, 1.8vw, 26px);
  font-size:clamp(15px, 1.15vw, 21px); line-height:1.85;
  color:var(--muted); max-width:52ch;
}

/* ------------------------------ actions ----------------------------- */
.hero__actions{
  margin-top:clamp(26px, 2.8vw, 42px);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px, 1.2vw, 18px); flex-wrap:wrap;
}
.hero__wa,
.hero__alt{
  display:inline-flex; align-items:center; gap:10px;
  height:clamp(48px, 3.6vw, 58px);
  padding-inline:clamp(20px, 1.9vw, 30px);
  border-radius:999px; white-space:nowrap;
  font-size:clamp(14px, 1.05vw, 18px);
  transition:background .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.hero__wa{
  background:var(--accent); color:#fff;
  box-shadow:0 12px 34px rgba(137,45,255,.34);
}
.hero__wa:hover{ background:#9d4dff; transform:translateY(-3px); box-shadow:0 18px 44px rgba(137,45,255,.46) }
.hero__wa img{ width:clamp(18px, 1.3vw, 22px); height:auto }

.hero__alt{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04); color:#fff;
}
.hero__alt:hover{ background:rgba(255,255,255,.09); border-color:rgba(201,166,255,.5); transform:translateY(-3px) }
.hero__alt .pill__arrow{ width:clamp(12px, .9vw, 15px) }

/* ----------------------------- trust row ---------------------------- */
.hero__trust{ margin-top:clamp(34px, 4vw, 64px); width:100% }
.hero__trust p{
  font-size:clamp(12px, .85vw, 14px); letter-spacing:.04em;
  color:rgba(234,234,249,.42);
}
.hero__trust ul{
  margin:clamp(14px, 1.6vw, 24px) 0 0; padding:0; list-style:none;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(20px, 3.4vw, 58px);
}
.hero__trust img{
  width:clamp(20px, 1.7vw, 30px); height:clamp(20px, 1.7vw, 30px);
  object-fit:contain; opacity:.5;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.hero__trust li:hover img{ opacity:1; transform:translateY(-3px) }

/* ------------------------------- intro ------------------------------ */
.js .nav,
.js .hero__eyebrow,
.js .hero__title .l1,
.js .hero__title .l2,
.js .hero__sub,
.js .hero__actions,
.js .hero__trust{ animation:heroIn .75s var(--ease) both }
.js .nav            { animation-delay:.04s }
.js .hero__eyebrow  { animation-delay:.12s }
.js .hero__title .l1{ animation-delay:.20s }
.js .hero__title .l2{ animation-delay:.28s }
.js .hero__sub      { animation-delay:.38s }
.js .hero__actions  { animation-delay:.46s }
.js .hero__trust    { animation-delay:.56s }
/* deliberately restrained: a short lift and a fade, nothing that draws
   attention to itself */
@keyframes heroIn{
  from{ opacity:0; transform:translateY(12px) }
  to  { opacity:1; transform:none }
}

.js .hero__arc{ animation:arcIn 1.1s var(--ease) .1s both }
@keyframes arcIn{
  from{ opacity:0; transform:translateX(-50%) scale(.96) }
  to  { opacity:1; transform:translateX(-50%) scale(1) }
}
.js .hero__orb{ animation:orbIn 1.2s var(--ease) both, breathe 9s ease-in-out 1.2s infinite }
@keyframes orbIn{
  from{ opacity:0; transform:translateX(-50%) scale(.94) }
  to  { opacity:.9; transform:translateX(-50%) scale(1) }
}
@keyframes breathe{
  0%,100%{ opacity:.84 }
  50%    { opacity:.96 }
}

/* ============================= DEFINITION =========================== */
.def{ height:calc(550 * var(--s)) }

.def__lockup{
  position:absolute; left:calc(1228 * var(--s)); top:calc(178 * var(--s));
  width:calc(380 * var(--s));
}
.def__body{
  position:absolute; right:calc(766 * var(--s)); top:0;
  width:calc(880 * var(--s)); text-align:right;
}
.def__pos{
  position:absolute; right:0; top:calc(235 * var(--s)); width:100%;
  font-weight:700; font-size:calc(20.2 * var(--s)); line-height:1.4;
}
.def__text{
  position:absolute; right:0; top:calc(280 * var(--s)); width:100%;
  font-size:calc(20.3 * var(--s)); line-height:calc(34 * var(--s));
  color:var(--muted);
}
.def__claim{
  position:absolute; right:0; top:calc(361 * var(--s)); width:100%;
  font-weight:700; font-size:calc(23.5 * var(--s)); line-height:calc(45 * var(--s));
}

/* ================================ WHY =============================== */
.why{ height:calc(600 * var(--s)) }

.why__title{
  position:absolute; right:calc(315 * var(--s)); top:calc(289 * var(--s));
  font-weight:700; font-size:calc(76.4 * var(--s)); line-height:calc(94 * var(--s));
  color:var(--accent); text-align:right;
}
.why__lead{
  position:absolute; right:calc(683 * var(--s)); top:calc(337 * var(--s));
  width:calc(900 * var(--s));
  font-weight:700; font-size:calc(32.6 * var(--s)); line-height:1.4;
  text-align:right;
}
.why__sub{
  position:absolute; right:calc(683 * var(--s)); top:calc(393 * var(--s));
  width:calc(1000 * var(--s));
  font-weight:700; font-size:calc(19.8 * var(--s)); line-height:1.6;
  text-align:right;
}
.why__para{
  position:absolute; right:calc(320 * var(--s)); top:calc(507 * var(--s));
  width:calc(1290 * var(--s));
  font-size:calc(20.9 * var(--s)); line-height:calc(37 * var(--s));
  color:var(--muted); text-align:right;
}

/* ============================== PROCESS ============================= */
.proc{ height:calc(750 * var(--s)) }

.proc__lead{
  position:absolute; right:calc(321 * var(--s)); top:calc(52 * var(--s));
  width:calc(1290 * var(--s));
  font-size:calc(26.6 * var(--s)); line-height:calc(38 * var(--s));
  text-align:right;
}

.step{ position:absolute; width:calc(222 * var(--s)); height:calc(222 * var(--s)) }
.step--1{ left:calc(321 * var(--s));  top:calc(60 * var(--s)) }
.step--2{ left:calc(673 * var(--s));  top:calc(186 * var(--s)) }
.step--3{ left:calc(1025 * var(--s)); top:calc(311 * var(--s)) }
.step--4{ left:calc(1377 * var(--s)); top:calc(437 * var(--s)) }

.disc{
  position:relative; width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    #443b5c 0%, #413859 82%, rgba(63,54,85,.55) 94%, rgba(63,54,85,0) 100%);
}
.disc__icon{
  position:absolute; left:calc(75 * var(--s)); top:calc(29 * var(--s));
  width:calc(74 * var(--s)); height:calc(68 * var(--s));
  object-fit:contain;
}
.disc__label{
  position:absolute; left:0; right:0; top:calc(106 * var(--s));
  font-weight:700; font-size:calc(22.2 * var(--s)); line-height:calc(31 * var(--s));
  text-align:center;
}
.step__num{
  position:absolute; left:calc(66 * var(--s)); top:calc(196 * var(--s));
  width:calc(90 * var(--s)); height:calc(46 * var(--s));
}

.rnd{
  position:absolute; width:calc(180 * var(--s));
  font-weight:700; font-size:calc(21.1 * var(--s)); line-height:calc(33 * var(--s));
  color:var(--lav); text-align:right;
}
.rnd--1{ right:calc(1206 * var(--s)); top:calc(100 * var(--s)) }
.rnd--2{ right:calc(851 * var(--s));  top:calc(243 * var(--s)) }
.rnd--3{ right:calc(497 * var(--s));  top:calc(384 * var(--s)) }

.arw{ display:block; position:absolute; width:calc(33 * var(--s)); height:calc(33 * var(--s)) }
.arw--1{ left:calc(581 * var(--s));  top:calc(213 * var(--s)) }
.arw--2{ left:calc(944 * var(--s));  top:calc(343 * var(--s)) }
.arw--3{ left:calc(1292 * var(--s)); top:calc(474 * var(--s)) }

.stat{
  position:absolute; left:calc(429 * var(--s)); top:calc(552 * var(--s));
  width:calc(400 * var(--s)); height:calc(122 * var(--s));
  display:flex; align-items:center; justify-content:center;
  padding-inline:calc(24 * var(--s));
  border-radius:calc(16 * var(--s));
  background:linear-gradient(to right,#6d3aab 0%,#5b3c8b 45%,#4e4069 100%);
  box-shadow:0 calc(18 * var(--s)) calc(50 * var(--s)) rgba(109,58,171,.28);
}
.stat p{
  font-size:calc(19.9 * var(--s)); line-height:calc(28 * var(--s));
  text-align:center; color:#efe9fb;
}
.stat b{ font-weight:700; color:#fff }

/* ============================== SERVICES ============================ */
.srv{ height:calc(1950 * var(--s)) }

.srv__title{
  position:absolute; right:calc(315 * var(--s)); top:calc(265 * var(--s));
  font-weight:700; font-size:calc(76.5 * var(--s)); line-height:1;
  color:var(--accent);
}
.srv__intro{
  position:absolute; right:calc(850 * var(--s)); top:calc(258 * var(--s));
  width:calc(790 * var(--s));
  font-size:calc(20.2 * var(--s)); line-height:calc(35 * var(--s));
  color:var(--muted); text-align:right;
}

/* the children are absolutely placed, so the row is given a height of its own —
   a zero-area box is unreliable as an IntersectionObserver target */
.row{ position:absolute; left:0; width:100%; height:calc(130 * var(--s)) }
.row h3{
  position:absolute; right:calc(314 * var(--s)); top:0;
  width:calc(600 * var(--s));
  font-weight:700; font-size:calc(29.5 * var(--s)); line-height:calc(47 * var(--s));
  text-align:right;
}
.row p{
  position:absolute; right:calc(1224 * var(--s)); top:calc(7 * var(--s));
  width:calc(382 * var(--s));
  font-size:calc(20 * var(--s)); line-height:calc(37 * var(--s));
  color:var(--muted); text-align:justify; text-align-last:right;
}
.row--1{ top:calc(501 * var(--s)) }
.row--2{ top:calc(750 * var(--s)) }
.row--3{ top:calc(999 * var(--s)) }
.row--4{ top:calc(1250 * var(--s)) }
.row--5{ top:calc(1497 * var(--s)) }
.row--6{ top:calc(1746 * var(--s)) }

/* The line keeps its full box and an inner fill does the sweeping, so the
   observed element never collapses to zero area. */
.rule{
  position:absolute; left:calc(312 * var(--s));
  width:calc(1293 * var(--s)); height:1px;
  background:var(--rule);
  overflow:hidden;
}
.rule--1{ top:calc(632 * var(--s)) }
.rule--2{ top:calc(881 * var(--s)) }
.rule--3{ top:calc(1130 * var(--s)) }
.rule--4{ top:calc(1381 * var(--s)) }
.rule--5{ top:calc(1628 * var(--s)) }
.rule--6{ top:calc(1877 * var(--s)) }

/* =============================== TOOLS ============================== */
.tools{
  height:calc(970 * var(--s));
  background:
    radial-gradient(ellipse calc(1500 * var(--s)) calc(430 * var(--s)) at 50% 100%,
      #e6d9fd 0%, #c49df4 18%, #9a63e4 38%, #6a34b6 58%, #331d5e 78%, rgba(20,18,35,0) 100%),
    radial-gradient(ellipse calc(900 * var(--s)) calc(560 * var(--s)) at 50% 118%,
      rgba(196,157,244,.55) 0%, rgba(20,18,35,0) 70%);
}
.tools__title{
  position:absolute; left:0; right:0; top:calc(166 * var(--s));
  font-weight:700; font-size:calc(47.5 * var(--s)); line-height:1.25;
  text-align:center;
  background:linear-gradient(to left,#ffffff 0%,#ffffff 42%,#b9b2cd 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* centred with auto margins, never with transform: the reveal animation
   overwrites transform and would knock it off-centre */
.tools__sub{
  position:absolute; left:0; right:0; top:calc(243 * var(--s));
  width:calc(780 * var(--s)); margin-inline:auto;
  font-size:calc(20.2 * var(--s)); line-height:calc(31 * var(--s));
  color:rgba(234,234,249,.66); text-align:center;
}
.tools__row{
  position:absolute; left:0; right:0;
  display:flex; justify-content:center; gap:calc(50 * var(--s));
}
.tools__row--a{ top:calc(486 * var(--s)) }
.tools__row--b{ top:calc(601 * var(--s)) }
.tile{
  width:calc(88 * var(--s)); height:calc(88 * var(--s));
  border-radius:calc(18 * var(--s));
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile img{
  width:calc(42 * var(--s)); height:calc(42 * var(--s));
  object-fit:contain; opacity:.82;
  transition:opacity .3s var(--ease), transform .35s var(--ease);
}
@media (hover:hover){
  .tile:hover{
    transform:translateY(calc(-6 * var(--s)));
    box-shadow:0 calc(12 * var(--s)) calc(28 * var(--s)) rgba(0,0,0,.5);
  }
  .tile:hover img{ opacity:1; transform:scale(1.08) }
}

/* ============================= WATERMARK ============================ */
.mark{ height:calc(680 * var(--s)) }
.mark__img{
  position:absolute; left:calc(548 * var(--s)); top:calc(295 * var(--s));
  width:calc(824 * var(--s));
}

/* ================================ CTA =============================== */
.cta{ height:calc(457 * var(--s)) }

.cta__title{
  position:absolute; right:calc(292 * var(--s)); top:calc(172 * var(--s));
  font-weight:700; font-size:calc(30.8 * var(--s)); line-height:calc(47 * var(--s));
  text-align:right;
}
.cta__sub{
  position:absolute; right:calc(292 * var(--s)); top:calc(281 * var(--s));
  font-size:calc(20.3 * var(--s)); line-height:1.6; color:var(--muted);
  text-align:right;
}
/* the artboard's button becomes a real capture form: name + phone → WhatsApp */
.cta__form{
  position:absolute; left:calc(373 * var(--s)); top:calc(196 * var(--s));
  width:calc(600 * var(--s));
  display:flex; align-items:center; flex-wrap:wrap;
  gap:calc(10 * var(--s));
}
.cta__input{
  flex:1 1 calc(180 * var(--s)); min-width:0;
  height:calc(60 * var(--s));
  padding-inline:calc(22 * var(--s));
  border-radius:999px; outline:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  font-family:var(--ar); font-size:calc(19 * var(--s));
  color:#fff; text-align:right;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cta__input--tel{ text-align:left; font-family:var(--lat) }
.cta__input::placeholder{ color:rgba(234,234,249,.45); font-family:var(--ar) }
.cta__input:focus{
  border-color:rgba(137,45,255,.85);
  box-shadow:0 0 0 calc(4 * var(--s)) rgba(137,45,255,.18);
}

.cta__send{
  flex:1 1 100%;
  height:calc(60 * var(--s));
  display:flex; align-items:center; justify-content:center;
  gap:calc(11 * var(--s));
  border:0; border-radius:999px; cursor:pointer;
  background:var(--accent); color:#fff;
  font-family:var(--ar); font-size:calc(20 * var(--s));
  box-shadow:0 calc(12 * var(--s)) calc(32 * var(--s)) rgba(137,45,255,.3);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.cta__send:hover{ background:#9d4dff; transform:translateY(calc(-3 * var(--s))) }
.cta__send img{ width:calc(22 * var(--s)); height:auto }

.cta__note{
  position:absolute; left:calc(373 * var(--s)); top:calc(340 * var(--s));
  width:calc(600 * var(--s));
  font-size:calc(17 * var(--s)); line-height:1.5;
  color:var(--lav); text-align:center; min-height:calc(24 * var(--s));
}
.cta__note[data-state="error"]{ color:#ff9d9d }

/* =============================== FOOTER ============================= */
.foot{ height:calc(320 * var(--s)) }

/* display:block matters — once the mobile layout unpins these from absolute
   an inline <a> would ignore its width entirely */
.foot__logo{
  display:block;
  position:absolute; right:calc(315 * var(--s)); top:calc(74 * var(--s));
  width:calc(180 * var(--s));
}
.foot__tag{
  position:absolute; right:calc(315 * var(--s)); top:calc(132 * var(--s));
  font-family:var(--lat); font-size:calc(13.5 * var(--s)); line-height:1.38;
  color:rgba(234,234,249,.55); text-align:right;
}
.foot__social{
  position:absolute; left:calc(315 * var(--s)); top:calc(78 * var(--s));
  display:flex; gap:calc(14 * var(--s));
  margin:0; padding:0; list-style:none;
}
.foot__social a{
  width:calc(48 * var(--s)); height:calc(48 * var(--s));
  display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.055);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.foot__social img{ width:calc(20 * var(--s)); height:calc(20 * var(--s)); opacity:.8 }
.foot__social a:hover{ background:rgba(137,45,255,.55); transform:translateY(calc(-3 * var(--s))) }
.foot__social a:hover img{ opacity:1 }

.foot__rule{
  position:absolute; left:calc(312 * var(--s)); top:calc(212 * var(--s));
  width:calc(1293 * var(--s)); height:1px; background:rgba(255,255,255,.12);
}
.foot__contact{
  position:absolute; left:calc(315 * var(--s)); top:calc(140 * var(--s));
  display:flex; align-items:center; gap:calc(12 * var(--s));
  font-size:calc(17 * var(--s)); color:rgba(234,234,249,.6);
}
/* padded to a comfortable tap target, not just the text box */
.foot__contact a{
  display:inline-flex; align-items:center; min-height:34px;
  padding-block:4px;
  transition:color .3s var(--ease);
}
.foot__contact a:hover{ color:var(--lav) }
.foot__contact span{ opacity:.4 }

.foot__copy{
  position:absolute; left:0; right:0; top:calc(248 * var(--s));
  display:flex; align-items:center; justify-content:center; gap:calc(5 * var(--s));
  font-size:calc(17 * var(--s)); color:rgba(234,234,249,.5);
}

/* WhatsApp reads as the live channel, so it carries the accent */
.foot__social .is-wa{ background:rgba(137,45,255,.28) }
.foot__social .is-wa:hover{ background:var(--accent) }

/* =============================== MOTION =============================
   The brand is a blink — motion is fast and sharp, never a slow drift.
   Everything is scoped to .js so the page stays fully visible if the
   script never runs. Transform/opacity only, so nothing triggers layout.
   ==================================================================== */
:root{
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:.42s;
}

.js .reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none }

/* text sits on the right, so it should arrive from the right */
.js .reveal--right{ transform:translateX(34px) }

/* The big purple headings wipe open from the right edge.
   The clip goes on an inner span, never the observed element itself:
   a clip-path that collapses the box to zero area also collapses the
   IntersectionObserver rect, and the heading would never reveal. */
.js .reveal--wipe{ opacity:1; transform:none }
.js .reveal--wipe > span{
  display:inline-block;
  clip-path:inset(0 0 0 100%);
  transition:clip-path .62s var(--ease);
}
.js .reveal--wipe.is-in > span{ clip-path:inset(0 0 0 0) }

/* discs and tiles pop rather than slide, with a touch of overshoot so the
   one-after-another sequence actually reads */
.js .reveal--pop{
  transform:scale(.62) translateY(26px);
  transition:opacity .38s var(--ease), transform .62s cubic-bezier(.34,1.5,.5,1);
}
.js .reveal--pop.is-in{ transform:scale(1) translateY(0) }

/* and the disc fills itself in: icon, then label, then number */
.js .step .disc__icon{
  opacity:0; transform:scale(.55);
  transition:opacity .3s var(--ease) .16s, transform .5s cubic-bezier(.34,1.6,.5,1) .16s;
}
.js .step .disc__label{
  opacity:0; transform:translateY(calc(12 * var(--s)));
  transition:opacity .34s var(--ease) .28s, transform .44s var(--ease) .28s;
}
.js .step .step__num{
  opacity:0; transform:translateY(calc(10 * var(--s)));
  transition:opacity .34s var(--ease) .4s, transform .44s var(--ease) .4s;
}
.js .step.is-in .disc__icon,
.js .step.is-in .disc__label,
.js .step.is-in .step__num{ opacity:1; transform:none }

/* the connector arrows draw themselves — no fade */
.js .reveal--draw{ opacity:1; transform:none }

/* Service dividers sweep out from the right. The sweep runs on an inner fill,
   never on the observed box itself. */
.js .reveal--rule{ opacity:1; transform:none; background:transparent }
.js .reveal--rule::after{
  content:""; display:block; width:100%; height:100%;
  background:var(--rule);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .55s var(--ease);
}
.js .reveal--rule.is-in::after{ transform:scaleX(1) }

/* A service row assembles: the title comes in from the right and the
   description from the left, converging on the divider between them. */
.js .reveal--row{
  opacity:0; transform:none;
  transition:opacity .45s var(--ease);
}
.js .reveal--row.is-in{ opacity:1 }
.js .reveal--row h3{
  opacity:0; transform:translateX(calc(120 * var(--s)));
  transition:transform .7s var(--ease), opacity .5s var(--ease);
}
.js .reveal--row p{
  opacity:0; transform:translateX(calc(-120 * var(--s)));
  transition:transform .7s var(--ease) .08s, opacity .5s var(--ease) .08s;
}
.js .reveal--row.is-in h3,
.js .reveal--row.is-in p{ opacity:1; transform:none }

/* ------------------------------ hero motion ------------------------- */
/* a light sweep on entry, then again every so often, so the scene keeps
   a pulse instead of freezing after the intro */

/* the laptop screen stays alive: a reflection drifts across it */

/* the orb breathes */
.js 
/* The laptop grows out of the orb: scaling about the point where it meets
   the sphere makes the whole scene look like it assembles itself. */

/* the logo lifts out of the laptop screen and settles into the header —
   419 design px is the distance from the screen's centre up to its place */





/* ---------------------------- process arrows ------------------------
   Written so the drawn state is the default: if the animation never runs
   the arrow is simply there, rather than invisible. Only the not-yet-
   revealed state hides it. */
.arw path{ stroke:var(--accent); stroke-width:2.6; fill:none; stroke-linecap:square }
.js .arw__line{ stroke-dasharray:42; stroke-dashoffset:0 }
.js .arw__head{ stroke-dasharray:37; stroke-dashoffset:0 }
.js .arw:not(.is-in) .arw__line{ stroke-dashoffset:42 }
.js .arw:not(.is-in) .arw__head{ stroke-dashoffset:37 }
.js .arw.is-in .arw__line{ animation:drawLine .34s var(--ease) both }
.js .arw.is-in .arw__head{ animation:drawHead .26s var(--ease) .24s both }
@keyframes drawLine{ from{ stroke-dashoffset:42 } to{ stroke-dashoffset:0 } }
@keyframes drawHead{ from{ stroke-dashoffset:37 } to{ stroke-dashoffset:0 } }

/* ------------------------------- counters --------------------------- */
.count{ display:inline-block; min-width:2ch; text-align:center }

/* ------------------------------- hovers ----------------------------- */
@media (hover:hover){
  /* the hero pill sits on top of the one baked into the plate, so it must
     never move — it would uncover the artwork underneath */
  
  .pill:hover .pill__arrow{ transform:rotate(180deg) translate(calc(3 * var(--s)),calc(3 * var(--s))) }

  .row h3,.rule{ transition:transform .35s var(--ease), background .35s var(--ease) }
  .row:hover h3{ transform:translateX(calc(-10 * var(--s))) }
  .row:hover + .rule{
    background:linear-gradient(to left,rgba(137,45,255,.95),var(--rule) 55%);
  }
}
.pill__arrow{ transition:transform .3s var(--ease) }

/* Reduced motion, and the escape hatch main.js sets if the reveal machinery
   ever fails to report — both land the page in its finished state. */
.no-motion .reveal,
.no-motion .reveal--right,
.no-motion .reveal--row,
.no-motion .reveal--row h3,
.no-motion .reveal--row p,
.no-motion .reveal--pop{ opacity:1 !important; transform:none !important; transition:none !important }
.no-motion .reveal--wipe > span{ clip-path:none !important }
.no-motion .reveal--rule{ background:var(--rule) !important }
.no-motion .reveal--rule::after{ transform:none !important; transition:none !important }
.no-motion .arw .arw__line,
.no-motion .arw .arw__head{ stroke-dashoffset:0 !important; animation:none !important }
.no-motion .nav,
.no-motion .hero__eyebrow,
.no-motion .hero__title .l1,
.no-motion .hero__title .l2,
.no-motion .hero__sub,
.no-motion .hero__actions,
.no-motion .hero__trust,
.no-motion .hero__eyebrow .dot{ animation:none !important; opacity:1 !important; transform:none !important }
.no-motion .hero__arc,
.no-motion .hero__orb{ animation:none !important; opacity:.9 !important; transform:translateX(-50%) !important }

@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal--right,
  .js .reveal--row,
  .js .reveal--row h3,
  .js .reveal--row p,
  .js .reveal--pop{ opacity:1; transform:none; transition:none }
  .js .reveal--wipe > span{ clip-path:none; transition:none }
  .js .reveal--rule::after{ transform:none; transition:none }
  .js .arw:not(.is-in) .arw__line,
  .js .arw:not(.is-in) .arw__head{ stroke-dashoffset:0 }
  .js .arw.is-in .arw__line,.js .arw.is-in .arw__head{ animation:none }
  .js .nav,.js .hero__eyebrow,.js .hero__title .l1,.js .hero__title .l2,
  .js .hero__sub,.js .hero__actions,.js .hero__trust,
  .js .hero__eyebrow .dot{ animation:none; opacity:1; transform:none }
  .js .hero__arc,.js .hero__orb{ animation:none; opacity:.9; transform:translateX(-50%) }
  .pill,.pill__arrow{ transition:none }
}

/* ====================================================================
   MOBILE / TABLET  ( ≤ 1100px )

   The artboard scales 1:1 down to this width; below it the proportional
   type would drop under ~11px, so the layout restacks instead.
   ==================================================================== */
@media (max-width:1100px){

  :root{ --s:1px }

  .stage{ width:100% }
  /* inline padding only — each section sets its own block padding below,
     which a `padding` shorthand here would out-specify */
  .stage > section,
  .stage > footer{ height:auto !important; padding-inline:22px }

  /* ------------------------------ hero ------------------------------ */
  /* the hero is fluid on its own — it only needs the nav to stack */
  .hero{ height:auto !important; padding-inline:22px }
  .nav{ flex-wrap:wrap; row-gap:14px }
  .nav__links{ order:3; width:100%; margin:0; justify-content:center; gap:22px }
  .nav__logo{ margin-inline-end:auto }
  /* clear the stacked nav rather than cutting across it */
  .hero__arc{ top:190px; width:150vw }
  .hero__trust ul{ gap:22px }
  .cmark{ font-size:16px }

  /* --------------- unpin every artboard-positioned child ------------ */
  .def__lockup,.def__body,.def__pos,.def__text,.def__claim,
  .why__title,.why__lead,.why__sub,.why__para,
  .proc__lead,.step,.rnd,.arw,.stat,
  .srv__title,.srv__intro,.row,.row h3,.row p,.rule,
  .tools__title,.tools__sub,.tools__row,
  .mark__img,
  .cta__title,.cta__sub,.cta__form,.cta__note,
  .foot__logo,.foot__tag,.foot__social,.foot__contact,.foot__rule,.foot__copy{
    position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    width:auto; transform:none;
  }

  /* --------------------------- definition --------------------------- */
  .def{ padding-top:56px; padding-bottom:56px }
  .def__lockup{ width:212px; margin:0 auto 30px }
  .def__body{ text-align:right }
  .def__pos{ font-size:17px; line-height:1.4 }
  .def__text{ font-size:15px; line-height:1.9; margin-top:12px }
  .def__claim{ font-size:17px; line-height:1.8; margin-top:18px }
  .def__text br,.def__claim br{ display:none }

  /* ------------------------------ why ------------------------------- */
  .why{ padding-bottom:56px }
  .why__title{ font-size:46px; line-height:1.05; margin-bottom:24px }
  .why__lead{ font-size:23px; line-height:1.45 }
  .why__sub{ font-size:16px; line-height:1.7; margin-top:12px }
  .why__para{ font-size:15px; line-height:1.9; margin-top:22px }

  /* ---------------------------- process ----------------------------- */
  .proc{ padding-bottom:56px }
  .proc__lead{ font-size:19px; line-height:1.7; margin-bottom:40px }
  .proc__lead br{ display:none }

  .step{ width:196px; height:196px; margin:0 auto }
  .disc__icon{ left:61px; top:26px; width:66px; height:60px }
  .disc__label{ top:94px; font-size:19px; line-height:27px }
  .step__num{ left:58px; top:173px; width:80px; height:41px }

  .rnd{ width:auto; text-align:center; font-size:15px; line-height:1.5; margin:34px auto 0 }
  .arw{ width:26px; height:26px; margin:10px auto 22px; transform:rotate(45deg) }

  .stat{
    width:100%; height:auto; margin-top:40px;
    padding:20px 22px; justify-content:flex-start;
  }
  .stat p{ font-size:16px; line-height:1.8 }

  /* ---------------------------- services ---------------------------- */
  .srv{ padding-bottom:40px }
  .srv__title{ font-size:46px; margin-bottom:18px }
  .srv__intro{ font-size:15px; line-height:1.9 }
  .srv__intro br{ display:none }

  .row{ margin-top:34px }
  .row h3{ font-size:21px; line-height:1.4 }
  .row p{
    font-size:15px; line-height:1.9; margin-top:10px;
    text-align:right; text-align-last:auto;
  }
  .rule{ display:block; height:1px; margin-top:26px }

  /* ------------------------------ tools ----------------------------- */
  .tools{
    padding-top:60px; padding-bottom:150px;
    background:radial-gradient(ellipse 150% 260px at 50% 100%,
      #e6d9fd 0%, #c49df4 16%, #9a63e4 34%, #6a34b6 54%, #331d5e 76%, rgba(20,18,35,0) 100%);
  }
  .tools__title{ font-size:30px; text-align:center }
  .tools__sub{ font-size:15px; line-height:1.85; margin-top:14px; text-align:center }
  .tools__sub br{ display:none }
  .tools__row{ flex-wrap:wrap; gap:14px; margin-top:44px }
  .tools__row--b{ margin-top:14px }
  .tile{ width:58px; height:58px; border-radius:13px }

  /* ---------------------------- watermark --------------------------- */
  .mark{ padding-top:60px; padding-bottom:60px }
  .mark__img{ width:min(78%,330px); margin:0 auto }

  /* ------------------------------- cta ------------------------------ */
  .cta{ padding-top:20px; padding-bottom:56px }
  .cta__title{ font-size:27px; line-height:1.45 }
  .cta__sub{ font-size:15px; margin-top:14px }
  .cta__form{ width:100%; margin-top:24px; gap:10px }
  .cta__input{ flex:1 1 100%; height:52px; font-size:15px; padding-inline:20px }
  .cta__send{ height:54px; font-size:16px }
  .cta__send img{ width:20px }
  .cta__note{ width:100%; margin-top:12px; font-size:14px; min-height:20px }

  /* ----------------------------- footer ----------------------------- */
  .foot{ padding-top:40px; padding-bottom:40px; text-align:center }
  .foot__logo{ width:132px; margin:0 auto }
  .foot__tag{ font-size:12px; margin-top:10px; text-align:center }
  .foot__social{ justify-content:center; gap:12px; margin-top:26px }
  .foot__social a{ width:44px; height:44px }
  .foot__social img{ width:18px; height:18px }
  .foot__contact{
    justify-content:center; flex-wrap:wrap; gap:10px;
    margin-top:20px; font-size:14px;
  }
  .foot__rule{ width:100%; margin-top:26px }
  .foot__copy{ font-size:13px; margin-top:20px }
}

@media (max-width:380px){
  .tile{ width:52px; height:52px }
  .tools__row{ gap:11px }
}

/* ====================================================================
   TABLET  ( 701 – 1100px )
   The stacked layout, with the content held in a centred column and the
   hero plate pulled back so the laptop is not blown up.
   ==================================================================== */
@media (min-width:701px) and (max-width:1100px){

  .stage > section,
  .stage > footer{ padding-inline:max(28px, calc((100vw - 760px) / 2)) }

  /* the hero has its own fluid sizing; keep its padding off the narrow column */
  .hero{ padding-inline:clamp(28px, 5vw, 60px) !important }
  .nav__links{ order:0; width:auto; margin:0 auto; justify-content:center }

  .def__lockup{ width:270px }
  .def__pos{ font-size:20px }
  .def__text{ font-size:17px }
  .def__claim{ font-size:20px }

  .why__title{ font-size:62px }
  .why__lead{ font-size:28px }
  .why__sub{ font-size:18px }
  .why__para{ font-size:17px }

  .proc__lead{ font-size:22px }
  .step{ width:222px; height:222px }
  .disc__icon{ left:74px; top:29px; width:74px; height:68px }
  .disc__label{ top:106px; font-size:21px; line-height:31px }
  .step__num{ left:66px; top:196px; width:90px; height:46px }
  .rnd{ font-size:17px }
  .stat p{ font-size:18px }

  .srv__title{ font-size:62px }
  .srv__intro{ font-size:17px }
  .row h3{ font-size:25px }
  .row p{ font-size:17px }

  .tools__title{ font-size:38px }
  .tools__sub{ font-size:17px }
  .tools{ padding-bottom:190px }
  .tools__row{ gap:22px }
  .tile{ width:76px; height:76px; border-radius:16px }

  .mark__img{ width:min(70%,430px) }

  .cta__title{ font-size:34px }
  .cta__sub{ font-size:17px }
  .cta__form{ width:520px; margin-inline:auto }
  .cta__input{ flex:1 1 220px; height:56px; font-size:17px }
  .cta__send{ height:56px; font-size:18px }
  .cta__note{ width:520px; margin-inline:auto; font-size:15px }

  .foot__logo{ width:158px }
  .foot__social a{ width:48px; height:48px }
  .foot__copy{ font-size:15px }
}