/* ── FONT (self-hosted, OFL — see /assets/fonts) ──
   One family. Variable 300-700 in a single file per subset; the greek
   subset is why Greek pages finally render in the same face as English. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/manrope-greek.woff2) format('woff2-variations');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2-variations');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
em, i, address, cite, dfn, var { font-style: normal; }  /* one family, no italic cut */
:root {
  /* ── Ink wash ──────────────────────────────────────────────────
     Neutral greys carry the page. Apple's action blue is the only
     colour, and it appears on buttons and controls — never on text
     or headings, which are a single ink throughout.              */
  --bg:   #FFFFFF; --bg1: #F5F5F7; --bg2: #E8E8ED;
  --surf: #FFFFFF; --b0: #E8E8E8; --b1: #D9D9DE; --b2: #CFCFCF;
  --vi:  #0071E3; --vi2: #0077ED; --vi-dk: #0062C4;   /* buttons/controls only */
  --gr: #047857; --re: #B3261E;                        /* state only */
  --tx:  #1D1D1F; --tx2: #545454; --tx3: #7D7D7D;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: var(--sans);
  --mono: var(--sans);
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--tx); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(rgba(0,113,227,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,113,227,.04) 1px,transparent 1px);
  background-size:60px 60px; }
[data-lang="gr"] .en { display:none!important; }
[data-lang="en"] .gr { display:none!important; }

/* ── NAV ── */
nav { position:fixed; top:0; left:0; right:0; z-index:300; display:flex; align-items:center; justify-content:space-between; padding:.85rem 5%; background:rgba(247,247,249,.92); backdrop-filter:blur(24px); border-bottom:1px solid var(--b0); }
.logo { display:flex; align-items:center; gap:.45rem; font-family:var(--sans); font-size:1.2rem; font-weight:700; letter-spacing:-.04em; color:var(--tx); text-decoration:none; }
.logo-dot { width:7px; height:7px; border-radius:50%; background:var(--vi); box-shadow:0 0 8px rgba(0,113,227,.5); animation:blink 2.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.35} }
.nav-r { display:flex; align-items:center; gap:1.4rem; }
.nav-links { display:flex; gap:1.8rem; list-style:none; }
.nav-links a { font-size:.8rem; font-weight:500; color:var(--tx2); text-decoration:none; transition:color .18s; }
.nav-links a:hover { color:var(--tx); }
.lang-sw { display:flex; background:var(--bg1); border:1px solid var(--b1); border-radius:6px; overflow:hidden; }
.lang-sw a { text-decoration:none; padding:.3rem .65rem; font-family:var(--mono); font-size:.68rem; font-weight:600; color:var(--tx3); background:none; border:none; cursor:pointer; transition:all .15s; }
.lang-sw a.on { background:var(--vi); color:#fff; }
.nav-cta { background:var(--vi); color:#fff; padding:.5rem 1.15rem; border-radius:6px; font-size:.8rem; font-weight:600; text-decoration:none; box-shadow:0 2px 12px rgba(0,113,227,.3); transition:background .18s; }
.nav-cta:hover { background:var(--vi-dk); }
/* Sign in: inline link on desktop, folded into the mobile menu below 960px */
.nav-signin { padding:.5rem .9rem; border:1px solid var(--b1); border-radius:6px; font-size:.8rem; font-weight:600; color:var(--tx2); text-decoration:none; white-space:nowrap; transition:border-color .18s, color .18s; }
.nav-signin:hover { border-color:var(--vi); color:var(--vi); }
.nav-signin-m { display:none; }

/* ── HERO ── */
#hero { position:relative; min-height:auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; max-width:1180px; margin:0 auto; padding:7rem 5% 5rem; gap:3rem; overflow:hidden; }
.glow-v { position:absolute; top:-20%; left:-10%; width:65vw; height:65vw; background:radial-gradient(ellipse,rgba(0,113,227,.08) 0%,transparent 60%); pointer-events:none; z-index:0; }
.glow-c { position:absolute; bottom:-20%; right:-10%; width:50vw; height:50vw; background:radial-gradient(ellipse,rgba(3,105,161,.05) 0%,transparent 60%); pointer-events:none; z-index:0; }
.hero-l { position:relative; z-index:1; }
.badge { display:inline-flex; align-items:center; gap:.55rem; background:rgba(0,113,227,.08); border:1px solid rgba(0,113,227,.2); padding:.3rem .9rem; border-radius:100px; font-family:var(--mono); font-size:.68rem; color:var(--vi); margin-bottom:1.8rem; animation:fu .5s ease both; }
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--vi); animation:bdot 2s infinite; }
@keyframes bdot{0%,100%{box-shadow:0 0 0 0 rgba(0,113,227,.4)}50%{box-shadow:0 0 0 5px rgba(0,113,227,0)}}
@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
h1.hero-h1 { font-family:var(--serif); font-size:clamp(3rem,5.5vw,5.2rem); font-weight:400; line-height:1.06; letter-spacing:-.02em; color:var(--tx); margin-bottom:1.5rem; animation:fu .5s .1s ease both; }
h1.hero-h1 em { color:var(--vi); font-weight:600; }
h1.hero-h1 .ac { color:var(--vi); }
.hero-sub { font-size:1.05rem; font-weight:300; line-height:1.78; color:var(--tx2); max-width:44ch; margin-bottom:2.2rem; animation:fu .5s .2s ease both; }
.hero-acts { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; animation:fu .5s .3s ease both; }
.btn-p { display:inline-flex; align-items:center; gap:.5rem; background:var(--vi); color:#fff; padding:.8rem 1.8rem; border-radius:8px; font-size:.88rem; font-weight:600; text-decoration:none; box-shadow:0 2px 16px rgba(0,113,227,.28); transition:background .18s,transform .18s; }
.btn-p:hover { background:var(--vi-dk); transform:translateY(-1px); }
.btn-s { display:inline-flex; align-items:center; gap:.5rem; color:var(--tx2); padding:.8rem 1.4rem; border-radius:8px; font-size:.88rem; font-weight:500; text-decoration:none; border:1px solid var(--b1); background:var(--surf); transition:border-color .18s,color .18s; }
.btn-s:hover { border-color:var(--b2); color:var(--tx); }
.hero-stats { display:flex; gap:2rem; margin-top:3rem; animation:fu .5s .4s ease both; }
.hs-num { font-family:var(--serif); font-size:2rem; color:var(--vi); line-height:1; }
.hs-lbl { font-size:.68rem; font-weight:500; color:var(--tx3); margin-top:.25rem; text-transform:uppercase; letter-spacing:.05em; }
.hs-div { width:1px; background:var(--b1); }

/* ── PHONE ── */
.hero-r { position:relative; z-index:1; display:flex; justify-content:center; align-items:center; animation:fu .7s .25s ease both; }
@keyframes flt{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes sin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mi-a{background:#1C1C1E;color:#fff;} .mi-g{background:#0D1B2A;color:#047857;} .mi-c{background:linear-gradient(135deg,#1e1e42,#12123a);}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cpulse{0%,100%{box-shadow:0 0 0 0 rgba(165,160,255,.4)}50%{box-shadow:0 0 0 4px rgba(165,160,255,0)}}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dr{to{stroke-dashoffset:0}}
/* ── STRIP ── */
#strip { border-top:1px solid var(--b0); border-bottom:1px solid var(--b0); padding:1.2rem 5%; display:flex; align-items:center; gap:2.5rem; background:var(--surf); position:relative; z-index:1; overflow:hidden; }
.strip-lbl { font-family:var(--mono); font-size:.62rem; color:var(--tx3); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.strip-logos { display:flex; gap:2.5rem; flex-wrap:wrap; }
.strip-logo { font-family:var(--mono); font-size:.74rem; font-weight:600; color:var(--tx3); white-space:nowrap; transition:color .18s; cursor:default; }
.strip-logo:hover { color:var(--tx2); }

/* ── SECTION COMMON ── */
.eyebrow { font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--vi); margin-bottom:.9rem; }
.sec-h2 { font-family:var(--serif); font-size:clamp(2rem,3vw,2.8rem); font-weight:400; line-height:1.12; color:var(--tx); }
.sec-h2 em { color:var(--vi); }
.sec-sub { font-size:.95rem; font-weight:300; line-height:1.78; color:var(--tx2); margin-top:.75rem; max-width:52ch; }
.btn-ghost { display:inline-flex; align-items:center; gap:.5rem; color:var(--tx2); padding:.8rem 1.6rem; border-radius:8px; font-size:.88rem; font-weight:500; text-decoration:none; border:1px solid var(--b1); background:var(--surf); transition:all .18s; }
.btn-ghost:hover { border-color:var(--b2); color:var(--tx); }

/* ── FEATURES ── */
#features { padding:9rem 5%; position:relative; z-index:1; background:var(--bg); }
.feat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--b0); border:1px solid var(--b0); border-radius:16px; overflow:hidden; margin-top:4rem; }
.feat-card { background:var(--surf); padding:2.6rem; position:relative; overflow:hidden; transition:background .22s; }
.feat-card:hover { background:var(--bg1); }
.feat-card::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top left,rgba(0,113,227,.04) 0%,transparent 60%); opacity:0; transition:opacity .22s; pointer-events:none; }
.feat-card:hover::after { opacity:1; }
.feat-n { font-family:var(--mono); font-size:.62rem; color:var(--tx3); margin-bottom:1.5rem; letter-spacing:.06em; }
.feat-icon-wrap { width:44px; height:44px; border-radius:12px; background:rgba(0,113,227,.08); border:1px solid rgba(0,113,227,.15); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.feat-icon-wrap svg { width:22px; height:22px; stroke:var(--vi); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.feat-card h3 { font-family:var(--serif); font-size:1.2rem; font-weight:400; color:var(--tx); margin-bottom:.6rem; }
.feat-card p { font-size:.86rem; line-height:1.74; color:var(--tx2); }
.feat-tag { display:inline-block; margin-top:1.2rem; font-family:var(--mono); font-size:.62rem; color:var(--vi); background:rgba(0,113,227,.07); border:1px solid rgba(0,113,227,.18); padding:.22rem .55rem; border-radius:4px; }

/* ── INTERACTIVE SETUP WIZARD ── */
#setup { padding:9rem 5%; background:var(--bg); border-top:1px solid var(--b0); border-bottom:1px solid var(--b0); position:relative; z-index:1; }
.wizard-shell { display:flex; gap:0; background:var(--surf); border:1px solid var(--b0); border-radius:20px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.07); margin-top:3.5rem; min-height:480px; }
/* Left sidebar */
.wiz-sidebar { width:220px; flex-shrink:0; border-right:1px solid var(--b0); padding:2rem 0; background:var(--bg1); }
.wiz-step-item { display:flex; align-items:flex-start; gap:.85rem; padding:.9rem 1.5rem; cursor:pointer; transition:background .15s; }
.wiz-step-item:hover { background:rgba(0,113,227,.04); }
.wiz-step-item.active { background:rgba(0,113,227,.06); }
.wiz-num { width:28px; height:28px; border-radius:8px; border:1.5px solid var(--b1); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.7rem; font-weight:600; color:var(--tx3); flex-shrink:0; transition:all .2s; background:var(--surf); }
.wiz-step-item.active .wiz-num { background:var(--vi); border-color:var(--vi); color:#fff; box-shadow:0 0 10px rgba(0,113,227,.3); }
.wiz-step-item.done .wiz-num { background:var(--gr); border-color:var(--gr); color:#fff; }
.wiz-step-item.active .wiz-step-name { color:var(--vi); font-weight:600; }
.wiz-step-item.done .wiz-step-name { color:var(--tx2); }
.wiz-step-name { font-size:.72rem; font-weight:500; color:var(--tx3); transition:color .2s; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wiz-step-sub { font-size:.72rem; color:var(--tx3); margin-top:.15rem; font-weight:400; }
/* Main area */
.wiz-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.wiz-content { flex:1; }
.wiz-pane { display:none; padding:2.2rem 2.5rem; }
.wiz-pane.active { display:block; animation:wfade .3s ease both; }
@keyframes wfade{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.wiz-pane-title { font-family:var(--serif); font-size:1.3rem; color:var(--tx); margin-bottom:.3rem; }
.wiz-pane-sub { font-size:.84rem; color:var(--tx2); margin-bottom:1.6rem; font-weight:300; }
/* Option cards grid */
.wiz-options { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.wiz-opt { border:1.5px solid var(--b1); border-radius:12px; padding:1.2rem 1.4rem; cursor:pointer; background:var(--surf); transition:all .2s; }
.wiz-opt:hover { border-color:rgba(0,113,227,.3); box-shadow:0 4px 16px rgba(0,113,227,.08); transform:translateY(-1px); }
.wiz-opt.selected { border-color:var(--vi); background:rgba(0,113,227,.06); box-shadow:0 4px 16px rgba(0,113,227,.12); }
.wiz-opt h4 { font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--tx); margin-bottom:.3rem; }
.wiz-opt p { font-size:.78rem; line-height:1.6; color:var(--tx2); }
.wiz-opt .wiz-opt-check { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--b2); display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; transition:all .2s; }
.wiz-opt.selected .wiz-opt-check { background:var(--vi); border-color:var(--vi); }
.wiz-opt.selected .wiz-opt-check::after { content:'✓'; font-size:.6rem; color:#fff; font-weight:700; }
/* Toggle for step 2 */
.wiz-toggle { display:flex; gap:1rem; }
.wiz-toggle-opt { flex:1; border:1.5px solid var(--b1); border-radius:12px; padding:1.4rem; cursor:pointer; background:var(--surf); transition:all .2s; display:flex; flex-direction:column; gap:.35rem; }
.wiz-toggle-opt:hover { border-color:rgba(0,113,227,.3); transform:translateY(-1px); }
.wiz-toggle-opt.selected { border-color:var(--vi); background:rgba(0,113,227,.06); }
.wiz-toggle-opt span { font-size:.78rem; color:var(--tx2); font-weight:300; }
/* Footer buttons */
.wiz-footer { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 2.5rem; border-top:1px solid var(--b0); background:var(--bg1); }
.wiz-btn-prev { display:inline-flex; align-items:center; gap:.4rem; color:var(--tx2); background:var(--surf); border:1px solid var(--b1); padding:.55rem 1.1rem; border-radius:7px; font-size:.82rem; font-weight:500; cursor:pointer; font-family:var(--sans); transition:all .18s; }
.wiz-btn-prev:hover { color:var(--tx); border-color:var(--b2); }
.wiz-btn-prev:disabled { opacity:.35; cursor:default; }
.wiz-btn-next { display:inline-flex; align-items:center; gap:.4rem; background:var(--vi); color:#fff; border:none; padding:.6rem 1.4rem; border-radius:7px; font-size:.82rem; font-weight:600; cursor:pointer; font-family:var(--sans); transition:background .18s; box-shadow:0 2px 10px rgba(0,113,227,.28); }
.wiz-btn-next:hover { background:var(--vi-dk); }
.wiz-summary { display:none; padding:2.2rem 2.5rem; }
.wiz-summary.active { display:block; }
.wiz-sum-title { font-family:var(--serif); font-size:1.3rem; color:var(--tx); margin-bottom:1.2rem; }
.wiz-sum-rows { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem; }
.wiz-sum-row { display:flex; justify-content:space-between; align-items:center; background:var(--bg1); border-radius:8px; padding:.7rem 1rem; }
.wiz-sum-lbl { font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3); }
.wiz-sum-val { font-size:.86rem; font-weight:600; color:var(--tx); }
.wiz-sum-cta { background:linear-gradient(135deg,var(--vi),var(--vi-dk)); color:#fff; border:none; border-radius:10px; padding:.85rem 1.6rem; font-size:.9rem; font-weight:600; cursor:pointer; font-family:var(--sans); text-align:center; box-shadow:0 4px 18px rgba(0,113,227,.3); transition:opacity .18s; }
.wiz-sum-cta:hover { opacity:.88; }
.wiz-success-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(4,120,87,.08); border:1px solid rgba(4,120,87,.2); border-radius:100px; padding:.3rem .9rem; font-family:var(--mono); font-size:.68rem; color:var(--gr); margin-bottom:1rem; }
.wiz-progress { display:flex; gap:.35rem; }
.wiz-prog-dot { height:3px; flex:1; border-radius:2px; background:var(--bg2); transition:background .3s; }
.wiz-prog-dot.done-p { background:var(--gr); }
.wiz-prog-dot.active-p { background:var(--vi); }

/* ── TABS SECTION ── */
#tabs-section { padding:9rem 5%; background:var(--bg); position:relative; z-index:1; }
.tabs-nav { display:flex; gap:0; background:var(--bg1); border:1px solid var(--b0); border-radius:10px; overflow:hidden; width:fit-content; margin:2.5rem 0; }
.tab-btn { padding:.6rem 1.4rem; font-size:.82rem; font-weight:600; color:var(--tx2); background:none; border:none; cursor:pointer; transition:all .18s; white-space:nowrap; font-family:var(--sans); }
.tab-btn.on { background:var(--surf); color:var(--tx); box-shadow:0 1px 4px rgba(0,0,0,.1); border-radius:8px; margin:3px; }
.tab-pane { display:none; animation:fu .35s ease both; }
.tab-pane.on { display:block; }
.tab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.tab-card { background:var(--surf); border:1px solid var(--b0); border-radius:14px; padding:1.8rem; transition:border-color .2s, box-shadow .2s, transform .2s; position:relative; overflow:hidden; }
.tab-card:hover { border-color:rgba(0,113,227,.25); box-shadow:0 6px 24px rgba(0,113,227,.08); transform:translateY(-2px); }
.tab-card.featured { border-color:rgba(0,113,227,.3); background:linear-gradient(135deg,rgba(0,113,227,.03),var(--surf)); }
.tab-card-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.tab-card-ico svg { width:20px; height:20px; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tab-card h4 { font-family:var(--serif); font-size:1.05rem; font-weight:400; color:var(--tx); margin-bottom:.4rem; }
.tab-card p { font-size:.84rem; line-height:1.7; color:var(--tx2); }
.tab-card-badge { display:inline-block; margin-top:.9rem; font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .6rem; border-radius:4px; }
.badge-vi { color:var(--vi); background:rgba(0,113,227,.08); border:1px solid rgba(0,113,227,.15); }
.badge-cy { color:var(--vi); background:rgba(0,113,227,.07); border:1px solid rgba(0,113,227,.18); }
.badge-gr { color:var(--gr); background:rgba(4,120,87,.07); border:1px solid rgba(4,120,87,.18); }
.badge-am { color:#92400E; background:rgba(146,64,14,.07); border:1px solid rgba(146,64,14,.18); }
.coming-soon { position:absolute; top:.9rem; right:.9rem; font-family:var(--mono); font-size:.58rem; font-weight:600; color:var(--tx3); background:var(--bg2); padding:.2rem .5rem; border-radius:4px; }

/* ── CALCULATOR ── */
#calculator { padding:9rem 5%; background:var(--bg); border-top:1px solid var(--b0); border-bottom:1px solid var(--b0); position:relative; z-index:1; }
.calc-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; margin-top:3.5rem; }
.calc-form { background:var(--surf); border:1px solid var(--b0); border-radius:16px; padding:2.2rem; }
.calc-form h3 { font-family:var(--serif); font-size:1.15rem; color:var(--tx); margin-bottom:1.5rem; }
.calc-field { margin-bottom:1.4rem; }
.calc-field label { display:block; font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); margin-bottom:.5rem; }
.calc-field-row { display:flex; align-items:center; gap:.75rem; }
.calc-field input[type=range] { flex:1; height:4px; border-radius:2px; background:var(--bg2); outline:none; border:none; cursor:pointer; -webkit-appearance:none; }
.calc-field input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--vi); border:2px solid #fff; box-shadow:0 1px 6px rgba(0,113,227,.35); cursor:pointer; }
.calc-field input[type=range]::-webkit-slider-runnable-track { background:linear-gradient(to right, var(--vi) var(--val,50%), var(--bg2) var(--val,50%)); height:4px; border-radius:2px; }
.calc-val { font-family:var(--mono); font-size:.9rem; font-weight:600; color:var(--tx); min-width:52px; text-align:right; }
.calc-results { display:flex; flex-direction:column; gap:1.2rem; }
.calc-result-card { background:var(--surf); border:1px solid var(--b0); border-radius:14px; padding:1.8rem; }
.calc-result-card.highlight { background:linear-gradient(135deg,rgba(0,113,227,.06),rgba(4,120,87,.04)); border-color:rgba(0,113,227,.2); }
.calc-result-label { font-family:var(--mono); font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); margin-bottom:.5rem; }
.calc-result-val { font-family:var(--serif); font-size:2.4rem; color:var(--tx); line-height:1; }
.calc-result-val .unit { font-style:normal; color:var(--vi); font-size:1.8rem; }
.calc-result-sub { font-size:.82rem; color:var(--tx2); margin-top:.35rem; }
.calc-diff { display:flex; align-items:center; gap:.6rem; margin-top:1rem; font-family:var(--mono); font-size:.75rem; font-weight:600; }
.calc-diff .up { color:var(--gr); }
.calc-diff .down { color:var(--re); }
.calc-compare { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1rem; }
.calc-col { background:var(--bg1); border-radius:10px; padding:1rem; }
.calc-col-lbl { font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3); margin-bottom:.4rem; }
.calc-col-val { font-family:var(--serif); font-size:1.5rem; color:var(--tx); line-height:1; }
.calc-col-val.green { color:var(--gr); }
.calc-col-val.red { color:var(--re); }
.calc-note { font-family:var(--mono); font-size:.62rem; color:var(--tx3); margin-top:.75rem; line-height:1.6; }

/* ── METRICS ── */
#metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--b0); border-top:1px solid var(--b0); border-bottom:1px solid var(--b0); position:relative; z-index:1; }
.metric { background:var(--bg); padding:2.6rem 2rem; transition:background .18s; }
.metric:hover { background:var(--bg1); }
.metric-num { font-family:var(--serif); font-size:2.4rem; color:var(--tx); line-height:1; margin-bottom:.45rem; }
.metric-num .unit { color:var(--vi); font-style:normal; }
.metric-lbl { font-size:.78rem; color:var(--tx3); line-height:1.5; }

/* ── FAQ ── */
#faq { padding:9rem 5%; background:var(--bg1); position:relative; z-index:1; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem 5rem; margin-top:3.5rem; }
.faq-col-h { font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vi); margin-bottom:1.5rem; padding-bottom:.55rem; border-bottom:1.5px solid rgba(0,113,227,.2); }
.faq-item { border-bottom:1px solid var(--b0); }
.faq-q { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; cursor:pointer; gap:1rem; font-size:.87rem; font-weight:500; color:var(--tx2); transition:color .18s; }
.faq-q:hover,.faq-item.open .faq-q { color:var(--tx); }
.faq-tog { flex-shrink:0; width:20px; height:20px; border-radius:5px; background:var(--bg2); border:1px solid var(--b1); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.78rem; color:var(--tx3); transition:all .2s; }
.faq-item.open .faq-tog { background:var(--vi); border-color:var(--vi); color:#fff; transform:rotate(45deg); }
.faq-a { font-size:.84rem; line-height:1.78; color:var(--tx3); max-height:0; overflow:hidden; transition:max-height .35s ease,padding .35s ease; font-weight:300; }
.faq-item.open .faq-a { max-height:40rem; padding-bottom:1.05rem; }

/* ── CTA ── */
#cta { padding:9rem 5%; text-align:center; position:relative; overflow:hidden; z-index:1; background:var(--bg); }
.cta-glow { position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:80%; height:200%; background:radial-gradient(ellipse,rgba(0,113,227,.06) 0%,transparent 58%); pointer-events:none; }
.cta-h2 { font-family:var(--serif); font-size:clamp(2.2rem,4.5vw,4rem); font-weight:400; line-height:1.1; color:var(--tx); margin-bottom:1rem; position:relative; }
.cta-h2 em { color:var(--vi); }
.cta-sub { font-size:.95rem; font-weight:300; color:var(--tx2); line-height:1.76; max-width:44ch; margin:0 auto 2.5rem; position:relative; }
.cta-acts { display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; position:relative; }

/* ── FOOTER ── */
footer { background:var(--bg1); border-top:1px solid var(--b0); padding:3.8rem 5% 2rem; position:relative; z-index:1; }
.ft-top { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2rem; padding-bottom:2.5rem; margin-bottom:2rem; border-bottom:1px solid var(--b0); }
.ft-logo { font-family:var(--sans); font-size:1.15rem; font-weight:700; letter-spacing:-.04em; color:var(--tx); text-decoration:none; }
.ft-logo em { color:var(--vi); font-style:normal; }
.ft-tag { font-size:.76rem; font-weight:300; color:var(--tx3); margin-top:.3rem; }
.ft-links { display:flex; gap:2rem; flex-wrap:wrap; align-items:center; }
.ft-links a { font-size:.8rem; color:var(--tx3); text-decoration:none; transition:color .18s; }
.ft-links a:hover { color:var(--tx2); }
.ft-bot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.76rem; color:var(--tx3); }
.ft-bot a { color:var(--vi); text-decoration:none; }

/* ── REVEAL ── */
.js .rev { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.js .rev.vis { opacity:1; transform:translateY(0); }
.rd1{transition-delay:.12s;} .rd2{transition-delay:.24s;} .rd3{transition-delay:.36s;}

@media(max-width:960px){
  #hero{grid-template-columns:1fr;text-align:center;}
  .hero-sub,.hero-stats{margin-left:auto;margin-right:auto;}
  .hero-acts{justify-content:center;}
  .hero-r{order:-1;}
  .feat-grid{grid-template-columns:1fr;}
  .setup-inner,.calc-inner{grid-template-columns:1fr;}
  .setup-visual,.how-display{display:none;}
  #metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .faq-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .tabs-nav{flex-wrap:wrap;}
  /* Wizard mobile */
  .wizard-shell{flex-direction:column;min-height:unset;}
  .wiz-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--b0);padding:0;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .wiz-step-item{flex-direction:column;align-items:center;text-align:center;padding:.75rem 1rem;min-width:75px;gap:.4rem;flex:1;border-bottom:3px solid transparent;}
  .wiz-step-item.active{border-bottom-color:var(--vi);background:rgba(0,113,227,.05);}
  .wiz-step-sub{display:none;}
  .wiz-pane{padding:1.4rem;}
  .wiz-options{grid-template-columns:1fr;}
  .wiz-toggle{flex-direction:column;}
  .wiz-footer{padding:.9rem 1.4rem;}
  .calc-inner{gap:2rem;}
  .tab-grid{grid-template-columns:1fr;}
}

/* ── FIXES: focus, mobile nav, wizard states, motion ── */
:focus-visible { outline:2px solid var(--vi); outline-offset:2px; border-radius:4px; }
.nav-toggle { display:none; width:36px; height:32px; align-items:center; justify-content:center; background:var(--surf); border:1px solid var(--b1); border-radius:6px; color:var(--tx); cursor:pointer; }
.wiz-btn-next:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.wiz-btn-next:disabled:hover { background:var(--vi); }
.wiz-step-item[aria-disabled="true"] { cursor:not-allowed; }
.wiz-step-item.skipped .wiz-num { opacity:.45; }
.wiz-step-item.skipped .wiz-step-name { text-decoration:line-through; }
@media(max-width:960px){
  .nav-r { gap:.6rem; }
  .nav-toggle { display:inline-flex; }
  .nav-signin { display:none; }                 /* keeps the bar from overflowing */
  nav.open .nav-signin-m { display:block; }     /* shown inside the mobile menu */
  nav.open .nav-links { display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:rgba(247,247,249,.98); border-bottom:1px solid var(--b0); padding:.4rem 5%; }
  nav.open .nav-links a { display:block; padding:.8rem 0; font-size:.95rem; }
  #hero { min-height:auto; padding-top:6.5rem; gap:3rem; }
  .hero-r { order:0; }
}
/* Narrow phones: one metric per row. Greek unit words ("εφαρμογές") are far
   longer than the English ones and can't fit a half-width cell at 2.4rem —
   in two columns they force the whole page wider than the viewport. */
@media(max-width:520px){
  #metrics{grid-template-columns:1fr;}
  .metric{padding:2rem 1.6rem;}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  html { scroll-behavior:auto; }
  .js .rev { opacity:1; transform:none; }
}

/* ═════════ NEW COMPONENTS ═════════ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:1rem; top:-3rem; z-index:400; background:var(--vi); color:#fff; padding:.5rem .9rem; border-radius:6px; font-size:.8rem; font-weight:600; text-decoration:none; }
.skip-link:focus { top:.6rem; }

/* ── Audience switch ── */
.aud-sw { display:inline-flex; background:var(--surf); border:1px solid var(--b1); border-radius:100px; padding:3px; margin-bottom:1.4rem; animation:fu .5s ease both; }
.aud-sw button { font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--tx2); background:none; border:none; padding:.4rem 1rem; border-radius:100px; cursor:pointer; transition:background .18s,color .18s; }
.aud-sw button[aria-pressed="true"] { background:var(--vi); color:#fff; box-shadow:0 2px 10px rgba(0,113,227,.3); }
[data-aud="venue"] .aud-staff, [data-aud="staff"] .aud-venue { display:none!important; }

/* ── Manager dashboard preview ── */
#dashboard { padding:9rem 5%; position:relative; z-index:1; background:var(--bg1); border-bottom:1px solid var(--b0); }
.dash { margin-top:3.5rem; background:var(--surf); border:1px solid var(--b0); border-radius:18px; box-shadow:0 20px 60px rgba(13,13,26,.08); overflow:hidden; }
.dash-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.4rem; border-bottom:1px solid var(--b0); background:var(--bg); flex-wrap:wrap; }
.dash-venue { display:flex; align-items:center; gap:.7rem; }
.dash-venue-ico { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--vi),#4338CA); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.dash-venue-name { font-size:.9rem; font-weight:600; }
.dash-venue-sub { font-family:var(--mono); font-size:.62rem; color:var(--tx3); }
.dash-demo { font-family:var(--mono); font-size:.62rem; color:var(--tx3); background:var(--bg2); padding:.2rem .5rem; border-radius:4px; }
.dash-tabs { display:flex; gap:.25rem; background:var(--bg1); border:1px solid var(--b0); border-radius:9px; padding:3px; }
.dash-tab { font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--tx2); background:none; border:none; padding:.4rem .9rem; border-radius:7px; cursor:pointer; }
.dash-tab[aria-selected="true"] { background:var(--surf); color:var(--tx); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.dash-panel { padding:1.6rem 1.4rem 1.8rem; }
.dash-panel[hidden] { display:none; }
.dash-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.4rem; }
.dash-kpi { background:var(--bg); border:1px solid var(--b0); border-radius:12px; padding:1rem 1.1rem; }
.dash-kpi-lbl { font-size:.72rem; color:var(--tx3); font-weight:500; }
.dash-kpi-val { font-family:var(--serif); font-size:1.9rem; line-height:1.1; margin-top:.2rem; }
.dash-kpi-delta { font-family:var(--mono); font-size:.65rem; color:var(--gr); margin-top:.15rem; }
.dash-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:1.2rem; }
.dash-card { border:1px solid var(--b0); border-radius:12px; padding:1.1rem 1.2rem; }
.dash-card-h { font-size:.8rem; font-weight:600; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:baseline; }
.dash-card-h small { font-family:var(--mono); font-size:.62rem; color:var(--tx3); font-weight:400; }
.dash-chart { display:flex; align-items:flex-end; gap:.55rem; height:150px; }
.dash-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:.35rem; height:100%; justify-content:flex-end; }
.dash-col-track { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; min-height:0; }
.dash-col-amt, .dash-col-lbl { flex-shrink:0; }
.dash-bar-v { width:100%; max-width:34px; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,var(--vi2),var(--vi)); transform-origin:bottom; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.dash-col:last-child .dash-bar-v { background:linear-gradient(180deg,#34D399,var(--gr)); }
.dash-col-lbl { font-family:var(--mono); font-size:.6rem; color:var(--tx3); }
.dash-col-amt { font-family:var(--mono); font-size:.6rem; color:var(--tx2); }
.dash-list { display:flex; flex-direction:column; }
.dash-li { display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--b0); font-size:.8rem; }
.dash-li:last-child { border-bottom:none; }
.dash-li-ava { width:28px; height:28px; border-radius:8px; background:var(--bg1); display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; }
.dash-li-main { flex:1; min-width:0; }
.dash-li-sub { font-family:var(--mono); font-size:.6rem; color:var(--tx3); }
.dash-li-amt { font-family:var(--mono); font-weight:600; }
.dash-table-wrap { overflow-x:auto; }
.dash-table { width:100%; border-collapse:collapse; font-size:.82rem; min-width:560px; }
.dash-table th { text-align:left; font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3); padding:.55rem .6rem; border-bottom:1px solid var(--b1); }
.dash-table td { padding:.7rem .6rem; border-bottom:1px solid var(--b0); }
.dash-table td.num, .dash-table th.num { text-align:right; font-family:var(--mono); }
.dash-chip { display:inline-block; font-family:var(--mono); font-size:.6rem; padding:.15rem .45rem; border-radius:4px; background:rgba(0,113,227,.08); color:var(--vi); }
.dash-share { display:flex; align-items:center; gap:.5rem; justify-content:flex-end; }
.dash-share-bar { width:60px; height:5px; background:var(--bg2); border-radius:3px; overflow:hidden; }
.dash-share-bar span { display:block; height:100%; background:var(--vi); }
.dash-note { font-family:var(--mono); font-size:.62rem; color:var(--tx3); margin-top:.9rem; }
.dash-score { display:flex; align-items:baseline; gap:.6rem; margin-bottom:1rem; }
.dash-score-val { font-family:var(--serif); font-size:3rem; line-height:1; }
.dash-stars { color:#F59E0B; letter-spacing:.1em; }
.dash-cat { display:grid; grid-template-columns:110px 1fr 36px; align-items:center; gap:.7rem; font-size:.78rem; margin-bottom:.6rem; }
.dash-cat-bar { height:6px; background:var(--bg2); border-radius:3px; overflow:hidden; }
.dash-cat-bar span { display:block; height:100%; background:#F59E0B; }
.dash-quote { font-size:.82rem; line-height:1.6; color:var(--tx2); padding:.7rem 0; border-bottom:1px solid var(--b0); }
.dash-quote:last-child { border-bottom:none; }
.dash-quote-meta { font-family:var(--mono); font-size:.6rem; color:var(--tx3); margin-top:.25rem; }

/* ── Testimonials ── */
#testimonials { padding:9rem 5%; position:relative; z-index:1; background:var(--bg); }
.tm-track { display:grid; grid-auto-flow:column; grid-auto-columns:min(420px,85%); gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:3rem; padding-bottom:1rem; scrollbar-width:thin; }
.tm-card { scroll-snap-align:start; background:var(--surf); border:1px solid var(--b0); border-radius:16px; padding:2rem; display:flex; flex-direction:column; gap:1.2rem; }
.tm-quote { font-family:var(--serif); font-size:1.25rem; line-height:1.45; }
.tm-who { margin-top:auto; font-size:.82rem; }
.tm-who strong { display:block; }
.tm-who span { color:var(--tx3); font-size:.75rem; }
.tm-ctrls { display:flex; gap:.5rem; margin-top:1rem; }
.tm-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--b1); background:var(--surf); color:var(--tx); cursor:pointer; font-size:1rem; }
.tm-btn:hover { border-color:var(--b2); }

/* ── Contact / lead form ── */
#contact { padding:9rem 5%; position:relative; z-index:1; background:var(--bg); overflow:hidden; }
.contact-inner { display:grid; grid-template-columns:1fr 1.1fr; gap:4.5rem; align-items:start; position:relative; }
.contact-ways { display:flex; flex-direction:column; gap:.7rem; margin-top:2rem; }
.contact-way { display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; background:var(--surf); border:1px solid var(--b0); border-radius:12px; text-decoration:none; color:var(--tx); transition:border-color .18s; }
.contact-way:hover { border-color:rgba(0,113,227,.35); }
.contact-way-ico { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-way-ico svg { width:18px; height:18px; }
.contact-way strong { display:block; font-size:.86rem; }
.contact-way span { font-size:.74rem; color:var(--tx3); }
.ico-wa { background:#25D366; color:#fff; } .ico-vb { background:#7360F2; color:#fff; } .ico-cal { background:var(--vi); color:#fff; } .ico-mail { background:var(--bg2); color:var(--tx); }
.form-card { background:var(--surf); border:1px solid var(--b0); border-radius:18px; padding:2.2rem; box-shadow:0 12px 40px rgba(0,0,0,.05); }
.form-card h3 { font-family:var(--serif); font-size:1.4rem; font-weight:400; margin-bottom:.3rem; }
.form-card > p { font-size:.84rem; color:var(--tx2); margin-bottom:1.5rem; }
.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:end; }
.f-field { display:flex; flex-direction:column; gap:.4rem; }
.f-field.full { grid-column:1/-1; }
.f-field label { font-size:.76rem; font-weight:600; color:var(--tx2); }
.f-field label .opt { font-weight:400; color:var(--tx3); }
.f-field input, .f-field select, .f-field textarea { font:inherit; font-size:.9rem; color:var(--tx); background:var(--bg); border:1px solid var(--b1); border-radius:8px; padding:.65rem .8rem; width:100%; transition:border-color .15s, box-shadow .15s; }
.f-field textarea { min-height:96px; resize:vertical; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus { outline:none; border-color:var(--vi); box-shadow:0 0 0 3px rgba(0,113,227,.15); }
.f-field input[aria-invalid="true"], .f-field select[aria-invalid="true"] { border-color:var(--re); }
.f-consent { grid-column:1/-1; display:flex; gap:.6rem; align-items:flex-start; font-size:.78rem; color:var(--tx2); line-height:1.5; }
.f-consent input { margin-top:.2rem; accent-color:var(--vi); width:16px; height:16px; flex-shrink:0; }
.f-consent a { color:var(--vi); }
.f-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.f-submit { grid-column:1/-1; margin-top:.4rem; background:var(--vi); color:#fff; border:none; border-radius:9px; padding:.85rem 1.4rem; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; box-shadow:0 4px 18px rgba(0,113,227,.28); transition:background .18s; }
.f-submit:hover { background:var(--vi-dk); }
.f-submit:disabled { opacity:.6; cursor:wait; }
.f-msg { grid-column:1/-1; font-size:.84rem; border-radius:8px; padding:.75rem 1rem; }
.f-msg[hidden] { display:none; }
.f-msg.ok { background:rgba(4,120,87,.08); color:var(--gr); border:1px solid rgba(4,120,87,.2); }
.f-msg.err { background:rgba(185,28,28,.06); color:var(--re); border:1px solid rgba(185,28,28,.2); }

/* ── Floating contact ── */
.fab { position:fixed; right:calc(1.2rem + env(safe-area-inset-right,0px)); bottom:calc(1.2rem + env(safe-area-inset-bottom,0px)); z-index:250; display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
.fab-main { width:54px; height:54px; border-radius:50%; border:none; background:#25D366; color:#fff; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; transition:transform .18s; }
.fab-main:hover { transform:scale(1.05); }
.fab-main svg { width:26px; height:26px; }
.fab-menu { display:flex; flex-direction:column; gap:.45rem; align-items:flex-end; }
.fab-menu[hidden] { display:none; }
.fab-item { display:flex; align-items:center; gap:.55rem; background:var(--surf); border:1px solid var(--b1); color:var(--tx); text-decoration:none; font-size:.8rem; font-weight:600; padding:.5rem .85rem .5rem .55rem; border-radius:100px; box-shadow:0 4px 14px rgba(0,0,0,.1); }
.fab-item .contact-way-ico { width:26px; height:26px; border-radius:50%; }
.fab-item .contact-way-ico svg { width:14px; height:14px; }

/* ── Sub-pages ── */
.page { position:relative; z-index:1; padding:8rem 5% 6rem; max-width:1100px; margin:0 auto; }
.page-narrow { max-width:760px; }
.page h1 { font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:400; line-height:1.1; margin-bottom:1rem; }
.page h1 em { color:var(--vi); }
.page-lede { font-size:1rem; font-weight:300; line-height:1.75; color:var(--tx2); max-width:58ch; }
.legal { margin-top:2.5rem; }
.legal h2 { font-family:var(--serif); font-size:1.35rem; font-weight:400; margin:2.2rem 0 .6rem; }
.legal p, .legal li { font-size:.9rem; line-height:1.8; color:var(--tx2); }
.legal p + p { margin-top:.7rem; }
.legal ul { padding-left:1.2rem; margin:.5rem 0; }
.legal a { color:var(--vi); }
.legal-meta { font-family:var(--mono); font-size:.7rem; color:var(--tx3); margin-top:.8rem; }
.signup-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; margin-top:3rem; align-items:start; }
.steps { list-style:none; display:flex; flex-direction:column; gap:1rem; counter-reset:st; }
.steps li { counter-increment:st; display:grid; grid-template-columns:36px 1fr; gap:.9rem; background:var(--surf); border:1px solid var(--b0); border-radius:12px; padding:1.1rem; }
.steps li::before { content:counter(st); width:32px; height:32px; border-radius:9px; background:var(--vi); color:#fff; font-family:var(--mono); font-weight:600; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.steps strong { display:block; font-size:.9rem; margin-bottom:.2rem; }
.steps span { font-size:.82rem; color:var(--tx2); line-height:1.6; }
.needs { margin-top:1.6rem; background:var(--bg1); border-radius:12px; padding:1.2rem 1.3rem; }
.needs h3 { font-size:.8rem; font-weight:600; margin-bottom:.6rem; }
.needs ul { padding-left:1.1rem; font-size:.82rem; color:var(--tx2); line-height:1.8; }
.nf { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6rem 5%; position:relative; z-index:1; gap:1rem; }
.nf-code { font-family:var(--serif); font-size:clamp(5rem,14vw,9rem); line-height:1; color:var(--vi); }
.nf p { color:var(--tx2); max-width:44ch; line-height:1.7; }
.nf-acts { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:.8rem; }

@media(max-width:960px){
  .dash-kpis { grid-template-columns:repeat(2,1fr); }
  .dash-grid { grid-template-columns:1fr; }
  .contact-inner, .signup-grid { grid-template-columns:1fr; gap:2.5rem; }
  .f-grid { grid-template-columns:1fr; }
  .dash-bar { padding:.8rem 1rem; }
  .dash-tabs { width:100%; order:3; }
  .dash-tab { flex:1; padding:.4rem .4rem; }
  .dash-panel { padding:1.2rem 1rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce){ .tm-track { scroll-behavior:auto; } }


/* ── DISPLAY NUMERALS ──
   These used a serif italic for presence. With one sans family, weight and
   tight tracking do that job instead; tabular figures keep columns aligned. */
.hs-num, .calc-result-val, .calc-col-val, .metric-num,
.dash-kpi-val, .dash-score-val, .nf-code {
  font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.wiz-pane-title, .wiz-sum-title, .calc-form h3 { font-weight:600; letter-spacing:-.01em; }
/* eyebrows were a mono face; uppercase + tracking reads the same in one family */
.eyebrow, .faq-col-h, .feat-tag, .coming-soon, .wiz-step-sub,
.wiz-sum-lbl, .dash-kpi-delta { letter-spacing:.12em; }


/* ══════════════════════════════════════════════════════════════════
   INK WASH — visual language from the redesign mockup.
   Overrides sit last so they win without touching the rules above.
   ══════════════════════════════════════════════════════════════════ */

/* ── headings are ONE ink colour; the accent never appears in text ── */
h1.hero-h1 em, h1.hero-h1 .ac, .sec-h2 em, .cta-h2 em, .page h1 em,
.ft-logo em, .nf-code { color:inherit; }
.cta-h2 em { color:#fff; }
h1.hero-h1, .sec-h2, .cta-h2, .page h1 { font-weight:400; letter-spacing:-.025em; }
h1.hero-h1 em, .sec-h2 em, .cta-h2 em, .page h1 em { font-weight:400; }

/* numerals and labels: ink and grey, not accent */
.hs-num, .metric-num .unit, .calc-result-val .unit { color:var(--tx); }
.eyebrow, .faq-col-h, .feat-tag, .wiz-step-sub { color:var(--tx3); font-weight:500; text-transform:none; letter-spacing:.01em; }
.eyebrow { font-size:.8125rem; }
.badge, .badge-vi, .badge-cy, .badge-gr { background:var(--bg1); border:1px solid var(--b1); color:var(--tx2); }
.logo-dot { background:var(--tx); }

/* ── buttons: pill, filled blue primary, hairline secondary ── */
.btn-p, .nav-cta, .f-submit, .wiz-btn-next, .wiz-sum-cta, .p-pay-btn {
  background:var(--vi); color:#fff; border:1px solid var(--vi);
  border-radius:980px; box-shadow:none; font-weight:500;
}
.btn-p:hover, .nav-cta:hover, .f-submit:hover, .wiz-btn-next:hover,
.wiz-sum-cta:hover, .p-pay-btn:hover { background:var(--vi2); border-color:var(--vi2); opacity:1; }
.btn-s, .nav-signin, .wiz-btn-prev, .tm-btn {
  background:transparent; color:var(--tx); border:1px solid var(--b2);
  border-radius:980px; box-shadow:none; font-weight:500;
}
.btn-s:hover, .nav-signin:hover, .wiz-btn-prev:hover, .tm-btn:hover { border-color:var(--tx); color:var(--tx); background:transparent; }
.btn-p, .btn-s { padding:.8125rem 1.6rem; font-size:.9375rem; }
.nav-cta, .nav-signin { padding:.5rem 1.1rem; font-size:.875rem; }

/* ── surfaces: hairline borders, softer radius, no heavy shadow ── */
.feat-card, .step, .dash-card, .tm-card, .form-card, .contact-way,
.wiz-opt, .wiz-toggle-opt, .calc-col, .tab-pane, .needs, .price-card {
  border-radius:16px; box-shadow:none; border:1px solid var(--b0); background:var(--surf);
}
.feat-card:hover, .contact-way:hover { background:var(--surf); border-color:var(--b2); }
.wiz-opt.selected, .wiz-toggle-opt.selected { border-color:var(--vi); background:rgba(0,113,227,.05); box-shadow:none; }
.wizard-shell, .dash-shell, .tabs-nav { border-radius:16px; box-shadow:none; border:1px solid var(--b0); }

/* ── one ground everywhere ── */
body, #setup, #calculator, #features, #dashboard, #tabs-section,
#faq, #contact, #testimonials, #strip { background:var(--bg); }
#metrics { background:var(--b0); }
.metric { background:var(--bg); }

/* ── dark CTA band, as in the mockup ── */
#cta { background:var(--tx); border-radius:22px; }
#cta .btn-p, #cta .btn-s { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
#cta .btn-p:hover, #cta .btn-s:hover { border-color:#fff; background:rgba(255,255,255,.08); }

/* ── form controls ── */
.f-field input, .f-field select, .f-field textarea { border-radius:10px; border-color:var(--b2); }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus { outline:none; border-color:var(--vi); }
:focus-visible { outline:2px solid var(--vi); outline-offset:3px; }

/* ── PHONE: light handset on a soft stage, as in the mockup ──────── */
/* fee-coverage toggle — the optional charge in the pricing table, shown in situ */
/* blue stays on controls: the step chip keeps it, the label goes back to ink */
.wiz-step-item.active .wiz-step-name{ color:var(--tx); font-weight:600; }
.faq-col-h{ color:var(--tx3); }

/* ══════════════════════════════════════════════════════════════════
   ONE CONTINUOUS PAGE
   The grids above used "gap:1px over a background" to paint hairlines
   between cells — which reads as one big box cut into squares. Content
   now sits on the single ground, separated by space alone. Borders are
   kept only where they mark something you can actually click.
   ══════════════════════════════════════════════════════════════════ */

/* feature grid: real gaps, no cell dividers, no containing box */
.feat-grid{
  gap:clamp(1.5rem,3vw,2.75rem); background:transparent;
  border:none; border-radius:0; overflow:visible;
}
.feat-card{
  background:transparent; border:none; border-radius:0;
  padding:0; box-shadow:none;
}
.feat-card:hover{ background:transparent; border:none; }
.feat-card::after{ display:none; }

/* metrics: no vertical dividers, no banding rules */
#metrics{
  background:transparent; border-top:none; border-bottom:none;
  gap:clamp(1.5rem,3vw,2.5rem); padding-inline:5%;
}
.metric{ background:transparent; padding:0; }
.metric:hover{ background:transparent; }

/* trust strip: no banding rules either */
#strip{ border-top:none; border-bottom:none; background:transparent; }

/* solutions cards sit on the ground too */
.tab-grid > *{ background:transparent; border:none; box-shadow:none; }
.tab-pane{ border:none; background:transparent; }

/* borders stay only on things you click or type into */
.wiz-opt, .wiz-toggle-opt, .contact-way, .form-card, .needs,
.dash-shell, .wizard-shell, .tabs-nav{ border:1px solid var(--b0); }
.step, .dash-card, .tm-card, .calc-col, .price-card{ border:none; background:transparent; }

/* icon tiles were tinted with the retired violet — neutralise them */
.feat-ico, .step-ico, .contact-way-ico, .tab-ico{
  background:var(--bg1); border:1px solid var(--b0); color:var(--tx2);
}

/* ══════════════════════════════════════════════════════════════════
   PHONE — dark again.
   A white handset on a white page had almost no contrast and the small
   type inside was unreadable. Dark ink gives the very light page its
   focal point and lifts the screen text to full contrast.
   ══════════════════════════════════════════════════════════════════ */
/* icon tiles and tags are decoration, not controls — so they take ink, not blue */
.feat-icon-wrap, .tab-card-ico, .dash-venue-ico{
  background:var(--bg1); border:1px solid var(--b0);
}
.feat-icon-wrap svg, .tab-card-ico svg, .dash-venue-ico svg{ stroke:var(--tx2); }
.feat-tag{
  background:var(--bg1); border:1px solid var(--b0); color:var(--tx3);
  text-transform:none; letter-spacing:.01em; border-radius:6px; padding:.25rem .6rem;
}

/* the page had a fixed 60px graph-paper grid painted over everything —
   that was the "squares", and why the ground never read as one surface */
body::before{ display:none; }

/* no section-level rules — the page is one surface, sections are separated
   by space. The nav keeps its border; the FAQ keeps its row dividers. */
#setup, #calculator, #dashboard, #metrics, #features, #tabs-section,
#faq, #contact, #testimonials{ border-top:none; border-bottom:none; }
#dashboard{ background:var(--bg); }
footer{ background:var(--bg); border-top:1px solid var(--b0); }

/* hero stats were a non-wrapping flex row — they ran past the viewport on
   phones and body{overflow-x:hidden} hid the damage instead of fixing it */
@media(max-width:560px){
  .hero-stats{ flex-wrap:wrap; gap:1.1rem 1.75rem; margin-top:2.25rem; }
  .hs-div{ display:none; }
  .hs-num{ font-size:1.7rem; }
}

/* ── HERO without the phone: one centred column ─────────────────── */
#hero{ max-width:none; display:block; padding:clamp(3.5rem,8vw,6.5rem) 5% clamp(3rem,6vw,5rem); }
.hero-l{
  max-width:780px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
h1.hero-h1{ max-width:16ch; }
.hero-sub{ margin-left:auto; margin-right:auto; }
.hero-acts{ justify-content:center; }
.hero-stats{ justify-content:center; }
.aud-sw{ margin-inline:auto; }

/* decorative colour washes — removed so the ground stays one constant surface
   (these were also the elements overflowing the viewport on phones) */
.glow-v, .glow-c, .cta-glow{ display:none; }

/* icons must actually paint: these SVGs are stroke-drawn, so give them a
   stroke explicitly (they previously got it from an inline var that no
   longer exists, which made them invisible) */
.tab-card-ico svg, .feat-icon-wrap svg, .dash-venue-ico svg{
  stroke:var(--tx2); fill:none; stroke-width:1.5;
}

/* ── AUDIENCE SWITCH on phones ──────────────────────────────────
   nav is position:fixed at 65px tall, but the hero's top padding was
   56px — so the switch sat underneath it. Clear the nav, then give the
   control real width and touch targets so the two options read as a
   choice rather than a label with a button next to it. */
@media(max-width:860px){
  #hero{ padding-top:7.5rem; }
  .aud-sw{
    display:flex; width:100%; max-width:330px; padding:4px;
    margin-bottom:1.75rem; border-color:var(--b2);
  }
  .aud-sw button{
    flex:1 1 0; padding:.62rem .5rem; font-size:.85rem; line-height:1.25;
    border-radius:100px; white-space:normal;
  }
  .aud-sw button[aria-pressed="false"]{ color:var(--tx); }
}

/* Landing pages follow the site's existing type, colour and spacing system. */
.landing { max-width:1060px; margin:0 auto; padding:9rem 5% 5rem; }
.landing-hero { max-width:850px; margin-bottom:3rem; }
.breadcrumb { color:var(--tx3); font-size:.9rem; }
.landing h1 { font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.14; font-weight:400; letter-spacing:-.03em; margin:1rem 0 1.5rem; overflow-wrap:anywhere; }
.landing-intro { font-size:1.15rem; line-height:1.75; color:var(--tx2); }
.landing-section { padding:2rem 0; border-top:1px solid var(--b0); }
.landing h2 { font-size:clamp(1.3rem,2.8vw,1.8rem); line-height:1.35; font-weight:500; margin:0 0 1rem; }
.landing-section p,.landing-section li { line-height:1.8; color:var(--tx2); margin-bottom:1rem; }
.landing-section ul,.landing-section ol { padding-left:1.4rem; }
.landing-section a,.related-pages a,.text-link,#metrics a { color:var(--vi); text-underline-offset:.2em; }
.landing-cta { background:var(--bg1); border-radius:20px; padding:2rem; margin:2rem 0; }
.landing-cta p { margin-bottom:1.5rem; line-height:1.7; }
.landing-cta .text-link { display:inline-block; margin:1rem; }
.related-pages { border-top:1px solid var(--b0); padding-top:2rem; }
.related-pages a { display:inline-block; margin:.4rem 1.2rem .4rem 0; }
.language-suggestion { position:relative; margin:6rem auto -5rem; max-width:850px; padding:1rem; border:1px solid var(--b1); border-radius:12px; background:var(--surf); z-index:2; }
.language-suggestion a,.language-suggestion button { margin-left:1rem; color:var(--vi); }
.language-suggestion button { background:none; border:0; cursor:pointer; font:inherit; text-decoration:underline; }
.hero-stats { line-height:1.8; font-size:.9rem; color:var(--tx2); }
#metrics { display:block; text-align:center; line-height:1.8; font-size:1.1rem; }
#metrics strong { display:block; margin-bottom:.6rem; }
.hero-h1 { overflow-wrap:normal; }
.wiz-step-item,.wiz-opt,.wiz-toggle-opt { font-family:inherit; color:inherit; text-align:left; width:100%; }
.wiz-step-item { border:0; background:transparent; }
.wiz-opt h3,.tab-card h3 { font-size:1.05rem; font-weight:600; margin-bottom:.65rem; }
.tab-card .text-link { display:block; margin-top:1rem; }
.faq-q { list-style:none; }
.faq-q::-webkit-details-marker { display:none; }
details.faq-item .faq-a { max-height:none; overflow:visible; }
details.faq-item[open] .faq-a { padding-bottom:1.05rem; }
details.faq-item[open] .faq-tog { transform:rotate(45deg); }
.calc-diff.negative .up { color:#a12622; }
.js .rev { opacity:1; transform:none; }
.js.reveal-ready .rev:not(.vis) { opacity:0; transform:translateY(18px); }
html:not(.js) .tab-pane { display:block; }
html:not(.js) .tabs-nav,html:not(.js) .wizard-shell { display:none; }
:focus-visible { outline:3px solid var(--vi); outline-offset:4px; }
@media(max-width:1200px) { .nav-links { display:none; } .nav-toggle { display:inline-flex; } nav.open .nav-links { display:flex; } }
@media(max-width:600px) { .landing { padding-top:7rem; } .landing-cta { padding:1.3rem; } .language-suggestion { margin:5rem 1rem -4rem; } .hero-h1 { font-size:clamp(2rem,8vw,3rem); } }
@media(prefers-reduced-motion:reduce) { .js.reveal-ready .rev:not(.vis) { opacity:1; transform:none; } }
.wiz-option-title,.wiz-option-description { display:block; }
.wiz-option-title { font-size:1.05rem; font-weight:600; margin-bottom:.65rem; }
.wiz-option-description { font-size:.84rem; line-height:1.7; }
.wiz-step-item > span:last-child,.wiz-step-name,.wiz-step-sub { display:block; }
.setup-guide { margin-top:1.4rem; line-height:1.7; }
.setup-guide a { color:var(--vi); }
@media (min-width:961px) and (max-width:1200px) {
  nav.open .nav-links { flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--surf); border-bottom:1px solid var(--b0); padding:.4rem 5%; }
  nav.open .nav-links a { display:block; padding:.8rem 0; }
}
.venue-faq { max-width:850px; margin:2.5rem auto 0; }
.venue-faq > h3 { font-size:1.15rem; margin-bottom:1rem; }
.hero-acts { flex-wrap:wrap; }
@media(max-width:600px) { h1.hero-h1 { font-size:clamp(2rem,8vw,3rem); } }