/* ============================================================
   POLARIS — locked design system  (Direction C: monochrome + color splashes)
   Premium near-black base, Geist type, Linear-style windows,
   signature frosted glass, glassmorphic sticky header, color accents.
   ============================================================ */

:root {
  /* ---- Grayscale base ---- */
  --bg-0: #080a0b;          /* page black, faint cool/silver tint */
  --bg-1: #0c0e11;          /* raised surface */
  --bg-2: #101216;          /* card top */
  --ink-0: #F7F8F8;         /* primary text */
  --ink-1: #D0D6E0;         /* secondary */
  --ink-2: #8A8F98;         /* tertiary / mono labels */
  --ink-3: #8A8F98;         /* faint */
  --hair: rgba(255,255,255,0.085);
  --hair-2: rgba(255,255,255,0.055);
  --hair-top: rgba(255,255,255,0.18);

  /* ---- One cool accent (interactive states, key numbers, links) ---- */
  --accent: #7c8bf5;        /* periwinkle, Linear-ish */
  --accent-bright: color-mix(in oklab, var(--accent), white 16%);
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 40%, transparent);

  /* ---- Color splashes (Linear-style label dots / icons) — used sparingly ---- */
  --c-red:    #f0635d;
  --c-amber:  #e9a23b;
  --c-green:  #46c98b;
  --c-blue:   #5b8bff;
  --c-purple: #b27cf0;
  --c-teal:   #2fd3c3;

  /* ---- Gradient wash (matte, subtle — variant via body[data-wash]) ---- */
  --wash-a: rgba(126,139,245,0.18);
  --wash-b: rgba(150,160,185,0.12);
  --wash-a-x: 50%;  --wash-a-y: -8%;
  --wash-b-x: 70%;  --wash-b-y: 38%;

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 9px;

  --font: "Inter Variable", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Inter Variable", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --maxw: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Background — near-black #080a0b with a faint silver backlight ===== */
.page-wash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* silver backlight выключена на пробу 2026-06-11 — чтобы вернуть, раскомментируй блок background ниже
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(190,198,210,0.10), rgba(150,160,175,0.04) 34%, transparent 62%),
    radial-gradient(80% 60% at 50% 108%, rgba(150,160,175,0.05), transparent 60%);
  */
  opacity: 1;
}

/* wash variants (toggled from Tweaks) */
body[data-wash="silver"] { }
body[data-wash="neutral"] { --wash-a: rgba(160,168,188,0.16); --wash-b: rgba(120,128,150,0.10); }
body[data-wash="periwinkle"] { --wash-a: rgba(126,139,245,0.20); --wash-b: rgba(150,160,185,0.10); }
body[data-wash="violet"] { --wash-a: rgba(150,110,235,0.20); --wash-b: rgba(95,120,235,0.13); }
body[data-wash="teal"] { --wash-a: rgba(40,170,170,0.18); --wash-b: rgba(70,110,150,0.12); }
body[data-wash="aurora"] {
  --wash-a: rgba(126,139,245,0.18); --wash-b: rgba(180,124,240,0.14);
  --wash-a-x: 32%; --wash-a-y: -6%; --wash-b-x: 78%; --wash-b-y: 30%;
}

.shell { position: relative; z-index: 1; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ===== Linear-style bordered-gradient "window" card ===== */
.window {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(157deg, #161719 0%, #101113 46%, #0c0d0f 100%);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 0 0 var(--hair-top) inset;
}
/* subtle light corner highlights (top-left / top-right), Linear-style */
.window::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(52% 44% at 0% 0%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(52% 44% at 100% 0%, rgba(255,255,255,0.035), transparent 60%);
}
.window > * { position: relative; }

/* ===== Signature frosted glass (verbatim spec, lightened for near-black) ===== */
.glass3d {
  --filter-glass3d: blur(47px) brightness(0.9) saturate(2.8);
  --color-glass3d: hsl(168 85% 10% / 0.2);
  --noise-glass3d: url("https://www.transparenttextures.com/patterns/egg-shell.png");
  position: relative; z-index: 4;
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0.75px hsl(205 20% 10% / 0.2), 0.7px 0.8px 1.2px -0.4px hsl(205 20% 10% / 0.1), 1.3px 1.5px 2.2px -0.8px hsl(205 20% 10% / 0.1), 2.3px 2.6px 3.9px -1.2px hsl(205 20% 10% / 0.1), 3.9px 4.4px 6.6px -1.7px hsl(205 20% 10% / 0.1), 6.5px 7.2px 10.9px -2.1px hsl(205 20% 10% / 0.1), 8px 9px 14px -2.5px hsl(205 20% 10% / 0.2);
}
.glass3d::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; z-index: 3;
  -webkit-backdrop-filter: var(--filter-glass3d); backdrop-filter: var(--filter-glass3d);
  background-color: var(--color-glass3d);
  /* lightened white overlay so it reads as frosted glass on near-black (iOS control center on black) */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035) 42%, rgba(255,255,255,0.015)),
    var(--noise-glass3d);
  background-size: auto, 100px;
  background-repeat: repeat;
}
.glass3d::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; z-index: 5;
  box-shadow: inset 2px 2px 1px -3px hsl(205 20% 90% / 0.8), inset 4px 4px 2px -6px hsl(205 20% 90% / 0.3), inset 1.5px 1.5px 1.5px -0.75px hsl(205 20% 90% / 0.15), inset 1.5px 1.5px 0.25px hsl(205 20% 90% / 0.03), inset 0 0 0.25px 0.5px hsl(205 20% 90% / 0.03);
}
.glass3d > * { position: relative; z-index: 6; }

/* ===== Buttons ===== */
.btn {
  font-family: var(--font); font-weight: 510; font-size: 14px; letter-spacing: -0.01em;
  border-radius: 9999px; padding: 9px 17px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  text-decoration: none; /* anchors styled as buttons must not underline */
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
/* Linear buttons — replicated 1:1 from linear.app (pill radius + layered shadows) */
.btn-primary { color: #08090A; background: #E5E5E6; border-color: #E5E5E6;
  box-shadow: rgba(0,0,0,0) 0px 8px 2px 0px, rgba(0,0,0,0.01) 0px 5px 2px 0px, rgba(0,0,0,0.04) 0px 3px 2px 0px, rgba(0,0,0,0.07) 0px 1px 1px 0px, rgba(0,0,0,0.08) 0px 0px 1px 0px; }
.btn-primary:hover { background: #f4f4f5; border-color: #f4f4f5; }
.btn-ghost { color: #F7F8F8; background: #141516; border-color: transparent;
  box-shadow: rgba(255,255,255,0.03) 0px 0px 0px 1px inset, rgba(255,255,255,0.04) 0px 1px 0px 0px inset, rgba(0,0,0,0.6) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 4px 4px 0px; }
.btn-ghost:hover { background: #202122; }
.btn-accent { color: #fff; background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 12px 30px -10px var(--accent-soft); }
.btn-accent:hover { transform: translateY(-1px); }
.btn-lg { padding: 12px 24px; font-size: 15px; border-radius: 9999px; }
.btn-link { background: none; border: none; color: var(--ink-1); cursor: pointer; font-family: var(--font);
  font-size: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.btn-link:hover { color: var(--ink-0); }
.btn-link .arr { transition: transform .2s ease; }
.btn-link:hover .arr { transform: translateX(3px); }

/* ===== Eyebrow / mono labels ===== */
.eyebrow { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.pill-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px;
  border: 1px solid var(--hair); border-radius: 999px; background: rgba(255,255,255,0.025); }
.pill-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c3c8d0 55%, #888e98);
  box-shadow: 0 0 6px rgba(214,219,226,0.55), 0 0 12px rgba(214,219,226,0.28);
  animation: dot-glow 3.2s ease-in-out infinite; }

/* ===== Color label (dot + text), Linear-style ===== */
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-1);
  padding: 4px 9px 4px 8px; border-radius: 7px; background: rgba(255,255,255,0.045); border: 1px solid var(--hair-2); }
.tag .d { width: 7px; height: 7px; border-radius: 50%; }
.d-red{background:var(--c-red)} .d-amber{background:var(--c-amber)} .d-green{background:var(--c-green)}
.d-blue{background:var(--c-blue)} .d-purple{background:var(--c-purple)} .d-teal{background:var(--c-teal)}
.d-accent{background:var(--accent)}

/* ===== Section scaffolding ===== */
section { position: relative; }
.section-pad { padding: 120px 0; }
.section-pad.section-line { border-top: 1px solid rgba(255,255,255,0.12); }
.section-head { max-width: 1040px; }
.kicker { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 9px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; --gc: 214,219,226;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c3c8d0 55%, #888e98);
  animation: dot-glow 2.1s ease-in-out infinite; }
@keyframes dot-glow {
  0%, 100% { box-shadow: 0 0 3px 0 rgba(var(--gc),0.4), 0 0 7px 1px rgba(var(--gc),0.2); }
  50% { box-shadow: 0 0 6px 1px rgba(var(--gc),0.7), 0 0 13px 2px rgba(var(--gc),0.4); }
}
/* per-section dot colors */
#problem .kicker::before { --gc: 240,99,93; background: radial-gradient(circle at 35% 30%, #ff938b, #f0635d 58%, #c2382f); }
#benefits .kicker::before { --gc: 247,215,126; background: radial-gradient(circle at 35% 30%, #ffe7a6, #ecc25c 58%, #c0902f); }
#pricing .kicker::before { --gc: 247,215,126; background: radial-gradient(circle at 35% 30%, #ffe7a6, #ecc25c 58%, #c0902f); }
@media (prefers-reduced-motion: reduce) { .kicker::before { animation: none; } }
.h2 { font-weight: 600; font-size: 54px; line-height: 1.05; letter-spacing: -0.03em; margin: 18px 0 0; text-wrap: pretty; }
.h2 .dim { color: var(--ink-0); font-weight: 500; }
.lede { color: var(--ink-1); font-size: 19.5px; line-height: 1.6; margin-top: 20px; max-width: 620px; }

.divider-soft { height: 1px; background: linear-gradient(90deg, transparent, var(--hair), transparent); }

/* utility */
.mono-num { font-family: var(--mono); }
.accent-ink { color: var(--accent-bright); }

/* Linear-style separator rules */
.rule-h { height: 1px; background: var(--hair); border: 0; margin: 0; }
.rule-v { width: 1px; align-self: stretch; background: var(--hair); }
.section-rule { height: 1px; max-width: var(--maxw); margin: 0 auto; background: var(--hair-2); }
.glow-accent { box-shadow: 0 0 24px -6px var(--accent-soft); }