/* ============================================================
   Storvio — main stylesheet (design system)
   Cloud storage. Light, clean, teal/blue accent. 2026.
   ============================================================ */

/* ---------- @font-face: Inter (with system fallback) ---------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/static/fonts/inter-v12.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root{
  /* brand */
  --brand-500:#13a596;
  --brand-600:#0e8d80;
  --brand-700:#0b6f66;
  --accent-500:#2563c9;
  --accent-600:#1d4fa8;
  --grad-brand:linear-gradient(135deg,#19b4a6 0%,#2563c9 100%);
  --grad-brand-soft:linear-gradient(135deg,#e6f7f4 0%,#e7eefb 100%);

  /* neutrals (light theme) */
  --bg:#f6f8fb;
  --bg-elevated:#ffffff;
  --surface:#ffffff;
  --surface-muted:#f1f4f9;
  --surface-hover:#eef2f8;
  --border:#e2e8f1;
  --border-strong:#cdd7e5;
  --text:#0f2740;
  --text-muted:#566579;
  --text-faint:#8a97a8;
  --text-invert:#ffffff;

  /* status */
  --success:#1aa06d;
  --warning:#c9871f;
  --danger:#d8453b;
  --danger-bg:#fdecea;
  --danger-border:#f5c2bd;
  --info:#2563c9;

  /* radius */
  --r-xs:6px;
  --r-sm:9px;
  --r-md:13px;
  --r-lg:18px;
  --r-xl:26px;
  --r-pill:999px;

  /* spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;

  /* shadows */
  --shadow-xs:0 1px 2px rgba(15,39,64,.06);
  --shadow-sm:0 2px 6px rgba(15,39,64,.07);
  --shadow-md:0 8px 24px rgba(15,39,64,.09);
  --shadow-lg:0 18px 48px rgba(15,39,64,.13);
  --ring:0 0 0 4px rgba(37,99,201,.18);

  /* typography */
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fz-xs:12px;--fz-sm:13px;--fz-base:15px;--fz-md:16px;--fz-lg:18px;--fz-xl:22px;--fz-2xl:28px;--fz-3xl:36px;--fz-4xl:46px;--fz-5xl:58px;

  --header-h:66px;
  --maxw:1180px;
  --transition:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:var(--fz-base);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
a{color:var(--accent-500);transition:color var(--transition)}
a:hover{color:var(--accent-600)}
::selection{background:rgba(25,180,166,.25)}

/* headings & text helpers */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em;color:var(--text);font-weight:700}
h1{font-size:var(--fz-4xl)}
h2{font-size:var(--fz-3xl)}
h3{font-size:var(--fz-xl)}
h4{font-size:var(--fz-lg)}
.lead{font-size:var(--fz-lg);color:var(--text-muted);line-height:1.65}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.eyebrow{display:inline-block;font-size:var(--fz-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600)}
.text-gradient{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.section{padding-block:var(--sp-20)}
.section-sm{padding-block:var(--sp-12)}
.section-head{max-width:680px;margin-inline:auto;text-align:center;margin-bottom:var(--sp-12)}
.section-head .lead{margin-top:var(--sp-3)}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header__inner{height:var(--header-h);display:flex;align-items:center;gap:var(--sp-6)}
.brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.brand img{height:28px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav a{
  display:inline-flex;align-items:center;padding:8px 13px;border-radius:var(--r-sm);
  color:var(--text-muted);font-weight:600;font-size:var(--fz-sm);
  transition:background var(--transition),color var(--transition);
}
.nav a:hover{background:var(--surface-hover);color:var(--text)}
.nav a.is-active{color:var(--text);background:var(--surface-muted)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}

/* language + theme toggles */
.lang-switch{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-pill);overflow:hidden;background:var(--surface)}
.lang-switch button{padding:5px 11px;font-size:var(--fz-xs);font-weight:700;color:var(--text-muted);background:transparent;border:0}
.lang-switch button.is-active{background:var(--grad-brand);color:#fff}
.theme-toggle{
  width:36px;height:36px;display:inline-grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:16px;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.theme-toggle:hover{background:var(--surface-hover);color:var(--text)}
.nav-burger{display:none;width:38px;height:38px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font-size:18px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:600;font-size:var(--fz-sm);line-height:1;
  padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition),color var(--transition),border-color var(--transition);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--ring)}
.btn--primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{color:#fff;box-shadow:var(--shadow-md);filter:brightness(1.03)}
.btn--ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface-hover);color:var(--text)}
.btn--subtle{background:var(--surface-muted);color:var(--text)}
.btn--subtle:hover{background:var(--surface-hover)}
.btn--link{background:transparent;color:var(--accent-500);padding-inline:6px}
.btn--link:hover{color:var(--accent-600);text-decoration:underline}
.btn--lg{padding:14px 26px;font-size:var(--fz-md);border-radius:var(--r-md)}
.btn--sm{padding:8px 13px;font-size:var(--fz-xs)}
.btn--block{width:100%}
.btn[disabled],.btn.is-loading{opacity:.7;cursor:not-allowed;pointer-events:none}

/* ---------- badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fz-xs);font-weight:700;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-muted);color:var(--text-muted)}
.badge--brand{background:rgba(25,180,166,.12);color:var(--brand-700)}
.badge--accent{background:rgba(37,99,201,.12);color:var(--accent-600)}
.badge--success{background:rgba(26,160,109,.12);color:var(--success)}
.badge--warning{background:rgba(201,135,31,.14);color:var(--warning)}
.badge--dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-xs)}
.card--hover{transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.card--pad-lg{padding:var(--sp-8)}
.card__icon{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;font-size:22px;background:var(--grad-brand-soft);color:var(--brand-700);margin-bottom:var(--sp-4)}
.card__title{font-size:var(--fz-lg);font-weight:700;margin-bottom:6px}
.card__text{color:var(--text-muted);font-size:var(--fz-base)}

/* ---------- grid helpers ---------- */
.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:var(--sp-20) var(--sp-16);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 420px at 78% -8%,rgba(37,99,201,.12),transparent 60%),
    radial-gradient(720px 380px at 8% 12%,rgba(25,180,166,.13),transparent 60%);
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:center}
.hero h1{font-size:clamp(34px,5vw,var(--fz-5xl));line-height:1.07}
.hero .lead{margin-top:var(--sp-5);max-width:520px}
.hero__cta{display:flex;gap:var(--sp-3);margin-top:var(--sp-8);flex-wrap:wrap}
.hero__note{margin-top:var(--sp-4);font-size:var(--fz-sm);color:var(--text-faint);display:flex;align-items:center;gap:8px}

/* glass app-window mock built with CSS */
.hero__visual{position:relative}
.window-mock{
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.window-mock__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--surface-muted)}
.window-mock__dot{width:11px;height:11px;border-radius:50%}
.window-mock__dot.r{background:#ff5f57}.window-mock__dot.y{background:#febc2e}.window-mock__dot.g{background:#28c840}
.window-mock__body{padding:18px;display:grid;grid-template-columns:140px 1fr;gap:16px;min-height:280px}
.window-mock__side{display:flex;flex-direction:column;gap:8px}
.mock-side-item{height:30px;border-radius:var(--r-sm);background:var(--surface-muted)}
.mock-side-item.active{background:var(--grad-brand-soft)}
.window-mock__main{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start}
.mock-file{aspect-ratio:1/.86;border-radius:var(--r-md);background:linear-gradient(160deg,var(--surface-muted),#fff);border:1px solid var(--border);display:flex;flex-direction:column;justify-content:flex-end;padding:10px}
.mock-file::before{content:"";display:block;width:26px;height:26px;border-radius:7px;background:var(--grad-brand);opacity:.85;margin-bottom:auto}
.mock-file span{height:7px;width:70%;border-radius:4px;background:var(--border-strong)}
.float-chip{position:absolute;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:var(--r-md);padding:10px 14px;font-size:var(--fz-sm);font-weight:600;display:flex;align-items:center;gap:9px}
.float-chip i{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(26,160,109,.16)}
.float-chip--tl{top:-18px;left:-22px}
.float-chip--br{bottom:-16px;right:-18px}

/* ---------- logo strip ---------- */
.logo-strip{display:flex;align-items:center;justify-content:center;gap:var(--sp-10);flex-wrap:wrap;opacity:.62}
.logo-strip span{font-weight:800;font-size:var(--fz-lg);color:var(--text-faint);letter-spacing:.02em}

/* ---------- steps / how it works ---------- */
.step{position:relative;padding-left:var(--sp-12)}
.step__num{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:var(--r-pill);display:grid;place-items:center;font-weight:800;background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-sm)}
.step h3{font-size:var(--fz-lg);margin-bottom:6px}

/* ---------- pricing table ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-8);box-shadow:var(--shadow-xs)}
.price-card--featured{border-color:transparent;box-shadow:var(--shadow-lg);outline:2px solid var(--brand-500)}
.price-card__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-brand);color:#fff;font-size:var(--fz-xs);font-weight:700;padding:5px 14px;border-radius:var(--r-pill)}
.price-card__name{font-size:var(--fz-lg);font-weight:700}
.price-card__price{display:flex;align-items:flex-end;gap:6px;margin-block:var(--sp-4)}
.price-card__amount{font-size:var(--fz-4xl);font-weight:800;letter-spacing:-.03em}
.price-card__per{color:var(--text-faint);font-size:var(--fz-sm);padding-bottom:9px}
.price-features{list-style:none;padding:0;margin:var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.price-features li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fz-base);color:var(--text-muted)}
.price-features li::before{content:"";flex:0 0 auto;margin-top:3px;width:18px;height:18px;border-radius:50%;background:rgba(26,160,109,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231aa06d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.price-features li.is-off{color:var(--text-faint)}
.price-features li.is-off::before{background:var(--surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97a8' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--fz-sm);font-weight:600;color:var(--text)}
.field .hint{font-size:var(--fz-xs);color:var(--text-faint)}
.input,.textarea,.select{
  width:100%;font-family:var(--font);font-size:var(--fz-base);color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:11px 13px;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent-500);box-shadow:var(--ring)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(216,69,59,.14)}
.textarea{min-height:120px;resize:vertical}
.input-group{display:flex;gap:var(--sp-3)}

/* OTP / code inputs */
.otp{display:flex;gap:10px;justify-content:center}
.otp input{width:46px;height:54px;text-align:center;font-size:var(--fz-xl);font-weight:700;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface)}
.otp input:focus{outline:none;border-color:var(--accent-500);box-shadow:var(--ring)}

/* inline form alert (the "almost worked" error) */
.form-alert{
  display:none;align-items:flex-start;gap:10px;
  background:var(--danger-bg);border:1px solid var(--danger-border);color:#9d2c24;
  border-radius:var(--r-sm);padding:11px 13px;font-size:var(--fz-sm);line-height:1.45;
  animation:vcFade .25s ease both;
}
.form-alert.is-shown{display:flex}
.form-alert::before{content:"!";flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;margin-top:1px}
.form-alert--info{background:rgba(37,99,201,.08);border-color:rgba(37,99,201,.25);color:#1d4fa8}
.form-alert--info::before{content:"i";background:var(--info)}
.form-success{display:none;align-items:flex-start;gap:10px;background:rgba(26,160,109,.1);border:1px solid rgba(26,160,109,.3);color:#11774f;border-radius:var(--r-sm);padding:11px 13px;font-size:var(--fz-sm)}
.form-success.is-shown{display:flex}

/* auth card layout */
.auth-wrap{min-height:calc(100vh - var(--header-h) - 240px);display:grid;place-items:center;padding-block:var(--sp-16)}
.auth-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md);padding:var(--sp-10)}
.auth-card h1{font-size:var(--fz-2xl);text-align:center}
.auth-card .sub{text-align:center;color:var(--text-muted);margin-top:6px;margin-bottom:var(--sp-6)}
.auth-foot{text-align:center;margin-top:var(--sp-5);font-size:var(--fz-sm);color:var(--text-muted)}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text-faint);font-size:var(--fz-xs);margin-block:var(--sp-5)}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--border)}
.step-pane[hidden]{display:none}

/* spinner */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spinner--dark{border-color:rgba(15,39,64,.25);border-top-color:var(--accent-500)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- testimonials ---------- */
.quote-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:var(--sp-4)}
.quote-card p{color:var(--text);font-size:var(--fz-md);line-height:1.6}
.quote-author{display:flex;align-items:center;gap:12px}
.quote-author img,.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--grad-brand)}
.quote-author b{display:block;font-size:var(--fz-sm)}
.quote-author span{font-size:var(--fz-xs);color:var(--text-faint)}
.stars{color:#f4b740;font-size:14px;letter-spacing:2px}

/* ---------- stats band ---------- */
.stat{ text-align:center }
.stat__num{font-size:var(--fz-3xl);font-weight:800;letter-spacing:-.02em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{font-size:var(--fz-sm);color:var(--text-muted);margin-top:4px}

/* ---------- CTA band ---------- */
.cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-brand);color:#fff;padding:var(--sp-16);text-align:center}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 120%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.9)}
.cta-band .btn--ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.22);color:#fff}

/* ---------- FAQ accordion ---------- */
.faq{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp-3)}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.faq-item__q{width:100%;text-align:left;background:transparent;border:0;padding:18px 20px;font-weight:600;font-size:var(--fz-md);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item__q::after{content:"+";font-size:22px;font-weight:400;color:var(--text-faint);transition:transform var(--transition)}
.faq-item.is-open .faq-item__q::after{transform:rotate(45deg)}
.faq-item__a{max-height:0;overflow:hidden;transition:max-height .28s ease;color:var(--text-muted)}
.faq-item__a > div{padding:0 20px 18px}
.faq-item.is-open .faq-item__a{max-height:340px}

/* ---------- article / blog ---------- */
.article-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-xs);transition:transform var(--transition),box-shadow var(--transition)}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.article-card__cover{aspect-ratio:16/9;background:var(--grad-brand-soft);position:relative}
.article-card__cover::after{content:"";position:absolute;inset:0;background:radial-gradient(300px 160px at 70% 20%,rgba(37,99,201,.18),transparent 60%)}
.article-card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:10px}
.article-card__meta{display:flex;gap:10px;font-size:var(--fz-xs);color:var(--text-faint)}
.article-card h3{font-size:var(--fz-lg)}
.prose{max-width:720px;margin-inline:auto}
.prose h2{font-size:var(--fz-2xl);margin-top:var(--sp-10);margin-bottom:var(--sp-4)}
.prose h3{font-size:var(--fz-xl);margin-top:var(--sp-8);margin-bottom:var(--sp-3)}
.prose p{margin-bottom:var(--sp-4);color:var(--text)}
.prose ul,.prose ol{margin:0 0 var(--sp-4) 1.2em;color:var(--text-muted)}
.prose li{margin-bottom:8px}
.prose blockquote{border-left:3px solid var(--brand-500);padding-left:var(--sp-4);color:var(--text-muted);font-style:italic;margin:var(--sp-6) 0}

/* legal page */
.legal{max-width:780px;margin-inline:auto}
.legal h2{font-size:var(--fz-xl);margin-top:var(--sp-8);margin-bottom:var(--sp-3)}
.legal p,.legal li{color:var(--text-muted)}
.legal .updated{font-size:var(--fz-sm);color:var(--text-faint);margin-bottom:var(--sp-8)}

/* ---------- dashboard skeleton (app.html) ---------- */
.app-shell{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - var(--header-h))}
.app-side{border-right:1px solid var(--border);background:var(--surface);padding:var(--sp-5)}
.app-side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--text-muted);font-weight:600;font-size:var(--fz-sm)}
.app-side a.is-active,.app-side a:hover{background:var(--surface-muted);color:var(--text)}
.app-main{padding:var(--sp-8)}
.skel{background:linear-gradient(90deg,var(--surface-muted) 25%,var(--surface-hover) 37%,var(--surface-muted) 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:var(--r-sm)}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- toasts ---------- */
.toast-host{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent-500);box-shadow:var(--shadow-md);border-radius:var(--r-md);padding:13px 15px;font-size:var(--fz-sm);animation:vcFade .25s ease both}
.toast--error{border-left-color:var(--danger)}
.toast--success{border-left-color:var(--success)}
.toast__title{font-weight:700;margin-bottom:2px}
.toast__close{margin-left:auto;background:transparent;border:0;color:var(--text-faint);font-size:16px;cursor:pointer}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(15,39,64,.42);backdrop-filter:blur(2px);display:none;place-items:center;padding:20px}
.modal-backdrop.is-open{display:grid}
.modal{width:100%;max-width:460px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:var(--sp-8);animation:vcFade .2s ease both}
.modal h3{margin-bottom:8px}
.modal__foot{display:flex;justify-content:flex-end;gap:10px;margin-top:var(--sp-6)}

/* ---------- cookie banner ---------- */
.cookie-bar{position:fixed;left:20px;right:20px;bottom:20px;z-index:80;max-width:760px;margin-inline:auto;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:var(--r-lg);padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-bar p{font-size:var(--fz-sm);color:var(--text-muted);flex:1;min-width:240px}
.cookie-bar .actions{display:flex;gap:10px;margin-left:auto}

/* ---------- footer ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding-block:var(--sp-16) var(--sp-8);margin-top:var(--sp-20)}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--sp-8)}
.footer-brand p{color:var(--text-muted);font-size:var(--fz-sm);margin-top:var(--sp-3);max-width:280px}
.footer-col h4{font-size:var(--fz-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:var(--sp-4)}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--text-muted);font-size:var(--fz-sm)}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--border);color:var(--text-faint);font-size:var(--fz-sm)}
.footer-social{display:flex;gap:10px}
.footer-social a{width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface-muted);display:grid;place-items:center;color:var(--text-muted)}
.footer-social a:hover{background:var(--surface-hover);color:var(--text)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr;gap:var(--sp-10)}
  .hero__visual{order:-1}
}
@media (max-width:760px){
  :root{--fz-4xl:38px;--fz-3xl:30px}
  .nav,.header-actions .btn--ghost,.header-actions .lang-switch{display:none}
  .nav-burger{display:inline-grid;place-items:center}
  .nav.is-open{display:flex;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--border);padding:12px;gap:4px;box-shadow:var(--shadow-md)}
  .pricing-grid{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .section{padding-block:var(--sp-12)}
  .app-shell{grid-template-columns:1fr}
  .app-side{display:none}
  .footer-grid{grid-template-columns:1fr}
  .window-mock__main{grid-template-columns:repeat(2,1fr)}
}