/* ==========================================================================
   proLabsXR — design tokens
   ========================================================================== */
:root{
  --ink-900:#0b0e2b;
  --ink-700:#3d4066;
  --ink-500:#63658c;
  --ink-300:#9497b8;

  --brand-900:#1c1454;
  --brand-700:#2f2178;
  --brand-500:#5b3fd6;
  --brand-400:#7a63e6;
  --brand-100:#eee9ff;

  --cyan-500:#16c7c2;
  --cyan-300:#7fe6e2;
  --orange-500:#ff8c42;
  --green-500:#2fb673;

  --surface-0:#ffffff;
  --surface-1:#f7f7fb;
  --surface-2:#efedfb;
  --surface-dark:#0e0b2e;
  --surface-dark-2:#171144;

  --border:rgba(11,14,43,0.09);
  --border-dark:rgba(255,255,255,0.12);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:28px;

  --shadow-sm:0 2px 10px rgba(11,14,43,0.06);
  --shadow-md:0 14px 40px rgba(28,20,84,0.14);
  --shadow-glow:0 0 0 1px rgba(91,63,214,0.12), 0 20px 60px rgba(91,63,214,0.22);

  --ff:'Heebo', system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono:'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --chamfer:22px;
  --chamfer-lg:34px;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff);
  color:var(--ink-900);
  background:var(--surface-0);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; line-height:1.15; font-weight:800; }
p{ margin:0; }
button{ font-family:inherit; }

.wrap{
  width:min(1180px, 92%);
  margin-inline:auto;
}

/* Anchor-nav targets: clear the fixed header instead of hiding behind it */
section[id]{ scroll-margin-top:100px; }

.grad-text{
  background:linear-gradient(90deg, var(--cyan-300), var(--brand-400));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
  padding:.45em 1em;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  color:#fff;
  margin-bottom:1.1em;
}
.eyebrow-dark{
  background:var(--brand-100);
  color:var(--brand-700);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-weight:700;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-sm{ padding:.55em 1.3em; font-size:.85rem; }
.btn-lg{ padding:.95em 2em; font-size:1rem; }
.btn-primary{
  background:linear-gradient(90deg, var(--brand-500), var(--cyan-500));
  color:#fff;
  box-shadow:var(--shadow-glow);
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-color:rgba(255,255,255,0.35);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.18); }
.btn-outline{
  background:transparent;
  color:var(--brand-700);
  border-color:var(--brand-500);
  margin-top:1.6em;
}
.btn-outline:hover{ background:var(--brand-100); }
.full{ width:100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  padding-block:18px;
  transition:padding .25s ease, background .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  padding-block:10px;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{ display:flex; align-items:center; gap:.6em; }
.brand-name{
  font-family:var(--ff-mono);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink-900);
}
.site-header:not(.scrolled) .brand-name{ color:#fff; }
.brand-name b{ color:var(--brand-500); }
.site-header:not(.scrolled) .brand-name b{ color:var(--cyan-300); }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  font-size:.94rem;
  font-weight:600;
  color:var(--ink-700);
  position:relative;
  padding-block:4px;
}
.site-header:not(.scrolled) .main-nav a{ color:rgba(255,255,255,0.88); }
.main-nav a::after{
  content:'';
  position:absolute;
  inset-inline-start:0;
  bottom:-2px;
  width:0;
  height:2px;
  background:var(--cyan-500);
  transition:width .2s ease;
}
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.lang-toggle{
  display:flex; align-items:center; gap:.4em;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  padding:.5em .9em;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  font-size:.82rem;
}
.site-header.scrolled .lang-toggle{
  background:var(--surface-1);
  border-color:var(--border);
  color:var(--ink-700);
}
.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.burger span{
  width:22px; height:2px;
  background:#fff;
  border-radius:2px;
  transition:background .2s ease;
}
.site-header.scrolled .burger span{ background:var(--ink-900); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(22,199,194,0.35), transparent 60%),
    radial-gradient(900px 600px at 100% 10%, rgba(91,63,214,0.55), transparent 55%),
    linear-gradient(160deg, var(--brand-900), var(--surface-dark) 70%);
  color:#fff;
  overflow:hidden;
  padding-top:90px;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-grid{
  position:absolute; inset:-10% -10%;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 60% 40%, #000 10%, transparent 70%);
          mask-image:radial-gradient(circle at 60% 40%, #000 10%, transparent 70%);
}
.orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.orb-a{ width:340px; height:340px; background:var(--cyan-500); top:8%; inset-inline-end:8%; animation:float-y 9s ease-in-out infinite; }
.orb-b{ width:260px; height:260px; background:var(--orange-500); bottom:4%; inset-inline-start:6%; opacity:.35; animation:float-y 11s ease-in-out infinite reverse; }

.hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
  padding-block:40px 90px;
}
.hero-copy h1{
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  margin-block-end:.5em;
}
.hero-sub{
  font-size:1.08rem;
  color:rgba(255,255,255,0.82);
  max-width:52ch;
  margin-block-end:1.8em;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-block-end:2.2em; }
.hero-meta{ display:flex; flex-direction:column; gap:.7em; }
.hero-meta-item{
  display:flex; align-items:center; gap:.6em;
  font-size:.88rem; color:rgba(255,255,255,0.75);
}
.hero-meta-item svg{ flex:none; color:var(--cyan-300); }

.hero-visual{ position:relative; }
.visual-stage{ position:relative; max-width:440px; margin-inline:auto; }
.float-slow{ animation:float-y 6s ease-in-out infinite; transform-origin:center; }
.orbit-icon{ animation:float-y 5s ease-in-out infinite; }
.float-a{ animation-delay:.2s; }
.float-b{ animation-delay:1.1s; animation-duration:6.5s; }
.float-c{ animation-delay:.6s; animation-duration:7s; }
.float-d{ animation-delay:1.6s; animation-duration:5.5s; }

@keyframes float-y{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

.scroll-hint{
  position:absolute;
  bottom:28px;
  inset-inline-start:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,0.6);
  font-size:.78rem;
  z-index:1;
  animation:float-y 2.4s ease-in-out infinite;
}
[dir="rtl"] .scroll-hint{ transform:translateX(50%); }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust{ background:var(--surface-1); border-block-end:1px solid var(--border); }
.trust-inner{
  padding-block:28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.trust-lead{ font-size:.98rem; color:var(--ink-700); }
.trust-lead strong{ color:var(--brand-700); }
.trust-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  font-size:.8rem; font-weight:700;
  background:#fff; border:1px solid var(--border);
  padding:.5em 1em; border-radius:999px;
  color:var(--ink-700);
}

/* ==========================================================================
   Generic section
   ========================================================================== */
.section{ padding-block:100px; position:relative; }
.section-tint{ background:var(--surface-1); }
.section-dark{
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--surface-dark), var(--surface-dark-2));
  background-size:56px 56px, 56px 56px, 100% 100%;
  color:#fff;
}
.section-dark .eyebrow-dark{ background:rgba(255,255,255,0.1); color:var(--cyan-300); }
.section-dark p{ color:rgba(255,255,255,0.72); }

.section-head{ max-width:720px; margin-inline:auto; text-align:center; margin-block-end:56px; }
.section-head h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); margin-block-end:.5em; }
.section-head p{ color:var(--ink-500); font-size:1.02rem; }

/* ==========================================================================
   Challenge / compare
   ========================================================================== */
.compare-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:28px;
  align-items:stretch;
}
.compare-card{
  clip-path:polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%);
  padding:36px;
  border:1px solid var(--border);
}
.compare-old{ background:var(--surface-1); }
.compare-new{ background:linear-gradient(160deg, var(--brand-900), var(--brand-700)); color:#fff; box-shadow:var(--shadow-glow); }
.compare-card h3{ font-size:1.2rem; margin-block-end:1.1em; }
.compare-list{ display:flex; flex-direction:column; gap:.9em; }
.compare-list li{ display:flex; align-items:flex-start; gap:.7em; font-size:.95rem; }
.compare-old .compare-list li{ color:var(--ink-700); }
.compare-old svg{ color:#d6455f; flex:none; margin-top:2px; }
.compare-new svg{ color:var(--cyan-300); flex:none; margin-top:2px; }
.compare-vs{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-mono); font-weight:700; color:var(--ink-300); font-size:.85rem;
}

/* ==========================================================================
   Steps (how it works)
   ========================================================================== */
.steps{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:22px;
}
.step{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border-dark);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  padding:26px 20px;
  position:relative;
}
.step-num{
  font-family:var(--ff-mono);
  font-size:1.5rem; font-weight:700;
  background:linear-gradient(90deg, var(--cyan-300), var(--brand-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-block-end:.4em;
}
.step h3{ font-size:1.02rem; margin-block-end:.4em; color:#fff; }
.step p{ font-size:.86rem; color:rgba(255,255,255,0.65); }

/* ==========================================================================
   Features grid
   ========================================================================== */
.features-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.feature-card{
  padding:28px 24px;
  border:1px solid var(--border);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  background:#fff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.feature-icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  background:var(--brand-100);
  color:var(--brand-500);
  margin-block-end:1em;
}
.feature-card h3{ font-size:1.02rem; margin-block-end:.45em; }
.feature-card p{ font-size:.87rem; color:var(--ink-500); }

/* ==========================================================================
   Island lobby
   ========================================================================== */
.lobby-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:48px;
  align-items:center;
}
.lobby-copy h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); margin-block-end:.5em; color:#fff; }
.lobby-points{ display:flex; flex-direction:column; gap:1.2em; margin-block-start:1.8em; }
.lobby-points li{ display:flex; align-items:flex-start; gap:.8em; }
.lobby-points svg{ flex:none; color:var(--cyan-300); margin-block-start:.2em; }
.lobby-points strong{ display:block; font-size:.94rem; color:#fff; margin-block-end:.2em; }
.lobby-points span{ font-size:.85rem; color:rgba(255,255,255,0.65); }
.lobby-visual{
  position:relative;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,0.35));
}

/* ==========================================================================
   STEM Labs
   ========================================================================== */
.labs-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.lab-card{
  background:#fff;
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.lab-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.lab-card:hover .lab-visual-icon{ transform:scale(1.08); }

.lab-visual{
  position:relative;
  height:148px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.lab-visual-grid{
  position:absolute; inset:-20% -20%;
  background-image:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
}
.lab-visual-icon{
  position:relative;
  color:#fff;
  filter:drop-shadow(0 0 14px rgba(255,255,255,0.35));
  transition:transform .3s ease;
}
.tint-violet{ background:radial-gradient(120% 130% at 30% 20%, var(--brand-500), var(--brand-900) 72%); }
.tint-cyan{ background:radial-gradient(120% 130% at 30% 20%, var(--cyan-500), var(--brand-900) 72%); }
.tint-green{ background:radial-gradient(120% 130% at 30% 20%, var(--green-500), var(--brand-900) 72%); }
.tint-orange{ background:radial-gradient(120% 130% at 30% 20%, var(--orange-500), var(--brand-900) 72%); }

.lab-body{ padding:24px 26px 28px; }
.lab-card h3{ font-size:1.08rem; margin-block-end:.4em; }
.lab-card p{ font-size:.88rem; color:var(--ink-500); }
.labs-note{ text-align:center; margin-block-start:32px; font-size:.82rem; color:var(--ink-300); }
.labs-credit{ text-align:center; margin-block-start:.5em; font-size:.74rem; color:var(--ink-300); }

/* ==========================================================================
   Pricing / packages
   ========================================================================== */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:stretch;
}
.price-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  clip-path:polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%);
  padding:34px 30px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.price-featured{
  background:linear-gradient(165deg, var(--brand-900), var(--brand-700));
  color:#fff;
  box-shadow:var(--shadow-glow);
  transform:translateY(-10px);
}
.price-badge{
  position:absolute;
  top:22px; inset-inline-end:-28px;
  background:linear-gradient(90deg, var(--cyan-500), var(--brand-400));
  color:#fff;
  font-size:.72rem; font-weight:700;
  padding:.4em 2.6em;
  transform:rotate(35deg);
}
[dir="rtl"] .price-badge{ transform:rotate(-35deg); }
.price-card h3{ font-size:1.15rem; margin-block-end:.35em; }
.price-audience{ font-size:.85rem; color:var(--ink-500); margin-block-end:1.4em; min-height:2.6em; }
.price-featured .price-audience{ color:rgba(255,255,255,0.75); }
.price-value{
  font-family:var(--ff-mono);
  font-size:1rem; font-weight:600;
  color:var(--brand-500);
  padding-block-end:1.2em;
  margin-block-end:1.2em;
  border-block-end:1px solid var(--border);
}
.price-featured .price-value{ color:var(--cyan-300); border-color:var(--border-dark); }
.price-list{ display:flex; flex-direction:column; gap:.85em; margin-block-end:1.8em; flex:1; }
.price-list li{ position:relative; padding-inline-start:1.6em; font-size:.9rem; }
.price-list li::before{
  content:'';
  position:absolute; inset-inline-start:0; top:.45em;
  width:9px; height:9px;
  background:var(--cyan-500);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.price-featured .price-list li::before{ background:var(--cyan-300); }

/* ==========================================================================
   Tech stack
   ========================================================================== */
.tech-stack{ max-width:640px; margin-inline:auto; }
.tech-layer{
  display:flex; align-items:center; gap:20px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border-dark);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  padding:22px 26px;
}
.tech-layer-icon{
  flex:none;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  background:linear-gradient(135deg, var(--brand-500), var(--cyan-500));
  color:#fff;
}
.tech-layer h3{ font-size:1rem; color:#fff; margin-block-end:.3em; }
.tech-layer p{ font-size:.85rem; color:rgba(255,255,255,0.65); }
.tech-arrow{ text-align:center; color:var(--cyan-300); font-size:1.2rem; padding-block:6px; }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:center;
}
.about-copy h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin-block-end:.6em; }
.about-copy p{ color:var(--ink-700); font-size:.98rem; line-height:1.7; margin-block-end:1.1em; }
.about-highlight{
  padding:16px 20px;
  background:var(--surface-2);
  border-inline-start:4px solid var(--brand-500);
  border-radius:8px;
  font-weight:600;
  color:var(--brand-700) !important;
}
.about-clients{ margin-block-start:1.6em; }
.about-clients-label{ font-size:.85rem; font-weight:700; color:var(--ink-500); display:block; margin-block-end:.7em; }
.client-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.client-tags span{
  font-size:.78rem; font-weight:600;
  background:var(--surface-1); border:1px solid var(--border);
  padding:.45em .9em; border-radius:999px;
  color:var(--ink-700);
}

.about-logo-card{
  background:linear-gradient(160deg, #fff, var(--surface-1));
  border:1px solid var(--border);
  clip-path:polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%);
  padding:36px;
  box-shadow:var(--shadow-md);
}
.about-logo-card img{ max-width:220px; margin-inline:auto; margin-block-end:28px; }
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.about-stat{ text-align:center; }
.about-stat strong{ display:block; font-size:1.02rem; color:var(--brand-700); margin-block-end:.3em; }
.about-stat span{ font-size:.78rem; color:var(--ink-500); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:linear-gradient(120deg, var(--brand-700), var(--brand-500) 60%, var(--cyan-500));
  color:#fff;
}
.cta-band-inner{ padding-block:80px; text-align:center; }
.cta-band-inner h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); margin-block-end:.5em; }
.cta-band-inner p{ color:rgba(255,255,255,0.85); max-width:52ch; margin-inline:auto; margin-block-end:1.8em; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:56px;
}
.contact-info h2{ font-size:clamp(1.5rem, 3vw, 2.1rem); margin-block:.4em .5em; }
.contact-info p{ color:var(--ink-500); margin-block-end:2em; }
.contact-list{ display:flex; flex-direction:column; gap:1.1em; }
.contact-list li{ display:flex; align-items:center; gap:.8em; font-size:.95rem; color:var(--ink-700); }
.contact-list svg{ color:var(--brand-500); flex:none; }

.contact-form{
  background:var(--surface-1);
  border:1px solid var(--border);
  clip-path:polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%);
  padding:34px;
  display:flex; flex-direction:column; gap:16px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:700; color:var(--ink-700); }
.contact-form input, .contact-form textarea, .contact-form select{
  font-family:inherit;
  font-size:.95rem;
  padding:.8em 1em;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink-900);
  resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  outline:2px solid var(--brand-400);
  outline-offset:1px;
}
.form-note{ font-size:.75rem; color:var(--ink-300); text-align:center; font-weight:400; }
.slot-rule{
  font-size:.78rem; color:var(--ink-500); font-weight:400;
  margin-block-start:-6px;
  display:flex; align-items:flex-start; gap:.5em;
}
.slot-rule::before{ content:'ⓘ'; color:var(--brand-500); flex:none; }
.consent-row{
  flex-direction:row !important;
  align-items:flex-start;
  gap:.7em !important;
  font-size:.85rem !important;
  font-weight:400 !important;
  color:var(--ink-700);
}
.consent-row input{ width:auto; margin-block-start:.2em; accent-color:var(--brand-500); }
.consent-row a{ color:var(--brand-600, var(--brand-500)); font-weight:600; text-decoration:underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--surface-dark); color:rgba(255,255,255,0.75); padding-block-start:70px; }
.footer-inner{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:40px;
  padding-block-end:40px;
  border-block-end:1px solid var(--border-dark);
}
.footer-brand p{ font-size:.85rem; margin-block:.8em 1.4em; color:rgba(255,255,255,0.55); }
.footer-logo{ max-width:130px; opacity:.9; }
.footer-links, .footer-contact{ display:flex; flex-direction:column; gap:.8em; }
.footer-links h4, .footer-contact h4{ color:#fff; font-size:.9rem; margin-block-end:.4em; }
.footer-links a, .footer-contact span{ font-size:.85rem; color:rgba(255,255,255,0.6); }
.footer-links a:hover{ color:var(--cyan-300); }
.footer-bottom{
  padding-block:22px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  font-size:.78rem; color:rgba(255,255,255,0.4);
}
.footer-legal{ display:flex; flex-wrap:wrap; gap:18px; }
.footer-legal a, .footer-legal-btn{
  font-size:.78rem; color:rgba(255,255,255,0.55);
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
}
.footer-legal a:hover, .footer-legal-btn:hover{ color:var(--cyan-300); }

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */
.cookie-banner{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:200;
  background:var(--surface-dark);
  color:rgba(255,255,255,0.85);
  border-block-start:1px solid var(--border-dark);
  box-shadow:0 -10px 30px rgba(0,0,0,0.25);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-inner{
  width:min(1180px, 92%);
  margin-inline:auto;
  padding-block:18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cookie-banner-inner p{ font-size:.85rem; max-width:70ch; }
.cookie-banner-inner a{ color:var(--cyan-300); text-decoration:underline; }
.cookie-banner-actions{ flex:none; }

/* ==========================================================================
   Legal pages (privacy / terms / accessibility)
   ========================================================================== */
.legal-hero{
  padding-block:150px 50px;
  background:linear-gradient(160deg, var(--brand-900), var(--surface-dark) 70%);
  color:#fff;
}
.legal-hero h1{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-block-end:.4em; }
.legal-hero p{ color:rgba(255,255,255,0.72); font-size:.92rem; }
.legal-body{ padding-block:60px 100px; }
.legal-article{ max-width:70ch; margin-inline:auto; }
.legal-article h2{
  font-size:1.25rem;
  margin-block:1.8em .5em;
  padding-block-start:.2em;
}
.legal-article h2:first-child{ margin-block-start:0; }
.legal-article p{ font-size:.96rem; line-height:1.75; color:var(--ink-700); margin-block-end:1em; }
.legal-article ul{ display:flex; flex-direction:column; gap:.5em; margin-block-end:1.2em; }
.legal-article li{
  font-size:.95rem; line-height:1.65; color:var(--ink-700);
  padding-inline-start:1.4em; position:relative;
}
.legal-article li::before{
  content:'';
  position:absolute; inset-inline-start:0; top:.6em;
  width:7px; height:7px;
  background:var(--brand-500);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.legal-article a{ color:var(--brand-600, var(--brand-500)); font-weight:600; text-decoration:underline; }
.legal-note{
  background:var(--surface-2);
  border-inline-start:4px solid var(--orange-500);
  border-radius:8px;
  padding:16px 20px;
  font-size:.88rem;
  color:var(--ink-700);
  margin-block-end:2em;
}
.legal-back{ display:inline-flex; align-items:center; gap:.4em; margin-block-end:1.6em; font-weight:700; color:var(--brand-500); }

/* ==========================================================================
   Accessibility widget
   ========================================================================== */
html.a11y-text-1{ font-size:108%; }
html.a11y-text-2{ font-size:116%; }
html.a11y-text-3{ font-size:125%; }

html.a11y-underline-links a{ text-decoration:underline !important; }

html.a11y-stop-motion *,
html.a11y-stop-motion *::before,
html.a11y-stop-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

html.a11y-contrast body{ background:#000; color:#fff; }
html.a11y-contrast .site-header.scrolled{ background:#000; }
html.a11y-contrast .hero,
html.a11y-contrast .section,
html.a11y-contrast .section-tint,
html.a11y-contrast .section-dark,
html.a11y-contrast .trust,
html.a11y-contrast .cta-band,
html.a11y-contrast .site-footer,
html.a11y-contrast .legal-hero{ background:#000 !important; background-image:none !important; }
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4,
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast label{ color:#fff !important; }
html.a11y-contrast a{ color:#ffe600 !important; }
html.a11y-contrast .btn-primary, html.a11y-contrast .btn-outline, html.a11y-contrast .btn-ghost{
  background:#ffe600 !important; color:#000 !important; border-color:#ffe600 !important;
}
html.a11y-contrast .feature-card, html.a11y-contrast .lab-card, html.a11y-contrast .price-card,
html.a11y-contrast .compare-card, html.a11y-contrast .contact-form, html.a11y-contrast .about-logo-card,
html.a11y-contrast .step, html.a11y-contrast .tech-layer, html.a11y-contrast .chip,
html.a11y-contrast .contact-form input, html.a11y-contrast .contact-form select, html.a11y-contrast .contact-form textarea{
  background:#111 !important; border-color:#ffe600 !important; color:#fff !important;
}
html.a11y-contrast .grad-text{ -webkit-text-fill-color:#ffe600; background:none; }

.a11y-widget, .chat-widget{ position:fixed; z-index:150; bottom:24px; }
.a11y-widget{ inset-inline-start:24px; }
.chat-widget{ inset-inline-end:24px; }
body.has-cookie-banner .a11y-widget,
body.has-cookie-banner .chat-widget{ bottom:104px; transition:bottom .2s ease; }

.a11y-btn, .chat-btn{
  width:54px; height:54px;
  border-radius:50%;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  color:#fff;
}
.a11y-btn{ background:linear-gradient(135deg, var(--brand-500), var(--brand-900)); }
.chat-btn{ background:linear-gradient(135deg, var(--cyan-500), var(--brand-500)); }
.a11y-btn:hover, .chat-btn:hover{ transform:translateY(-2px); }

.a11y-panel{
  position:absolute; bottom:64px; inset-inline-start:0;
  width:288px;
  background:#fff; color:var(--ink-900);
  border:1px solid var(--border);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  box-shadow:var(--shadow-md);
  padding:20px;
}
.a11y-panel[hidden]{ display:none; }
.a11y-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-block-end:10px; }
.a11y-panel-head h3{ font-size:1rem; }
.a11y-close, .chat-close{ background:none; border:none; cursor:pointer; padding:4px; }
.a11y-close{ color:var(--ink-500); }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; padding-block:10px; border-block-end:1px solid var(--border); font-size:.86rem; }
.a11y-stepper{ display:flex; gap:6px; }
.a11y-stepper button{ width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface-1); cursor:pointer; font-weight:700; font-size:.78rem; font-family:var(--ff-mono); }
.a11y-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding-block:10px; border-block-end:1px solid var(--border);
  background:none; border-inline:none; border-block-start:none; cursor:pointer;
  font-size:.86rem; color:var(--ink-900); font-family:inherit; text-align:start;
}
.a11y-switch{ width:36px; height:20px; border-radius:999px; background:var(--border); position:relative; flex:none; transition:background .2s ease; }
.a11y-switch::before{
  content:''; position:absolute; top:2px; inset-inline-start:2px;
  width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.3);
  transition:inset-inline-start .2s ease;
}
.a11y-toggle[aria-pressed="true"] .a11y-switch{ background:var(--brand-500); }
.a11y-toggle[aria-pressed="true"] .a11y-switch::before{ inset-inline-start:18px; }
.a11y-reset{
  width:100%; margin-block-start:14px; padding-block:.6em;
  background:var(--surface-1); border:1px solid var(--border); border-radius:8px;
  cursor:pointer; font-size:.8rem; font-weight:700; color:var(--ink-700);
}
.a11y-statement-link{ display:block; text-align:center; margin-block-start:10px; font-size:.76rem; color:var(--brand-500); font-weight:600; }

/* ==========================================================================
   Chat widget
   ========================================================================== */
.chat-panel{
  position:absolute; bottom:64px; inset-inline-end:0;
  width:320px;
  background:#fff; color:var(--ink-900);
  border:1px solid var(--border);
  clip-path:polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.chat-panel[hidden]{ display:none; }
.chat-panel-head{
  background:linear-gradient(135deg, var(--brand-900), var(--brand-700));
  color:#fff; padding:16px 20px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.chat-panel-head h3{ font-size:1rem; margin-block-end:.25em; }
.chat-panel-head p{ font-size:.78rem; color:rgba(255,255,255,0.75); }
.chat-close{ color:#fff; flex:none; }
.chat-body{ padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.chat-body label{ display:flex; flex-direction:column; gap:4px; font-size:.8rem; font-weight:700; color:var(--ink-700); }
.chat-body input, .chat-body textarea{
  font-family:inherit; font-size:.88rem; padding:.6em .8em; border-radius:8px; border:1px solid var(--border);
}
.chat-note{ font-size:.72rem; color:var(--ink-300); line-height:1.5; }
.chat-fallback{ font-size:.74rem; text-align:center; color:var(--ink-500); }
.chat-fallback button{ background:none; border:none; color:var(--brand-500); font-weight:700; cursor:pointer; text-decoration:underline; padding:0; font-size:inherit; font-family:inherit; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .steps{ grid-template-columns:repeat(3, 1fr); }
  .features-grid{ grid-template-columns:repeat(2, 1fr); }
  .labs-grid{ grid-template-columns:repeat(2, 1fr); }
  .pricing-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .price-featured{ transform:none; order:-1; }
}

@media (max-width:520px){
  .header-cta{ display:none; }
}

@media (max-width:900px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-meta{ align-items:center; }
  .hero-cta{ justify-content:center; }
  .hero-visual{ order:-1; max-width:340px; margin-inline:auto; }
  .compare-grid{ grid-template-columns:1fr; }
  .compare-vs{ padding-block:4px; }
  .about-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .lobby-grid{ grid-template-columns:1fr; }
  .lobby-visual{ order:-1; }
}

@media (max-width:720px){
  .steps{ grid-template-columns:1fr 1fr; }
  .features-grid{ grid-template-columns:1fr; }
  .labs-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .trust-inner{ flex-direction:column; align-items:flex-start; }
  .a11y-panel, .chat-panel{ width:min(88vw, 320px); }
  .a11y-widget{ inset-inline-start:14px; bottom:14px; }
  .chat-widget{ inset-inline-end:14px; bottom:14px; }
  body.has-cookie-banner .a11y-widget, body.has-cookie-banner .chat-widget{ bottom:130px; }
}

/* Mobile nav drawer */
@media (max-width:900px){
  .main-nav.open{
    display:flex;
    flex-direction:column;
    position:fixed;
    inset-inline:0;
    top:68px;
    background:var(--surface-dark);
    padding:24px;
    gap:18px;
    box-shadow:var(--shadow-md);
  }
  .main-nav.open a{ color:#fff; font-size:1.05rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}