/* Palette and shapes lifted from the CRM (EjenFlow.html): ACCENT #2563eb, the same navy
   hero gradient, #e6eaf1 hairlines, 16px radius, and #16a34a reserved for WhatsApp
   actions exactly as the app reserves it. Same system font stack — no webfont. */
:root{
  --navy1:#0b1430;
  --accent:#2563eb;
  --accent2:#60a5fa;
  --wa:#16a34a;
  --bg:#f7f8fb;
  --line:#e6eaf1;
  --ink:#0f172a;
  --muted:#64748b;
  --faint:#94a3b8;
  --hero:linear-gradient(120deg,#0b1430 0%,#15275a 55%,#1b3a86 120%);
  /* Monospace for the small telemetry-style labels in the hero card. System stack, so the
     look costs no webfont request — the page still loads zero external fonts. */
  --mono:ui-monospace,SFMono-Regular,'JetBrains Mono','Cascadia Mono',Menlo,Consolas,monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-weight:600; letter-spacing:-.028em; margin:0; line-height:1.15; }
p{ margin:0; }
a{ color:var(--accent); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:99; background:#fff; padding:12px 16px; border-radius:9px; font-weight:600; }
.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }

/* ===== motion system =====
   One easing curve everywhere — cubic-bezier(.22,1,.36,1). It decelerates hard at the
   end, which is what makes an entrance feel settled rather than mechanical. */
.rv{ opacity:0; transform:translateY(18px); }
.rv.on{ opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.rv.d1.on{ transition-delay:.08s; } .rv.d2.on{ transition-delay:.16s; }
.rv.d3.on{ transition-delay:.24s; } .rv.d4.on{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv,.rv.on{ opacity:1; transform:none; transition:none; }
}

/* ===== cinematic layer =====
   Ambient depth built entirely in CSS: no video file, no library, nothing to download.
   Two slow-drifting gradient fields plus a masked grid, tinted with the brand blues. */
/* Aurora for the navy sections. The fixed .mesh below sits behind the page, so an opaque
   section background hides it completely — the dark bands need their own field inside. */
.fx{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fx span{ position:absolute; display:block; border-radius:50%; filter:blur(64px); will-change:transform; }
.fx .a{ width:56vw; height:56vw; left:-12vw; top:-24vw;
  background:radial-gradient(circle,rgba(59,130,246,.60),transparent 66%); animation:aur1 17s ease-in-out infinite alternate; }
.fx .b{ width:46vw; height:46vw; right:-10vw; top:8vh;
  background:radial-gradient(circle,rgba(96,165,250,.48),transparent 67%); animation:aur2 23s ease-in-out infinite alternate; }
.fx .c{ width:40vw; height:40vw; left:32vw; bottom:-20vw;
  background:radial-gradient(circle,rgba(147,197,253,.34),transparent 69%); animation:aur3 20s ease-in-out infinite alternate; }
/* a slow light sweep across the band, like a shaft moving over the surface */
.fx .sweep{ position:absolute; inset:-20%; border-radius:0; filter:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.09) 50%,transparent 66%);
  background-size:260% 100%; animation:sweep 11s linear infinite; }
@keyframes aur1{ from{ transform:translate(-9%,-7%) scale(1); } to{ transform:translate(15%,11%) scale(1.26); } }
@keyframes aur2{ from{ transform:translate(11%,9%) scale(1.16); } to{ transform:translate(-13%,-7%) scale(.94); } }
@keyframes aur3{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-15%,-11%) scale(1.22); } }
@keyframes sweep{ from{ background-position:220% 0; } to{ background-position:-120% 0; } }
/* Receding grid along the floor of the hero — reads as depth and forward motion without
   competing with the headline. Masked out at the top so it never reaches the copy. */
.fx .grid{ left:-50%; right:-50%; bottom:-14%; width:auto; height:62%; border-radius:0;
  filter:none; opacity:.42; transform-origin:50% 0%;
  background-image:linear-gradient(rgba(120,180,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,180,255,.16) 1px,transparent 1px);
  background-size:72px 72px; animation:efGrid 5s linear infinite;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 72%);
          mask-image:linear-gradient(to top,#000 0%,transparent 72%); }
@keyframes efGrid{ from{ transform:perspective(700px) rotateX(62deg) translateY(0); }
                   to{ transform:perspective(700px) rotateX(62deg) translateY(72px); } }

/* Horizontal light streams — the literal "flow". Faded at both edges so they read as
   passing through the band rather than starting and stopping inside it. */
.fx .streams{ inset:0; width:auto; height:auto; border-radius:0; filter:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%,#000 30%,transparent 100%);
          mask-image:radial-gradient(80% 70% at 50% 45%,#000 30%,transparent 100%); }
.fx .streams i{ position:absolute; left:0; right:0; height:1px; display:block;
  animation:efStream 5.5s linear infinite; }
.fx .streams i:nth-child(1){ top:18%; animation-duration:4.5s;
  background:linear-gradient(90deg,transparent,rgba(127,208,255,0) 20%,#7fd0ff 50%,rgba(127,208,255,0) 80%,transparent); }
.fx .streams i:nth-child(2){ top:33%; animation-duration:6.5s; animation-delay:-2s;
  background:linear-gradient(90deg,transparent,rgba(111,155,255,0) 25%,#6f9bff 50%,rgba(111,155,255,0) 75%,transparent); }
.fx .streams i:nth-child(3){ top:52%; animation-duration:5.5s; animation-delay:-3.4s;
  background:linear-gradient(90deg,transparent,rgba(53,226,255,0) 22%,#35e2ff 50%,rgba(53,226,255,0) 78%,transparent); }
.fx .streams i:nth-child(4){ top:71%; animation-duration:7.5s; animation-delay:-1.2s;
  background:linear-gradient(90deg,transparent,rgba(138,168,255,0) 25%,#8aa8ff 50%,rgba(138,168,255,0) 75%,transparent); }
@keyframes efStream{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

@media (prefers-reduced-motion:reduce){
  .fx span{ animation:none !important; }
  .fx .grid,.fx .streams{ display:none; }
}

.mesh{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
@keyframes float1{ from{ transform:translate3d(-4%,-3%,0) scale(1); } to{ transform:translate3d(6%,5%,0) scale(1.14); } }
@keyframes float2{ from{ transform:translate3d(5%,4%,0) scale(1.08); } to{ transform:translate3d(-5%,-4%,0) scale(1); } }

/* ---------- Scroll parallax -------------------------------------------------
   Restraint is the whole point. Five very soft, heavily blurred washes with small
   speed differences - two drifting against the scroll for depth. No hard edges and
   no visible grid: crisp shapes at this scale read as decoration stuck to the page,
   which is exactly what stops a background looking expensive. */
.plx{ position:absolute; inset:0; will-change:transform; transform:translate3d(0,0,0);
  backface-visibility:hidden; }
.mesh span{ position:absolute; display:block; border-radius:50%; filter:blur(96px); opacity:.55; }
.mesh .m1{ width:70vw; height:70vw; left:-20vw; top:-24vw;
  background:radial-gradient(circle,rgba(37,99,235,.34),transparent 70%);
  animation:float1 34s ease-in-out infinite alternate; }
.mesh .m2{ width:58vw; height:58vw; right:-16vw; top:26vh;
  background:radial-gradient(circle,rgba(96,165,250,.28),transparent 70%);
  animation:float2 42s ease-in-out infinite alternate; }
.mesh .m3{ width:52vw; height:52vw; left:18vw; top:88vh;
  background:radial-gradient(circle,rgba(27,58,134,.24),transparent 72%);
  animation:float1 38s ease-in-out infinite alternate-reverse; }
.mesh .m4{ width:44vw; height:44vw; right:6vw; top:150vh;
  background:radial-gradient(circle,rgba(37,99,235,.22),transparent 72%);
  animation:float2 46s ease-in-out infinite alternate; }
.mesh .m5{ width:50vw; height:50vw; left:-6vw; top:225vh;
  background:radial-gradient(circle,rgba(96,165,250,.20),transparent 72%);
  animation:float1 44s ease-in-out infinite alternate; }

@media (max-width:760px){
  /* Fewer, smaller, cheaper to composite on a phone. */
  .mesh span{ filter:blur(64px); opacity:.5; }
}
@media (prefers-reduced-motion:reduce){
  .plx{ transform:none !important; }
}

/* Fixed hairlines at the container edges — the quiet detail that reads as considered. */
.guide{ display:none; }
@media (min-width:1140px){
  .guide{ display:block; position:fixed; top:0; bottom:0; width:1px; z-index:2; pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(15,23,42,.12) 12%,rgba(15,23,42,.12) 88%,transparent); }
  .guide.l{ left:50%; transform:translateX(-540px); }
  .guide.r{ left:50%; transform:translateX(540px); }
}

/* Shiny gradient word. Brand blues only — no cyan, no colour outside the palette. */
.shiny{
  background-image:linear-gradient(to right,
    #1b3a86 0%, #2563eb 18%, #93c5fd 34%, #ffffff 50%, #93c5fd 66%, #2563eb 82%, #1b3a86 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:url(#ef-noise);
  animation:shiny 7s linear infinite;
}
@keyframes shiny{ 0%{ background-position:-200% center; } 100%{ background-position:200% center; } }
@media (prefers-reduced-motion:reduce){
  .shiny{ animation:none; background-position:50% center; }
  .mesh span{ animation:none !important; }
}

/* Liquid glass — an inset gradient hairline that catches light top and bottom, so a card
   reads as a pane of glass rather than a box with a border. */
.glass{ position:relative; overflow:hidden;
  background:rgba(255,255,255,.55); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 10px 30px rgba(15,33,54,.06); }
.glass::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.3px;
  background:linear-gradient(180deg,
    rgba(37,99,235,.35) 0%, rgba(37,99,235,.12) 22%,
    rgba(37,99,235,0) 45%, rgba(37,99,235,0) 58%,
    rgba(37,99,235,.12) 80%, rgba(37,99,235,.32) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
/* on the navy sections the hairline is white instead of blue */
.glass-dark{ background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14); }
.glass-dark::before{ background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.14) 22%,
    rgba(255,255,255,0) 45%, rgba(255,255,255,0) 58%,
    rgba(255,255,255,.14) 80%, rgba(255,255,255,.42) 100%); }

/* Lift on hover, shared by every card on the page. */
.lift{ transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1); }
.lift:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(15,33,54,.13); }
@media (prefers-reduced-motion:reduce){ .lift,.lift:hover{ transform:none; transition:none; } }

/* ===== apply the treatment to the existing components =====
   Done here rather than by adding classes in the markup, so no copy, no structure and no
   translated string is touched. Every selector below already exists on the page. */

/* light panels go translucent so the ambient field reads through the whole page */
.panel{ background:rgba(255,255,255,.66); backdrop-filter:blur(3px); }

/* cards on light ground */
.steps li,.about-card,.faq details{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.62); backdrop-filter:blur(6px); border-color:rgba(37,99,235,.14);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.steps li::after,.about-card::after,.faq details::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.3px;
  background:linear-gradient(180deg,
    rgba(37,99,235,.34) 0%, rgba(37,99,235,.10) 22%,
    rgba(37,99,235,0) 45%, rgba(37,99,235,0) 58%,
    rgba(37,99,235,.10) 80%, rgba(37,99,235,.30) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.steps li:hover,.about-card:hover{
  transform:translateY(-6px); box-shadow:0 20px 44px rgba(15,33,54,.13);
  border-color:rgba(37,99,235,.34); }
.faq details:hover{ border-color:rgba(37,99,235,.3); }

/* feature rows: a soft accent wash on hover instead of a lift, since they are list rows */
.spec li{ transition:background .35s ease; border-radius:12px; }
.spec li:hover{ background:linear-gradient(90deg,rgba(37,99,235,.05),transparent 70%); }
.spec svg{ transition:transform .45s cubic-bezier(.22,1,.36,1); }
.spec li:hover svg{ transform:scale(1.12) rotate(-4deg); }

/* the browser frame gains the same glass edge */
.browser{ transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1); }
.browser:hover{ transform:translateY(-5px); box-shadow:0 38px 84px rgba(3,9,24,.62); }

/* dark-ground glass: the enquiry form and the loop badge */
.form,.floop{ position:relative; overflow:hidden; }
.form::after,.floop::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.3px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.46) 0%, rgba(255,255,255,.14) 22%,
    rgba(255,255,255,0) 45%, rgba(255,255,255,0) 58%,
    rgba(255,255,255,.14) 80%, rgba(255,255,255,.42) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }

/* The Flow gets its own drifting field, matching the hero */
.flowsec::after{ content:''; position:absolute; inset:-20% -10% auto -10%; height:140%; z-index:0;
  pointer-events:none;
  background:radial-gradient(42% 40% at 78% 22%, rgba(96,165,250,.22), transparent 66%),
             radial-gradient(38% 36% at 16% 78%, rgba(37,99,235,.20), transparent 68%);
  animation:drift 28s ease-in-out infinite alternate-reverse; }
.flowsec .wrap{ position:relative; z-index:1; }

/* a light bloom above the closing call to action */
.enq::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(680px circle at 50% 0%, rgba(255,255,255,.17), transparent 68%); }
.enq .wrap{ position:relative; z-index:1; }

/* buttons pick up a soft sheen sweep on hover */
.btn{ position:relative; overflow:hidden; }
.btn::after{ content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg); transition:left .65s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.btn:hover::after{ left:130%; }
@media (prefers-reduced-motion:reduce){
  .btn::after{ display:none; }
  .flowsec::after{ animation:none; }
  .steps li:hover,.about-card:hover,.browser:hover{ transform:none; }
}

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:30; background:rgba(11,20,48,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.09); transition:box-shadow .3s ease; }
.nav.stuck{ box-shadow:0 8px 26px rgba(4,10,26,.35); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:60px; }
.mark{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:600; font-size:18px; letter-spacing:-.02em; }
.mark img{ width:34px; height:34px; border-radius:9px; display:block; transition:transform .3s ease; }
.mark:hover img{ transform:rotate(-6deg) scale(1.06); }
.nav-menu{ display:none; gap:24px; }
.nav-menu a{ color:#b9c8e4; text-decoration:none; font-size:14px; font-weight:500; padding:6px 0;
  border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease; }
.nav-menu a:hover{ color:#fff; border-bottom-color:var(--accent2); }
.lang-switch{ display:inline-flex; align-items:center; padding:3px; gap:2px; border:1px solid rgba(255,255,255,.18);
  border-radius:10px; background:rgba(255,255,255,.05); }
.lang-switch button{ min-width:38px; min-height:34px; border:0; border-radius:7px; background:transparent;
  color:#8fa3c6; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:.2s ease; }
.lang-switch button:hover{ color:#fff; }
.lang-switch button.on{ color:#07132f; background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.18); }

/* ---------- hero + ambient glow ---------- */
.hero{ background:var(--hero); color:#fff; padding:40px 0 46px; position:relative; overflow:hidden; }
.hero::before{ content:''; position:absolute; inset:-30% -10% auto -10%; height:130%;
  background:radial-gradient(46% 42% at 22% 26%, rgba(59,130,246,.34), transparent 62%),
             radial-gradient(38% 38% at 82% 68%, rgba(96,165,250,.22), transparent 66%);
  animation:drift 22s ease-in-out infinite alternate; pointer-events:none; }
.hero::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
  /* the grid drifts one cell every 8s — slow enough to feel like depth, not scrolling */
  animation:gridpan 8s linear infinite; }
@keyframes gridpan{ from{ background-position:0 0; } to{ background-position:46px 46px; } }
@media (prefers-reduced-motion:reduce){ .hero::after{ animation:none; } }
@keyframes drift{ from{ transform:translate3d(-3%,-2%,0) scale(1); } to{ transform:translate3d(4%,3%,0) scale(1.1); } }
@media (prefers-reduced-motion:reduce){ .hero::before{ animation:none; } }
.eyebrow{ display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#c9d8f5; font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px; margin-bottom:18px; }
.hero h1{ font-size:clamp(32px,8.6vw,52px); max-width:11ch; }
.hero .sub{ margin-top:16px; font-size:16.5px; color:#c3d0ea; max-width:47ch; font-weight:400; }
.cta-row{ display:flex; flex-direction:column; gap:11px; margin-top:26px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px;
  padding:14px 22px; border-radius:11px; font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  text-decoration:none; border:2px solid transparent; cursor:pointer; font-family:inherit;
  transition:transform .2s ease, filter .2s ease, background .2s ease; }
.btn-wa{ background:var(--wa); color:#fff; box-shadow:0 8px 20px rgba(22,163,74,.32); }
.btn-wa:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.34); }
.btn-primary:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.btn-line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn-line:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }

/* ---------- phone demo ---------- */
.phone-wrap{ margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.phone{ width:100%; max-width:328px; background:#fff; border-radius:26px; padding:9px;
  box-shadow:0 30px 70px rgba(4,11,28,.55); }
.screen{ background:var(--bg); border-radius:19px; overflow:hidden; color:var(--ink);
  position:relative; height:452px; }
.scene{ position:absolute; inset:0; opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); display:flex; flex-direction:column; }
.scene.on{ opacity:1; transform:none; pointer-events:auto; }
.sbar{ background:#fff; padding:12px 14px 10px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.sbar h3{ font-size:15.5px; color:var(--ink); }
.sbar span{ display:block; font-size:11px; color:var(--muted); font-weight:500; margin-top:2px; }
.sbar-nav{ background:var(--hero); color:#fff; padding:13px 14px; flex:0 0 auto; }
.sbar-nav .back{ font-size:11px; color:#b9cdf2; font-weight:500; }
.sbar-nav h3{ color:#fff; font-size:16px; margin-top:3px; }
.sbar-nav .ph{ font-size:11px; color:#b9cdf2; font-weight:500; margin-top:2px; }
.sbody{ flex:1; overflow:hidden; }

/* lead rows */
.leads{ list-style:none; margin:0; padding:0; }
.lead{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff;
  border-bottom:1px solid var(--line); border-left:3px solid transparent; }
.lead-txt{ flex:1; min-width:0; }
.lead-name{ font-weight:600; font-size:13.5px; letter-spacing:-.01em; color:var(--ink); }
.lead-meta{ font-size:11px; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.why{ display:inline-block; margin-top:4px; font-size:10px; font-weight:600;
  padding:3px 8px; border-radius:20px; background:#f4f6fb; color:var(--muted); }
.lead-1{ border-left-color:var(--accent); }
.lead-1 .why{ background:#eff5ff; color:var(--accent); }
.wa-dot{ width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--wa);
  display:flex; align-items:center; justify-content:center; }
.wa-dot svg{ width:17px; height:17px; }

/* status pill — mirrors the CRM's green/blue/grey states */
.pill{ display:inline-block; font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:20px; }
.pill-open{ background:#dcfce7; color:#15803d; }
.pill-view{ background:#dbeafe; color:#1d4ed8; }
.statline{ display:flex; align-items:center; gap:8px; padding:11px 13px; background:#fff;
  border-bottom:1px solid var(--line); font-size:11.5px; font-weight:500; color:var(--muted); }
.swap{ position:relative; display:inline-grid; }
.swap>*{ grid-area:1/1; transition:opacity .4s ease, transform .4s ease; }
.swap .b{ opacity:0; transform:translateY(6px); }
.scene.on .swap.go .a{ opacity:0; transform:translateY(-6px); }
.scene.on .swap.go .b{ opacity:1; transform:none; }

/* chips row in lead detail */
.chips{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 13px; }
.chip{ background:#fff; border:1px solid var(--line); border-radius:11px; padding:9px 11px; }
.chip b{ display:block; font-size:9.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--faint); }
.chip span{ font-size:13px; font-weight:600; color:var(--ink); }

/* matched listings */
.mlist{ padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.mcard{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 11px;
  display:flex; gap:10px; align-items:center; opacity:0; transform:translateY(8px); }
.scene.on .mcard{ opacity:1; transform:none; transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); }
.scene.on .mcard:nth-child(1){ transition-delay:.15s; }
.scene.on .mcard:nth-child(2){ transition-delay:.3s; }
.scene.on .mcard:nth-child(3){ transition-delay:.45s; }
.mthumb{ width:38px; height:38px; flex:0 0 38px; border-radius:9px; background:var(--hero);
  display:flex; align-items:center; justify-content:center; color:#9fc3ff; font-size:16px; }
.mcard .mt{ flex:1; min-width:0; }
.mcard .mt b{ display:block; font-size:12.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcard .mt span{ font-size:10.5px; color:var(--muted); font-weight:500; }
.fit{ font-size:9.5px; font-weight:600; padding:3px 7px; border-radius:20px; white-space:nowrap; }
.fit-a{ background:#eff5ff; color:var(--accent); }
.fit-b{ background:#f4f6fb; color:var(--muted); }

/* whatsapp compose */
.tmpl{ display:flex; gap:6px; padding:11px 12px 4px; flex-wrap:wrap; }
.tmpl i{ font-style:normal; font-size:10px; font-weight:600; padding:5px 9px; border-radius:20px;
  background:#fff; border:1px solid var(--line); color:var(--muted); }
.tmpl i.sel{ background:#eff5ff; border-color:#bcd0f7; color:var(--accent); }
.bubble{ margin:8px 12px; background:#dcfce7; border-radius:13px 13px 13px 4px; padding:11px 12px;
  font-size:11.5px; line-height:1.55; color:#14532d; }
.bubble b{ font-weight:600; }
.sendbar{ margin:auto 12px 12px; }
.sendbtn{ display:flex; align-items:center; justify-content:center; gap:8px; background:var(--wa);
  color:#fff; font-weight:600; font-size:13px; border-radius:11px; padding:12px; }
.sendbtn svg{ width:17px; height:17px; }

/* demo progress dots */
.pdots{ display:flex; gap:7px; }
.pdots button{ width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.28); transition:background .3s ease, width .3s ease; }
.pdots button[aria-current="true"]{ background:#fff; width:22px; border-radius:20px; }
.pnote{ font-size:11px; color:#7e94bd; text-align:center; margin-top:-4px; }

/* ---------- abstracted hero illustration ----------
   Shows the ranking concept without publishing the real layout. */
.demo-card{ width:100%; max-width:420px; border-radius:18px; padding:16px 16px 14px;
  background:rgba(255,255,255,.07); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16), 0 26px 60px rgba(3,9,24,.45);
  position:relative; overflow:hidden; }
.demo-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.3px;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%,rgba(255,255,255,0) 58%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.demo-head{ display:flex; align-items:center; gap:9px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.12); }
.demo-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent2); }
.demo-title{ font-weight:600; font-size:14px; color:#fff; }
.demo-meta{ margin-left:auto; font-size:11px; font-weight:500; color:#9fb6de; }
/* Stage banner — names which step of the Flow the loop is currently showing, so the
   card tells the whole story rather than just displaying a ranked list. */
.demo-stage{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:9px 12px;
  border-radius:11px; border:1px solid rgba(127,208,255,.22); background:rgba(53,226,255,.07); }
.demo-stage .sdot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent2);
  box-shadow:0 0 10px var(--accent2); animation:demoPulse 1.6s ease-in-out infinite; }
.demo-stage .slabel{ font-size:12.5px; font-weight:600; color:#dff1ff; letter-spacing:.01em; }
.demo-stage .snote{ margin-left:auto; font-family:var(--mono); font-size:10.5px;
  color:rgba(200,228,255,.62); text-align:right; }
@keyframes demoPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.demo-list{ list-style:none; margin:0; padding:10px 0 0; display:flex; flex-direction:column; gap:8px; }
.demo-row{ display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045);
  opacity:0; transform:translateY(8px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1),
             background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.demo-card.on .demo-row{ opacity:.86; transform:translateX(0); }
.demo-card.on .demo-row:nth-child(2){ transition-delay:.10s; }
.demo-card.on .demo-row:nth-child(3){ transition-delay:.20s; }
.demo-card.on .demo-row:nth-child(4){ transition-delay:.30s; }
/* Once the entry reveal has played the stage loop takes over. The staggered delays must
   stop applying or every state change lags a third of a second behind the banner. */
.demo-card.ready .demo-row{ transition-delay:0s; }
.demo-card.on .demo-row.is-active{ opacity:1; transform:translateX(6px);
  border-color:rgba(127,208,255,.45); background:rgba(59,130,246,.18);
  box-shadow:0 10px 30px rgba(20,80,200,.26); }
.demo-card.on .demo-row.is-dim{ opacity:.5; }
.demo-rank{ flex:0 0 22px; height:22px; border-radius:50%; background:rgba(255,255,255,.10);
  color:#dbe6ff; font-family:var(--mono); font-size:11px; font-weight:500;
  display:flex; align-items:center; justify-content:center; }
.demo-body{ flex:1; min-width:0; display:block; }
.demo-name{ display:block; font-size:13.5px; font-weight:500; color:#eaf1ff; letter-spacing:-.01em; }
.demo-why{ flex:0 0 auto; font-size:10px; font-weight:600; padding:5px 10px; border-radius:20px;
  background:rgba(255,255,255,.08); color:#dfe6ff; border:1px solid rgba(255,255,255,.18);
  white-space:nowrap; transition:background .45s ease, color .45s ease, border-color .45s ease; }
.demo-why.t-overdue{ background:rgba(255,122,54,.16); color:#ffd9c2; border-color:rgba(255,140,80,.30); }
.demo-why.t-cyan{ background:rgba(34,211,238,.14); color:#c9f4ff; border-color:rgba(34,211,238,.32); }
.demo-why.t-blue{ background:rgba(59,130,246,.18); color:#c8dbff; border-color:rgba(99,155,255,.34); }
.demo-why.t-green{ background:rgba(34,197,120,.16); color:#c6f6de; border-color:rgba(52,211,153,.34); }

/* Matched-listing chips. Only present on the "Listings matched" stage. */
.demo-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; padding:11px 12px;
  border-radius:12px; border:1px dashed rgba(130,180,255,.28); background:rgba(59,130,246,.07);
  animation:demoRise .45s cubic-bezier(.22,1,.36,1) both; }
.demo-chips .clabel{ width:100%; font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(190,215,255,.6); }
.demo-chips .chip{ padding:5px 10px; border-radius:8px; font-size:11.5px; font-weight:500;
  color:#d6e6ff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
@keyframes demoRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.demo-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.12); }
.demo-dots{ display:flex; align-items:center; gap:5px; }
.demo-dots i{ display:block; height:4px; width:7px; border-radius:99px; background:rgba(255,255,255,.18);
  transition:width .45s ease, background .45s ease, box-shadow .45s ease; }
.demo-dots i.on{ width:20px; background:#7fd0ff; box-shadow:0 0 12px rgba(127,208,255,.7); }
.demo-cta{ padding:9px 16px; border-radius:10px; color:#fff; font-size:12.5px; font-weight:600;
  white-space:nowrap; background:linear-gradient(135deg,#3b82ff,#1d5cf0);
  box-shadow:0 10px 26px rgba(37,99,235,.34);
  transition:background .45s ease, box-shadow .45s ease, transform .45s ease; }
.demo-cta.done{ background:linear-gradient(135deg,#22c55e,#14a34a); transform:scale(1.03);
  box-shadow:0 10px 26px rgba(34,197,94,.36); }

@media (prefers-reduced-motion:reduce){
  .demo-row,.demo-card.on .demo-row{ opacity:1; transform:none; transition:none; }
  .demo-stage .sdot,.demo-chips{ animation:none; }
}

/* ---------- (retired) real screenshots in a browser frame ---------- */
.shotwrap{ margin-top:30px; display:flex; flex-direction:column; align-items:center; gap:13px; }
.browser{ width:100%; max-width:620px; border-radius:14px; overflow:hidden;
  background:#0e1a33; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(3,9,24,.55); }
.chrome{ display:flex; align-items:center; gap:7px; padding:9px 12px; background:#16203c;
  border-bottom:1px solid rgba(255,255,255,.08); }
.dot{ width:9px; height:9px; border-radius:50%; display:block; }
.dot.r{ background:#ff5f57; } .dot.y{ background:#febc2e; } .dot.g{ background:#28c840; }
.addr{ margin-left:8px; font-size:10.5px; font-weight:500; color:#8ba2c8;
  background:rgba(255,255,255,.07); border-radius:20px; padding:3px 12px; }
.stage{ position:relative; aspect-ratio:1240/712; background:#f7f8fb; }
.shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left;
  opacity:0; transition:opacity .7s ease; }
.shot.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .shot{ transition:none; } }

/* ---------- sections ---------- */

/* ---------- pricing ---------------------------------------------------------
   Cards are translucent for the same reason the panels are: a solid fill here would
   punch three opaque rectangles through the parallax and flatten the section. */
.cyc{ display:inline-flex; gap:4px; padding:4px; background:rgba(15,23,42,.06); border-radius:11px; margin-bottom:22px; }
.cyc button{ min-height:38px; padding:0 18px; border:0; border-radius:8px; background:transparent;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.cyc button.on{ background:#fff; color:var(--accent); box-shadow:0 1px 4px rgba(15,23,42,.12); }
.prices{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:stretch; }
@media (max-width:1040px){ .prices{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (max-width:620px){ .prices{ grid-template-columns:1fr; } }
.pcard{ position:relative; background:rgba(255,255,255,.74); border:1px solid var(--line); border-radius:16px;
  padding:24px 22px; display:flex; flex-direction:column; gap:12px; }
@media (min-width:761px){ .pcard{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } }
/* The recommended plan is lifted rather than recoloured - one accent border reads as
   a recommendation, a fully filled card reads as an advert. */
.pcard.hot{ border-color:rgba(37,99,235,.42); box-shadow:0 14px 40px rgba(37,99,235,.16); }
.pbadge{ position:absolute; top:-11px; left:22px; background:var(--accent); color:#fff;
  font-size:10.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:20px; }
.pname{ font-size:14px; font-weight:600; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.pamt{ display:flex; align-items:baseline; gap:3px; }
.pamt .cur{ font-size:17px; font-weight:600; color:var(--muted); }
.pamt .num{ font-size:40px; font-weight:650; letter-spacing:-.02em; line-height:1; color:var(--ink); }
.pamt .per{ font-size:14px; font-weight:500; color:var(--faint); margin-left:2px; }
.pdesc{ font-size:14px; color:var(--muted); }
.plist{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.plist li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--ink); }
.plist li::before{ content:''; position:absolute; left:2px; top:6px; width:11px; height:6px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
.pbtn{ margin-top:auto; justify-content:center; }
.pcard .btn-line{ background:#fff; color:var(--ink); border-color:var(--line); }
.pcard .btn-line:hover{ background:#f4f7ff; border-color:rgba(37,99,235,.4); color:var(--accent); }
.pnote{ margin-top:18px; font-size:13.5px; color:var(--faint); }
.ai-plan{ border-color:rgba(125,211,252,.25); }
.pbadge.muted{ background:#172554; color:#bfdbfe; }
.fair-use{ margin:22px auto 0; max-width:900px; border:1px solid rgba(125,211,252,.18); border-radius:13px; background:rgba(4,10,24,.46); padding:14px 17px; color:#94a3b8; }
.fair-use summary{ cursor:pointer; color:#7dd3fc; font-weight:700; font-size:14px; }
.fair-use p{ margin-top:10px; font-size:14px; line-height:1.7; }
.compare-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.compare-card{ padding:22px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(4,10,24,.6); min-width:0; }
.compare-card.featured{ border-color:rgba(56,189,248,.48); box-shadow:0 18px 50px rgba(11,92,255,.14); }
.compare-card h3{ color:#fff; font-size:20px; margin-bottom:13px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.compare-card h3 span{ color:#7dd3fc; border:1px solid rgba(125,211,252,.28); border-radius:999px; padding:4px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.compare-card section{ padding:12px 0; border-top:1px solid rgba(148,163,184,.14); }
.compare-card h4{ color:#dbeafe; font-size:11px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:5px; }
.compare-card p{ color:#94a3b8; font-size:13.5px; line-height:1.62; overflow-wrap:anywhere; }
.compare-card b{ color:#dbeafe; }
@media(max-width:700px){ .compare-grid{ grid-template-columns:1fr; } .compare-card{ padding:18px; } .pamt.quote{ align-items:flex-start; flex-direction:column; } .pquote{ font-size:28px; } }


.sec{ padding:56px 0; }
.sec-head{ max-width:58ch; margin-bottom:28px; }
.sec h2{ font-size:clamp(23px,5.2vw,32px); }
.sec-head p{ color:var(--muted); margin-top:10px; font-size:16px; }
/* Translucent, not solid: a #fff panel here seals off the parallax backdrop entirely
   and the whole depth effect disappears behind it. Blur only on pointer devices -
   backdrop-filter over a full-width band is one of the more expensive things a
   mid-range Android GPU can be asked to do while scrolling. */
.panel{ background:rgba(255,255,255,.72); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (min-width:761px){ .panel{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } }
.kicker{ display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); margin-bottom:11px; }

/* ---------- THE FLOW ---------- */
.flowsec{ background:var(--hero); color:#fff; padding:62px 0; overflow:hidden; position:relative; }
.flowsec .kicker{ color:#7fb0ff; }
.flowsec h2{ color:#fff; }
.flowsec .sec-head p{ color:#c3d0ea; }
.flow{ list-style:none; margin:36px 0 0; padding:0; position:relative; }
.flow::before{ content:''; position:absolute; z-index:0; left:25px; top:8px; bottom:8px; width:2px;
  background:rgba(255,255,255,.16); }
.flow::after{ content:''; position:absolute; z-index:0; left:25px; top:8px; width:2px; height:0;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); }
.flow.on::after{ height:calc(100% - 16px); transition:height 1.5s cubic-bezier(.4,.1,.2,1) .2s; }
.fstep{ position:relative; padding:0 0 30px 70px; }
.fstep:last-child{ padding-bottom:0; }
.fdot{ position:absolute; left:0; top:0; z-index:2; width:52px; height:52px; border-radius:50%;
  background:#16295a; border:2px solid rgba(255,255,255,.34); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:23px; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.flow.on .fdot{ background:var(--accent); border-color:#8fbcff;
  box-shadow:0 0 0 7px rgba(37,99,235,.16);
  animation:pop .55s cubic-bezier(.3,1.5,.5,1) both;
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease; }
@keyframes pop{ 0%{ transform:scale(1);} 42%{ transform:scale(1.16);} 100%{ transform:scale(1);} }
.flow.on .fstep:nth-child(1) .fdot{ animation-delay:.25s; transition-delay:.25s; }
.flow.on .fstep:nth-child(2) .fdot{ animation-delay:.55s; transition-delay:.55s; }
.flow.on .fstep:nth-child(3) .fdot{ animation-delay:.85s; transition-delay:.85s; }
.flow.on .fstep:nth-child(4) .fdot{ animation-delay:1.15s; transition-delay:1.15s; }
.flow.on .fstep:nth-child(5) .fdot{ animation-delay:1.45s; transition-delay:1.45s; }
.fstep h3{ font-size:17px; margin-bottom:5px; padding-top:13px; }
.fstep p{ color:#bfcde0; font-size:14.5px; }
.floop{ margin-top:26px; display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:9px 16px; font-size:13.5px;
  font-weight:500; color:#dbe6ff; }
.floop svg{ width:17px; height:17px; }
@media (prefers-reduced-motion:reduce){
  .flow::after{ height:calc(100% - 16px); transition:none; }
  .flow .fdot{ background:var(--accent); border-color:#8fbcff; animation:none !important; transition:none; }
  /* connectors show fully drawn rather than animating in */
  .flow .fstep + .fstep::after{ width:calc(100% - 48px); transition:none; }
  .scene{ transition:none; }
}

/* ---------- problem ---------- */
.problem{ padding:62px 0; }
.problem blockquote{ margin:0 0 20px; font-weight:600; font-size:clamp(21px,5.4vw,31px);
  line-height:1.3; letter-spacing:-.02em; max-width:19ch; border-left:4px solid var(--accent); padding-left:18px; }
.problem p{ color:var(--muted); max-width:56ch; font-size:16.5px; }

/* ---------- features ---------- */
.spec{ list-style:none; margin:0; padding:0; }
.spec li{ display:flex; gap:15px; padding:21px 0; border-top:1px solid var(--line); }
.spec li:last-child{ border-bottom:1px solid var(--line); }
.spec svg{ width:26px; height:26px; flex:0 0 26px; color:var(--accent); margin-top:2px; }
.spec h3{ font-size:16.5px; }
.spec p{ color:var(--muted); font-size:15px; margin-top:5px; }

/* ---------- steps ---------- */
.steps{ list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:16px; }
.steps li{ counter-increment:s; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 20px; transition:transform .25s ease, box-shadow .25s ease; }
.steps li:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(15,33,54,.09); }
.steps li::before{ content:counter(s); display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  font-weight:600; font-size:15px; margin-bottom:13px; }
.steps h3{ font-size:16.5px; }
.steps p{ color:var(--muted); font-size:15px; margin-top:6px; }
.getting-started-login{ display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin-top:24px; padding:18px 20px; border:1px solid #cbdaf7;
  border-radius:16px; background:linear-gradient(135deg,#f8fbff 0%,#eef4ff 100%); }
.getting-started-login p{ color:var(--muted); font-size:15px; font-weight:500; }
.getting-started-login .btn{ min-height:46px; padding:0 22px; }
/* The strip now lives inside the navy enquiry band, where the light card and grey text
   disappeared. Glass instead of paper, matching the rest of that section. */
.enq .getting-started-login{ margin-top:22px; border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.07); backdrop-filter:blur(8px); }
.enq .getting-started-login p{ color:#c3d0ea; }

/* ---------- about ---------- */
.about{ display:grid; gap:22px; }
.about-lead{ font-size:19px; line-height:1.62; letter-spacing:-.011em;
  color:var(--ink); font-weight:500; max-width:62ch; }
.about-lead b{ font-weight:600; }

/* A hairline accent above each heading that extends on hover, a warmer paper gradient and a
   soft lift. Restraint is the point — the section should read considered, not decorated. */
.about-card{ position:relative; border-radius:18px; padding:40px 24px 26px;
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -12px rgba(15,23,42,.14);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1),
             border-color .5s ease; }
.about-card::before{ content:''; position:absolute; left:24px; top:22px; width:28px; height:3px;
  border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .5s cubic-bezier(.22,1,.36,1); }
.about-card:hover{ transform:translateY(-4px); border-color:rgba(37,99,235,.28);
  box-shadow:0 2px 4px rgba(15,23,42,.05), 0 26px 52px -18px rgba(37,99,235,.30); }
.about-card:hover::before{ width:68px; }
.about-card h3{ font-size:17.5px; margin-bottom:9px; letter-spacing:-.02em; }
.about-card p{ color:var(--muted); font-size:15px; line-height:1.66; }
@media (prefers-reduced-motion:reduce){
  .about-card,.about-card::before{ transition:none; }
  .about-card:hover{ transform:none; }
}

/* ---------- faq ---------- */
.faq{ max-width:70ch; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:10px;
  transition:border-color .2s ease; }
.faq details[open]{ border-color:#c7d6f5; }
.faq summary{ font-weight:600; font-size:15.5px; cursor:pointer; padding:16px 18px; list-style:none;
  min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; flex:0 0 9px; width:9px; height:9px;
  border-right:2.5px solid var(--faint); border-bottom:2.5px solid var(--faint);
  transform:rotate(45deg); margin-top:-4px; transition:transform .22s ease; }
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:3px; }
.faq details p{ color:var(--muted); font-size:15px; padding:0 18px 17px; }

/* ---------- enquiry ---------- */
.enq{ background:var(--hero); color:#fff; padding:62px 0; position:relative; overflow:hidden; }
.enq::before{ content:''; position:absolute; inset:-40% -20% auto -20%; height:150%;
  background:radial-gradient(40% 40% at 70% 30%, rgba(96,165,250,.22), transparent 64%);
  animation:drift 26s ease-in-out infinite alternate; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .enq::before{ animation:none; } }
.enq .kicker{ color:#7fb0ff; }
.enq h2{ color:#fff; }
.enq .sec-head p{ color:#c3d0ea; }
.form{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.17);
  border-radius:20px; padding:22px 20px; max-width:560px; }
.frow{ margin-bottom:14px; }
.frow label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:#a9c0e6; margin-bottom:6px; }
.frow input,.frow textarea,.frow select{ width:100%; font-family:inherit; font-size:15px; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:11px;
  padding:13px 14px; min-height:50px; transition:border-color .2s ease, background .2s ease; }
.frow textarea{ min-height:96px; resize:vertical; }
.frow select{ appearance:auto; }
.frow select option{ color:#0f172a; background:#fff; }
.frow input::placeholder,.frow textarea::placeholder{ color:#8ba2c8; }
.frow input:focus,.frow textarea:focus,.frow select:focus{ outline:none; border-color:var(--accent2); background:rgba(255,255,255,.13); }
.f2{ display:grid; gap:14px; }
.fbtns{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.fnote{ font-size:12.5px; color:#9fb6de; margin-top:14px; line-height:1.55; }
.fmsg{ font-size:13.5px; font-weight:500; margin-top:12px; min-height:20px; color:#bbf7d0; }
.fmsg.err{ color:#fecaca; }
.hp{ position:absolute; left:-9999px; }

/* ---------- footer ---------- */
.foot{ position:relative; background:#07132f; color:#9fb2d0; font-size:14.5px; }
.foot::before{ content:''; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,#2563eb 0%,#60a5fa 45%,#22c55e 100%); }
.foot-main{ display:grid; gap:34px; padding:48px 0 36px; }
.foot-brand{ display:inline-flex; align-items:center; gap:12px; margin-bottom:16px; text-decoration:none; }
.foot-brand img{ width:40px; height:40px; border-radius:11px; display:block;
  box-shadow:0 8px 24px rgba(37,99,235,.28); }
.foot-brand b{ color:#fff; font-size:20px; font-weight:600; letter-spacing:-.03em; }
.foot-copy{ max-width:36ch; color:#9fb2d0; line-height:1.7; }
.foot-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:7px 11px;
  color:#c7d6ee; border:1px solid rgba(148,163,184,.2); border-radius:999px; font-size:12px; font-weight:500; }
.foot-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.foot-col h3{ color:#fff; font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  margin:2px 0 17px; }
.foot-links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot a{ color:#cbd7ec; text-decoration:none; transition:color .2s ease,transform .2s ease; }
.foot-links a{ display:inline-flex; align-items:center; gap:9px; line-height:1.45; }
.foot-links a:hover{ color:#fff; transform:translateX(2px); }
.foot-icon{ width:17px; height:17px; color:#6ea2ff; flex:0 0 17px; }
.foot-contact-label{ display:block; color:#6f84a7; font-size:11px; font-weight:750; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:2px; }
.foot-bottom{ border-top:1px solid rgba(148,163,184,.15); }
.foot-bottom-in{ display:flex; flex-direction:column; gap:8px; padding:20px 0 26px; color:#6f84a7; font-size:12.5px; }
.foot-bottom strong{ color:#9fb2d0; font-weight:500; }

@media (min-width:900px){
  .hero{ padding:64px 0 70px; }
  .hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; }
  .cta-row{ flex-direction:row; }
  .btn{ min-width:206px; }
  .phone-wrap{ margin-top:0; }
  .sec{ padding:74px 0; }
  .nav-menu{ display:flex; }
  .spec{ display:grid; grid-template-columns:1fr 1fr; column-gap:44px; }
  .spec li:nth-child(2){ border-top:1px solid var(--line); }
  .spec li:nth-last-child(2){ border-bottom:1px solid var(--line); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .about{ grid-template-columns:repeat(3,1fr); }
  .about-lead{ grid-column:1 / -1; }
  .f2{ grid-template-columns:1fr 1fr; }
  .fbtns{ flex-direction:row; }
  .fbtns .btn{ flex:1; min-width:0; }
  .foot-main{ grid-template-columns:minmax(280px,1.45fr) minmax(150px,.65fr) minmax(270px,1fr); gap:58px; }
  .foot-bottom-in{ flex-direction:row; justify-content:space-between; align-items:center; }
  .flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; margin-top:44px; }
  /* One long rule behind the row overshot past step 5 and showed through each circle's
     glow. Draw a separate connector per gap instead: it starts and stops clear of the
     circles, so nothing ever crosses a numeral. */
  .flow::before,.flow::after{ display:none; }
  .fstep{ padding:0; }
  .fstep + .fstep::before,
  .fstep + .fstep::after{
    content:''; position:absolute; z-index:0; top:26px; height:2px;
    left:calc(40px - 100%); /* previous circle's right edge, plus 8px clearance */
  }
  .fstep + .fstep::before{ width:calc(100% - 48px); background:rgba(255,255,255,.18); }
  .fstep + .fstep::after{ width:0; background:linear-gradient(90deg,var(--accent2),var(--accent)); }
  .flow.on .fstep + .fstep::after{ width:calc(100% - 48px); transition:width .36s ease; }
  .flow.on .fstep:nth-child(2)::after{ transition-delay:.34s; }
  .flow.on .fstep:nth-child(3)::after{ transition-delay:.64s; }
  .flow.on .fstep:nth-child(4)::after{ transition-delay:.94s; }
  .flow.on .fstep:nth-child(5)::after{ transition-delay:1.24s; }
  .fdot{ position:relative; z-index:2; margin-bottom:18px; width:54px; height:54px; font-size:24px; }
  .fstep h3{ padding-top:0; font-size:16px; }
  .fstep p{ font-size:14px; }
}


/* =========================================================================
   MULTI-PAGE CHROME
   The site is four pages now (home, features, pricing, contact) rather than one
   long scroll, so the header has to carry real navigation on a phone as well.
   ========================================================================= */

.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-cta{ display:none; color:#dbe6ff; text-decoration:none; font-size:13px; font-weight:500;
  padding:8px 14px; border:1px solid rgba(255,255,255,.22); border-radius:9px; transition:.2s ease; }
.nav-cta:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.4); }
.nav-menu a.here{ color:#fff; border-bottom-color:var(--accent2); }

/* Phone: the brand and the controls hold the top row, the four links sit on their own
   row underneath. A hamburger would hide a four-item menu behind a tap for no reason. */
@media (max-width:820px){
  .nav-in{ flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:4px; }
  .nav-menu{ display:flex; order:3; width:100%; gap:0; justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.09); margin-top:8px; }
  .nav-menu a{ flex:1; text-align:center; padding:11px 2px; font-size:13px; border-bottom:2px solid transparent; }
}
@media (min-width:821px){ .nav-menu{ display:flex; } .nav-cta{ display:inline-block; } }

/* ---------- inner page header ----------
   Same navy as the hero but shorter: an inner page has already been chosen, so it does
   not need to re-sell before it answers. */
.phead{ background:var(--hero); color:#fff; position:relative; overflow:hidden;
  padding:46px 0 44px; border-bottom:1px solid rgba(255,255,255,.08); }
.phead h1{ font-size:clamp(27px,6.4vw,40px); max-width:17ch; margin-top:14px; }
.psub{ margin-top:14px; font-size:16px; line-height:1.62; color:#c3d0ea; max-width:54ch; font-weight:400; }

/* ---------- automation & AI ---------- */
.ai-grid{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr)); }
.ai-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .ai-grid,.ai-grid.three{ grid-template-columns:1fr; } }
.ai-card{ position:relative; background:rgba(255,255,255,.74); border:1px solid var(--line);
  border-radius:16px; padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; }
@media (min-width:761px){ .ai-card{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } }
.ai-card h3{ font-size:17px; letter-spacing:-.022em; }
.ai-card p{ font-size:14.5px; line-height:1.62; color:var(--muted); }
.ai-tag{ align-self:flex-start; font-size:10.5px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 9px; border-radius:20px;
  background:rgba(22,163,74,.1); color:#15803d; border:1px solid rgba(22,163,74,.22); }
/* The unbuilt tier is marked, not hidden. An agent who finds out after paying that a
   feature was aspirational does not come back. */
.ai-tag.pro{ background:rgba(37,99,235,.09); color:var(--accent); border-color:rgba(37,99,235,.24); }
.ai-card.soon{ border-style:dashed; border-color:rgba(37,99,235,.3); background:rgba(239,244,255,.6); }

/* ---------- closing call to action ---------- */
.endcta{ background:var(--hero); color:#fff; position:relative; overflow:hidden;
  padding:56px 0 60px; text-align:center; }
.endcta h2{ font-size:clamp(23px,5.2vw,31px); }
.endcta p{ margin:13px auto 0; max-width:48ch; color:#c3d0ea; font-size:15.5px; line-height:1.62; }
.endcta .cta-row{ margin-top:24px; justify-content:center; }

/* The AI tier is quoted per agency, so it carries a word where the others carry a figure.
   Sized down from the 40px numeral - a word set at numeral size shouts. */
.pquote{ font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--ink); }
/* A word plus its qualifier does not sit on a baseline the way "RM 70 /month" does. */
.pamt.quote{ flex-direction:column; align-items:flex-start; gap:1px; }
.pamt.quote .per{ margin-left:0; }

/* ==========================================================================
   2026 CLAUDE DARK-AURORA REDESIGN
   The marketing URLs and SEO copy remain unchanged. This layer brings the
   supplied visual system to every public page, including Pricing.
   ========================================================================== */
:root{
  --navy1:#02040a;
  --accent:#0b5cff;
  --accent2:#38bdf8;
  --bg:#02040a;
  --line:rgba(148,163,184,.16);
  --ink:#e6ecf8;
  --muted:#94a3b8;
  --faint:#64748b;
  --hero:transparent;
}
body{
  color:var(--ink);
  font-family:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  background:
    radial-gradient(ellipse 52% 42% at 18% 10%,rgba(11,92,255,.22),transparent 72%),
    radial-gradient(ellipse 45% 45% at 88% 34%,rgba(21,155,255,.13),transparent 74%),
    linear-gradient(180deg,#02040a 0%,#020617 44%,#030712 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(to right,rgba(125,211,252,.55) 1px,transparent 1px),linear-gradient(to bottom,rgba(125,211,252,.55) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 72% at 50% 18%,#000,transparent 88%);
          mask-image:radial-gradient(ellipse 90% 72% at 50% 18%,#000,transparent 88%);
}
main,.foot{position:relative;z-index:1}
h1,h2,h3{font-family:Sora,Manrope,sans-serif;color:#fff}
.wrap{max-width:1200px;padding-left:28px;padding-right:28px}

/* Fixed atmospheric field used consistently by all four routes. */
.mesh{z-index:0;inset:-12%;overflow:visible}
.mesh span{opacity:.72;filter:blur(90px)}
.mesh .m1{width:52vw;height:52vw;left:4%;top:-16%;background:radial-gradient(circle,rgba(11,92,255,.34),rgba(11,92,255,.06) 55%,transparent 72%);animation-duration:46s}
.mesh .m2{width:44vw;height:44vw;right:-2%;top:20%;background:radial-gradient(circle,rgba(21,155,255,.22),rgba(56,189,248,.06) 50%,transparent 70%);animation-duration:62s}
.mesh .m3{width:60vw;height:42vw;left:20%;top:80%;background:radial-gradient(ellipse,rgba(8,36,92,.55),transparent 68%);animation-duration:78s}
.mesh .m4{width:44vw;height:44vw;right:0;top:155%;background:radial-gradient(circle,rgba(21,155,255,.14),transparent 70%);animation-duration:54s}
.mesh .m5{width:52vw;height:52vw;left:-8%;top:230%;background:radial-gradient(circle,rgba(11,92,255,.16),transparent 70%);animation-duration:68s}

/* Navigation mirrors the supplied compact glass header. */
.nav{background:rgba(2,4,10,.72);border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav.stuck{box-shadow:0 16px 50px rgba(0,0,0,.28)}
.nav-in{height:72px}
.mark{font-family:Sora,sans-serif;font-size:17px;font-weight:600}
.mark img{width:30px;height:30px;box-shadow:0 0 24px rgba(11,92,255,.4)}
.nav-menu a{color:#94a3b8;font-weight:500;border:0}
.nav-menu a:hover,.nav-menu a.here{color:#e6ecf8;border:0}
.nav-cta{background:linear-gradient(135deg,#0b5cff,#159bff);border-color:rgba(125,211,252,.3);color:#fff;box-shadow:0 8px 24px rgba(11,92,255,.3)}
.lang-switch{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10)}
.lang-switch button.on{background:#0b5cff;color:#fff;box-shadow:0 4px 14px rgba(11,92,255,.3)}

/* Hero and inner-page headers now sit directly on the shared space background. */
.hero,.phead,.flowsec,.enq,.endcta{background:transparent}
.hero{padding:76px 0 96px;min-height:calc(100vh - 72px);display:flex;align-items:center}
.hero::before,.phead::before,.enq::before{background:radial-gradient(45% 45% at 18% 22%,rgba(11,92,255,.21),transparent 70%)}
.hero::after{opacity:.08;background-size:72px 72px;animation-duration:18s}
.hero h1{font-size:clamp(42px,5.4vw,72px);line-height:1.02;letter-spacing:-.035em;max-width:11.5ch}
.hero .sub{color:#94a3b8;font-size:16px;line-height:1.72;max-width:58ch}
.eyebrow,.kicker{color:#7dd3fc}
.eyebrow{background:rgba(11,92,255,.09);border-color:rgba(125,211,252,.20);text-transform:none;letter-spacing:.02em}
.shiny{background-image:linear-gradient(90deg,#7dd3fc 0%,#159bff 45%,#0b5cff 100%);filter:none}
.phead{padding:72px 0 62px;border-bottom-color:rgba(255,255,255,.07)}
.phead h1{font-size:clamp(34px,4.8vw,58px);line-height:1.08;letter-spacing:-.035em;max-width:18ch}
.psub,.sec-head p,.problem p,.spec p,.steps p,.about-card p,.ai-card p,.pdesc,.pnote,.faq details p{color:#94a3b8}

/* Controls and CTAs. */
.btn{border-radius:10px;font-weight:600}
.btn-primary{background:linear-gradient(135deg,#0b5cff,#159bff);box-shadow:0 12px 32px rgba(11,92,255,.32)}
.btn-line{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.16);color:#e6ecf8}
.btn-line:hover{background:rgba(255,255,255,.08);border-color:rgba(125,211,252,.35);color:#fff}

/* Transparent glass surfaces replace the old white sections and cards. */
.panel{background:rgba(4,10,24,.28);border-color:rgba(255,255,255,.07)}
.sec,.problem,.aiteaser{position:relative;background:transparent}
.steps li,.about-card,.ai-card,.pcard,.faq details,.getting-started-login{
  color:#e6ecf8;background:linear-gradient(145deg,rgba(11,20,42,.78),rgba(4,9,22,.58));
  border:1px solid rgba(125,211,252,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 18px 55px rgba(0,0,0,.16)
}
.card,.striprow{
  color:#e6ecf8;background:linear-gradient(145deg,rgba(11,20,42,.78),rgba(4,9,22,.58));
  border:1px solid rgba(125,211,252,.13);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 18px 55px rgba(0,0,0,.16)
}
.card h3,.striprow span{color:#e6ecf8}
.card p,.chapter .lead{color:#94a3b8}
.chapter,.chapter.alt,.top,.end{position:relative;background:transparent;color:#e6ecf8;border-color:rgba(255,255,255,.07)}
.top{padding-top:72px;padding-bottom:72px}
.end{border-top:1px solid rgba(255,255,255,.07)}
.steps li:hover,.about-card:hover,.ai-card:hover,.pcard:hover{border-color:rgba(56,189,248,.34);box-shadow:0 24px 64px rgba(0,0,0,.28),0 0 42px rgba(11,92,255,.08)}
.steps h3,.about-card h3,.ai-card h3,.pcard h3,.faq summary,.pname,.pamt,.pquote,.plist li,.about-lead{color:#e6ecf8}
.spec li{border-color:rgba(255,255,255,.09)}
.spec li:hover{background:linear-gradient(90deg,rgba(11,92,255,.10),transparent 72%)}
.spec svg{color:#38bdf8}
.fdot{background:#081632;border-color:rgba(125,211,252,.26)}
.flow::before{background:rgba(125,211,252,.14)}
.flowsec::after{opacity:.7}
.fstep p{color:#94a3b8}
.problem blockquote{color:#fff;border-left-color:#159bff}
.about-card::before{background:linear-gradient(90deg,#0b5cff,#38bdf8)}
.ai-tag{background:rgba(34,197,94,.10);color:#86efac;border-color:rgba(34,197,94,.20)}
.ai-tag.pro{background:rgba(11,92,255,.13);color:#7dd3fc;border-color:rgba(125,211,252,.2)}
.ai-card.soon{background:rgba(8,18,42,.5);border-color:rgba(125,211,252,.2)}

/* Pricing is a first-class page in the supplied visual language. */
.cyc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.cyc button{color:#94a3b8}
.cyc button.on{background:#0b5cff;color:#fff;box-shadow:0 7px 20px rgba(11,92,255,.28)}
.pcard.hot{border-color:rgba(56,189,248,.52);box-shadow:0 22px 70px rgba(11,92,255,.16),inset 0 1px rgba(255,255,255,.1)}
.pbadge{background:linear-gradient(135deg,#0b5cff,#159bff);color:#fff}
.plist li::before{border-color:#38bdf8}
.pcard .btn-line{background:rgba(255,255,255,.045);color:#e6ecf8;border-color:rgba(255,255,255,.14)}
.pcard .btn-line:hover{background:rgba(11,92,255,.14);border-color:rgba(56,189,248,.4);color:#fff}
.faq details[open]{border-color:rgba(56,189,248,.35)}

/* Contact form and closing bands. */
.enq{padding:78px 0}
.form{background:rgba(4,10,24,.66);border-color:rgba(125,211,252,.15);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.22)}
.frow input,.frow textarea,.frow select{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13)}
.frow input:focus,.frow textarea:focus,.frow select:focus{background:rgba(11,92,255,.08);border-color:#38bdf8}
.endcta{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.endcta::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(650px circle at 50% 10%,rgba(11,92,255,.18),transparent 70%)}
.foot{background:rgba(2,4,10,.72);border-top:1px solid rgba(255,255,255,.07)}
.foot::before{height:1px;background:linear-gradient(90deg,transparent,#0b5cff,#38bdf8,transparent)}

@media (min-width:900px){
  .hero-in{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px}
  .sec{padding:92px 0}
  .flowsec{padding:96px 0}
}
@media (max-width:820px){
  .wrap{padding-left:20px;padding-right:20px}
  .nav{background:rgba(2,4,10,.92)}
  .nav-menu{border-top-color:rgba(255,255,255,.07)}
  .hero{min-height:auto;padding:52px 0 72px}
  .hero h1{font-size:clamp(40px,12vw,58px)}
  body::before{background-size:52px 52px;opacity:.035}
}
@media (prefers-reduced-motion:reduce){body{background-attachment:scroll}}

/* Trusted companies and technology ecosystem from the supplied concept. */
.trust-section{position:relative;z-index:1;padding:38px 0 88px;overflow:hidden;border-top:1px solid rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.045)}
.trust-head{max-width:420px;margin:0 auto 45px;padding:0 20px;display:flex;align-items:center;gap:26px}
.trust-head span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(96,165,250,.22))}
.trust-head span:last-child{background:linear-gradient(90deg,rgba(96,165,250,.22),transparent)}
.trust-head h2,.stack-label{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.08em;color:#e6ecf8;white-space:nowrap}
.trust-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trust-track{display:flex;width:max-content;animation:partnerMarquee 24s linear infinite;will-change:transform}
.trust-viewport:hover .trust-track{animation-play-state:paused}
.trust-group{display:flex;align-items:center;gap:90px;padding-right:90px}
.trust-card{min-width:190px;display:flex;align-items:center;justify-content:center;gap:13px;padding:10px 4px;opacity:.55;filter:grayscale(1);transition:opacity .3s,filter .3s,transform .3s}
.trust-card:hover{opacity:1;filter:grayscale(0);transform:translateY(-2px)}
.trust-card strong{font-family:Sora,sans-serif;font-size:20px;font-weight:600;color:#f8fafc;letter-spacing:-.03em;white-space:nowrap}
.partner-mark{width:42px;height:42px;display:grid;place-items:center;color:#fff;font-family:Sora,sans-serif;font-size:13px;font-weight:700;letter-spacing:-.04em}
.partner-mark.cci{border:3px solid #f8fafc;border-radius:5px}
.partner-mark.maxxam{border-radius:12px;background:linear-gradient(135deg,#7c3aed,#3b82f6);clip-path:polygon(50% 0,92% 24%,92% 76%,50% 100%,8% 76%,8% 24%)}
.partner-mark.polygon{border:3px solid #f8fafc;border-radius:50%}
.partner-logo{width:32px;height:32px;object-fit:contain;flex:none}
@keyframes partnerMarquee{to{transform:translateX(-50%)}}

.stack-section{position:relative;z-index:1;padding:8px 0 104px;text-align:center;overflow:hidden}
.stack-section::before{content:'';position:absolute;width:760px;height:420px;left:50%;top:5%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse,rgba(11,92,255,.18),transparent 68%);filter:blur(30px)}
.stack-label{position:relative;display:inline-flex;align-items:center;gap:16px;margin-bottom:28px}
.tech-grid{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.tech-card{display:flex;align-items:center;gap:11px;min-width:168px;padding:14px 20px;border-radius:13px;background:rgba(5,12,28,.58);border:1px solid rgba(96,165,250,.12);opacity:.72;transition:opacity .3s,border-color .3s,transform .3s;animation:techFloat 8s ease-in-out infinite}
.tech-card:nth-child(2){animation-delay:-1.4s}.tech-card:nth-child(3){animation-delay:-2.8s}.tech-card:nth-child(4){animation-delay:-4.2s}.tech-card:nth-child(5){animation-delay:-5.6s}
.tech-card:hover{opacity:1;border-color:rgba(56,189,248,.32);transform:translateY(-3px)}
.tech-card img{object-fit:contain;filter:drop-shadow(0 0 10px rgba(96,165,250,.22))}
.tech-card strong{font-family:Sora,sans-serif;font-size:15px;font-weight:500;color:#cbd5e1}
@keyframes techFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
.tech-pills{position:relative;max-width:820px;margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.tech-pills span{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:8px;background:rgba(5,12,28,.58);border:1px solid rgba(96,165,250,.11);font-family:var(--mono);font-size:11.5px;color:#94a3b8;letter-spacing:.02em;transition:color .25s,border-color .25s,background .25s}
.tech-pills span:hover{color:#bae6fd;border-color:rgba(56,189,248,.3);background:rgba(11,92,255,.09)}
.agent-banner{position:relative;max-width:950px;margin:52px auto 0;padding:30px 34px;display:flex;align-items:flex-start;gap:22px;text-align:left;border-radius:22px;background:linear-gradient(145deg,rgba(7,22,51,.86),rgba(2,6,23,.72));border:1px solid rgba(96,165,250,.18);box-shadow:0 30px 90px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.06)}
.agent-banner::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 20%,rgba(125,211,252,.06) 50%,transparent 80%);background-size:220% 100%;animation:agentBeam 8s linear infinite}
.agent-banner>img{flex:0 0 54px;border-radius:14px;box-shadow:0 0 30px rgba(11,92,255,.42)}
.agent-banner span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#38bdf8}
.agent-banner h2{font-size:clamp(20px,2.6vw,31px);margin-top:7px;line-height:1.18}
.agent-banner p{margin-top:10px;color:#94a3b8;line-height:1.7}
@keyframes agentBeam{from{background-position:220% 0}to{background-position:-120% 0}}
@media(max-width:700px){.trust-group{gap:40px;padding-right:40px}.trust-card{min-width:165px}.trust-card strong{font-size:17px}.agent-banner{flex-direction:column;padding:25px 22px}.tech-card{min-width:145px;flex:1 1 145px}.stack-section{padding-bottom:76px}}
@media(prefers-reduced-motion:reduce){.trust-track,.tech-card,.agent-banner::after{animation:none}}