/* PowerSecurity — Design Tokens
 * Brand: purple accent (#534080 light / #8a7cff dark), Ubuntu type
 * Inspirations: doppler.com, keyfactor.com — clean, structured, corporate-trust
 */

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Ubuntu+Mono:wght@400;700&display=swap");

:root {
  /* Type pairing default — Ubuntu everywhere (matches logo) */
  --font-display: "Ubuntu", system-ui, sans-serif;
  --font-body: "Ubuntu", system-ui, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Accent hue — overridable by Tweaks */
  --accent-h: 250;
  --accent-c-d: 0.18;        /* chroma in dark mode */
  --accent-c-l: 0.14;        /* chroma in light mode */

  /* Radius — overridable */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;

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

  /* Container */
  --container: 1240px;
  --container-narrow: 880px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(10, 8, 24, 0.06), 0 1px 1px rgba(10, 8, 24, 0.04);
  --shadow-2: 0 6px 18px rgba(10, 8, 24, 0.08), 0 2px 4px rgba(10, 8, 24, 0.04);
  --shadow-3: 0 24px 60px rgba(10, 8, 24, 0.18), 0 8px 18px rgba(10, 8, 24, 0.08);
  --shadow-glow: 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent),
                 0 12px 40px color-mix(in oklch, var(--accent) 22%, transparent);

  /* Transitions */
  --t-fast: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-base: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ===== DARK (default) ===== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           oklch(0.13 0.02 270);              /* near-black with purple tint */
  --bg-elev:      oklch(0.16 0.025 270);
  --surface:      oklch(0.18 0.028 270);
  --surface-2:    oklch(0.21 0.03 270);
  --surface-hi:   oklch(0.24 0.032 270);
  --line:         oklch(0.28 0.025 270 / 0.7);
  --line-soft:    oklch(0.28 0.025 270 / 0.35);

  --text:         oklch(0.96 0.01 270);
  --text-2:       oklch(0.78 0.015 270);
  --text-3:       oklch(0.62 0.018 270);
  --text-dim:     oklch(0.48 0.018 270);

  --accent:       oklch(0.72 var(--accent-c-d) var(--accent-h));
  --accent-hi:    oklch(0.80 var(--accent-c-d) var(--accent-h));
  --accent-lo:    oklch(0.55 var(--accent-c-d) var(--accent-h));
  --accent-soft:  oklch(0.30 calc(var(--accent-c-d) * 0.6) var(--accent-h) / 0.35);
  --accent-fg:    oklch(0.99 0 0);

  /* Glow palette — saturated in dark, pastel in light. Used by hero/footer/sub-hero. */
  --glow-1:       oklch(0.74 0.18 var(--accent-h));
  --glow-2:       oklch(0.78 0.16 calc(var(--accent-h) + 30));
  --glow-3:       oklch(0.62 0.18 calc(var(--accent-h) - 25));
  --glow-strength: 1;

  --good:         oklch(0.78 0.16 152);
  --warn:         oklch(0.82 0.15 80);
  --crit:         oklch(0.70 0.20 20);

  --grid-line:    oklch(1 0 0 / 0.04);
  --noise-opacity: 0.035;
}

/* ===== LIGHT ===== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:           oklch(0.985 0.003 270);
  --bg-elev:      oklch(0.975 0.005 270);
  --surface:      oklch(1 0 0);
  --surface-2:    oklch(0.96 0.006 270);
  --surface-hi:   oklch(0.93 0.008 270);
  --line:         oklch(0.20 0.04 270 / 0.18);
  --line-soft:    oklch(0.20 0.04 270 / 0.10);

  --text:         oklch(0.16 0.03 270);
  --text-2:       oklch(0.32 0.028 270);
  --text-3:       oklch(0.46 0.022 270);
  --text-dim:     oklch(0.58 0.018 270);

  --accent:       oklch(0.36 var(--accent-c-l) var(--accent-h));
  --accent-hi:    oklch(0.30 var(--accent-c-l) var(--accent-h));
  --accent-lo:    oklch(0.26 var(--accent-c-l) var(--accent-h));
  --accent-soft:  oklch(0.90 calc(var(--accent-c-l) * 0.4) var(--accent-h) / 0.7);
  --accent-fg:    oklch(0.99 0 0);

  /* Glow palette — pastel, almost watercolor. Stays luminous on white without staining. */
  --glow-1:       oklch(0.82 0.11 var(--accent-h));
  --glow-2:       oklch(0.85 0.10 calc(var(--accent-h) + 35));
  --glow-3:       oklch(0.83 0.11 calc(var(--accent-h) - 25));
  --glow-strength: 0.95;

  --good:         oklch(0.42 0.16 152);
  --warn:         oklch(0.55 0.16 80);
  --crit:         oklch(0.50 0.22 20);

  --grid-line:    oklch(0.20 0.04 270 / 0.08);
  --noise-opacity: 0.025;
}

/* ===== Type pairings (overridable via Tweaks) ===== */
:root[data-type="grotesk"] {
  --font-display: "Space Grotesk", "Ubuntu", sans-serif;
  --font-body: "Inter", "Ubuntu", sans-serif;
}
:root[data-type="serif"] {
  --font-display: "Instrument Serif", "Ubuntu", serif;
  --font-body: "Ubuntu", system-ui, sans-serif;
}

/* ===== Reset / base ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

img, svg { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); color: var(--text); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -0.035em; font-weight: 500; }
h2 { font-size: clamp(30px, 3.5vw, 48px); letter-spacing: -0.028em; }
h3 { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -0.018em; font-weight: 500; }
h4 { font-size: 17px; font-weight: 500; }

p { margin: 0; text-wrap: pretty; }

/* ===== Layout ===== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

.section { padding: var(--s-24) 0; }
.section-sm { padding: var(--s-16) 0; }
.section-lg { padding: var(--s-32) 0 var(--s-24); }

@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 18px; }
  .section { padding: var(--s-16) 0; }
  .section-lg { padding: var(--s-20) 0 var(--s-16); }
}
@media (max-width: 480px) {
  .container, .container-narrow { padding: 0 14px; }
}

/* ===== Eyebrow ===== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 44px; padding: 0 20px;
  font-family: var(--font-body);
  font-weight: 500; font-size: 15px;
  border-radius: var(--r-md);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-base);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.18) inset,
              0 6px 18px color-mix(in oklch, var(--accent) 30%, transparent);
}
.btn-primary:hover { background: var(--accent-hi); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--text-3); }

.btn-link {
  height: auto; padding: 0;
  color: var(--text);
  background: transparent;
  font-weight: 500;
}
.btn-link:hover { color: var(--accent); }

.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }

/* arrow that nudges on hover */
.btn .ar, .btn-link .ar {
  display: inline-block;
  transition: transform var(--t-fast);
}
.btn:hover .ar, .btn-link:hover .ar { transform: translateX(3px); }

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.card:hover { border-color: color-mix(in oklch, var(--accent) 50%, var(--line)); }

.card-elev { box-shadow: var(--shadow-2); }

/* ===== Tag ===== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tag-accent {
  color: var(--accent-hi);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}

/* ===== Divider ===== */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  border: 0; margin: 0;
}

/* ===== Background grid (toggleable) ===== */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 80%);
}

.bg-glow {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 22% 18%,
      color-mix(in oklch, var(--glow-1) 70%, transparent) 0%,
      color-mix(in oklch, var(--glow-1) 22%, transparent) 38%,
      transparent 72%),
    radial-gradient(ellipse 55% 65% at 78% 36%,
      color-mix(in oklch, var(--glow-2) 60%, transparent) 0%,
      color-mix(in oklch, var(--glow-2) 16%, transparent) 42%,
      transparent 74%),
    radial-gradient(ellipse 70% 60% at 50% 92%,
      color-mix(in oklch, var(--glow-3) 60%, transparent) 0%,
      color-mix(in oklch, var(--glow-3) 14%, transparent) 40%,
      transparent 72%);
  filter: blur(60px) saturate(1.05);
  opacity: var(--glow-strength);
  mix-blend-mode: normal;
}
:root[data-theme="light"] .bg-glow { mix-blend-mode: multiply; filter: blur(70px) saturate(0.9); }

.bg-particles {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, var(--accent) 0.6px, transparent 0.8px),
    radial-gradient(circle at 70% 60%, var(--accent-hi) 0.6px, transparent 0.8px),
    radial-gradient(circle at 40% 80%, var(--accent) 0.5px, transparent 0.7px),
    radial-gradient(circle at 85% 20%, var(--accent-hi) 0.6px, transparent 0.8px);
  background-size: 280px 280px, 360px 360px, 220px 220px, 320px 320px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}

/* Reveal-on-load animation */
@keyframes ps-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: ps-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rise-1 { animation-delay: 60ms; }
.rise-2 { animation-delay: 140ms; }
.rise-3 { animation-delay: 220ms; }
.rise-4 { animation-delay: 300ms; }
.rise-5 { animation-delay: 380ms; }

/* ===== Link with underline animation ===== */
.lnk {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text);
  font-weight: 500;
}
.lnk::after {
  content: ""; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-base);
}
.lnk:hover { color: var(--accent); }
.lnk:hover::after { transform: scaleX(1); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}