/* ============================================================
   Blue Spice Web Studio
   Vibrant, asset-free visual system — all art is CSS/SVG.
   Mobile-first. Base = 375px, scales up.
   ============================================================ */

:root{
  /* brand */
  --blue:#1B4DFF;
  --blue-d:#0B2FCC;
  --violet:#6D28D9;
  --magenta:#FF2E88;
  --saffron:#FF8A00;
  --teal:#00C9A7;

  /* surface */
  --ink:#0A0A1A;
  --ink-2:#111129;
  --paper:#FFFFFF;
  --cream:#FFF7EE;
  --line:rgba(10,10,26,.10);
  --line-2:rgba(10,10,26,.06);
  --muted:rgba(10,10,26,.62);
  --muted-light:rgba(255,255,255,.66);

  /* type */
  --ff:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fs:"Instrument Serif",Georgia,serif;

  /* rhythm */
  --pad:22px;
  --sec-y:76px;
  --r:18px;
  --r-lg:26px;

  --shadow:0 1px 2px rgba(10,10,26,.05), 0 12px 28px -12px rgba(10,10,26,.16);
  --shadow-lg:0 30px 70px -28px rgba(10,10,26,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.05;letter-spacing:-.03em;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
em{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em}
::selection{background:var(--blue);color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 0}
.skip:focus{left:0}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:840px}

/* ============================================================
   AMBIENT BACKGROUND — the "no assets" hero trick
   ============================================================ */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--paper)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.blob--1{width:60vw;height:60vw;max-width:620px;max-height:620px;top:-16vw;left:-18vw;
  background:radial-gradient(circle at 30% 30%,var(--blue),transparent 68%);animation:drift1 22s ease-in-out infinite}
.blob--2{width:52vw;height:52vw;max-width:520px;max-height:520px;top:6vh;right:-16vw;
  background:radial-gradient(circle at 60% 40%,var(--magenta),transparent 66%);opacity:.38;animation:drift2 26s ease-in-out infinite}
.blob--3{width:46vw;height:46vw;max-width:460px;max-height:460px;top:44vh;left:12vw;
  background:radial-gradient(circle at 50% 50%,var(--saffron),transparent 64%);opacity:.3;animation:drift3 30s ease-in-out infinite}

@keyframes drift1{50%{transform:translate3d(8vw,6vh,0) scale(1.12)}}
@keyframes drift2{50%{transform:translate3d(-7vw,9vh,0) scale(1.08)}}
@keyframes drift3{50%{transform:translate3d(6vw,-8vh,0) scale(1.14)}}

.grid-lines{position:absolute;inset:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 100% 70% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 100% 70% at 50% 0%,#000 30%,transparent 78%)}
.noise{position:absolute;inset:0;opacity:.4;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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}

/* custom cursor (desktop only) */
.cursor{display:none}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border:0;border-radius:999px;
  background:var(--bg);color:#fff;
  font-family:var(--ff);font-size:15px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,color .25s;
  box-shadow:none;
}
.btn::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(100deg,var(--blue),var(--violet) 45%,var(--magenta))}
.btn>*{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(27,77,255,.55)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0)}
.btn__arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1);position:relative;z-index:1}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--lg{padding:17px 30px;font-size:16.5px}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn--ghost:hover{color:#fff;border-color:transparent}
.sec--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.24)}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav.is-stuck{background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 var(--line-2),0 10px 30px -22px rgba(10,10,26,.5)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}

.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo__mark{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--violet) 55%,var(--magenta));
  box-shadow:0 6px 16px -6px rgba(27,77,255,.8)}
.logo__mark svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.logo__txt{display:flex;flex-direction:column;font-weight:800;font-size:20px;letter-spacing:-.038em;line-height:1.04}
.logo__txt em{font-family:var(--ff);font-style:normal;font-weight:500;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted)}
.logo--light .logo__txt{color:#fff}
.logo--light .logo__txt em{color:var(--muted-light)}

.nav__links{display:none}
.nav__cta{display:none}

.burger{width:42px;height:42px;border:1.5px solid var(--line);border-radius:12px;background:rgba(255,255,255,.6);
  display:grid;place-content:center;gap:5px;cursor:pointer;padding:0}
.burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:70px 0 auto;z-index:99;background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);padding:14px var(--pad) 26px;
  box-shadow:0 24px 40px -26px rgba(10,10,26,.5)}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu a{padding:15px 2px;font-size:20px;font-weight:600;letter-spacing:-.02em;border-bottom:1px solid var(--line-2)}
.mobile-menu__cta{margin-top:18px;border:0!important;text-align:center;color:#fff;border-radius:999px;
  background:linear-gradient(100deg,var(--blue),var(--violet) 50%,var(--magenta))}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:118px 0 56px;overflow:hidden}
.hero__inner{position:relative;z-index:2}

/* bare label, not a UI chip: reads as editorial rather than dashboard */
.eyebrow{display:inline-flex;align-items:center;gap:11px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(0,201,167,.6);animation:pulse 2.4s infinite}
.eyebrow--light{color:var(--muted-light)}
/* hairline trailing the hero label, like a rule on a plan drawing.
   Desktop only: at 375px it pushes the label onto a second line. */
@media (min-width:900px){
  .hero .eyebrow::after{content:"";width:72px;height:1px;flex-shrink:0;
    background:linear-gradient(90deg,rgba(10,10,26,.34),transparent)}
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(0,201,167,0)}100%{box-shadow:0 0 0 0 rgba(0,201,167,0)}}

.hero__title{margin:28px 0 0;font-size:clamp(38px,10.4vw,58px);font-weight:800;letter-spacing:-.045em}
.hero__title .line{display:block}

/* One word in the DOM, swapped by JS. Two guarantees:
   1. min-width is reserved for the WIDEST word (set once by JS), so the line
      length never changes as words cycle and the headline can never reflow.
   2. Only one word exists, so with no CSS or no JS it still renders correctly
      instead of printing every word inline. */
.rotator{display:inline-block;margin-left:.26em;white-space:nowrap;text-align:left}
.rotator b{font-weight:800;white-space:nowrap;
  transition:opacity .22s linear;
  background:linear-gradient(100deg,var(--blue),var(--violet) 38%,var(--magenta) 70%,var(--saffron));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rotator.is-swapping b{opacity:0}

.hero__sub{margin-top:32px;font-size:16.5px;color:var(--muted);max-width:44ch}
.hero__cta{margin-top:38px;display:flex;flex-direction:column;gap:12px}

/* floating CSS mockups */
.hero__art{position:relative;margin-top:52px;height:290px;z-index:1}
/* soft disc behind the cluster so three cards read as one composition
   instead of three things that happen to be near each other */
.hero__art::before{content:"";position:absolute;left:50%;top:50%;
  width:112%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 42% 38%,rgba(27,77,255,.13),rgba(255,46,136,.10) 46%,transparent 68%)}
.hero__art::after{content:"";position:absolute;left:50%;top:50%;
  width:78%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;z-index:-1;border:1px solid rgba(10,10,26,.07)}
.mock,.phone{position:absolute;border-radius:16px;background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;will-change:transform}
.mock--a{width:250px;left:0;top:8px;transform:rotate(-4deg)}
.mock--b{width:210px;right:8px;top:74px;transform:rotate(5deg)}
.mock__bar{display:flex;align-items:center;gap:5px;padding:9px 11px;background:rgba(10,10,26,.045);border-bottom:1px solid var(--line-2)}
.mock__bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.mock__bar i:first-child{background:#FF5F57}.mock__bar i:nth-child(2){background:#FEBC2E}.mock__bar i:nth-child(3){background:#28C840}
.mock__body{padding:12px;display:flex;flex-direction:column;gap:7px}
.mock__row{display:flex;gap:7px}

.phone{width:112px;height:196px;right:76px;bottom:-6px;border-radius:20px;transform:rotate(-8deg);
  border:5px solid rgba(10,10,26,.86);background:#fff}
.phone__screen{padding:9px;display:flex;flex-direction:column;gap:6px;height:100%}

.sk{border-radius:6px;background:rgba(10,10,26,.09)}
.sk--l{height:7px}
.sk--hero{height:52px;border-radius:9px}
.sk--big{height:64px;border-radius:10px}
.sk--card{flex:1;height:44px;border-radius:9px}
.sk--sq{flex:1;aspect-ratio:1;border-radius:9px}
.sk--pill{height:22px;width:76px;border-radius:999px;margin-top:auto}
.sk--nav{height:9px;width:100%;border-radius:999px}
.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}
.g1{background:linear-gradient(120deg,var(--blue),var(--violet))}
.g2{background:linear-gradient(120deg,var(--magenta),var(--saffron))}
.g3{background:linear-gradient(120deg,var(--teal),var(--blue))}
.g4{background:linear-gradient(120deg,var(--saffron),#FFD166)}
.g5{background:linear-gradient(120deg,var(--violet),var(--magenta))}

/* vertical edge rails (desktop only, added in the 1100px block) */
.rail{display:none}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{overflow:hidden;padding:15px 0;border-block:1px solid var(--line);
  background:linear-gradient(100deg,var(--blue),var(--violet) 42%,var(--magenta) 74%,var(--saffron));color:#fff}
.ticker__track{display:flex;align-items:center;gap:22px;width:max-content;animation:slide 42s linear infinite}
.ticker span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.ticker b{font-size:9px;opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{position:relative;padding:var(--sec-y) 0}
.sec--cream{background:var(--cream);border-block:1px solid var(--line-2)}
.sec--dark{background:var(--ink);color:#fff;overflow:hidden}
.sec--dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 44% at 8% 0%,rgba(27,77,255,.5),transparent 62%),
    radial-gradient(52% 42% at 96% 20%,rgba(255,46,136,.34),transparent 62%),
    radial-gradient(50% 40% at 50% 108%,rgba(255,138,0,.26),transparent 60%)}
.sec--dark .wrap{position:relative;z-index:1}

.sec__head{margin-bottom:38px;max-width:660px}
.sec__title{font-size:clamp(31px,8.4vw,44px);font-weight:800;letter-spacing:-.04em;margin-top:16px}
.sec__title em{background:linear-gradient(100deg,var(--blue),var(--magenta) 60%,var(--saffron));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec--dark .sec__title em{background:linear-gradient(100deg,#7FA0FF,#FF8FC0 55%,#FFC46B);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec__lede{margin-top:16px;font-size:16px;color:var(--muted)}
.sec--dark .sec__lede{color:var(--muted-light)}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.cards{display:grid;gap:16px}
.card{position:relative;padding:26px 22px 24px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.76);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.card::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--a1),var(--a2));transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.card::after{content:"";position:absolute;width:190px;height:190px;right:-70px;top:-70px;border-radius:50%;
  background:radial-gradient(circle,var(--a1),transparent 70%);opacity:0;transition:opacity .45s;filter:blur(24px)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:.26}
.card>*{position:relative;z-index:1}

.card[data-accent="blue"]{--a1:var(--blue);--a2:var(--violet)}
.card[data-accent="magenta"]{--a1:var(--magenta);--a2:var(--violet)}
.card[data-accent="saffron"]{--a1:var(--saffron);--a2:var(--magenta)}
.card[data-accent="teal"]{--a1:var(--teal);--a2:var(--blue)}
.card[data-accent="violet"]{--a1:var(--violet);--a2:var(--blue)}

.card__num{position:absolute;top:20px;right:22px;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--muted);opacity:.5}
.card__icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  box-shadow:0 10px 22px -10px var(--a1);margin-bottom:18px}
.card__icon svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:21px;font-weight:700;letter-spacing:-.03em}
.card p{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.62}
.card__list{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:7px}
.card__list li{position:relative;padding-left:19px;font-size:13.5px;font-weight:500;color:var(--muted)}
.card__list li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--a1),var(--a2))}

/* invitation card that closes the grid */
.card--cta{--a1:var(--violet);--a2:var(--magenta);
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,var(--ink),#1B1B3D);color:#fff;border-color:transparent}
.card--cta::after{opacity:.3}
.card--cta:hover::after{opacity:.55}
.card--cta p{color:var(--muted-light)}
.card--cta .card__icon svg{stroke-width:2.2}
.card__body{display:block}
.card__link{margin-top:20px;display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:#fff}
.card--cta:hover .btn__arrow{transform:translateX(4px)}

/* ============================================================
   SHOWCASE (dark)
   ============================================================ */
.showcase{display:grid;gap:20px}
.show{padding:22px;border-radius:var(--r-lg);background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s}
.show:hover{transform:translateY(-5px);background:rgba(255,255,255,.085)}
.show h3{font-size:20px;margin-top:20px;letter-spacing:-.03em}
.show p{margin-top:9px;font-size:14.5px;color:var(--muted-light);line-height:1.62}
.show__art{height:178px;border-radius:16px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);padding:16px}

.browser{width:100%;border-radius:11px;overflow:hidden;background:#fff;box-shadow:0 18px 36px -18px rgba(0,0,0,.7)}
.browser__bar{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#F2F3F7}
.browser__bar i{width:6px;height:6px;border-radius:50%;background:#D3D6E0}
.browser__bar span{flex:1;height:9px;border-radius:999px;background:#E3E6EF;margin-left:6px}
.browser__view{padding:11px;display:flex;flex-direction:column;gap:7px}
.browser__row{display:flex;gap:6px}

.gauge{position:relative;width:132px;height:132px;display:grid;place-items:center}
.gauge svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:9;stroke-linecap:round}
.gauge__track{stroke:rgba(255,255,255,.14)}
/* drawn at its final value, no scroll-triggered animation */
.gauge__fill{stroke:var(--teal);stroke-dasharray:314;stroke-dashoffset:38;
  filter:drop-shadow(0 0 8px rgba(0,201,167,.7))}
.gauge__val{text-align:center;line-height:1}
.gauge__val strong{font-size:32px;font-weight:800;letter-spacing:-.05em}
.gauge__val small{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-light)}

.devices{display:flex;align-items:flex-end;gap:12px;width:100%}
.devices__desk{flex:1;height:118px;border-radius:10px;background:#fff;padding:11px;display:flex;flex-direction:column;gap:7px;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.7)}
.devices__phone{width:64px;height:132px;border-radius:12px;background:#fff;padding:8px;display:flex;flex-direction:column;gap:6px;
  border:4px solid rgba(0,0,0,.75);box-shadow:0 18px 34px -18px rgba(0,0,0,.8)}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{display:grid;gap:16px;counter-reset:s}
.step{position:relative;padding:24px 22px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.step__n{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--magenta));color:#fff;
  font-size:17px;font-weight:800;box-shadow:0 10px 22px -10px rgba(27,77,255,.9);margin-bottom:15px}
.step h3{font-size:19px;letter-spacing:-.03em}
.step p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.62}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:flex;flex-direction:column;gap:11px}
.qa{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.qa[open]{border-color:transparent;box-shadow:var(--shadow-lg)}
.qa summary{list-style:none;cursor:pointer;padding:19px 52px 19px 20px;position:relative;
  font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:absolute;right:18px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--magenta));transition:transform .3s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;background:#fff;border-radius:2px;
  left:50%;top:50%;transform:translate(-50%,-50%)}
.qa summary i::before{width:9px;height:2px}
.qa summary i::after{width:2px;height:9px;transition:opacity .3s,transform .3s}
.qa[open] summary i{transform:rotate(180deg)}
.qa[open] summary i::after{opacity:0}
.qa p{padding:0 20px 20px;font-size:14.5px;color:var(--muted);line-height:1.68}

/* ============================================================
   CONTACT
   ============================================================ */
.sec--cta{padding-bottom:calc(var(--sec-y) + 10px)}
.contact{display:grid;gap:36px}
.contact__direct{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.contact__direct li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:#fff}
.contact__direct li:last-child{color:var(--muted-light);font-weight:400;font-size:14px}
.contact__ico{width:38px;height:38px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.contact__ico svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact__direct a:hover{text-decoration:underline;text-underline-offset:4px}

.form{padding:26px 22px;border-radius:var(--r-lg);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-light)}
.field input,.field select,.field textarea{
  font-family:var(--ff);font-size:15.5px;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:13px;
  padding:13px 15px;width:100%;transition:border-color .25s,background .25s;resize:vertical}
.field textarea{min-height:88px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.36)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.11)}
.field input.is-bad{border-color:var(--magenta)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px}
.field select option{background:var(--ink-2);color:#fff}
.form .btn{--bg:#fff;color:var(--ink);margin-top:4px}
.form .btn:hover{color:#fff}
.form__note{font-size:12.5px;color:var(--muted-light);text-align:center;line-height:1.5}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink-2);color:#fff;padding:52px 0 26px}
.foot__inner{display:grid;gap:32px}
.foot__brand p{margin-top:16px;font-size:14px;color:var(--muted-light);max-width:34ch;line-height:1.65}
.foot__col{display:flex;flex-direction:column;gap:10px}
.foot__col h4{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light);margin-bottom:4px}
.foot__col a{font-size:14.5px;color:rgba(255,255,255,.88);width:fit-content;transition:color .25s}
.foot__col a:hover{color:var(--teal)}
.foot__bottom{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--muted-light);text-align:center}

/* WhatsApp float */
.wa{position:fixed;right:16px;bottom:16px;z-index:90;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;box-shadow:0 14px 30px -10px rgba(37,211,102,.85);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.wa:hover{transform:scale(1.09)}
.wa svg{width:28px;height:28px;fill:#fff}

/* Scroll-reveal animations removed. Content is visible on arrival and never
   depends on JS or IntersectionObserver to be readable. */

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:600px){
  :root{--pad:32px;--sec-y:92px}
  .hero__cta{flex-direction:row}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .hero__art{height:330px}
  .mock--a{width:300px}.mock--b{width:250px;top:96px}
  .phone{right:120px}
  .foot__inner{grid-template-columns:repeat(2,1fr)}
  .foot__bottom{flex-direction:row;justify-content:space-between;text-align:left}
}

@media (min-width:900px){
  :root{--sec-y:118px}
  .burger{display:none}
  .mobile-menu{display:none!important}
  .nav__links{display:flex;align-items:center;gap:30px}
  .nav__links a{font-size:14.5px;font-weight:500;color:var(--muted);position:relative;transition:color .25s}
  .nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--blue),var(--magenta));transform:scaleX(0);transform-origin:left;
    transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .nav__links a:hover{color:var(--ink)}
  .nav__links a:hover::after{transform:scaleX(1)}
  .nav__cta{display:inline-flex}
  .nav__inner{height:88px}
  /* wordmark carries the brand on desktop, so it scales up with the nav */
  .logo{gap:13px}
  .logo__mark{width:48px;height:48px;border-radius:15px}
  .logo__mark svg{width:31px;height:31px}
  .logo__txt{font-size:25px}
  .logo__txt em{font-size:11.5px;letter-spacing:.2em}

  /* padding-top only clears the fixed nav; align-items does the centring.
     The heavier bottom padding lifts the block off the vertical centre so it
     doesn't sit marooned in the middle of a tall viewport. */
  .hero{padding:88px 0 150px;min-height:100svh;display:flex;align-items:center}
  /* Two real columns. The art used to be absolutely positioned, which let the
     headline run underneath it at wide viewports. A grid track can't overlap. */
  .hero .wrap{width:100%}
  .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
    gap:60px;align-items:center}
  .hero__title{font-size:clamp(46px,4.4vw,66px);margin-top:32px}
  .hero__sub{font-size:17.5px;margin-top:34px;max-width:40ch}
  .hero__cta{margin-top:42px}
  .hero__art{position:relative;width:100%;height:430px;margin:0}
  .mock--a{width:300px;left:0;top:0}
  .mock--b{width:250px;right:-6px;top:150px}
  .phone{right:126px;bottom:-24px;width:122px;height:214px}

  /* ---- edge rails: vertical type pinned to the viewport edges ---- */
  .rail{display:flex;position:absolute;bottom:44px;align-items:center;gap:14px;
    font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    color:var(--muted);white-space:nowrap}
  .rail--left{left:26px;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.18em}
  /* lifted clear of the fixed WhatsApp button (58px + 26px offset) */
  .rail--right{right:26px;bottom:116px;writing-mode:vertical-rl;transition:color .3s}
  .rail--right:hover{color:var(--ink)}
  .rail--right i{width:1px;height:56px;background:linear-gradient(var(--line),transparent);
    position:relative;overflow:hidden}
  .rail--right i::after{content:"";position:absolute;inset:0;
    background:linear-gradient(var(--blue),var(--magenta));animation:cue 2.1s ease-in-out infinite}
  @keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

  .cards{grid-template-columns:repeat(3,1fr);gap:20px}
  /* 7 service cards + this one = 8; spanning two closes the last row */
  .card--cta{grid-column:span 2;flex-direction:row;align-items:center;justify-content:flex-start;
    gap:28px;padding:32px 36px}
  .card--cta .card__icon{margin-bottom:0;flex-shrink:0}
  .card--cta p{max-width:52ch}
  .showcase{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .contact{grid-template-columns:1fr 1fr;gap:60px;align-items:start}
  .form{padding:34px 30px}
  .foot__inner{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
  .sec__head{margin-bottom:52px}
  .sec__head:not(.sec__head--left){margin-inline:auto;text-align:center}
  .sec__head:not(.sec__head--left) .sec__lede{margin-inline:auto}
  .contact .sec__head,.contact__copy{text-align:left}
  .wa{right:26px;bottom:26px;width:58px;height:58px}
  .wa svg{width:31px;height:31px}

  /* custom cursor: precise dot + a ring that lags behind it.
     A solid disc smeared over the headline; an outline reads as an instrument. */
  .cursor{display:block;position:fixed;top:0;left:0;width:36px;height:36px;border-radius:50%;
    z-index:9999;pointer-events:none;opacity:0;
    /* difference blend keeps it visible on both the white and the ink sections */
    mix-blend-mode:difference;border:1.5px solid rgba(255,255,255,.9);
    transition:opacity .35s,width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),
      border-color .3s,background .3s;
    will-change:transform}
  .cursor::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
    margin:-2px 0 0 -2px;border-radius:50%;background:#fff;transition:opacity .3s}
  .cursor.is-on{opacity:1}
  .cursor.is-big{width:64px;height:64px;border-color:transparent;background:rgba(255,255,255,.22)}
  .cursor.is-big::after{opacity:0}
}

@media (min-width:1100px){
  /* text track keeps ~70px of slack past the widest rotator word so a longer
     word can never push the headline onto a third line */
  .hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px}
  .hero__art{height:470px}
  .mock--a{width:340px}
  .mock--b{width:280px;top:170px}
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}