/*****************************************
  Design tokens — DEFAULT THEME: LIGHT
******************************************/
:root{
    --bg:#f8fafc; --panel:#ffffff; --text:#0b0d12; --muted:#475569;
    --brand:#5b8cff; --brand-2:#66e2c4; --accent:#ffd166;
    --ring:rgba(91,140,255,0.28); --card:#ffffff; --border:#e5e7eb;
    --success:#16a34a; --danger:#ef4444;
  
    --header-h: 76px;
    --container-w: 1120px;
  
    --nav-hover-1:#4f7dff; --nav-hover-2:#3ad1b3; --nav-glow:rgba(79,125,255,.35);
  }
  @media (max-width: 760px){ :root{ --header-h: 108px; } }
  
  /* DARK THEME */
  html[data-theme="dark"]{
    --bg:#0b0d12; --panel:#0f1219; --text:#e7ebf3; --muted:#a5b0c2;
    --brand:#5b8cff; --brand-2:#66e2c4; --accent:#ffd166;
    --ring:rgba(91,140,255,0.55); --card:#141927; --border:#1e2636;
    --success:#1dbf73; --danger:#ff6b6b;
    --nav-hover-1:#7aa2ff; --nav-hover-2:#5be6cb; --nav-glow:rgba(102,226,196,.45);
  }
  
  /*****************************************
    Base / reset
  ******************************************/
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Helvetica Neue",sans-serif;
    color:var(--text);
    background:linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--panel) 90%, var(--bg)) 100%);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  img{ max-width:100%; display:block; }
  svg{ display:inline-block; vertical-align:middle; height:auto; max-width:none; }
  .container{ width:min(var(--container-w),92vw); margin-inline:auto; }
  .hidden{ display:none !important; }
  
  /*****************************************
    Header / navigation (sticky)
  ******************************************/
  .site-header{
    position:sticky; top:0; z-index:1000;
    backdrop-filter:saturate(180%) blur(6px);
    background:color-mix(in oklab,var(--bg) 86%,transparent);
    border-bottom:1px solid var(--border);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:.4rem 0; gap:1rem; min-height: var(--header-h);
  }
  .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:650; letter-spacing:.2px; }
  .brand-name{ white-space:nowrap; }
  
  .site-nav{ display:flex; align-items:center; gap:1.2rem; }
  .site-nav ul{ display:flex; list-style:none; margin:0; padding:0; gap:1rem; }
  
  /* Nav links with “lit” underline */
  .site-nav a{
    position:relative; display:inline-block; color:var(--text); text-decoration:none; opacity:.9;
    padding:.25rem 0; border-bottom:2px solid transparent; transition:opacity .15s ease, color .15s ease;
  }
  .site-nav a:hover{ opacity:1; }
  .site-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:linear-gradient(90deg, var(--nav-hover-1), var(--nav-hover-2));
    border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .18s ease;
    box-shadow:0 0 10px var(--nav-glow);
  }
  .site-nav a:hover::after, .site-nav a:focus-visible::after{ transform:scaleX(1); }
  .site-nav a:focus-visible{ outline: none; }
  
  /* Mobile nav */
  .nav-toggle{ display:none; background:none; border:0; cursor:pointer; }
  .nav-toggle .bar{ display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px; }
  
  @media (max-width: 760px){
    .site-nav{
      position:absolute; right:1rem; top:calc(var(--header-h) - 8px);
      background: var(--panel); padding: .8rem; border:1px solid var(--border); border-radius:.8rem;
      display:none; flex-direction:column; gap:.6rem; z-index:1001; box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }
    .site-nav.open{ display:flex; }
    .nav-toggle{ display:block; }
  }
  
  /*****************************************
    Scroll progress
  ******************************************/
  #scroll-progress{
    position: fixed; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg,var(--brand),var(--brand-2));
    transform-origin:left; transform: scaleX(0); z-index: 1200;
  }
  
  /*****************************************
    Right-rail TOC (fixed)
  ******************************************/
  .toc{
    position: fixed;
    top: calc(var(--header-h) + 20px);
    right: 1rem;
    width: 220px;
    z-index: 950;
    display: none;
  }
  @media (min-width: 1024px){ .toc{ display:block; } }
  @media (min-width: 1320px){
    .toc{ right: max(1rem, calc((100vw - var(--container-w))/2 - 240px)); }
  }
  .toc__title{ font-size:.8rem; letter-spacing:.1em; color:var(--muted); }
  .toc nav{ display:flex; flex-direction:column; gap:.35rem; margin-top:.5rem; }
  .toc a{
    text-decoration:none; color:var(--muted);
    border-left:2px solid transparent; padding:.25rem .25rem .25rem .5rem;
  }
  .toc a.is-active{ color:var(--text); border-color: var(--brand); }
  
  /*****************************************
    Hero (perfect vertical centring + bigger process)
  ******************************************/
  .hero{
    position:relative;
    min-height: calc(100vh - var(--header-h)); /* fill viewport below sticky header */
    isolation:isolate; overflow:hidden;
    background:
      radial-gradient(60% 80% at 20% 10%, color-mix(in oklab, var(--brand) 28%, transparent) 0%, transparent 100%),
      radial-gradient(70% 80% at 90% 60%, color-mix(in oklab, var(--brand-2) 22%, transparent) 0%, transparent 100%),
      linear-gradient(180deg, var(--bg) 0%, var(--panel) 100%);
  }
  .hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    display:flex; align-items:center; /* vertical centring */
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.85) 60%, rgba(255,255,255,1) 100%);
  }
  html[data-theme="dark"] .hero-overlay{
    background: linear-gradient(180deg, rgba(11,13,18,.60) 0%, rgba(11,13,18,.85) 60%, rgba(11,13,18,1) 100%);
  }
  .hero-content{
    align-items: center;
    padding:clamp(1rem,4vw,2rem);
    /* no top padding needed since we subtract header height on container */
  }
  .hero h1{ font-size:clamp(2.2rem,4vw,3.4rem); margin:0 0 .6rem; line-height:1.08; }
  .lead{ font-size:clamp(1.05rem,1.9vw,1.35rem); color:var(--muted); margin:0; }
  
  /* Process ribbon — bigger steps + explicit chevrons */
  .process-ribbon{
    display:flex; flex-wrap:wrap; gap:1rem; align-self: center;align-items:center; margin:2rem; margin-left: 0;
  }
  .process-ribbon li{ list-style:none; display:flex; align-items:center; }
  .process-ribbon .pr-step{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.45rem .9rem; border-radius:999px; font-weight:700; font-size:1rem;
    background: color-mix(in oklab, var(--card) 94%, var(--panel));
    border:1px solid var(--border); color:var(--text);
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
  }
  .process-ribbon li:not(:last-child)::after{
    content:""; display:inline-block; width:32px; height:32px; margin:0 .35rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    opacity:.95;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="black" fill="black" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="black" fill="black" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>') center/contain no-repeat;
  }
  
  /* CTA + quick bullets under hero */
  .cta-row{ display:flex; gap:2rem; flex-wrap:wrap; margin:1rem 0 .6rem; }
  .hero-points{
    display:flex; gap:1rem; flex-wrap:wrap; padding:0; margin:.4rem 0 0;
    list-style:none; color:var(--muted); font-size:.98rem;
  }
  .hero-points li{ position:relative; padding-left:0; }
  .hero-points li:not(:last-child)::after{
    content:"•"; margin-left:1rem; color:color-mix(in oklab, var(--muted) 60%, var(--text));
  }
  
  /*****************************************
    Sections
  ******************************************/
  .section{ position:relative; z-index:0; padding: clamp(2rem, 6vw, 4rem) 0; background: var(--bg); }
  .section-alt{ background: var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .section-title{ font-size: clamp(1.4rem, 2.4vw, 2rem); margin:.2rem 0 1.2rem; }
  
  /*****************************************
    Pipeline (bigger diagrams/icons)
  ******************************************/
  .vsteps{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }
  @media (max-width: 760px){ .vsteps{ grid-template-columns: 1fr; } }
  
  .vstep{
    display:grid;
    grid-template-columns: 120px 1fr;  /* bigger icon column */
    gap:1rem;
    align-items:start;
    background: var(--card); border:1px solid var(--border); border-radius:.9rem; padding:1rem;
  }
  .vstep .icon{ width:120px; height:80px; }
  .vstep-body{ min-width:0; }
  .vstep-head{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
  .vstep-head h3{ margin:0; font-size:1.06rem; line-height:1.2; }
  .vstep-head .teaser{
    margin:0; color:var(--muted); font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  .vstep-body .svg-bullets{ margin-top:.35rem; }
  .vstep-body .svg-bullets li{ margin:.22rem 0; }
  
  /*****************************************
    Buttons
  ******************************************/
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; font-weight:600; border-radius:999px; padding:.75rem 1.1rem; border:1px solid transparent; transition: transform .04s ease, box-shadow .2s ease; }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform:none; }
  .btn-primary{ background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color:#0a0a0a; }
  .btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
  .btn-outline{ background:transparent; border-color:var(--brand); color:var(--text); }
  .btn-small{ padding:.55rem .9rem; font-size:.92rem; }
  
  .eyebrow{ text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-size:.78rem; }
  
  /*****************************************
    Cards & grids
  ******************************************/
  .cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
  @media (max-width: 980px){ .cards{ grid-template-columns: 1fr; } }
  .cards.cards--4{ grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1200px){ .cards.cards--4{ grid-template-columns: repeat(2, 1fr); } }
  .card{ background: var(--card); border:1px solid var(--border); border-radius:1rem; padding:1.2rem; }
  .card h3{ margin:.2rem 0 .4rem; }
  
  .tick-list{ list-style:none; padding:0; margin:.6rem 0 0; }
  .tick-list li{ position:relative; padding-left:1.2rem; margin:.35rem 0; color:var(--muted); }
  .tick-list li::before{ content:"✓"; position:absolute; left:0; color: var(--brand-2); }
  
  /*****************************************
    Steps
  ******************************************/
  .steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; counter-reset: step; }
  .steps li{ background: var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem; list-style:none; }
  .steps h3{ margin:.2rem 0 .35rem; }
  @media (max-width: 980px){ .steps{ grid-template-columns: 1fr 1fr; } }
  
  /*****************************************
    Pricing
  ******************************************/
  .pricing-cards .price{ display:flex; flex-direction:column; gap:.6rem; }
  .price-number{ font-size:1.6rem; font-weight:800; background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .price.featured{ border-color: color-mix(in oklab, var(--brand) 60%, var(--border)); box-shadow: 0 0 0 2px rgba(91,140,255,0.1); }
  
  /*****************************************
    About / contact
  ******************************************/
  .about-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:1rem; }
  @media (max-width: 980px){ .about-grid{ grid-template-columns: 1fr; } }
  .contact-card{ background: var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem; }
  
  .contact-form{ display:grid; gap:.9rem; }
  .form-row{ display:grid; gap:.4rem; }
  label{ font-weight:600; }
  input, textarea, select{
    width:100%; padding:.8rem .9rem; border-radius:.7rem; border:1px solid var(--border);
    background:#ffffff; color:var(--text); outline: none; appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, color-mix(in oklab, var(--muted) 40%, transparent) 50%),
      linear-gradient(135deg, color-mix(in oklab, var(--muted) 40%, transparent) 50%, transparent 50%),
      linear-gradient(to right, transparent, transparent);
    background-position:
      calc(100% - 18px) calc(1em + 2px),
      calc(100% - 13px) calc(1em + 2px),
      calc(100% - 2.5rem) 0.5em;
    background-size: 6px 6px, 6px 6px, 1px 1.6em;
    background-repeat: no-repeat;
  }
  html[data-theme="dark"] input,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] select{ background:#0b0f19; }
  input:focus, textarea:focus, select:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
  .field-error{ color: var(--danger); min-height: 1.1rem; font-size:.9rem; margin:0; }
  .form-actions{ display:flex; align-items:center; gap:1rem; }
  
  .muted{ color: var(--muted); }
  .tiny{ font-size:.85rem; }
  
  /*****************************************
    Footer
  ******************************************/
  .site-footer{ border-top:1px solid var(--border); background:var(--panel); }
  .footer-grid{ display:grid; grid-template-columns: 1.2fr .8fr 1fr; gap:1rem; padding:1.4rem 0; }
  .brand-footer{ font-weight:700; }
  .footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
  .footer-links a{ color: var(--text); opacity:.9; text-decoration:none; }
  .footer-links a:hover{ opacity:1; }
  .footer-meta{ align-self:end; }
  
  /*****************************************
    Cookie banner
  ******************************************/
  .cookie-banner{
    position: fixed; inset-inline: 0; bottom: .8rem; margin: 0 auto; width: min(960px, 94vw);
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    background: var(--panel); border:1px solid var(--border); border-radius: .9rem; padding:.8rem 1rem;
    box-shadow: 0 10px 34px rgba(0,0,0,.18); z-index: 60;
  }
  .cookie-banner p{ margin:0; color:var(--muted); }
  .cookie-banner .btn{ white-space:nowrap; }
  
  /*****************************************
    Anchor scroll offset
  ******************************************/
  [id]{ scroll-margin-top: calc(var(--header-h) + 12px); }
  
  /*****************************************
    Tags & SVG bullets
  ******************************************/
  .tags{ display:flex; gap:.5rem; flex-wrap:wrap; list-style:none; margin:.6rem 0 0; padding:0; }
  .tags li{ margin:0; padding:0; border:0; background:transparent; }
  .tags li::before{ content:none; }
  
  .tag{
    --bd: color-mix(in oklab, var(--border), transparent 20%);
    display:inline-flex; align-items:center; gap:.35rem;
    font: 600 12px/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    padding:.35rem .65rem; border-radius:999px;
    background: color-mix(in oklab, var(--brand) 12%, var(--card));
    color: var(--text);
    border:1px solid var(--bd);
    text-decoration:none; white-space:nowrap;
  }
  
  /* Inline checkmark bullets */
  .svg-bullets { list-style: none; padding: 0; }
  .svg-bullets li { position: relative; padding-left: 1.5rem; margin: 0.4rem 0; }
  .svg-bullets li::before {
    content: ""; position: absolute; left: 0; top: 0.55em; transform: translateY(-50%); width: 0.9rem; height: 0.9rem;
    background-color: var(--accent, #ffb703);
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 12l-2 2 5 5 8-12-2-2-6 9z'/></svg>") no-repeat center / contain;
  }
  
  /*****************************************
    Commitment cards
  ******************************************/
  .assures{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
  @media (max-width: 980px){ .assures{ grid-template-columns: repeat(2, 1fr); } }
  .assure{
    background: var(--card); border-radius:16px; padding:1.1rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.05), inset 0 0 0 1px var(--border);
  }
  .assure h4{ margin:.2rem 0 .35rem; }
  .assure__icon{
    width:22px; height:22px; background: currentColor; opacity:.95; margin-bottom:.35rem;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="black" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="black" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/contain no-repeat;
  }
  .assure__icon.clock{
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='2.5' fill='none' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path d='M12 7v6l3 3'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='2.5' fill='none' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path d='M12 7v6l3 3'/></svg>");
  }
  .assure__icon.scope{
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='2.5' fill='none' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='2.5' fill='none' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3'/></svg>");
  }
  .assure__icon.ip{
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='2.5' fill='none' viewBox='0 0 24 24'><path d='M12 3l9 4.5v9L12 21 3 16.5v-9L12 3z'/><path d='M8 12h8'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='2.5' fill='none' viewBox='0 0 24 24'><path d='M12 3l9 4.5v9L12 21 3 16.5v-9L12 3z'/><path d='M8 12h8'/></svg>");
  }
  
  /*****************************************
    Collapsibles (premium, icon on right)
  ******************************************/
  .collapsible summary::-webkit-details-marker{ display:none; }
  .collapsible summary{
    cursor:pointer; display:flex; align-items:center; gap:.75rem; padding:.5rem 0;
    color:var(--text); background: transparent;
  }
  .collapsible summary > h3, .collapsible summary > h2{ margin:0; }
  .collapsible summary::after{
    --icon-size: 18px; content: ""; width: var(--icon-size); height: var(--icon-size); margin-left: auto;
    background: currentColor; opacity:.95; transition: transform .2s ease, color .2s ease;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center/contain no-repeat;
  }
  .collapsible[open] summary::after{ transform: rotate(180deg); }
  :where(html[dir="rtl"]) .collapsible summary::after{ margin-left:0; margin-right:auto; }
  .collapsible .content{ border:0; padding:.25rem 0 0; }
  
  /*****************************************
    Reveal on scroll
  ******************************************/
  .reveal{ opacity:0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.is-visible{ opacity:1; transform: none; }
  
  /*****************************************
    Accessibility / motion
  ******************************************/
  @media (prefers-reduced-motion: reduce){
    .btn{ transition: none; }
    .reveal{ transition: none; }
  }
  .no-scroll { overflow: hidden; }