/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f7f6f3;
  --bg2:#efede8;
  --bg3:#e6e3dc;
  --txt:#0a0908;
  --txt2:#302e2c;
  --txt3:#635f5a;
  --txt4:#9c9892;
  --accent:#6457f9;
  --accent2:#a855f7;
  --accent-light:#ededff;
  --accent-dark:#4a3fe0;
  --grad:linear-gradient(135deg,#6457f9 0%,#a855f7 100%);
  --border:rgba(0,0,0,.07);
  --border2:rgba(0,0,0,.13);
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 8px 32px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.06);
  --glow:0 0 40px rgba(100,87,249,.18);
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --font:'Inter',system-ui,sans-serif;
  --nav-h:76px;
  --W:min(1200px,90vw);
}

/* ═══════════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--txt);font-size:16px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT HELPERS
═══════════════════════════════════════════════════════════════════ */
.W{width:var(--W);margin-left:auto;margin-right:auto}
.section{padding:100px 0}
.section-sm{padding:64px 0}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.section{padding:64px 0}.section-sm{padding:40px 0}}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════════════════ */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.75rem}
.h1{font-size:clamp(2rem,4.5vw,3.8rem);font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--txt)}
.h2{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--txt)}
.h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--txt)}
.h4{font-size:1.1rem;font-weight:700;color:var(--txt)}
.lead{font-size:clamp(1rem,2vw,1.2rem);color:var(--txt3);line-height:1.7;font-weight:400}
.small{font-size:.8rem;color:var(--txt4)}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.75rem;border-radius:100px;font-size:.9rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer}
.btn-primary{background:var(--txt);color:#fff}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 8px 28px rgba(100,87,249,.4)}
.btn-secondary{background:transparent;color:var(--txt);border:1.5px solid var(--border2)}
.btn-secondary:hover{border-color:var(--txt);background:var(--txt);color:#fff;transform:translateY(-2px)}
.btn-accent{background:var(--grad);color:#fff;box-shadow:0 4px 20px rgba(100,87,249,.3)}
.btn-accent:hover{background:var(--grad);filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 10px 32px rgba(100,87,249,.45)}
.btn-ghost{padding:.6rem 1.2rem;border-radius:100px;font-size:.85rem;font-weight:600;color:var(--txt3);transition:all .2s}
.btn-ghost:hover{color:var(--txt);background:var(--bg2)}

/* ═══════════════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════════════ */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:rgba(248,247,244,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:all .3s}
#nav.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);width:var(--W);margin:0 auto}
.nav-logo{font-size:1.15rem;font-weight:900;letter-spacing:-.04em;color:var(--txt)}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-links a{padding:.55rem .95rem;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--txt2);transition:all .18s;position:relative}
.nav-links a:hover{color:var(--accent);background:rgba(100,87,249,.06)}
.nav-links a.active{color:var(--txt);font-weight:600}
.nav-links a.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.nav-cart{position:relative;background:none;border:none;cursor:pointer;color:var(--txt2);padding:.45rem;border-radius:8px;display:flex;align-items:center;transition:all .18s}
.nav-cart:hover{color:var(--accent);background:rgba(100,87,249,.07)}
.nav-cart-badge{position:absolute;top:-2px;right:-4px;background:var(--accent);color:#fff;font-size:.55rem;font-weight:800;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.nav-cart-badge[data-count="0"]{display:none}
/* Language dropdown */
.nav-lang{position:relative}
.nav-lang-trigger{display:flex;align-items:center;gap:.35rem;padding:.32rem .65rem;border-radius:8px;font-size:.72rem;font-weight:700;color:var(--txt2);background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:all .15s;letter-spacing:.04em;user-select:none}
.nav-lang-trigger:hover{background:var(--bg3)}
.nav-lang-arrow{font-size:.55rem;opacity:.5;transition:transform .2s}
.nav-lang.open .nav-lang-arrow{transform:rotate(180deg)}
.nav-lang-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.1);overflow:hidden;min-width:90px;z-index:200}
.nav-lang.open .nav-lang-menu{display:block}
.nav-lang-menu button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .85rem;font-size:.75rem;font-weight:600;color:var(--txt2);background:none;border:none;cursor:pointer;transition:background .12s;letter-spacing:.04em}
.nav-lang-menu button:hover{background:var(--bg2)}
.nav-lang-menu button.active{color:var(--accent);background:var(--accent-light)}
.nav-lang-flag{font-size:.85rem}
.nav-cta{padding:.55rem 1.1rem;border-radius:100px;background:var(--grad);color:#fff;font-size:.82rem;font-weight:600;transition:all .22s;box-shadow:0 2px 12px rgba(100,87,249,.3)}
.nav-cta:hover{filter:brightness(1.1);box-shadow:0 4px 20px rgba(100,87,249,.45);transform:translateY(-1px)}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:.5rem;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2px;background:var(--txt);border-radius:2px;transition:all .25s}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-cta{display:none}
  .nav-lang{display:none}
  .nav-logo-img{height:44px}
}

/* Mobile menu — side drawer */
#mob-backdrop{display:none;position:fixed;inset:0;z-index:198;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);transition:opacity .3s}
#mob-backdrop.open{display:block}
#mob-menu{position:fixed;top:0;right:0;bottom:0;width:min(300px,86vw);z-index:199;background:var(--bg);transform:translateX(110%);transition:transform .32s cubic-bezier(.25,.46,.45,.94);display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.18);overflow-y:auto}
#mob-menu.open{transform:translateX(0)}
.mob-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.25rem;border-bottom:1px solid var(--border)}
.mob-close{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt);font-size:1.1rem;transition:background .15s}
.mob-close:hover{background:var(--border2)}
.mob-nav{padding:.75rem;flex:1;display:flex;flex-direction:column;gap:.25rem}
#mob-menu a{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-radius:10px;font-size:1rem;font-weight:600;color:var(--txt);transition:all .15s}
#mob-menu a:hover,#mob-menu a.mob-active{background:var(--accent-light);color:var(--accent)}
.mob-icon{width:32px;height:32px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.mob-menu-footer{padding:1rem 1.25rem 1.5rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.75rem}
.mob-menu-footer .btn{text-align:center;width:100%}
/* Burger animation */
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════════════════════════════════════════════
   PAGES (SPA)
═══════════════════════════════════════════════════════════════════ */
.page{display:none;padding-top:var(--nav-h)}
.page.active{display:block;min-height:calc(100vh - var(--nav-h))}

/* ═══════════════════════════════════════════════════════════════════
   HOME HERO — Live Code Studio  (v21)
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   HERO v4 — CINEMATIC FULL-BLEED
═══════════════════════════════════════════════════════════════════ */
/* ── HERO v6 ── */
#hero{background:var(--bg);padding-top:var(--nav-h);border-bottom:1px solid var(--border)}
.hero-inner{width:var(--W);max-width:var(--W);margin:0 auto;padding:5.5rem 1.5rem 4.5rem;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:3rem;padding:3.5rem 1.25rem 3rem}}
.hero-left{display:flex;flex-direction:column;align-items:flex-start}
.hero-eyebrow{display:flex;align-items:center;gap:.6rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:1.75rem;animation:hero-in .6s ease .05s both}
@keyframes hero-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-ey-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(100,87,249,.4);animation:pulse-dot 1.8s ease-in-out infinite;flex-shrink:0}
.hero-logo-img{display:none}
.hero-title{font-size:clamp(2rem,3.5vw,3.75rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;color:var(--txt);margin-bottom:1.5rem;animation:hero-in .7s cubic-bezier(.22,.68,0,1.05) .18s both}
.hero-title-em{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:clamp(.9rem,1.2vw,1rem);color:var(--txt3);max-width:440px;line-height:1.85;margin-bottom:2.5rem;animation:hero-in .7s ease .32s both}
.hero-actions{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;animation:hero-in .7s ease .45s both}
.hero-btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.6rem;background:var(--txt);color:#fff;border-radius:10px;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .2s;letter-spacing:-.01em}
.hero-btn-primary:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 12px 32px rgba(100,87,249,.35)}
.hero-btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.6rem;background:transparent;color:var(--txt2);border-radius:10px;border:1.5px solid var(--border2);font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s}
.hero-btn-ghost:hover{border-color:var(--txt);color:var(--txt);background:var(--bg2)}
/* right: illustration */
.hero-right{animation:hero-in .8s ease .2s both;padding-top:.5rem;display:flex;align-items:center;justify-content:center}
.hero-illus-wrap{width:100%;max-width:480px}
.hero-illus{width:100%;height:auto;display:block}
@media(max-width:900px){.hero-illus-wrap{max-width:360px;margin:0 auto}}
/* bottom bar */
.hero-bottom-bar{border-top:1px solid var(--border);background:var(--bg2)}
.hbb-inner{display:flex;align-items:center;justify-content:center;padding:1.25rem 1.5rem;gap:0;flex-wrap:wrap}
.hbb-item{display:flex;flex-direction:column;align-items:center;padding:.5rem 2rem;gap:.2rem}
.hbb-num{font-size:1.4rem;font-weight:900;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hbb-lbl{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt4)}
.hbb-sep{width:1px;height:36px;background:var(--border2);flex-shrink:0}
@media(max-width:600px){.hwp{padding:1rem 0}.hbb-item{padding:.5rem 1rem}.hbb-sep{display:none}}
/* hide old hero remnants */
.hero-badge,.hero-chip,.hero-scroll-hint,.hero-stack,.hero-browser,.hchip-a,.hchip-b,.hchip-c,.hero-stats-wrap,.hero-stats-row,.hero-editor,.hero-terminal,.hero-cards,.hcard{display:none!important}
/* ── DOMAIN SEARCH SECTION ── *//* ── DOMAIN SEARCH SECTION ── */
.dss-section{padding:72px 0;background:var(--bg)}
.dss-wrap{background:linear-gradient(135deg,#06040e 0%,#0d0a1e 100%);border-radius:24px;padding:3.5rem;overflow:hidden;position:relative}
.dss-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 80% 50%,rgba(100,87,249,.12),transparent);pointer-events:none}
.dss-head{text-align:center;margin-bottom:2.5rem;position:relative}
.dss-head .eyebrow{color:rgba(168,85,247,.7)}
.dss-h2{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.1;margin:1rem 0 .75rem}
.dss-h2-em{background:linear-gradient(135deg,#6457f9,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dss-lead{color:rgba(255,255,255,.35);font-size:.9rem}
.dss-search-box{max-width:640px;margin:0 auto 2rem;position:relative}
.dss-input-row{display:flex;align-items:center;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;transition:border-color .2s}
.dss-input-row:focus-within{border-color:rgba(100,87,249,.5);box-shadow:0 0 0 3px rgba(100,87,249,.12)}
.dss-si{color:rgba(255,255,255,.3);flex-shrink:0;margin-left:1.1rem}
.dss-input{flex:1;border:none;background:transparent;padding:.95rem 1rem;font-size:1rem;color:#fff;outline:none;font-family:inherit}
.dss-input::placeholder{color:rgba(255,255,255,.25)}
.dss-btn{display:flex;align-items:center;gap:.5rem;background:var(--grad);color:#fff;border:none;padding:.8rem 1.4rem;font-size:.88rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .2s;letter-spacing:-.01em;font-family:inherit;margin:.3rem;border-radius:10px}
.dss-btn:hover{filter:brightness(1.1)}
.dss-tlds{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;max-width:640px;margin:0 auto 1.5rem}
@media(max-width:700px){.dss-tlds{grid-template-columns:repeat(2,1fr)}}
.dss-tld{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:.9rem 1rem;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.25rem;position:relative;text-align:center}
.dss-tld:hover{background:rgba(100,87,249,.12);border-color:rgba(100,87,249,.35);transform:translateY(-2px)}
.dss-tld-ext{font-size:1rem;font-weight:800;color:#fff;font-family:monospace;letter-spacing:.02em}
.dss-tld-price{font-size:.72rem;color:rgba(255,255,255,.45);font-weight:600}
.dss-tld-price small{font-size:.62rem;opacity:.7}
.dss-tld-badge{position:absolute;top:-.5rem;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:.5rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .5rem;border-radius:100px;white-space:nowrap}
.dss-note{text-align:center;font-size:.75rem;color:rgba(255,255,255,.2);max-width:500px;margin:0 auto}
@media(max-width:768px){.dss-wrap{padding:2rem 1.25rem}.dss-section{padding:48px 0}}
/* hide old widgets */
.hdw,.hero-badge,.hero-chip,.hero-scroll-hint,.hero-stack,.hero-browser,.hchip-a,.hchip-b,.hchip-c,.hero-stats-wrap,.hero-stats-row,.hero-editor,.hero-terminal{display:none!important}
.hero-stack{display:flex!important}
.hero-cursor{display:none!important}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Banking app inside iPhone */
.iph-app{position:absolute;inset:0;background:#f2f2f7;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;display:flex;flex-direction:column}
.iph-bank-header{background:linear-gradient(160deg,#1535c4 0%,#1d4ed8 40%,#3730a3 100%);padding:50px 14px 18px;flex-shrink:0}
.iph-bank-toprow{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.iph-bank-avatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#1d4ed8;flex-shrink:0}
.iph-bank-searchbar{flex:1;margin:0 8px;background:rgba(255,255,255,.15);border-radius:100px;height:24px;display:flex;align-items:center;padding:0 9px;gap:5px}
.iph-bank-search-icon{font-size:9px;color:rgba(255,255,255,.65)}
.iph-bank-search-txt{font-size:8px;color:rgba(255,255,255,.5);letter-spacing:.01em}
.iph-bank-icons{display:flex;gap:5px}
.iph-bank-icon-btn{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.iph-bank-acct-label{font-size:8px;color:rgba(255,255,255,.65);text-align:center;margin-bottom:4px;letter-spacing:.03em;font-weight:500}
.iph-bank-balance-main{text-align:center;color:#fff;font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1;margin-bottom:2px}
.iph-bank-balance-main span{font-size:17px;font-weight:500;opacity:.7}

/* Quick actions */
.iph-bank-actions{display:flex;justify-content:space-around;padding:11px 8px 9px;background:#fff;border-bottom:1px solid rgba(0,0,0,.07);flex-shrink:0}
.iph-bank-action{display:flex;flex-direction:column;align-items:center;gap:4px}
.iph-bank-action-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#eef0ff,#e8ecff);display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.iph-bank-action-lbl{font-size:7.5px;color:#374151;font-weight:600;letter-spacing:.01em}

/* Scrollable body */
.iph-bank-body{flex:1;overflow:hidden;display:flex;flex-direction:column}
.iph-bank-section{padding:9px 12px 6px;background:#fff;margin-top:8px}
.iph-bank-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.iph-bank-section-title{font-size:10.5px;font-weight:800;color:#0f172a;letter-spacing:-.02em}
.iph-bank-section-link{font-size:8.5px;color:#2563eb;font-weight:600}
.iph-bank-accts{display:flex;gap:7px;padding-bottom:2px}
.iph-bank-acct-card{flex:1;background:linear-gradient(145deg,#f8f9ff,#f0f4ff);border-radius:12px;padding:8px 9px;border:1px solid rgba(100,87,249,.1)}
.iph-bank-flag{font-size:16px;margin-bottom:3px}
.iph-bank-acct-num{font-size:6.5px;color:#9ca3af;margin-bottom:1px;letter-spacing:.03em}
.iph-bank-acct-currency{font-size:7.5px;color:#6b7280;margin-bottom:2px;font-weight:500}
.iph-bank-acct-amount{font-size:11px;font-weight:800;color:#0f172a;letter-spacing:-.02em}
.iph-bank-tx{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.045)}
.iph-bank-tx:last-child{border-bottom:none}
.iph-bank-tx-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.iph-bank-tx-info{flex:1;min-width:0}
.iph-bank-tx-name{font-size:9px;font-weight:700;color:#0f172a;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iph-bank-tx-date{font-size:7px;color:#9ca3af;margin-top:1px}
.iph-bank-tx-amount{font-size:9.5px;font-weight:700;color:#dc2626;flex-shrink:0}
.iph-bank-tx-amount.pos{color:#059669}

/* Tab bar */
.iph-bank-tabbar{flex-shrink:0;height:54px;background:#fff;border-top:1px solid rgba(0,0,0,.07);display:flex;align-items:center;justify-content:space-around;padding:0 4px;position:relative}
.iph-bank-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 8px}
.iph-bank-tab-icon{font-size:16px}
.iph-bank-tab-label{font-size:7px;color:#9ca3af;font-weight:600;letter-spacing:.02em}
.iph-bank-tab.cur .iph-bank-tab-icon{filter:drop-shadow(0 0 4px rgba(37,99,235,.4))}
.iph-bank-tab.cur .iph-bank-tab-label{color:#2563eb}
.iph-bank-tab-bar-indicator{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:90px;height:3.5px;background:#111;border-radius:2px;opacity:.1}

/* Progressive reveal */
.iph-reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.68,0,1.25)}
.iph-reveal.shown{opacity:1;transform:translateY(0)}

/* Floating metric chips */
.iph-chip{position:absolute;background:rgba(10,8,28,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:.6rem 1rem;font-size:.68rem;font-weight:700;color:#fff;white-space:nowrap;z-index:5}
.iph-chip-val{font-size:1.05rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;line-height:1.2}
.iph-chip-lbl{font-size:.6rem;color:rgba(255,255,255,.38);font-weight:500;margin-top:.2rem}
.iph-chip-a{top:8%;right:-90px;animation:float-bob 4s ease-in-out infinite}
.iph-chip-b{bottom:22%;right:-95px;animation:float-bob 3.6s ease-in-out infinite .7s}
.iph-chip-c{top:40%;left:-95px;animation:float-bob 4.8s ease-in-out infinite 1.4s}
@keyframes float-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:1150px){.iph-chip{display:none}}

/* Stats bar — old rules (overridden by hero v3 CSS above) */

/* pulse dot for header (legacy) */
.iph-pulse-dot{width:5px;height:5px;border-radius:50%;background:#10b981;box-shadow:0 0 6px #10b981;animation:pulse-dot 1.5s ease-in-out infinite;display:inline-block;margin-right:3px}

/* Dark hero — nav override (only when on home page) */
/* no dark-nav override on home — nav is always white */

/* Mobile hero */
@media(max-width:600px){
  #hero{min-height:auto}
  .hero-badge{font-size:.62rem;padding:.3rem .7rem;margin-bottom:1.25rem}
  .hero-title{font-size:clamp(2rem,8vw,2.8rem);margin-bottom:1rem}
  .hero-sub{font-size:.88rem;margin-bottom:1.5rem}
  .hero-actions{flex-direction:column;gap:.5rem;width:100%}
  .iphone{width:200px;height:408px}
}

/* ── MOBILE GLOBAL ─────────────────────────────────────────────── */
@media(max-width:600px){
  /* Hero */
  #hero{padding:2rem 0 2rem;min-height:auto}
  .hero-text-center{padding:0 1.25rem}
  .hero-title{font-size:clamp(1.9rem,7.5vw,2.6rem);margin-bottom:1rem}
  .hero-sub{font-size:.9rem;margin-bottom:1.5rem}
  .hero-badge{font-size:.65rem;padding:.3rem .75rem;margin-bottom:1.25rem}
  .hero-actions{flex-direction:column;gap:.5rem;width:100%;margin-bottom:2rem}
  .hero-actions .btn{width:100%;justify-content:center;padding:.8rem 1.25rem}

  /* Browser mockup - simplify on mobile */
  .hero-visual{width:calc(100vw - 2.5rem);margin:0 auto}
  .hero-chip{display:none}
  .hb-body{grid-template-columns:1fr;min-height:180px}
  .hb-sidebar{display:none}
  .hb-main{padding:1rem;gap:.75rem}
  .hb-hero-blk{height:60px}
  .hb-url{font-size:.65rem;max-width:200px}
  .hb-bar{padding:.5rem .75rem}
  .hb-dot{width:8px;height:8px}

  /* Stats */
  .hero-stats-row{border-radius:12px;width:calc(100vw - 2.5rem)}
  .hero-stat{padding:.9rem .5rem}
  .hero-stat-num{font-size:1.2rem}
  .hero-stat-lbl{font-size:.6rem}

  /* Sections */
  .section{padding:52px 0}
  .section-sm{padding:36px 0}

  /* Service cards */
  .service-card{padding:1.5rem}

  /* Process */
  .process-item{gap:1rem;padding:1.25rem 0}
  .process-num{font-size:2rem;min-width:44px}

  /* Portfolio header row */
  [style*="justify-content:space-between"]{flex-direction:column;align-items:flex-start!important}

  /* Case study hero */
  .cs-hero{padding:48px 0 36px}
  .cs-hero-meta{gap:1rem;flex-direction:column}

  /* Contact */
  .contact-grid{gap:2rem}

  /* About */
  .about-hero{padding:48px 0 32px}

  /* Footer */
  footer .grid-4{grid-template-columns:1fr 1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   CLIENTS LOGO SLIDER
═══════════════════════════════════════════════════════════════════ */
.clients-section{padding:44px 0;border-bottom:1px solid var(--border);background:var(--bg)}
.clients-label{font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--txt4);text-align:center;margin-bottom:1.75rem}
.clients-slider{overflow:hidden;position:relative}
.clients-slider::before,.clients-slider::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.clients-slider::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.clients-slider::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.clients-track{display:flex;gap:3.5rem;width:max-content;animation:clients-slide 28s linear infinite;align-items:center}
.clients-track:hover{animation-play-state:paused}
@keyframes clients-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.client-logo-img{height:32px;width:auto;max-width:120px;filter:grayscale(1);opacity:.4;transition:opacity .25s,filter .25s;object-fit:contain;display:block;flex-shrink:0}
.client-logo-img:hover{filter:grayscale(0);opacity:.85}

/* ═══════════════════════════════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════════════════════════════ */
.marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.875rem 0;background:linear-gradient(90deg,var(--bg2) 0%,rgba(100,87,249,.04) 50%,var(--bg2) 100%);position:relative}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 28s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:.75rem;font-size:.8rem;font-weight:600;color:var(--txt3);white-space:nowrap;letter-spacing:.05em;text-transform:uppercase}
.marquee-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════════════════════════════
   IPHONE SCROLL SECTION
═══════════════════════════════════════════════════════════════════ */
#iphone-section{position:relative;height:280vh;background:var(--bg)}
.iphone-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.iphone-inner{width:var(--W);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.iphone-text-side{position:relative;z-index:1}
.iphone-feature{opacity:0;transform:translateY(20px);transition:all .5s;display:none}
.iphone-feature.active{opacity:1;transform:translateY(0);display:block}
.iphone-visual{display:flex;justify-content:center;align-items:center;position:relative}
@media(max-width:768px){
  #iphone-section{height:auto!important;overflow:hidden}
  .iphone-sticky{position:static!important;height:auto;padding:48px 0}
  .iphone-inner{grid-template-columns:1fr!important;gap:0;display:flex!important;flex-direction:column;align-items:center}
  .iphone-text-side{text-align:center;order:2;padding:1.25rem 1rem 0;width:100%}
  .iphone-text-side .h2{text-align:center}
  .iphone-text-side .eyebrow{text-align:center;display:block}
  .iphone-text-side .lead{text-align:center;margin:0 auto}
  .iphone-text-side [style*="display:flex"]{justify-content:center}
  .iphone-visual{order:1;padding:1rem 5rem}
  .iphone-frame{width:185px;height:377px;border-radius:38px}
  #iphone-mobile{display:none!important}
  .iph-mob-dots{display:flex!important}
}

/* iPhone frame */
.iphone-frame{width:260px;height:530px;border-radius:44px;background:#1a1a1a;border:2px solid rgba(255,255,255,.15);box-shadow:0 40px 80px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.05) inset;position:relative;overflow:hidden;flex-shrink:0}
.iphone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:100px;height:28px;background:#1a1a1a;border-radius:100px;z-index:10}
.iphone-screen{position:absolute;inset:6px;border-radius:38px;background:#0d0d14;overflow:hidden}
.iphone-slides{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);height:100%;width:300%}
.iphone-slide{width:33.333%;height:100%;flex-shrink:0;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:.75rem}

/* Floating cards around iPhone */
.float-card{position:absolute;background:#fff;border-radius:14px;padding:.75rem 1rem;box-shadow:var(--shadow-lg);border:1px solid var(--border);font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:.6rem;animation:float-bob 3s ease-in-out infinite;z-index:5;white-space:nowrap}
.iph-fc-left{left:0;top:18%}
.iph-fc-right{right:0;bottom:22%;animation-delay:.7s}
@media(max-width:768px){
  .iph-fc-left{left:0;top:12%;font-size:.65rem;padding:.5rem .7rem}
  .iph-fc-right{right:0;bottom:16%;font-size:.65rem;padding:.5rem .7rem}
}
@keyframes float-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════════════════════ */
.service-card{background:#fff;border-radius:var(--radius-lg);padding:2rem;border:1px solid var(--border);transition:all .28s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(100,87,249,.06),rgba(168,85,247,.04));opacity:0;transition:opacity .3s}
.service-card::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-100%) skewX(-15deg);pointer-events:none;transition:none}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(100,87,249,.1),0 4px 16px rgba(0,0,0,.06);border-color:rgba(100,87,249,.22)}
.service-card:hover::before{opacity:1}
.service-card:hover::after{animation:shine .55s ease forwards}
.service-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.25rem;background:linear-gradient(135deg,rgba(100,87,249,.12),rgba(168,85,247,.08));border:1px solid rgba(100,87,249,.1);transition:transform .25s,box-shadow .25s}
.service-card:hover .service-icon{transform:scale(1.1) rotate(-4deg);box-shadow:0 8px 24px rgba(100,87,249,.2)}
.service-card h3{font-size:1.1rem;font-weight:700;color:var(--txt);margin-bottom:.5rem}
.service-card p{font-size:.85rem;color:var(--txt3);line-height:1.65}
.service-card .service-arrow{position:absolute;top:1.5rem;right:1.5rem;width:32px;height:32px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--txt4);transition:all .2s;opacity:0}
.service-card:hover .service-arrow{opacity:1;background:var(--accent);color:#fff}

/* ═══════════════════════════════════════════════════════════════════
   PORTFOLIO GRID
═══════════════════════════════════════════════════════════════════ */
.port-filter-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.port-filter-btn{padding:.5rem 1.1rem;border-radius:100px;font-size:.8rem;font-weight:600;color:var(--txt3);background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:all .2s}
.port-filter-btn.active,.port-filter-btn:hover{background:var(--txt);color:#fff;border-color:var(--txt)}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.port-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.port-grid{grid-template-columns:1fr}}
.port-card{border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--border);cursor:pointer;transition:all .28s cubic-bezier(.4,0,.2,1)}
.port-card:hover{transform:translateY(-7px);box-shadow:0 24px 56px rgba(100,87,249,.12),0 4px 16px rgba(0,0,0,.06);border-color:rgba(100,87,249,.2)}
.port-thumb{position:relative;overflow:hidden}
.port-card:hover .port-thumb-inner{transform:scale(1.06)}
.port-thumb-inner{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.port-card.hidden{display:none}
.port-thumb{aspect-ratio:16/10;background:var(--bg2);position:relative;overflow:hidden}
.port-thumb-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;color:rgba(0,0,0,.06);letter-spacing:-.05em}
.port-thumb-badge{position:absolute;top:.6rem;left:.6rem;padding:.25rem .6rem;border-radius:6px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--txt);backdrop-filter:blur(8px)}
.port-info{padding:1.25rem}
.port-info h3{font-size:.95rem;font-weight:700;color:var(--txt);margin-bottom:.3rem}
.port-info p{font-size:.78rem;color:var(--txt3)}
.port-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.75rem}
.port-tag{padding:.2rem .6rem;border-radius:6px;font-size:.65rem;font-weight:600;background:var(--bg2);color:var(--txt3)}

/* ═══════════════════════════════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════════════════════════════ */
.process-item{display:flex;gap:1.5rem;padding:2rem 0;border-bottom:1px solid var(--border)}
.process-item:last-child{border-bottom:none}
.process-num{font-size:clamp(2rem,4vw,3rem);font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.35;letter-spacing:-.06em;min-width:60px}
.process-item.vis .process-num{opacity:1}
.process-body h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem}
.process-body p{font-size:.875rem;color:var(--txt3);line-height:1.7}

/* ═══════════════════════════════════════════════════════════════════
   QUIZ / FINDER
═══════════════════════════════════════════════════════════════════ */
#finder-section{background:linear-gradient(160deg,#0d0b1e 0%,#130e2a 60%,#0c1020 100%);color:#fff;padding:100px 0;position:relative;overflow:hidden}
#finder-section::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:1000px;height:600px;background:radial-gradient(ellipse,rgba(100,87,249,.12) 0%,transparent 65%);pointer-events:none}
.qz-wrap{max-width:580px;margin:0 auto}
.qz-step-row{display:flex;align-items:center;justify-content:center;margin-bottom:3rem}
.qz-step-num{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;letter-spacing:.04em;font-family:monospace;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);color:rgba(255,255,255,.3);transition:all .35s;flex-shrink:0}
.qz-step-num.active{background:rgba(99,102,241,.2);border-color:#6366f1;color:#818cf8;box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.qz-step-num.done{background:rgba(99,102,241,.25);border-color:#818cf8;color:#fff}
.qz-step-conn{width:64px;height:1px;background:rgba(255,255,255,.08);margin:0 .5rem;transition:background .35s;flex-shrink:0}
.qz-step-conn.done{background:rgba(99,102,241,.5)}
.qz-step{display:none}
.qz-step.active{display:block;animation:qzSlide .3s ease}
@keyframes qzSlide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.qz-q{font-size:clamp(1.15rem,2.5vw,1.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#fff;text-align:center;margin-bottom:1.75rem}
.qz-options{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:2rem}
@media(max-width:480px){.qz-options{grid-template-columns:1fr}}
.qz-opt{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.5rem 1rem;border:1.5px solid rgba(255,255,255,.08);border-radius:14px;cursor:pointer;transition:all .22s;color:rgba(255,255,255,.5);background:rgba(255,255,255,.03);text-align:center}
.qz-opt:hover{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.08);color:#fff}
.qz-opt.sel{border-color:#6366f1;background:rgba(99,102,241,.15);color:#fff}
.qz-opt-icon{font-size:1.75rem;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.qz-opt-label{font-size:.875rem;font-weight:700;color:inherit;line-height:1.25}
.qz-opt-sub{font-size:.7rem;opacity:.45;line-height:1.4}
.qz-result{animation:qzSlide .4s ease;text-align:center}
.qz-result-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.1rem;background:var(--accent);border-radius:100px;font-size:.78rem;font-weight:700;color:#fff;margin-bottom:1.25rem}
.qz-result h3{font-size:1.75rem;font-weight:900;letter-spacing:-.03em;color:#fff;margin-bottom:.75rem}
.qz-result p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:2rem}
.qz-btn-row{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.qz-nav{display:flex;justify-content:space-between;margin-top:.5rem}

/* ═══════════════════════════════════════════════════════════════════
   CASE STUDY (inner page)
═══════════════════════════════════════════════════════════════════ */
.cs-hero{padding:80px 0 60px;border-bottom:1px solid var(--border)}
.cs-hero-meta{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem}
.cs-meta-item label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt4);display:block;margin-bottom:.2rem}
.cs-meta-item span{font-size:.9rem;font-weight:600;color:var(--txt)}
.cs-tag{display:inline-flex;padding:.3rem .8rem;border-radius:100px;font-size:.72rem;font-weight:700;background:var(--accent-light);color:var(--accent);margin-left:.5rem}

/* Gallery slider */
.csg-wrap{position:relative;margin:3rem 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg2);border:1px solid var(--border)}
.csg-win{overflow:hidden}
.csg-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.csg-slide{flex:0 0 100%;position:relative;aspect-ratio:16/9;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:var(--txt4)}
.csg-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.csg-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;width:100%;pointer-events:none;padding:0 1rem;z-index:5}
.csg-btn{pointer-events:all;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;transition:all .2s;box-shadow:var(--shadow)}
.csg-btn:hover{background:#fff;transform:scale(1.05)}
.csg-pips{display:flex;justify-content:center;gap:.5rem;padding:.875rem;background:#fff;border-top:1px solid var(--border)}
.csg-pip{width:6px;height:6px;border-radius:50%;background:var(--bg3);cursor:pointer;transition:all .2s}
.csg-pip.cur{background:var(--accent);width:18px;border-radius:3px}
.csg-captions{padding:1.25rem 1.5rem;background:#fff;border-top:1px solid var(--border);min-height:64px}
.csg-cap{display:none;font-size:.85rem;color:var(--txt3)}
.csg-cap.cur{display:block}

/* Built-with grid */
.cs-bw-grid{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}
.cs-bw-card{padding:.5rem 1rem;background:var(--bg2);border-radius:100px;font-size:.8rem;font-weight:600;color:var(--txt2);border:1px solid var(--border)}

/* CS reveal */
.cs-reveal{opacity:0;transform:translateY(24px);transition:all .55s cubic-bezier(.4,0,.2,1)}
.cs-reveal.vis{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr}}
.contact-info-item{display:flex;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--border)}
.contact-info-icon{width:40px;height:40px;border-radius:12px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:.78rem;font-weight:700;color:var(--txt2);margin-bottom:.4rem;letter-spacing:.04em}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.875rem 1rem;border-radius:12px;border:1.5px solid var(--border2);background:#fff;font-size:.9rem;color:var(--txt);outline:none;transition:border-color .2s;appearance:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent)}
.form-group textarea{resize:vertical;min-height:140px;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════ */
#footer{background:linear-gradient(180deg,#0d0b1e 0%,#0a0908 100%);color:#fff;padding:64px 0 32px;position:relative;overflow:hidden}
#footer::before{content:'';position:absolute;top:-50%;left:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(100,87,249,.07) 0%,transparent 70%);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}}
.footer-brand p{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.7;margin-top:.75rem;max-width:240px}
.footer-col h4{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1rem}
.footer-col a{display:block;font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:.5rem;transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-bottom{padding-top:2rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:.75rem;color:rgba(255,255,255,.25)}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════════════ */
.about-hero{padding:80px 0 60px}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
@media(max-width:700px){.about-values{grid-template-columns:1fr}}
.value-card{padding:1.75rem;border-radius:var(--radius);background:#fff;border:1px solid var(--border)}
.value-icon{font-size:1.75rem;margin-bottom:.875rem}
.value-card h3{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.value-card p{font-size:.82rem;color:var(--txt3);line-height:1.65}

/* ═══════════════════════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════════════════════ */
.cta-banner{background:linear-gradient(135deg,#0d0b1e 0%,#130e2a 50%,#0a0d1c 100%);border-radius:var(--radius-lg);padding:4rem 3rem;text-align:center;position:relative;overflow:hidden;margin:80px 0;border:1px solid rgba(100,87,249,.2)}
@media(max-width:600px){.cta-banner{padding:2.5rem 1.5rem;border-radius:var(--radius);margin:48px 0}}
.cta-banner::before{content:'';position:absolute;top:-60%;right:-20%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(100,87,249,.25),transparent 70%);pointer-events:none;animation:glow-breathe 6s ease-in-out infinite}
.cta-banner::after{content:'';position:absolute;bottom:-40%;left:-10%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.15),transparent 70%);pointer-events:none;animation:glow-breathe 8s ease-in-out infinite 2s}
.cta-banner h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;letter-spacing:-.03em;color:#fff;margin-bottom:.75rem}
.cta-banner p{color:rgba(255,255,255,.5);font-size:1rem;margin-bottom:2rem}

/* ═══════════════════════════════════════════════════════════════════
   PRELOADER
═══════════════════════════════════════════════════════════════════ */
#preloader{position:fixed;inset:0;z-index:99999;background:#0a0a0a;display:flex;flex-direction:column;overflow:hidden}
#preloader::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:80px 80px;pointer-events:none}
.pl-corner{position:absolute;width:24px;height:24px;border-color:rgba(255,255,255,.25);border-style:solid}
.pl-corner.tl{top:2rem;left:2rem;border-width:1.5px 0 0 1.5px}
.pl-corner.tr{top:2rem;right:2rem;border-width:1.5px 1.5px 0 0}
.pl-corner.bl{bottom:2rem;left:2rem;border-width:0 0 1.5px 1.5px}
.pl-corner.br{bottom:2rem;right:2rem;border-width:0 1.5px 1.5px 0}
#pl-scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);top:0;animation:pl-scan 2.5s ease-in-out forwards;pointer-events:none}
@keyframes pl-scan{from{top:0}to{top:100%}}
#pl-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
#pl-name{font-family:monospace;font-size:.7rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.45);overflow:hidden;max-width:0;white-space:nowrap;transition:max-width 1s ease .4s}
#pl-name.in{max-width:300px}
#pl-counter{position:absolute;bottom:3rem;right:3rem;font-family:monospace;font-size:4rem;font-weight:900;color:rgba(255,255,255,.08);letter-spacing:-.05em;line-height:1;transition:color .3s}
#pl-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.06)}
#pl-bar{height:100%;width:0;background:linear-gradient(90deg,#6366f1,#fff,#4ade80);transition:width .05s linear;box-shadow:0 0 12px rgba(255,255,255,.4)}
#pl-status{position:absolute;bottom:3rem;left:3rem;font-family:monospace;font-size:.6rem;font-weight:700;color:rgba(255,255,255,.2);letter-spacing:.12em;text-transform:uppercase}
#pl-strips{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);pointer-events:none;opacity:0}
.pl-strip{background:#0a0a0a;transform:scaleY(0);transform-origin:top}
#pl-strips.exit .pl-strip{animation:pl-exit .6s cubic-bezier(.76,0,.24,1) both}
#pl-strips.exit .pl-strip:nth-child(1){animation-delay:.00s}
#pl-strips.exit .pl-strip:nth-child(2){animation-delay:.04s}
#pl-strips.exit .pl-strip:nth-child(3){animation-delay:.08s}
#pl-strips.exit .pl-strip:nth-child(4){animation-delay:.12s}
#pl-strips.exit .pl-strip:nth-child(5){animation-delay:.16s}
#pl-strips.exit .pl-strip:nth-child(6){animation-delay:.20s}
#pl-strips.exit .pl-strip:nth-child(7){animation-delay:.24s}
#pl-strips.exit .pl-strip:nth-child(8){animation-delay:.28s}
@keyframes pl-exit{from{transform:scaleY(1)}to{transform:scaleY(0);transform-origin:bottom}}
#pl-logo.in{opacity:1!important;transform:none!important}

/* ═══════════════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════════════ */
.faq-item{border-bottom:1px solid var(--border);overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;cursor:pointer;font-weight:600;font-size:.95rem;color:var(--txt);transition:color .2s}
.faq-q:hover{color:var(--accent)}
.faq-icon{font-size:1.4rem;font-weight:300;color:var(--txt4);transition:transform .3s;flex-shrink:0;margin-left:1rem}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--accent)}
.faq-a{font-size:.88rem;color:var(--txt3);line-height:1.75;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s}
.faq-item.open .faq-a{max-height:300px;padding-bottom:1.25rem}

/* ═══════════════════════════════════════════════════════════════════
   CHAT WIDGET
═══════════════════════════════════════════════════════════════════ */
#chat-fab{position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;width:52px;height:52px;border-radius:50%;background:var(--txt);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:0 4px 20px rgba(0,0,0,.2);cursor:pointer;transition:all .2s;border:none}
#chat-fab:hover{background:var(--accent);transform:scale(1.05)}
#chat-panel{position:fixed;bottom:4.5rem;right:1.5rem;z-index:200;width:min(320px,calc(100vw - 3rem));background:#fff;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.14);border:1px solid var(--border);display:none;flex-direction:column;overflow:hidden;max-height:460px}
#chat-panel.open{display:flex}
.chat-head{background:var(--txt);padding:1.1rem 1.25rem;color:#fff;display:flex;align-items:center;justify-content:space-between}
.chat-head-info{display:flex;align-items:center;gap:.75rem}
.chat-head-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.chat-head h4{font-size:.875rem;font-weight:700}
.chat-head span{font-size:.7rem;opacity:.5}
.chat-head button{background:none;border:none;color:rgba(255,255,255,.6);font-size:1rem;cursor:pointer}
.chat-msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;background:#f9f9f9}
.chat-bubble{max-width:80%;padding:.65rem .9rem;border-radius:14px;font-size:.8rem;line-height:1.55}
.chat-bubble.from{background:#fff;border:1px solid var(--border);color:var(--txt);align-self:flex-start;border-bottom-left-radius:4px}
.chat-bubble.to{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-input-row{display:flex;gap:.5rem;padding:.875rem;border-top:1px solid var(--border);background:#fff}
.chat-input-row input{flex:1;border:1.5px solid var(--border2);border-radius:100px;padding:.5rem 1rem;font-size:.82rem;outline:none}
.chat-input-row input:focus{border-color:var(--accent)}
.chat-send{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;transition:all .2s;flex-shrink:0}
.chat-send:hover{background:var(--accent-dark)}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL REVEAL (global)
═══════════════════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .65s cubic-bezier(.22,.68,0,1.2),transform .65s cubic-bezier(.22,.68,0,1.2)}
.reveal.vis{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity .65s cubic-bezier(.22,.68,0,1.2),transform .65s cubic-bezier(.22,.68,0,1.2)}
.reveal-left.vis{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(36px);transition:opacity .65s cubic-bezier(.22,.68,0,1.2),transform .65s cubic-bezier(.22,.68,0,1.2)}
.reveal-right.vis{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s cubic-bezier(.22,.68,0,1.2),transform .6s cubic-bezier(.22,.68,0,1.2)}
.reveal-scale.vis{opacity:1;transform:scale(1)}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}
.reveal-d4{transition-delay:.4s}
.reveal-d5{transition-delay:.5s}

/* ═══════════════════════════════════════════════════════════════════
   GRADIENT ACCENT ELEMENTS
═══════════════════════════════════════════════════════════════════ */
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-border{border:1.5px solid transparent;background-clip:padding-box;position:relative}
.grad-border::before{content:'';position:absolute;inset:-1.5px;border-radius:inherit;background:var(--grad);z-index:-1;opacity:.3}

/* Gradient pill badge */
.badge-grad{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .85rem;border-radius:100px;background:var(--grad);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Glow dot */
.glow-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 24px rgba(100,87,249,.4);animation:glow-pulse 2.4s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 10px var(--accent),0 0 24px rgba(100,87,249,.4)}50%{box-shadow:0 0 16px var(--accent),0 0 40px rgba(100,87,249,.6)}}

/* Animated gradient background for sections */
.section-grad-bg{background:linear-gradient(160deg,rgba(100,87,249,.04) 0%,rgba(168,85,247,.03) 50%,transparent 100%)}

/* Stats counter shimmer */
.stat-num[data-target]{display:inline-block}

/* Hover glow cards */
.glow-card{transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1),border-color .28s}
.glow-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(100,87,249,.12),0 4px 16px rgba(0,0,0,.06);border-color:rgba(100,87,249,.25)}

/* Cursor trail glow (subtle) */
@keyframes trail-fade{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}

/* Page transition */
.page.active{animation:pageIn .4s cubic-bezier(.4,0,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Shine sweep on cards */
@keyframes shine{from{transform:translateX(-100%) skewX(-15deg)}to{transform:translateX(200%) skewX(-15deg)}}
.shine-card{overflow:hidden;position:relative}
.shine-card::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);transform:translateX(-100%) skewX(-15deg);pointer-events:none}
.shine-card:hover::after{animation:shine .6s ease forwards}

/* Number counter animation */
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════════════════════
   HOW CODE IS CREATED — section
═══════════════════════════════════════════════════════════════════ */
.code-creation-section{background:var(--bg);padding:96px 0;overflow:hidden}
.code-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3.5rem}
@media(max-width:768px){.code-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.code-steps{grid-template-columns:1fr}}
.code-step{position:relative;padding:1.75rem;background:#fff;border:1px solid var(--border);border-radius:16px;transition:border-color .3s,box-shadow .3s}
.code-step.active-step{border-color:var(--accent);box-shadow:0 0 0 3px rgba(100,87,249,.08)}
.code-step-num{width:32px;height:32px;border-radius:50%;background:var(--accent-light);color:var(--accent);font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.code-step.active-step .code-step-num{background:var(--grad);color:#fff}
.code-step h4{font-size:.875rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.375rem}
.code-step p{font-size:.78rem;color:var(--txt3);line-height:1.6;margin:0}
.code-step-arrow{position:absolute;top:50%;right:-1.25rem;transform:translateY(-50%);color:var(--txt4);font-size:.75rem;z-index:2}
@media(max-width:768px){.code-step-arrow{display:none}}

/* Terminal / editor window */
.code-terminal{margin-top:3rem;background:#0d0d14;border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.05)}
.code-term-bar{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;background:#161622;border-bottom:1px solid rgba(255,255,255,.06)}
.term-dot{width:11px;height:11px;border-radius:50%}
.term-dot-r{background:#ff5f56}.term-dot-y{background:#ffbd2e}.term-dot-g{background:#27c93f}
.term-title{flex:1;text-align:center;font-size:.7rem;color:rgba(255,255,255,.3);font-family:monospace}
.code-term-body{padding:1.5rem 1.75rem;min-height:220px;font-family:'SF Mono','Fira Code',monospace;font-size:.8rem;line-height:1.85;color:#e2e8f0;position:relative}
.code-line{display:block;white-space:pre}
.tok-kw{color:#c792ea}.tok-fn{color:#82aaff}.tok-str{color:#c3e88d}.tok-num{color:#f78c6c}
.tok-cmt{color:#546e7a;font-style:italic}.tok-op{color:#89ddff}.tok-tag{color:#f07178}
.code-cursor{display:inline-block;width:2px;height:.9em;background:var(--accent);vertical-align:middle;animation:blink .9s steps(1) infinite;margin-left:1px}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* WHERE IT RUNS — section */
.where-runs-section{background:linear-gradient(180deg,#0d0b1e 0%,#111827 100%);padding:96px 0;position:relative;overflow:hidden}
.where-runs-section::before{content:'';position:absolute;top:-120px;right:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(100,87,249,.12) 0%,transparent 65%);pointer-events:none}
.stack-flow{display:flex;align-items:center;justify-content:center;gap:0;margin-top:3.5rem;flex-wrap:wrap;row-gap:1.5rem}
.stack-node{display:flex;flex-direction:column;align-items:center;gap:.75rem;min-width:100px}
.stack-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;position:relative;transition:transform .3s}
.stack-node:hover .stack-icon{transform:translateY(-4px)}
.stack-label{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center}
.stack-connector{width:40px;height:2px;background:linear-gradient(90deg,rgba(100,87,249,.3),rgba(168,85,247,.3));position:relative;margin:0 .25rem;align-self:center;flex-shrink:0}
.stack-connector::after{content:'';position:absolute;top:50%;left:0;width:8px;height:8px;background:var(--accent);border-radius:50%;transform:translateY(-50%);animation:flow-dot 2s linear infinite}
@keyframes flow-dot{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
.stack-node-s1 .stack-icon{background:linear-gradient(135deg,rgba(100,87,249,.25),rgba(168,85,247,.15));border:1px solid rgba(100,87,249,.3)}
.stack-node-s2 .stack-icon{background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(5,150,105,.1));border:1px solid rgba(16,185,129,.3)}
.stack-node-s3 .stack-icon{background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(217,119,6,.1));border:1px solid rgba(245,158,11,.3)}
.stack-node-s4 .stack-icon{background:linear-gradient(135deg,rgba(239,68,68,.2),rgba(185,28,28,.1));border:1px solid rgba(239,68,68,.3)}
.stack-node-s5 .stack-icon{background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(29,78,216,.1));border:1px solid rgba(59,130,246,.3)}
@media(max-width:600px){.stack-connector{width:20px}.stack-node{min-width:72px}.stack-icon{width:52px;height:52px;font-size:1.3rem}}

.deploy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3.5rem}
@media(max-width:640px){.deploy-cards{grid-template-columns:1fr}}
.deploy-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.5rem;transition:background .3s,border-color .3s}
.deploy-card:hover{background:rgba(100,87,249,.06);border-color:rgba(100,87,249,.2)}
.deploy-card-icon{font-size:1.5rem;margin-bottom:.875rem}
.deploy-card h4{font-size:.875rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.deploy-card p{font-size:.76rem;color:rgba(255,255,255,.45);line-height:1.6;margin:0}
.deploy-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.65rem;font-weight:700;padding:.25rem .6rem;border-radius:100px;margin-top:.75rem}
.db-green{background:rgba(16,185,129,.15);color:#10b981}
.db-blue{background:rgba(59,130,246,.15);color:#3b82f6}
.db-amber{background:rgba(245,158,11,.15);color:#f59e0b}

/* PLAYGROUND section */
.playground-section{background:var(--bg2);padding:96px 0}
.playground-wrap{margin-top:3rem;border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.playground-tabs{display:flex;gap:0;background:#fff;border-bottom:1px solid var(--border)}
.pg-tab{padding:.75rem 1.25rem;font-size:.78rem;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;color:var(--txt3);transition:color .2s,border-color .2s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.pg-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.playground-body{display:grid;grid-template-columns:1fr 1fr;min-height:380px}
@media(max-width:640px){.playground-body{grid-template-columns:1fr;min-height:560px}}
.pg-editor{background:#0d0d14;padding:0;display:flex;flex-direction:column}
.pg-editor-head{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:#161622;border-bottom:1px solid rgba(255,255,255,.05)}
.pg-editor-head span{font-size:.7rem;font-family:monospace;color:rgba(255,255,255,.3)}
.pg-editor textarea{flex:1;background:transparent;border:none;outline:none;padding:1.25rem 1.5rem;font-family:'SF Mono','Fira Code',monospace;font-size:.78rem;line-height:1.8;color:#e2e8f0;resize:none;width:100%;box-sizing:border-box}
.pg-preview{background:#fff;display:flex;flex-direction:column;border-left:1px solid var(--border)}
.pg-preview-head{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--bg2);border-bottom:1px solid var(--border)}
.pg-preview-head span{font-size:.7rem;color:var(--txt3)}
.pg-preview iframe{flex:1;border:none;width:100%;background:#fff}
.pg-run-btn{padding:.4rem 1rem;background:var(--grad);color:#fff;border:none;border-radius:8px;font-size:.7rem;font-weight:700;cursor:pointer;font-family:inherit;margin-left:auto}
.pg-run-btn:hover{opacity:.9}

/* SVG logo container in portfolio thumb */
.port-logo-svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}

/* Improved scroll stagger for portfolio */
.reveal-stagger-1{transition-delay:.05s}
.reveal-stagger-2{transition-delay:.12s}
.reveal-stagger-3{transition-delay:.19s}
.reveal-stagger-4{transition-delay:.26s}

/* CS inner page: better blocks */
.cs-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
@media(max-width:640px){.cs-stats-grid{grid-template-columns:1fr}}
.cs-stat-card{padding:1.75rem 1.5rem;background:var(--bg2);border-radius:16px;border:1px solid var(--border);text-align:center;transition:border-color .3s,box-shadow .3s}
.cs-stat-card:hover{border-color:rgba(100,87,249,.3);box-shadow:0 8px 32px rgba(100,87,249,.06)}
.cs-stat-num{font-size:2.25rem;font-weight:900;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cs-stat-label{font-size:.72rem;color:var(--txt4);margin-top:.375rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}

.cs-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.5rem}
@media(max-width:560px){.cs-feature-grid{grid-template-columns:1fr}}
.cs-feature-item{display:flex;align-items:flex-start;gap:.875rem;padding:1.25rem;background:var(--bg2);border-radius:12px;border:1px solid var(--border)}
.cs-fi-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.cs-fi-body h5{font-size:.825rem;font-weight:800;margin-bottom:.25rem;letter-spacing:-.01em}
.cs-fi-body p{font-size:.76rem;color:var(--txt3);line-height:1.6;margin:0}

.cs-timeline{margin-top:1.5rem;position:relative;padding-left:1.5rem}
.cs-timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border2)}
.cs-tl-item{position:relative;padding:.875rem 0 .875rem 1.5rem;margin-bottom:.25rem}
.cs-tl-dot{position:absolute;left:-1.5rem;top:1.1rem;width:14px;height:14px;border-radius:50%;background:var(--bg2);border:2px solid var(--border2);transition:border-color .3s}
.cs-tl-item:hover .cs-tl-dot{border-color:var(--accent)}
.cs-tl-phase{font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.25rem}
.cs-tl-title{font-size:.875rem;font-weight:800;margin-bottom:.25rem;letter-spacing:-.02em}
.cs-tl-desc{font-size:.78rem;color:var(--txt3);line-height:1.6;margin:0}

/* ═══════════════════════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════════════════════ */
.tag{display:inline-flex;padding:.3rem .75rem;border-radius:100px;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tag-accent{background:var(--accent-light);color:var(--accent)}
.tag-dark{background:var(--txt);color:#fff}
.divider{height:1px;background:var(--border);margin:3rem 0}
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.gap-sm{gap:.5rem}.gap-md{gap:1rem}.gap-lg{gap:2rem}

/* Filter sale tag */
.tag-sale{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}

/* ═══════════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════════ */
#toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--txt);color:#fff;padding:.75rem 1.5rem;border-radius:100px;font-size:.85rem;font-weight:600;z-index:500;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0)}
/* ═══════════════════════════════════════════════════════════════════
   DOMAINS PAGE
═══════════════════════════════════════════════════════════════════ */
.dom-tld-chip{padding:.35rem .85rem;border-radius:100px;font-size:.8rem;font-weight:700;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);cursor:pointer;transition:all .18s;font-family:monospace}
.dom-tld-chip:hover,.dom-tld-chip.active{background:rgba(100,87,249,.3);border-color:rgba(100,87,249,.7);color:#fff}
#dom-search-wrap:focus-within{border-color:rgba(168,85,247,.6)!important;box-shadow:0 0 0 3px rgba(100,87,249,.12)}

/* ═══════════════════════════════════════════════════════════════════
   SHOP / CART
═══════════════════════════════════════════════════════════════════ */
.shop-step{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.shop-step-num{width:28px;height:28px;border-radius:50%;background:var(--bg2);border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:var(--txt3);transition:all .25s;flex-shrink:0}
.shop-step-lbl{font-size:.82rem;font-weight:600;color:var(--txt3);transition:color .25s}
.shop-step.active .shop-step-num{background:var(--accent);border-color:var(--accent);color:#fff}
.shop-step.active .shop-step-lbl{color:var(--txt)}
.shop-step.done .shop-step-num{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}
.shop-step-line{flex:1;height:2px;background:var(--border2);border-radius:2px;min-width:20px}
.cart-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.5rem}
.cart-item-info{display:flex;flex-direction:column;gap:.2rem}
.cart-item-name{font-weight:700;color:var(--txt)}
.cart-item-type{font-size:.75rem;color:var(--txt4);text-transform:uppercase;letter-spacing:.05em}
.cart-item-price{font-weight:800;color:var(--txt);font-size:1.05rem;white-space:nowrap}
.cart-item-remove{background:none;border:none;cursor:pointer;color:var(--txt4);padding:.35rem;border-radius:6px;transition:all .15s;font-size:.85rem}
.cart-item-remove:hover{background:rgba(220,38,38,.08);color:#dc2626}
@media(max-width:680px){
  .shop-layout{grid-template-columns:1fr!important}
  #shop-summary-box{order:-1}
}


/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT
═══════════════════════════════════════════════════════════════════ */
.co-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}
.co-section-title{font-size:1rem;font-weight:700;color:var(--txt);margin-bottom:1rem}
.co-field{display:flex;flex-direction:column;gap:.35rem}
.co-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt4)}
.co-input{border:1px solid var(--border2);border-radius:8px;padding:.7rem .9rem;font-size:.9rem;color:var(--txt);background:var(--bg);font-family:inherit;transition:border-color .15s;outline:none;width:100%;box-sizing:border-box}
.co-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(100,87,249,.1)}
.co-pay-opt{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:all .15s;background:var(--bg)}
.co-pay-opt:hover{border-color:var(--accent);background:var(--accent-light)}
.co-pay-opt input[type=radio]{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0}
.co-pay-opt:has(input:checked){border-color:var(--accent);background:var(--accent-light)}
.co-pay-icons{display:flex;gap:.35rem;flex-shrink:0}
.cart-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.5rem}
.cart-item-info{display:flex;flex-direction:column;gap:.2rem}
.cart-item-name{font-weight:700;color:var(--txt)}
.cart-item-type{font-size:.75rem;color:var(--txt4);text-transform:uppercase;letter-spacing:.05em}
.cart-item-price{font-weight:800;color:var(--txt);font-size:1.05rem;white-space:nowrap}
.cart-item-remove{background:none;border:none;cursor:pointer;color:var(--txt4);padding:.35rem;border-radius:6px;transition:all .15s;font-size:.85rem}
.cart-item-remove:hover{background:rgba(220,38,38,.08);color:#dc2626}
@media(max-width:680px){
  #co-layout{grid-template-columns:1fr!important}
  #shop-summary-box{order:-1;position:static!important}
  .co-section > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:1fr .6fr .9fr"]{grid-template-columns:1fr 1fr!important}
}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* nav icons removed */

/* GLOBAL FOOTER */
#site-footer{background:linear-gradient(180deg,#0d0c1e 0%,#09080f 100%);color:#fff}
.sf-top{padding:52px 0 36px}
.sf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.5rem}
@media(max-width:900px){.sf-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:500px){.sf-grid{grid-template-columns:1fr}}
.sf-logo{font-size:1.4rem;font-weight:900;letter-spacing:-.04em;color:#fff;margin-bottom:.65rem}
.sf-logo span{color:#a855f7}
.sf-brand p{font-size:.8rem;color:rgba(255,255,255,.38);line-height:1.75;max-width:220px;margin-bottom:1rem}
.sf-badges{display:flex;gap:.4rem;flex-wrap:wrap}
.sf-badge{font-size:.62rem;font-weight:700;padding:.28rem .6rem;border-radius:5px;background:rgba(100,87,249,.18);color:rgba(168,85,247,.9);letter-spacing:.06em;text-transform:uppercase}
.sf-col h4{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:.8rem}
.sf-col a{display:block;font-size:.83rem;color:rgba(255,255,255,.45);margin-bottom:.45rem;cursor:pointer;transition:color .15s;text-decoration:none}
.sf-col a:hover{color:#fff}
.sf-ci{display:flex;align-items:flex-start;gap:.55rem;font-size:.8rem;color:rgba(255,255,255,.45);margin-bottom:.55rem}
.sf-ci svg{flex-shrink:0;margin-top:1px;opacity:.45}
.sf-bottom{border-top:1px solid rgba(255,255,255,.07);padding:1.1rem 0}
.sf-bi{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.7rem}
.sf-copy{font-size:.73rem;color:rgba(255,255,255,.22)}
.sf-ld{font-size:.65rem;color:rgba(255,255,255,.16);margin-top:.25rem;line-height:1.65}
.sf-blinks{display:flex;gap:.6rem;align-items:center}
.sf-blinks a{font-size:.73rem;color:rgba(255,255,255,.25);cursor:pointer;transition:color .15s;text-decoration:none}
.sf-blinks a:hover{color:rgba(255,255,255,.65)}


/* ═══════════════════════════════════════════════════════════════════
   AUTH & DASHBOARD
═══════════════════════════════════════════════════════════════════ */
.nav-auth-btn{padding:.42rem .9rem;background:var(--grad);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;transition:opacity .2s;white-space:nowrap}
.nav-auth-btn:hover{opacity:.85}
.nav-user-pill{display:flex;align-items:center;gap:.5rem;padding:.3rem .3rem .3rem .8rem;background:var(--bg2);border-radius:40px;cursor:default}
.nav-user-pill .nav-user-name{font-size:.78rem;font-weight:600;color:var(--txt2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-user-pill .nav-user-logout{padding:.28rem .6rem;border:none;border-radius:20px;background:var(--bg3);color:var(--txt3);font-size:.73rem;cursor:pointer;transition:all .15s}
.nav-user-pill .nav-user-logout:hover{background:var(--accent);color:#fff}
/* Auth page */
.auth-wrap{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-card{background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.08);padding:2.5rem 2rem;width:100%;max-width:420px}
.auth-logo{text-align:center;margin-bottom:1.8rem}
.auth-logo img{height:40px}
.auth-tabs{display:flex;gap:.5rem;background:var(--bg2);border-radius:12px;padding:.3rem;margin-bottom:2rem}
.auth-tab{flex:1;padding:.6rem;border:none;border-radius:9px;background:transparent;font-size:.87rem;font-weight:600;color:var(--txt3);cursor:pointer;transition:all .2s}
.auth-tab.active{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.auth-field{margin-bottom:1.1rem}
.auth-label{display:block;font-size:.8rem;font-weight:600;color:var(--txt2);margin-bottom:.4rem}
.auth-input{width:100%;padding:.72rem .9rem;border:1.5px solid var(--bg3);border-radius:10px;font-size:.93rem;background:var(--bg);color:var(--txt);box-sizing:border-box;transition:border-color .2s;outline:none}
.auth-input:focus{border-color:var(--accent)}
.auth-submit{width:100%;padding:.82rem;background:var(--grad);color:#fff;border:none;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;margin-top:.5rem;transition:opacity .2s}
.auth-submit:hover{opacity:.88}
.auth-submit:disabled{opacity:.5;cursor:not-allowed}
.auth-msg{margin-top:.9rem;padding:.7rem 1rem;border-radius:10px;font-size:.83rem;text-align:center;display:none}
.auth-msg.error{background:#fff0f0;color:#c0392b;border:1px solid #fcc}
.auth-msg.success{background:#f0fff4;color:#1a7a40;border:1px solid #adf}
.auth-divider{text-align:center;font-size:.8rem;color:var(--txt4);margin:1rem 0}
.auth-forgot{font-size:.8rem;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;margin-top:.4rem}
/* Dashboard */
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.dash-title{font-size:1.5rem;font-weight:800;color:var(--txt)}
.dash-subtitle{font-size:.87rem;color:var(--txt3);margin-top:.2rem}
.dash-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:2rem}
.dash-stat{background:#fff;border-radius:14px;padding:1.2rem 1.4rem;border:1px solid var(--border)}
.dash-stat-val{font-size:1.8rem;font-weight:800;color:var(--accent)}
.dash-stat-label{font-size:.78rem;color:var(--txt3);margin-top:.2rem}
.domain-row{background:#fff;border-radius:14px;padding:1.1rem 1.4rem;margin-bottom:.7rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border:1px solid var(--border)}
.domain-name{font-weight:700;font-size:.95rem;color:var(--txt);flex:1;min-width:140px}
.domain-status{padding:.25rem .65rem;border-radius:20px;font-size:.73rem;font-weight:600}
.domain-status.active{background:#e8f5e9;color:#2e7d32}
.domain-status.expiring{background:#fff3e0;color:#e65100}
.domain-status.expired{background:#fce4e4;color:#c62828}
.domain-expiry{font-size:.8rem;color:var(--txt3);white-space:nowrap}
.domain-actions{display:flex;gap:.5rem}
.domain-btn{padding:.3rem .75rem;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;border:1.5px solid var(--accent);color:var(--accent);background:transparent;transition:all .18s}
.domain-btn:hover{background:var(--accent);color:#fff}
.domain-btn.dns{border-color:var(--accent2);color:var(--accent2)}
.domain-btn.dns:hover{background:var(--accent2);color:#fff}
/* DNS Editor */
.dns-panel{background:var(--bg2);border-radius:16px;padding:1.4rem;margin-top:1rem}
.dns-panel-title{font-size:1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between}
.dns-table{width:100%;border-collapse:collapse;font-size:.82rem}
.dns-table th{text-align:left;padding:.5rem .6rem;color:var(--txt3);font-weight:600;border-bottom:1px solid var(--border)}
.dns-table td{padding:.55rem .6rem;border-bottom:1px solid var(--border);color:var(--txt2)}
.dns-table tr:last-child td{border-bottom:none}
.dns-add-row{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.dns-add-row select,.dns-add-row input{padding:.45rem .6rem;border:1.5px solid var(--bg3);border-radius:8px;font-size:.82rem;background:#fff;color:var(--txt);outline:none}
.dns-add-row select:focus,.dns-add-row input:focus{border-color:var(--accent)}
.dns-add-row input{flex:1;min-width:80px}
.dns-add-btn{padding:.45rem 1rem;background:var(--grad);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.dash-empty{text-align:center;padding:3rem 1rem;color:var(--txt3)}
.dash-empty-icon{font-size:2.5rem;margin-bottom:.8rem}
.dash-loading{text-align:center;padding:3rem;color:var(--txt3);font-size:.9rem}

/* ═══ Domains page — smart blocks ═══ */
.dx-trust{background:#fff;border-bottom:1px solid var(--border)}
.dx-trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.4rem 0}
.dx-stat{display:flex;flex-direction:column;gap:.15rem}
.dx-stat b{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;width:max-content}
.dx-stat span{font-size:.8rem;color:var(--txt3);line-height:1.4}
.dx-tlds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.85rem}
.dx-tld{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.2rem;text-align:left;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.dx-tld:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(100,87,249,.14);border-color:rgba(100,87,249,.4)}
.dx-tld b{display:block;font-size:1.35rem;font-weight:900;letter-spacing:-.03em;color:var(--txt)}
.dx-tld small{display:block;color:var(--txt3);font-size:.75rem;margin-top:.2rem}
.dx-tld em{font-style:normal;display:block;margin-top:.5rem;font-weight:800;color:var(--accent);font-size:.95rem}
.dx-tld{position:relative}.dx-tld.hot::after{content:"Δημοφιλές";position:absolute;top:.7rem;right:.7rem;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--grad);color:#fff;padding:.2rem .5rem;border-radius:99px}
.dx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.dx-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.5rem;transition:transform .25s,box-shadow .25s}
.dx-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(10,9,8,.08)}
.dx-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.25rem;background:linear-gradient(135deg,rgba(100,87,249,.12),rgba(168,85,247,.12));margin-bottom:.9rem}
.dx-card h3{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.4rem}
.dx-card p{font-size:.88rem;color:var(--txt3);line-height:1.6}
.dx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:s}
.dx-step{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.6rem}
.dx-step span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;margin-bottom:.9rem}
.dx-step h3{font-size:1.05rem;font-weight:800;margin-bottom:.35rem}
.dx-step p{font-size:.88rem;color:var(--txt3);line-height:1.6}
.dx-cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;background:linear-gradient(135deg,#0d0b1e,#1d1445);color:#fff;border-radius:24px;padding:2.2rem 2.4rem;position:relative;overflow:hidden}
.dx-cta::before{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(168,85,247,.35),transparent 65%)}
.dx-cta>*{position:relative}
.dx-cta h2{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;margin-bottom:.4rem}
.dx-cta p{color:rgba(255,255,255,.65);max-width:520px;font-size:.92rem;line-height:1.6}
.dx-btn{background:#fff;color:#1d1445;border:none;border-radius:99px;padding:.9rem 1.6rem;font-weight:800;font-size:.95rem;cursor:pointer;font-family:inherit;transition:transform .2s}
.dx-btn:hover{transform:translateY(-2px)}
.dx-faq details{background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:.6rem;padding:0 1.2rem;transition:border-color .2s}
.dx-faq details[open]{border-color:rgba(100,87,249,.4)}
.dx-faq summary{cursor:pointer;list-style:none;padding:1.05rem 0;font-weight:700;font-size:.95rem;display:flex;justify-content:space-between;gap:1rem}
.dx-faq summary::-webkit-details-marker{display:none}
.dx-faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--accent);transition:transform .2s}
.dx-faq details[open] summary::after{transform:rotate(45deg)}
.dx-faq p{padding:0 0 1.1rem;color:var(--txt3);font-size:.9rem;line-height:1.65}
.dom-tld-chip{transition:transform .15s}
.dom-tld-chip:hover{transform:translateY(-1px)}
#dom-search-wrap:focus-within{border-color:rgba(168,85,247,.7)!important;box-shadow:0 0 0 4px rgba(168,85,247,.18)}
@media(max-width:860px){.dx-trust-in{grid-template-columns:repeat(2,1fr)}.dx-grid,.dx-steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dx-grid,.dx-steps{grid-template-columns:1fr}.dx-cta{padding:1.6rem}}

/* ═══ Nav: icon-only auth, sharper/larger logo, tighter mobile ═══ */
.nav-logo{display:flex;align-items:center}
.nav-logo-img{height:46px;width:auto;display:block}
.nav-auth-btn{width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 14px rgba(100,87,249,.28)}
.nav-auth-btn:hover{opacity:1;transform:translateY(-1px)}
.nav-user-pill{padding:.25rem .3rem .25rem .8rem}
.nav-user-pill .nav-user-logout{width:28px;height:28px;padding:0;border-radius:50%;display:grid;place-items:center}
@media(max-width:768px){
  .nav-logo-img{height:44px}
  .nav-right{gap:.1rem}
  .nav-cart{padding:.4rem}
  .nav-auth-btn{width:34px;height:34px;margin-right:.15rem}
  .nav-auth-btn svg{width:17px;height:17px}
  .nav-user-pill{padding:.2rem;background:none}
  .nav-user-pill .nav-user-name{display:none}
  .nav-burger{padding:.45rem .35rem}
  #navAuthArea{gap:.2rem!important}
}
@media(max-width:768px){.nav-right{margin-left:auto}.nav-inner{padding-right:.25rem}}
@media(max-width:768px){.nav-cart{margin-right:.5rem}}

/* ═══ Payment icons / bank page ═══ */
.pay-ico{height:24px;width:auto;border:1px solid #e5e7eb;border-radius:5px;background:#fff;display:block}
.co-pay-icons{align-items:center;flex-wrap:wrap}
.co-pay-opt.disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}
.co-pay-opt.disabled:hover{border-color:var(--border);background:var(--bg)}
.pay-soon{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--bg3);color:var(--txt3);padding:.12rem .45rem;border-radius:99px;margin-left:.35rem;vertical-align:middle}
.sf-pay{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.sf-pay .pay-ico{height:22px;border-color:rgba(255,255,255,.12)}
.sf-bi{gap:1rem;flex-wrap:wrap}
.bk-card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden}
.bk-row{display:flex;align-items:center;gap:.8rem;padding:.95rem 1.2rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.bk-row:last-child{border-bottom:none}
.bk-row span{color:var(--txt3);font-size:.8rem;min-width:130px}
.bk-row b{flex:1;font-size:.95rem;word-break:break-all}
.bk-row.hl{background:rgba(100,87,249,.06)}
.bk-row.hl b{color:var(--accent)}
.bk-copy{border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:.3rem .7rem;font-size:.75rem;font-weight:700;cursor:pointer;font-family:inherit}
.bk-copy:hover{border-color:var(--accent);color:var(--accent)}
.co-pay-icons{min-width:172px}@media(max-width:600px){.co-pay-icons{min-width:0}}

/* payment rows — όπως στο reference */
.co-pay-opt{align-items:center;padding:1rem 1.2rem;border-radius:14px;background:#fff}
.co-pay-opt:has(input:checked){border:2px solid #0a0908;background:#fff;padding:calc(1rem - .5px) calc(1.2rem - .5px)}
.co-pay-icons{min-width:0;flex-wrap:nowrap}
.co-pay-icons .pay-ico{height:38px;width:auto;border:1px solid #e5e7eb;border-radius:9px;padding:2px}
.pay-stack{display:flex;flex-direction:column;gap:3px}
.pay-stack .pay-ico{height:30px}
.pay-t{font-weight:700;font-size:.98rem;margin-bottom:.15rem}
.pay-d{font-size:.85rem;color:var(--txt3);line-height:1.45}

/* ═══ Domain options modal ═══ */
#dom-opts-modal{position:fixed;inset:0;z-index:600;background:rgba(10,9,8,.55);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:1rem}
.dopt-box{position:relative;background:#fff;border-radius:20px;width:100%;max-width:640px;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.dopt-x{position:absolute;top:.8rem;right:.9rem;width:34px;height:34px;border-radius:50%;border:none;background:var(--bg2);font-size:1.3rem;cursor:pointer;line-height:1;z-index:2}
.dopt-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 3.2rem 1.2rem 1.5rem;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.dopt-head small{color:var(--txt3);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.dopt-head h3{font-size:1.4rem;font-weight:900;letter-spacing:-.03em;word-break:break-all}
.dopt-hr{display:flex;align-items:center;gap:.8rem}
.dopt-hr b{color:#059669;font-size:1.15rem}
.dopt-hr select{border:none;border-bottom:1.5px solid var(--border2);background:none;padding:.35rem .2rem;font-size:.92rem;font-family:inherit;cursor:pointer}
.dopt-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.dopt-row:hover{background:var(--bg)}
.dopt-row.on{background:rgba(100,87,249,.05)}
.dopt-row input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}
.dopt-info{flex:1;min-width:0}
.dopt-info b{display:block;font-size:.93rem;font-weight:700}
.dopt-info small{display:block;color:var(--txt3);font-size:.78rem;line-height:1.45;margin-top:.15rem}
.dopt-price{text-align:right;flex-shrink:0}
.dopt-price b{color:#059669;font-size:.95rem}
.dopt-price small{display:block;color:var(--txt3);font-size:.72rem}
.dopt-note{padding:.9rem 1.5rem;font-size:.76rem;color:var(--txt3);background:var(--bg);line-height:1.5}
.dopt-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem;flex-wrap:wrap;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border)}
.dopt-foot small{display:block;color:var(--txt3);font-size:.72rem}
.dopt-foot b{font-size:1.5rem;font-weight:900;letter-spacing:-.03em}
.dopt-btn{background:var(--grad);color:#fff;border:none;border-radius:99px;padding:.85rem 1.6rem;font-weight:800;font-size:.95rem;cursor:pointer;font-family:inherit}
@media(max-width:520px){.dopt-row{padding:.9rem 1rem;gap:.7rem}.dopt-head{padding:1.2rem 3rem 1rem 1rem}}

.dsec-ov{position:fixed;inset:0;background:rgba(15,12,40,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.dsec-box{position:relative;background:var(--bg,#fff);color:var(--text,#111);border-radius:16px;max-width:520px;width:100%;padding:1.5rem;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
.dsec-box h3{margin:0 2rem 1rem 0;font-size:1.1rem;word-break:break-all}
.dsec-x{position:absolute;top:.6rem;right:.8rem;background:none;border:none;font-size:1.6rem;cursor:pointer;color:inherit}
.dsec-load{color:#888;padding:1rem 0}
.dsec-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;border-top:1px solid rgba(128,128,128,.2)}
.dsec-row small{display:block;color:#888;font-size:.78rem;margin-top:.2rem;line-height:1.4}
.dsec-ok{color:#16a34a;font-weight:700;font-size:.8rem;white-space:nowrap}
.dsec-sw{position:relative;width:44px;height:24px;flex:none}
.dsec-sw input{opacity:0;width:0;height:0}
.dsec-sw span{position:absolute;inset:0;background:#cbd5e1;border-radius:24px;cursor:pointer;transition:.2s}
.dsec-sw span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.dsec-sw input:checked+span{background:linear-gradient(135deg,#6457f9,#a855f7)}
.dsec-sw input:checked+span:before{transform:translateX(20px)}

.mbx-form{display:grid;grid-template-columns:1fr 1.4fr .7fr;gap:.6rem}
.mbx-form select,.mbx-form input{width:100%;padding:.6rem .8rem;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--txt);font:inherit;font-size:.9rem}
.mbx-addr{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--txt3);min-width:0}.mbx-addr input{flex:1;min-width:0}
.mbx-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.2rem;border-top:1px solid var(--border)}.mbx-row:first-child{border-top:none}
.mbx-row small{display:block;color:var(--txt3);font-size:.78rem}.mbx-act{display:flex;gap:.5rem;flex-wrap:wrap}.mbx-act a{text-decoration:none}
@media(max-width:700px){.mbx-form{grid-template-columns:1fr}.mbx-row{flex-direction:column;align-items:flex-start}}

/* ═══ Smart blocks & scroll effects ═══ */
.svc6{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.svc6{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.svc6{grid-template-columns:1fr}}
.reveal-d5{transition-delay:.4s}.reveal-d6{transition-delay:.5s}
#scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#6457f9,#a78bfa);z-index:9999;pointer-events:none}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.bento-card{grid-column:span 1;padding:1.75rem;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--border);position:relative;overflow:hidden;transition:box-shadow .3s,border-color .3s;transform-style:preserve-3d;will-change:transform}
.bento-card.b-wide{grid-column:span 2}
.bento-card.b-full{grid-column:1/-1}
.bento-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(100,87,249,.10),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.bento-card:hover::before{opacity:1}
.bento-card:hover{box-shadow:0 24px 56px rgba(100,87,249,.12);border-color:rgba(100,87,249,.25)}
.bento-card h3{font-size:1.1rem;font-weight:800;margin:.9rem 0 .4rem;letter-spacing:-.02em}
.bento-card p{color:var(--txt2);font-size:.9rem;line-height:1.65;margin-bottom:1rem}
.b-ico{display:inline-flex;width:46px;height:46px;border-radius:12px;background:var(--accent-light);align-items:center;justify-content:center;font-size:1.4rem}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.bento-card.b-wide,.bento-card.b-full{grid-column:span 1}}
/* live screenshot frames */
.shot-frame{border-radius:14px;border:1px solid var(--border);background:#fff;overflow:hidden;box-shadow:0 30px 80px rgba(20,16,60,.14)}
.shot-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;background:#f4f4f8;border-bottom:1px solid var(--border)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#d6d6de}
.shot-bar i:nth-child(1){background:#ff6b6b}.shot-bar i:nth-child(2){background:#ffc14d}.shot-bar i:nth-child(3){background:#4cd38a}
.shot-bar span{margin-left:.8rem;font-size:.72rem;color:var(--txt3);background:#fff;border:1px solid var(--border);border-radius:100px;padding:.15rem .8rem;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-view{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#eceaff,#f7f7fb)}
.shot-view img{position:absolute;top:0;left:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .6s}
.shot-view img.ok{opacity:1}
.shot-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:.85rem}
.shot-view img.ok~.shot-fallback{display:none}
.shot-frame:hover .shot-view img.ok{animation:shotscroll 9s ease-in-out infinite alternate}
@keyframes shotscroll{to{transform:translateY(calc(-100% + 100cqh));}}
.shot-view{container-type:size}
.port-thumb .shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s,transform .6s;z-index:1}
.port-thumb .shot-img.ok{opacity:1}
.port-card:hover .port-thumb .shot-img.ok{transform:scale(1.05)}
.port-thumb-badge{z-index:2}
/* stagger + parallax helpers */
[data-parallax]{will-change:transform}
.reveal-blur{opacity:0;filter:blur(10px);transform:translateY(24px);transition:opacity .8s,filter .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-blur.vis{opacity:1;filter:none;transform:none}
@media(prefers-reduced-motion:reduce){
  .tilt,.shot-frame:hover .shot-view img.ok{animation:none!important;transform:none!important}
  #scrollbar{display:none}
  .reveal-blur{opacity:1;filter:none;transform:none;transition:none}
}
.port-logo-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12%;z-index:0}
.port-logo{max-width:100%;max-height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.port-card:hover .port-logo{transform:scale(1.07)}
/* managed service + terminal */
.srv-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.srv-grid{grid-template-columns:1fr;gap:2rem}}
.srv-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.7rem}
.srv-list li{padding-left:1.6rem;position:relative;color:rgba(255,255,255,.75);font-size:.92rem;line-height:1.55}
.srv-list li::before{content:"✓";position:absolute;left:0;color:#4cd38a;font-weight:800}
.srv-list b{color:#fff}
.term{border-radius:14px;overflow:hidden;background:#05050b;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(100,87,249,.25);min-width:0}
.term-bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .9rem;background:#12121d;border-bottom:1px solid rgba(255,255,255,.08)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#ff6b6b}.term-bar i:nth-child(2){background:#ffc14d}.term-bar i:nth-child(3){background:#4cd38a}
.term-bar span{margin-left:.7rem;font-size:.72rem;color:rgba(255,255,255,.45)}
.term-body{margin:0;padding:1.1rem 1.2rem;min-height:300px;font:500 .8rem/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c9c9e6;white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.term-body .p{color:#a78bfa}.term-body .ok{color:#4cd38a}.term-body .c{color:#6f6f92}.term-body .k{color:#fbbf77}
.term-body::after{content:"▍";color:#a78bfa;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.srv-flow{display:flex;align-items:center;gap:.5rem;margin-top:3.5rem;flex-wrap:wrap;justify-content:center}
.fl-node{flex:1 1 150px;max-width:220px;text-align:center;padding:1.1rem .8rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:grid;gap:.2rem}
.fl-node span{font-size:1.5rem}.fl-node b{font-size:.95rem}.fl-node small{color:rgba(255,255,255,.5);font-size:.72rem}
.fl-line{flex:0 0 48px;height:2px;background:rgba(255,255,255,.15);position:relative;overflow:hidden;border-radius:2px}
.fl-line i{position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#a78bfa,transparent);animation:pkt 1.8s linear infinite}
.fl-line:nth-of-type(4) i{animation-delay:.3s}.fl-line:nth-of-type(6) i{animation-delay:.6s}
@keyframes pkt{to{left:100%}}
@media(max-width:700px){.fl-line{flex:0 0 2px;height:24px;width:2px}.fl-line i{display:none}.fl-node{max-width:100%;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.fl-line i,.term-body::after{animation:none}}
/* hero services stage */
.svc-stage{position:relative;width:100%;max-width:540px;padding:34px 22px}
.svc-main{border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:0 40px 90px rgba(60,40,160,.22),0 6px 20px rgba(0,0,0,.06);overflow:hidden;transform:perspective(1200px) rotateY(-6deg) rotateX(3deg);transition:transform .6s}
.svc-stage:hover .svc-main{transform:perspective(1200px) rotateY(0) rotateX(0)}
.svc-slides{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#f3f1ff,#fff)}
.sv-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14% 12% 18%;opacity:0;transform:scale(.96);transition:opacity .7s,transform .7s}
.sv-slide.on{opacity:1;transform:none}
.sv-slide .sv-logo{max-width:80%;max-height:70%;object-fit:contain;position:relative;z-index:1}
.sv-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .8s;z-index:0}
.sv-shot.ok{opacity:1}
.sv-slide:has(.sv-shot.ok) .sv-logo{opacity:0}
.sv-cap{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1.1rem;background:linear-gradient(0deg,rgba(255,255,255,.96) 60%,rgba(255,255,255,0));display:grid;gap:.1rem;z-index:2}
.sv-cap b{font-size:1rem;letter-spacing:-.02em}.sv-cap small{color:var(--txt3);font-size:.76rem}
.sv-mail{padding:0;display:block}
.mb{position:absolute;inset:0 0 56px;padding:1.2rem;display:grid;gap:.7rem;align-content:center}
.mb-row{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border-radius:12px;background:#fff;border:1px solid var(--border);box-shadow:0 6px 18px rgba(100,87,249,.08)}
.mb-row>span{font-size:1.3rem}.mb-row div{flex:1;min-width:0;display:grid}.mb-row b{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mb-row small{font-size:.7rem;color:var(--txt3)}
.mb-row em{font-style:normal;font-size:.65rem;font-weight:800;color:#16a34a;background:#dcfce7;border-radius:100px;padding:.15rem .55rem}
.svc-dots{display:flex;gap:.4rem;justify-content:center;padding:.6rem;background:#fff;border-top:1px solid var(--border)}
.svc-dots i{width:6px;height:6px;border-radius:50%;background:#d6d6de;transition:all .3s}.svc-dots i.on{width:20px;border-radius:4px;background:var(--accent)}
.svc-chip{position:absolute;display:flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:100px;background:#fff;border:1px solid var(--border);font-size:.78rem;font-weight:700;box-shadow:0 12px 30px rgba(20,16,60,.12);animation:bob 5s ease-in-out infinite;transition:all .35s;z-index:3}
.svc-chip.on{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 14px 34px rgba(100,87,249,.4);transform:scale(1.08)}
.svc-chip.c1{top:0;left:0}.svc-chip.c2{top:18%;right:-2%;animation-delay:-1s}.svc-chip.c3{bottom:22%;left:-4%;animation-delay:-2s}.svc-chip.c4{bottom:2%;right:4%;animation-delay:-3s}.svc-chip.c5{top:-2%;right:28%;animation-delay:-1.6s}
@keyframes bob{50%{translate:0 -8px}}
@media(max-width:900px){.svc-stage{max-width:460px;margin:0 auto}.svc-chip.c3,.svc-chip.c5{display:none}}
@media(prefers-reduced-motion:reduce){.svc-chip{animation:none}.svc-main{transform:none}}
.sv-slide .sv-logo{mix-blend-mode:multiply}
/* ═══ DARK HERO ═══ */
#hero{position:relative;overflow:hidden;background:#06060c;border-bottom:1px solid rgba(255,255,255,.08);--hero-fg:#fff}
#hero .hero-inner{position:relative;z-index:2}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 60% 40%,#000 30%,transparent 80%)}
.hero-aurora{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:aur 16s ease-in-out infinite alternate}
.hero-aurora i:nth-child(1){width:520px;height:520px;background:#6457f9;top:-160px;right:6%}
.hero-aurora i:nth-child(2){width:440px;height:440px;background:#06b6d4;bottom:-200px;right:30%;animation-delay:-5s;opacity:.35}
.hero-aurora i:nth-child(3){width:380px;height:380px;background:#c026d3;top:20%;left:-140px;animation-delay:-9s;opacity:.3}
@keyframes aur{to{transform:translate(60px,40px) scale(1.15)}}
#hero .hero-title{color:#fff}
#hero .hero-title-em{background:linear-gradient(90deg,#a78bfa,#22d3ee,#a78bfa);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
#hero .hero-sub{color:rgba(255,255,255,.68)}
#hero .hero-eyebrow{color:rgba(255,255,255,.55)}
#hero .hero-btn-primary{background:linear-gradient(135deg,#6457f9,#a855f7);color:#fff;box-shadow:0 10px 34px rgba(100,87,249,.45)}
#hero .hero-btn-primary:hover{box-shadow:0 14px 44px rgba(168,85,247,.6)}
#hero .hero-btn-ghost{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
#hero .hero-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
#hero .hero-bottom-bar{position:relative;z-index:2;background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
#hero .hbb-num{color:#fff}#hero .hbb-lbl{color:rgba(255,255,255,.55)}#hero .hbb-sep{background:rgba(255,255,255,.12)}
/* stage → dark glass */
#hero .svc-main{background:rgba(16,16,30,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(168,85,247,.15),0 40px 120px rgba(100,87,249,.45),0 0 90px rgba(34,211,238,.12)}
#hero .svc-main .shot-bar{background:rgba(255,255,255,.05);border-bottom-color:rgba(255,255,255,.08)}
#hero .svc-main .shot-bar span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
#hero .svc-slides{background:radial-gradient(circle at 50% 35%,rgba(100,87,249,.25),transparent 65%),#0c0c18}
#hero .sv-slide .sv-logo{mix-blend-mode:normal;background:#fff;border-radius:14px;padding:.9rem 1.3rem;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(100,87,249,.3);max-width:68%;max-height:55%}
#hero .sv-cap{background:linear-gradient(0deg,rgba(8,8,18,.95) 55%,transparent)}
#hero .sv-cap b{color:#fff}#hero .sv-cap small{color:rgba(255,255,255,.55)}
#hero .mb-row{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);box-shadow:none}
#hero .mb-row b{color:#fff}#hero .mb-row small{color:rgba(255,255,255,.5)}#hero .mb-row em{background:rgba(74,222,128,.15);color:#4ade80}
#hero .svc-dots{background:rgba(255,255,255,.03);border-top-color:rgba(255,255,255,.08)}#hero .svc-dots i{background:rgba(255,255,255,.2)}#hero .svc-dots i.on{background:#a78bfa}
#hero .svc-chip{background:rgba(20,20,38,.8);color:#fff;border-color:rgba(255,255,255,.16);backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(0,0,0,.45)}
#hero .svc-chip.on{background:linear-gradient(135deg,#6457f9,#a855f7);border-color:transparent;box-shadow:0 0 34px rgba(168,85,247,.7)}
/* dark nav on home */
body.on-home #nav{background:rgba(6,6,12,.9);border-bottom-color:rgba(255,255,255,.08)}
body.on-home #nav .nav-links a{color:rgba(255,255,255,.72)}
body.on-home #nav .nav-links a:hover,body.on-home #nav .nav-links a.active{color:#fff}
body.on-home #nav .nav-logo-img{filter:invert(1)}
body.on-home #nav .nav-cart,body.on-home #nav .hamburger,body.on-home #nav .nav-hamburger{color:#fff}
body.on-home #nav .nav-lang-trigger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
.sv-cloud{padding:6% 8% 18%}.cloud-svg{width:100%;height:100%;overflow:visible}
.cl-link{animation:dash 1.2s linear infinite}@keyframes dash{to{stroke-dashoffset:-22}}
.cl-cloud{animation:cloudf 4s ease-in-out infinite}@keyframes cloudf{50%{transform:translateY(-5px)}}
.cl-srv rect:first-child{filter:drop-shadow(0 0 8px rgba(100,87,249,.5))}
@media(prefers-reduced-motion:reduce){.cl-link,.cl-cloud{animation:none}}
.sv-cloud{padding:2% 3% 16%;overflow:hidden}
.cl-floor{position:absolute;left:-10%;right:-10%;bottom:-8%;height:55%;background-image:linear-gradient(rgba(100,87,249,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(100,87,249,.35) 1px,transparent 1px);background-size:38px 38px;transform:perspective(300px) rotateX(62deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(0deg,#000,transparent 90%);mask-image:linear-gradient(0deg,#000,transparent 90%);animation:floor 3s linear infinite}
@keyframes floor{to{background-position:0 38px}}
.cl-arc{animation:dash 1s linear infinite}
.tw{animation:twf 4.5s ease-in-out infinite}@keyframes twf{50%{transform:translateY(-3px)}}
.cl-tag{position:absolute;display:flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:100px;background:rgba(20,20,40,.82);border:1px solid rgba(255,255,255,.14);font-size:.66rem;font-weight:700;color:#fff;backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(0,0,0,.4);z-index:3;animation:bob 5s ease-in-out infinite}
.cl-tag.t1{top:8%;left:4%}.cl-tag.t2{top:14%;right:3%;animation-delay:-1.5s}.cl-tag.t3{top:46%;left:2%;animation-delay:-2.5s}.cl-tag.t4{top:50%;right:2%;animation-delay:-3.5s}
@media(max-width:600px){.cl-tag.t3,.cl-tag.t4{display:none}}
@media(prefers-reduced-motion:reduce){.cl-floor,.tw,.cl-tag,.cl-arc{animation:none}}

/* ═══ hero: μεγαλύτερη κάρτα + responsive μέσα στη σελίδα ═══ */
#hero .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:3rem;align-items:center}
#hero .hero-inner>*{min-width:0}
.svc-stage{max-width:700px;width:100%;padding:40px 28px}
.svc-slides{aspect-ratio:16/11}
.sv-cap b{font-size:1.15rem}.sv-cap small{font-size:.85rem}
.svc-chip{font-size:.85rem;padding:.6rem 1rem}
@media(max-width:1100px){#hero .hero-inner{grid-template-columns:1fr;gap:2.5rem}.svc-stage{max-width:620px;margin:0 auto}}
@media(max-width:600px){
  #hero .hero-inner{padding:2.5rem 1rem 2.5rem}
  .svc-stage{padding:26px 6px;max-width:100%}
  .svc-main{transform:none}
  .svc-slides{aspect-ratio:4/3.4}
  .svc-chip.c2,.svc-chip.c4{display:none}.svc-chip.c1{left:4px}
  .sv-cap b{font-size:1rem}
}
html,body{overflow-x:hidden}