/* =====================================================================
   iCleaners website styles
   ---------------------------------------------------------------------
   BRAND COLORS AND FONTS: change the values in the :root block below.
   Each part of the page has its own section, marked like  ===== Hero =====
   ===================================================================== */

/* Layout: product-led SaaS page. Centered hero with switchable product screens,
   then one block per product area (a list of features on one side, the matching
   screenshot on the other), integrations, pricing with a comparison table, FAQ. */
:root{
  color-scheme:light;

  /* Page */
  --bg:#FFFFFF;          /* page background */
  --bg-tint:#F5F7FB;     /* pale sections */
  --surface:#FFFFFF;     /* cards */
  --line:#E3E8EF;        /* borders */
  --line-strong:#CFD8E4; /* stronger borders */
  --ink:#0B1424;         /* headings */
  --text:#3E4C60;        /* paragraphs */
  --muted:#66758A;       /* small print */

  /* Brand */
  --blue:#1D5BD6;        /* buttons, links, icons */
  --blue-dark:#1548AF;   /* button hover */
  --blue-soft:#ECF2FD;   /* light blue backgrounds */
  --blue-line:#C9D9F7;   /* light blue borders */
  --navy:#0C1D36;        /* announcement bar, dark panels, footer */
  --navy-2:#132B4F;
  --gold:#F2B84B;        /* small highlights */
  --green:#18804A;       /* checks and success */
  --red:#B93A33;         /* form errors */

  --shadow-xs:0 1px 2px rgba(11,20,36,.05);
  --shadow-sm:0 1px 2px rgba(11,20,36,.04),0 4px 12px -2px rgba(11,20,36,.06);
  --shadow-md:0 2px 4px rgba(11,20,36,.04),0 12px 28px -8px rgba(11,20,36,.14);
  --shadow-lg:0 2px 6px rgba(11,20,36,.04),0 30px 70px -20px rgba(16,44,104,.28);

  /* Fonts (loaded from Google Fonts in index.html) */
  --f-display:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;

  --gutter-l:max(20px, env(safe-area-inset-left, 0px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px));
}

/* ===== Base ===== */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
img{max-width:100%;height:auto}
a{color:var(--blue)}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);margin:0;line-height:1.12;letter-spacing:-.03em;text-wrap:balance;font-weight:700}
h3,h4{letter-spacing:-.015em;line-height:1.3}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.eyebrow{font:600 .78rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--surface);padding:.6rem 1rem;border-radius:8px;box-shadow:var(--shadow-md)}
.ic{width:42px;height:42px;border-radius:11px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;border:1px solid var(--blue-line);flex:none}
.ic svg{width:21px;height:21px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 .97rem/1 var(--f-body);padding:.92rem 1.3rem;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-xs),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-xs)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:#E9F0FC}
.btn-outline-white{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.btn-outline-white:hover{border-color:#fff}
.btn-sm{padding:.62rem .95rem;font-size:.92rem}
.btn-lg{padding:1.05rem 1.5rem;font-size:1.02rem}

/* ===== Announcement bar ===== */
.announce{background:var(--navy);color:#C9D5E8;font-size:.9rem}
.announce .wrap{padding-block:.6rem;display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap;text-align:center}
.announce b{background:var(--gold);color:#3B2A00;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .5rem;border-radius:4px}
.announce a{color:#fff;font-weight:600}

/* ===== Menu (with the Features drop-down) ===== */
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:2rem;padding-block:.8rem}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:700 1.28rem/1 var(--f-display);letter-spacing:-.025em;color:var(--ink)}
.logo img{height:44px;width:auto;display:block;flex:none}
@media (max-width:420px){.logo img{height:38px}}
.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links > a,.drop-btn{text-decoration:none;font:500 .96rem var(--f-body);color:var(--text);padding:.55rem .75rem;border-radius:8px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.nav-links > a:hover,.drop-btn:hover,.drop-btn[aria-expanded="true"]{color:var(--ink);background:var(--bg-tint)}
.drop-btn svg{width:14px;height:14px;transition:transform .2s}
.drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-cta{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.nav-cta .login{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink);padding:.55rem .7rem}
.drop{position:relative}
.mega{position:absolute;top:calc(100% + 12px);left:-120px;width:min(760px,90vw);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:1.4rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.mega h4{font:600 .74rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem .6rem}
.mega a{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem;border-radius:10px;text-decoration:none;color:var(--ink)}
.mega a:hover{background:var(--bg-tint)}
.mega a .ic{width:34px;height:34px;border-radius:9px}
.mega a .ic svg{width:17px;height:17px}
.mega a b{display:block;font-weight:600;font-size:.95rem}
.mega a span{display:block;color:var(--muted);font-size:.85rem;line-height:1.4}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:9px;padding:.5rem .8rem;color:var(--ink);font:600 .92rem var(--f-body);cursor:pointer}
.mobile-menu{border-top:1px solid var(--line);background:var(--surface)}
.mobile-menu .wrap{display:grid;gap:.1rem;padding-block:.8rem 1.1rem}
.mobile-menu a{padding:.7rem 0;text-decoration:none;font-weight:600;color:var(--ink)}
.mobile-menu .btn{margin-top:.5rem;color:#fff}
@media (max-width:1000px){.nav-cta .login{display:none}}
@media (max-width:880px){.nav-links,.nav-cta{display:none}.menu-btn{display:inline-block}}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding-top:clamp(3.5rem,7vw,5.5rem);background:radial-gradient(1000px 500px at 50% -10%,rgba(29,91,214,.11),transparent 70%),linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 70%)}
.hero::before{content:"";position:absolute;inset:0 0 40% 0;background-image:radial-gradient(rgba(11,20,36,.11) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 0%,#000,transparent 75%);pointer-events:none}
.hero-copy{position:relative;text-align:center;max-width:860px;margin:0 auto}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.2rem);letter-spacing:-.035em}
.hero h1 span{color:var(--blue)}
.hero .lede{font-size:clamp(1.08rem,1.6vw,1.22rem);margin:1.3rem auto 0;max-width:54ch}
.hero .ctas{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
.hero-trust{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;font-size:.92rem;color:var(--muted)}
.hero-trust li{display:flex;align-items:center;gap:.4rem}
.hero-trust svg{width:17px;height:17px;color:var(--green)}

/* Product screens switcher in the hero */
.showcase{position:relative;max-width:1100px;margin:clamp(2.6rem,5vw,3.6rem) auto 0}
.tabs{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1.4rem}
.tab{border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 .92rem var(--f-body);padding:.6rem 1rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;box-shadow:var(--shadow-xs);transition:background .15s,color .15s,border-color .15s}
.tab svg{width:16px;height:16px}
.tab:hover{border-color:var(--line-strong);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.stage{position:relative}
.stage::before{content:"";position:absolute;inset:6% 4% -6%;background:radial-gradient(closest-side,rgba(29,91,214,.22),transparent);filter:blur(30px)}
.stage .win{position:relative;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.stage .shot{aspect-ratio:1366/700;object-fit:cover;object-position:top left;background:#fff}
.stage-caption{position:relative;z-index:2;text-align:center;font-size:.95rem;color:var(--muted);margin-top:1.1rem}
.stage-caption b{color:var(--ink);font-weight:600}
.hero-fade{position:relative;z-index:1;height:80px;margin-top:-80px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
@media (max-width:640px){.tab{padding:.5rem .75rem;font-size:.86rem}.tab svg{display:none}}

/* ===== Screenshot frames ===== */
.win{background:var(--surface);border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-lg)}
.win-bar{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;background:#F4F6F9;border-bottom:1px solid var(--line)}
.win-bar .dots{display:flex;gap:6px}
.win-bar .dots i{width:10px;height:10px;border-radius:50%;background:#D5DCE6;display:block}
.win-bar .url{flex:1;min-width:0;max-width:340px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.2rem .7rem;color:var(--muted);font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot{display:block;width:100%;height:auto;max-width:100%}
.phone{width:min(250px,100%);background:var(--surface);border-radius:30px;border:7px solid #0B1424;box-shadow:var(--shadow-lg);overflow:hidden}
.phone .notch{height:20px;display:flex;justify-content:center;align-items:center}
.phone .notch i{width:60px;height:5px;border-radius:5px;background:var(--line);display:block}

/* ===== Section basics ===== */
section.band{padding-block:clamp(4.5rem,8vw,6.5rem)}
section.tint{background:var(--bg-tint);border-block:1px solid var(--line)}
.sec-head{max-width:740px;display:grid;gap:1rem}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.8rem)}
.sec-head p{font-size:1.1rem;max-width:58ch}

/* ===== Who it's for ===== */
.segments{margin-top:3rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.seg{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem;display:grid;gap:.7rem;align-content:start;box-shadow:var(--shadow-xs);transition:box-shadow .2s,border-color .2s}
.seg:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.seg h3{font-size:1.15rem;margin-top:.3rem}
.seg p{font-size:.97rem}
@media (max-width:980px){.segments{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.segments{grid-template-columns:minmax(0,1fr)}}

/* ===== Product areas: feature list + matching screenshot ===== */
.area{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,4rem);align-items:start;padding-block:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line)}
.area:first-of-type{border-top:0}
.area.flip > .area-copy{order:2}
.area-copy .sec-head{gap:.85rem}
.area-copy h2{font-size:clamp(1.9rem,3.2vw,2.5rem)}
.flist{margin-top:1.8rem;display:grid;gap:.4rem}
.fitem{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;text-align:left;width:100%;background:none;border:1px solid transparent;border-radius:14px;padding:.95rem 1rem;cursor:pointer;font:inherit;color:inherit;transition:background .15s,border-color .15s,box-shadow .15s}
.fitem:hover{background:var(--bg-tint)}
.fitem[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-md)}
.fitem[aria-selected="true"] .ic{background:var(--blue);color:#fff;border-color:var(--blue)}
.fitem b{display:block;font:600 1.04rem var(--f-display);color:var(--ink);letter-spacing:-.01em}
.fitem span.d{display:block;font-size:.95rem;color:var(--muted);margin-top:.15rem}
.fpanel{position:relative;background:linear-gradient(160deg,#EAF1FD 0%,#F6F8FC 70%);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,3vw,36px);min-height:440px;display:grid;place-items:center;position:sticky;top:100px}
.fview{width:100%;display:grid;place-items:center}
.fview .win{width:100%}
.fview .win .shot.wide{aspect-ratio:1366/640;object-fit:cover;object-position:top left}
.fview .card-shot{max-width:420px;width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);background:#fff}
.fview .phone{width:min(260px,70%)}
@media (max-width:980px){.area{grid-template-columns:minmax(0,1fr)}.area.flip > .area-copy{order:0}.fpanel{position:relative;top:0;min-height:0}}

/* ===== How it works (three steps) ===== */
.steps{margin-top:3.2rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;list-style:none;padding:0}
.step{display:grid;gap:.9rem;align-content:start}
.step-shot{background:var(--surface);border:1px solid var(--line);border-radius:18px;height:280px;padding:1.3rem 1.3rem 0;overflow:hidden;display:flex;justify-content:center;box-shadow:var(--shadow-sm)}
.step-shot img{width:auto;max-width:100%;height:auto;align-self:flex-start;border-radius:10px 10px 0 0;border:1px solid var(--line-strong);border-bottom:0;box-shadow:var(--shadow-md);background:#fff}
.step-label{font:600 .78rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-top:.4rem}
.step h3{font-size:1.35rem}
@media (max-width:920px){.steps{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}.step-shot{height:auto;max-height:320px}}

/* ===== Integrations ===== */
.integr{margin-top:3rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.int{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.2rem;display:grid;gap:.25rem;align-content:start;box-shadow:var(--shadow-xs)}
.int b{font:700 1.08rem var(--f-display);color:var(--ink);letter-spacing:-.01em}
.int span{color:var(--muted);font-size:.88rem}
@media (max-width:980px){.integr{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.integr{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Pricing ===== */
.bill{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;margin-top:1.6rem;box-shadow:var(--shadow-xs)}
.bill button{border:0;background:none;font:600 .93rem var(--f-body);color:var(--muted);padding:.6rem 1.25rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.bill button[aria-pressed="true"]{background:var(--ink);color:#fff}
.bill .save{font-size:.72rem;color:var(--green);font-weight:700;margin-left:.35rem}
.bill button[aria-pressed="true"] .save{color:#8EE2B4}
.plans{margin-top:2.6rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.7rem 1.5rem;display:flex;flex-direction:column;gap:1.1rem;position:relative;box-shadow:var(--shadow-sm)}
.plan.pop{border:1.5px solid var(--blue);box-shadow:0 0 0 4px var(--blue-soft),var(--shadow-md)}
.plan .flag{position:absolute;top:-.8rem;left:1.5rem;background:var(--blue);color:#fff;font:600 .72rem var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px}
.plan h3{font-size:1.2rem}
.plan .for{font-size:.93rem;margin-top:.35rem;min-height:3em;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}
.price b{font:700 2.6rem/1 var(--f-display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-weight:500}
.price-note{font-size:.84rem;color:var(--muted);margin-top:.4rem;min-height:1.3em}
.orders{display:flex;align-items:center;gap:.5rem;background:var(--bg-tint);border-radius:10px;padding:.6rem .8rem;font-size:.92rem;color:var(--ink);font-weight:600}
.orders svg{width:17px;height:17px;color:var(--blue)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.93rem}
.plan li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.55rem}
.plan li::before{content:"";width:16px;height:16px;margin-top:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%2318804A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.plan .inc{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan .btn{width:100%}
.price-foot{text-align:center;margin-top:1.8rem;color:var(--muted);font-size:.93rem}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.plans{grid-template-columns:minmax(0,1fr)}}

/* Plan comparison table */
.compare-wrap{margin-top:3.5rem}
.compare-wrap h3{font-size:1.5rem;text-align:center}
.compare{margin-top:1.4rem;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-xs)}
.compare table{width:100%;min-width:720px;border-collapse:collapse;font-size:.95rem}
.compare th,.compare td{padding:.8rem 1rem;border-bottom:1px solid var(--line);text-align:center}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{font:700 1rem var(--f-display);color:var(--ink);background:var(--bg-tint);position:sticky;top:0}
.compare tbody th{font-weight:500;color:var(--text)}
.compare .grp td{background:var(--bg-tint);font:600 .74rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left}
.compare .y{color:var(--green);font-weight:700}
.compare .n{color:#B8C2CF}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}

/* ===== Questions (FAQ) ===== */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.faq-side h2{font-size:clamp(1.9rem,3.3vw,2.5rem);margin-top:1rem}
.faq-side p{margin-top:1rem;font-size:1.05rem}
.faq-side a{font-weight:600}
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:1.2rem 0}
.faq summary{cursor:pointer;font:600 1.06rem var(--f-display);color:var(--ink);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2366758A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{margin-top:.7rem;max-width:62ch}
@media (max-width:860px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* ===== Final calls to action (two cards) ===== */
.cta-duo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.4rem}
.cta-card{border-radius:22px;padding:clamp(2rem,4vw,3rem);display:grid;gap:1rem;align-content:start;position:relative;overflow:hidden}
.cta-card h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.cta-card p{font-size:1.05rem;max-width:46ch}
.cta-card .ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.cta-card.dark{background:radial-gradient(600px 300px at 100% 0%,rgba(84,140,255,.38),transparent 65%),var(--navy);color:#C9D5E8}
.cta-card.dark h2{color:#fff}
.cta-card.dark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 100% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 100% 0%,#000,transparent 75%);pointer-events:none}
.cta-card > *{position:relative}
.cta-card.light{background:var(--bg-tint);border:1px solid var(--line)}
.cta-card .mail{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.05rem;text-decoration:none}
.cta-card .mail svg{width:20px;height:20px}
@media (max-width:860px){.cta-duo{grid-template-columns:minmax(0,1fr)}}

/* ===== Demo request form (pop-up) ===== */
dialog.demo{border:0;padding:0;border-radius:18px;width:min(460px,calc(100vw - 32px));box-shadow:0 30px 80px -20px rgba(11,20,36,.5);color:var(--text)}
dialog.demo::backdrop{background:rgba(11,20,36,.55);backdrop-filter:blur(3px)}
.demo-inner{padding:2rem;display:grid;gap:1.2rem}
.demo-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.demo h2{font-size:1.5rem}
.demo .sub{font-size:.98rem;color:var(--muted);margin-top:.4rem}
.x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--muted);font-size:1.25rem;line-height:1}
.x:hover{color:var(--ink);border-color:var(--ink)}
.field{display:grid;gap:.4rem}
.field label{font-weight:600;color:var(--ink);font-size:.93rem}
.field input,.field select{font:inherit;font-size:1rem;padding:.8rem .9rem;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);width:100%;box-shadow:var(--shadow-xs)}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.field input[aria-invalid="true"]{border-color:var(--red)}
.field .err{color:var(--red);font-size:.86rem}
.field .err:empty{display:none}
.demo .btn{width:100%}
.demo .fine{font-size:.84rem;color:var(--muted);text-align:center}
.demo .status{border-radius:10px;padding:.85rem 1rem;font-size:.94rem}
.demo .status.bad{background:#FBEAE9;color:#72201B}
.demo .done{text-align:center;display:grid;gap:.8rem;justify-items:center;padding-block:1rem}
.demo .done .ic{background:#E5F4EC;color:var(--green);border-color:#C6E6D4;width:58px;height:58px;border-radius:50%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== Footer ===== */
footer{background:var(--navy);color:#B5C3D8;padding-block:4rem 2rem}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:2.5rem}
footer .logo img{height:48px}
footer .tagline{color:#fff;font:600 1rem var(--f-display);margin-top:1rem}
footer .about .tagline + p{margin-top:.4rem}
footer h4{font:600 .76rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:#8295B0;margin:0 0 1rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem}
footer li{overflow-wrap:anywhere}
footer a{color:#D8E2F1;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .about p{margin-top:1rem;max-width:34ch;font-size:.95rem}
.legal{margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.88rem;color:#8295B0}
.legal nav{display:flex;gap:1.4rem}
@media (max-width:860px){.fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fgrid .about{grid-column:1/-1}}

/* ===== Picture viewer (click any screenshot to enlarge it) ===== */
.zoomable{cursor:zoom-in;transition:filter .15s}
.zoomable:hover{filter:brightness(1.03)}
.zoomable:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
dialog.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;overflow:hidden}
dialog.lightbox::backdrop{background:rgba(8,14,26,.88);backdrop-filter:blur(4px)}
.lb-inner{position:relative;width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));gap:.6rem}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:#C9D5E8;font-size:.9rem}
.lb-count{font-variant-numeric:tabular-nums}
.lb-stage{display:grid;place-items:center;min-height:0;cursor:zoom-out}
.lb-stage img{max-width:min(1600px,calc(100vw - 150px));max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);cursor:default;object-fit:contain}
.lb-cap{text-align:center;color:#E3EAF5;font-size:.98rem;max-width:80ch;margin:0 auto;min-height:1.4em}
.lb-btn{position:relative;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:1.4rem;line-height:1}
.lb-btn:hover{background:rgba(255,255,255,.18)}
.lb-btn svg{width:22px;height:22px}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:max(14px,env(safe-area-inset-left,0px))}
.lb-next{right:max(14px,env(safe-area-inset-right,0px))}
@media (max-width:640px){.lb-stage img{max-width:100%;max-height:calc(100dvh - 190px)}.lb-prev,.lb-next{top:auto;bottom:max(14px,env(safe-area-inset-bottom,0px));transform:none}.lb-cap{padding-inline:56px}}

/* ===== Privacy and terms pages ===== */
.doc{max-width:760px;margin:0 auto;padding-block:4rem 2rem}
.doc h1{font-size:clamp(2rem,4vw,2.8rem)}
.doc .updated{color:var(--muted);margin-top:.6rem}
.doc h2{font-size:1.3rem;margin-top:2.2rem}
.doc p,.doc ul{margin-top:.8rem}
.doc ul{padding-left:1.2rem}
main.wrap + footer{margin-top:4rem}

/* Demo sign-in steps (code entry, "You're in") */
.demo-step{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:.35rem}
.field .hint,.code-field .hint{font-size:.84rem;color:var(--muted)}
.demo .status.ok{background:#E5F4EC;color:#14532D}
.linkbtn{font:inherit;font-weight:600;color:var(--blue);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--ink)}
.linkbtn:disabled{opacity:.5;cursor:default}
.sent-to{font-size:.98rem;color:var(--text)}
.sent-to b{color:var(--ink)}
.code-field{border:0;margin:0;padding:0;display:grid;gap:.55rem;min-width:0}
.code-field legend{font-weight:600;color:var(--ink);font-size:.93rem;padding:0;margin-bottom:.55rem}
.code-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}
.code-boxes input{font:800 1.6rem/1 'Plus Jakarta Sans',sans-serif;text-align:center;width:100%;min-width:0;height:3.4rem;padding:0;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs);caret-color:var(--blue)}
.code-boxes input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.code-boxes input[aria-invalid="true"]{border-color:var(--red)}
.code-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;font-size:.9rem;color:var(--muted)}
.code-foot b{color:var(--ink)}
.demo .walk{width:100%;text-align:left;border-top:1px solid var(--line);padding-top:1rem;margin-top:.4rem;display:grid;gap:.35rem;font-size:.94rem;color:var(--muted)}
.demo .walk b{color:var(--ink)}
.walk-actions{display:flex;align-items:center;gap:1rem;margin-top:.35rem}
.demo .walk-actions .btn{width:auto}
.demo-top .x{margin-left:auto}