/* Polaris — base styles, refinements layered over Tailwind */

:root {
  --ink: #0B2426;
  --teal-900: #0A4848;
  --teal-800: #0E5C5C;
  --teal-700: #06686D;
  --teal-600: #089CA3;
  --teal-500: #0BD0D9;
  --teal-400: #2DD4D4;
  --teal-300: #7FE5E5;
  --paper: #F8FAFA;
  --mint: #E8F5F5;
}

html { scroll-behavior: smooth; }
body { font-feature-settings: 'ss01','cv11'; -webkit-font-smoothing: antialiased; }

/* Selection */
::selection { background: rgba(11, 208, 217, .25); color: #06686D; }

/* Pretty wrap for headlines */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Animated fade reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .4s; }

/* Star glow */
.star-glow { filter: drop-shadow(0 0 24px rgba(11, 208, 217, .55)) drop-shadow(0 0 60px rgba(11, 208, 217, .25)); }

/* Star slow rotation */
.star-rotate { animation: spin 120s linear infinite; transform-origin: center; }

/* Hero radial mask for constellation */
.hero-mask {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}

/* Subtle grain */
.grain::after {
  content: '';
  pointer-events: none;
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: .5;
}

/* Border gradient utility */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content:'';
  position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: linear-gradient(140deg, rgba(11,208,217,.55), rgba(8,156,163,.15) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Tag style */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-600);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(11,208,217,.16);
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.25rem; border-radius: 999px; font-weight: 500; line-height: 1; transition: transform .25s ease, background .25s ease, box-shadow .25s ease, color .25s ease; will-change: transform; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #14383b; box-shadow: 0 10px 30px -10px rgba(11,36,38,.5); }
.btn-accent { background: linear-gradient(180deg, #0BD0D9, #089CA3); color: #04282a; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 24px -12px rgba(11,208,217,.7); }
.btn-accent:hover { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 30px -10px rgba(11,208,217,.85); }
.btn-ghost { color: var(--ink); background: transparent; border: 1px solid rgba(11,36,38,.16); }
.btn-ghost:hover { background: rgba(11,36,38,.04); }
.btn-ghost-light { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.22); }
.btn-ghost-light:hover { background: rgba(255,255,255,.06); }

/* Inputs */
.field { width: 100%; padding: .9rem 1rem; border-radius: 12px; border: 1px solid rgba(11,36,38,.12); background: #fff; font-size: 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 4px rgba(11,208,217,.18); }
.field-dark { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.14); }
.field-dark::placeholder { color: rgba(255,255,255,.4); }
.field-dark:focus { border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(11,208,217,.22); }
/* Native dropdown popover — force dark bg + white text so option labels are readable
   on Windows/Chrome where the OS default is white-on-white. */
select.field-dark option { background-color: #0E3739; color: #fff; }
select.field-dark option:disabled { color: rgba(255,255,255,.4); }
.field-error { border-color: #dc2626; }
.field-error:focus { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
select.field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B2426' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
select.field-dark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* Card */
.card { background: #fff; border: 1px solid rgba(11,36,38,.07); border-radius: 18px; transition: border-color .25s, transform .25s, box-shadow .25s; }
.card:hover { border-color: rgba(8,156,163,.35); box-shadow: 0 18px 40px -22px rgba(11,36,38,.18); }
.card-dark { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; }
.card-dark:hover { border-color: rgba(11,208,217,.4); background: rgba(255,255,255,.05); }

/* Section dividers */
.hairline { background: linear-gradient(90deg, transparent, rgba(11,36,38,.14), transparent); height: 1px; }
.hairline-light { background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); height: 1px; }

/* Nav */
.nav-link { position: relative; color: rgba(11,36,38,.65); transition: color .2s; }
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--teal-500); border-radius: 2px; }

.nav-link-dark { color: rgba(255,255,255,.6); }
.nav-link-dark:hover, .nav-link-dark.active { color: #fff; }
.nav-link-dark.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--teal-500); border-radius: 2px; }

/* Number tabular */
.tabular { font-variant-numeric: tabular-nums; }

/* Big display tracking */
.display { letter-spacing: -0.035em; }
.display-tight { letter-spacing: -0.045em; }

/* Step progress */
.step-bar { height: 3px; background: rgba(11,36,38,.08); border-radius: 999px; overflow: hidden; }
.step-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #089CA3, #0BD0D9); transition: width .6s cubic-bezier(.2,.7,.2,1); }

/* Constellation lines (svg backdrop) */
.constellation-line { stroke: rgba(11,208,217,.35); }
.constellation-dot { fill: #0BD0D9; }

/* Print hidden during tweaks panel etc */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Subtle parallax helper */
.parallax-slow { will-change: transform; transition: transform .25s linear; }

/* Comparison table */
.cmp-table th, .cmp-table td { padding: 18px 20px; }
.cmp-table tr + tr td { border-top: 1px solid rgba(11,36,38,.08); }
.cmp-col-us { background: linear-gradient(180deg, rgba(11,208,217,.07), rgba(11,208,217,0)); }

/* Legal placeholder tokens (e.g. [ORG.NR]) */
.placeholder {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: .86em;
  color: #a16207;
  background: rgba(252,211,77,.18);
  border-bottom: 1px dashed rgba(161,98,7,.5);
  padding: 0 .25em;
  border-radius: 3px;
  white-space: nowrap;
}

/* Mobile menu */
.mobile-menu { transition: opacity .3s, transform .3s; }

/* Hide tweaks panel chrome cleanly */
[data-tweaks-panel] { z-index: 60; }