/* ==========================================================================
   DOT NETWORK — Design System
   Scandinavian-premium dark theme. No frameworks beyond Tailwind utilities;
   this file holds tokens, primitives Tailwind can't express, and motion.
   ========================================================================== */

/* ---------- Self-hosted fonts (latin subset, swap-on-load) ---------- */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/inter-800.woff2') format('woff2'); }
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-tight-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-tight-700.woff2') format('woff2'); }
@font-face{ font-family:'Inter Tight'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/inter-tight-800.woff2') format('woff2'); }

:root{
  /* Core palette — light, Scandinavian-premium */
  --bg-0:#ffffff;
  --bg-1:#f3f5f9;
  --bg-2:#eef1f6;
  --bg-3:#e2e6ee;
  --line:rgba(15,23,42,.08);
  --line-strong:rgba(15,23,42,.14);

  --text-0:#0f172a;
  --text-1:#475569;
  --text-2:#5b6b80;

  /* Brand — green mark + sky accent, kept fresh & premium */
  --brand-500:#16a34a;
  --brand-400:#22c55e;
  --brand-300:#4ade80;
  --ice-400:#0ea5e9;
  --ice-300:#0369a1;
  --signal:#06b6d4;

  --accent-violet:#7c3aed;
  --accent-amber:#d97706;
  --accent-green:#16a34a;
  --accent-rose:#e11d48;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;

  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*{ scroll-behavior:smooth; }
html{ background:var(--bg-0); color-scheme:light; }
body{
  background:var(--bg-0);
  color:var(--text-0);
  font-family:'Inter var','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:var(--brand-500); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-0); }
::-webkit-scrollbar-thumb{ background:var(--bg-3); border-radius:8px; border:2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover{ background:var(--brand-500); }

/* Focus ring — accessible, on-brand */
:focus-visible{
  outline:2px solid var(--ice-400);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Background system ---------- */
.bg-noise{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.aurora-field{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.aurora-blob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.22;
  will-change:transform;
  animation: aurora-float 22s var(--ease-out-expo) infinite alternate;
}
.aurora-blob.b1{ width:46vw; height:46vw; top:-12%; left:-10%; background:radial-gradient(circle, var(--brand-500), transparent 70%); animation-duration:26s; }
.aurora-blob.b2{ width:38vw; height:38vw; top:10%; right:-12%; background:radial-gradient(circle, var(--accent-violet), transparent 70%); animation-duration:32s; animation-delay:-6s; }
.aurora-blob.b3{ width:34vw; height:34vw; bottom:-14%; left:18%; background:radial-gradient(circle, var(--signal), transparent 70%); animation-duration:28s; animation-delay:-3s; }

@keyframes aurora-float{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4%, 6%) scale(1.08); }
  100%{ transform:translate(-3%, -4%) scale(.96); }
}

.grid-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 90%);
}

/* ---------- Glass surfaces ---------- */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 16px 32px -16px rgba(15,23,42,.08);
}
.glass-strong{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  border:1px solid var(--line-strong);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 20px 40px -16px rgba(15,23,42,.1);
}

.card{
  position:relative;
  border-radius:var(--radius-lg);
  transition:transform .5s var(--ease-out-expo), border-color .35s ease, box-shadow .5s ease;
}
.card-hover{ }
.card-hover:hover{
  transform:translateY(-6px);
  border-color:var(--line-strong);
  box-shadow:0 30px 60px -20px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.03) inset;
}

/* spotlight-on-hover (mouse-tracked glow) */
.spotlight{ position:relative; overflow:hidden; }
.spotlight::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(96,165,250,.18), transparent 70%);
  transition:opacity .4s ease;
  pointer-events:none;
}
.spotlight:hover::before{ opacity:1; }

/* ---------- Typography ---------- */
.text-gradient{
  background:linear-gradient(95deg, var(--text-0) 20%, var(--ice-300) 55%, var(--brand-400) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-gradient-warm{
  background:linear-gradient(95deg, var(--text-0), var(--accent-amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.heading-display{ letter-spacing:-0.03em; line-height:1.02; }
.heading-tight{ letter-spacing:-0.02em; line-height:1.08; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ice-300);
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--signal); box-shadow:0 0 12px 2px var(--signal);
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.95rem; border-radius:999px; padding:.85rem 1.6rem;
  transition:transform .35s var(--ease-spring), box-shadow .35s ease, background-color .3s ease, border-color .3s ease;
  white-space:nowrap; isolation:isolate;
}
.btn:active{ transform:scale(.97); }

.btn-primary{
  color:#ffffff;
  background:linear-gradient(135deg, var(--brand-300), var(--brand-500) 55%, var(--ice-400));
  box-shadow:0 8px 30px -8px rgba(22,163,74,.4);
}
.btn-primary:hover{ box-shadow:0 14px 40px -8px rgba(22,163,74,.55); transform:translateY(-2px); }

.btn-ghost{
  color:var(--text-0);
  background:rgba(15,23,42,.035);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{ background:rgba(15,23,42,.06); border-color:rgba(15,23,42,.22); transform:translateY(-2px); }

.btn-sm{ padding:.6rem 1.1rem; font-size:.825rem; }

/* magnetic wrapper target (JS adds inline transform) */
.magnetic{ will-change:transform; }

/* ---------- Nav ---------- */
.nav-shell{
  transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav-link{
  position:relative; color:var(--text-1); font-size:.9rem; font-weight:500;
  transition:color .25s ease;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0%;
  background:linear-gradient(90deg, var(--ice-400), var(--brand-500));
  transition:width .3s var(--ease-out-expo);
}
.nav-link:hover{ color:var(--text-0); }
.nav-link:hover::after{ width:100%; }

/* ---------- Chips / badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:600; padding:.4rem .85rem; border-radius:999px;
  background:rgba(15,23,42,.04); border:1px solid var(--line);
  color:var(--text-1);
  transition:all .25s var(--ease-out-expo);
}
.chip:hover{ border-color:var(--brand-400); color:var(--text-0); background:rgba(22,163,74,.08); }
.chip.is-active{ background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(14,165,233,.14)); border-color:var(--brand-400); color:var(--text-0); }

/* ---------- Dividers / glow lines ---------- */
.glow-line{ height:1px; background:linear-gradient(90deg, transparent, var(--brand-400), transparent); opacity:.5; }

/* ---------- Reveal animation hooks (driven by IntersectionObserver in main.js) ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(0) scale(.92); }
[data-reveal="scale"].in-view{ transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-36px); }
[data-reveal="left"].in-view{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(36px); }
[data-reveal="right"].in-view{ transform:translateX(0); }

/* stagger via inline --d custom property */
[data-reveal]{ transition-delay:calc(var(--d, 0) * 1ms); }

/* ---------- Floating cards (hero) ---------- */
.float-slow{ animation:float-y 7s ease-in-out infinite; }
.float-med{ animation:float-y 5.2s ease-in-out infinite; }
.float-fast{ animation:float-y 3.6s ease-in-out infinite; }
@keyframes float-y{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* ---------- Counters ---------- */
.counter{ font-feature-settings:'tnum'; }

/* ---------- Pricing toggle ---------- */
.toggle-track{
  width:64px; height:34px; border-radius:999px; background:var(--bg-3); border:1px solid var(--line-strong);
  position:relative; cursor:pointer; transition:background .3s ease;
}
.toggle-thumb{
  position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, var(--ice-300), var(--brand-400));
  transition:transform .35s var(--ease-spring);
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.toggle-track.is-yearly{ background:rgba(59,130,246,.25); border-color:var(--brand-400); }
.toggle-track.is-yearly .toggle-thumb{ transform:translateX(30px); }

/* ---------- Domain search ---------- */
.domain-input-wrap{
  position:relative;
}
.domain-result-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-radius:var(--radius-md);
  border:1px solid var(--line); background:rgba(15,23,42,.025);
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.domain-result-row:hover{ border-color:var(--line-strong); background:rgba(15,23,42,.045); transform:translateX(4px); }
.status-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-dot.ok{ background:var(--accent-green); box-shadow:0 0 10px 2px rgba(52,211,153,.6); }
.status-dot.taken{ background:var(--accent-rose); box-shadow:0 0 10px 2px rgba(251,113,133,.5); }

/* spinner */
.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(15,23,42,.12); border-top-color:var(--brand-500);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Section numbering / labels ---------- */
.section-pad{ padding-top:clamp(5rem,9vw,8rem); padding-bottom:clamp(5rem,9vw,8rem); }

/* ---------- Comparison table ---------- */
.compare-table th, .compare-table td{ border-bottom:1px solid var(--line); }
.compare-table thead th{ position:sticky; top:0; backdrop-filter:blur(10px); }
.check-yes{ color:var(--accent-green); }
.check-no{ color:var(--text-2); }

/* ---------- Marquee (logos / trust strip) ---------- */
.marquee-track{ display:flex; gap:4rem; animation:marquee 30s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- Loader ---------- */
#site-loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg-0);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease-out-expo), visibility .6s;
}
#site-loader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--brand-500); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- Utility blobs for illustrations ---------- */
.icon-tile{
  width:3rem; height:3rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(96,165,250,.18), rgba(139,92,246,.12));
  border:1px solid var(--line);
}

/* ==========================================================================
   DOT Assistant — chat widget
   ========================================================================== */
[data-dn-chat]{ position:fixed; inset:auto; z-index:60; }

[data-dn-launcher]{
  position:fixed; bottom:1.75rem; right:1.75rem; z-index:61;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand-300), var(--brand-500) 60%, var(--ice-400));
  box-shadow:0 10px 30px -6px rgba(22,163,74,.45), 0 0 0 1px rgba(255,255,255,.4) inset;
  transition:transform .35s var(--ease-spring), box-shadow .3s ease;
}
[data-dn-launcher]:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 36px -6px rgba(22,163,74,.55); }
[data-dn-launcher]:active{ transform:scale(.95); }
[data-dn-ping]{
  position:absolute; top:-3px; right:-3px; width:14px; height:14px; border-radius:50%;
  background:var(--accent-rose); border:2px solid #fff;
  animation:dn-ping-pulse 2.2s ease-in-out infinite;
}
@keyframes dn-ping-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.25); opacity:.7; } }

[data-dn-panel]{
  position:fixed; bottom:6rem; right:1.75rem; z-index:61;
  width:min(380px, calc(100vw - 2.5rem)); height:min(560px, calc(100vh - 9rem));
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.94));
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -20px rgba(15,23,42,.25), 0 0 0 1px rgba(15,23,42,.02);
  backdrop-filter:blur(24px) saturate(160%);
  opacity:0; transform:translateY(16px) scale(.97); transform-origin:bottom right;
  transition:opacity .25s var(--ease-out-expo), transform .3s var(--ease-out-expo);
  overflow:hidden;
}
[data-dn-panel].is-open{ opacity:1; transform:translateY(0) scale(1); }

[data-dn-head]{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1.1rem 1.25rem; border-bottom:1px solid var(--line);
  background:linear-gradient(135deg, rgba(34,197,94,.07), rgba(14,165,233,.06));
}
[data-dn-head-info]{ display:flex; align-items:center; gap:.65rem; }
[data-dn-avatar]{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand-300), var(--brand-500));
}
[data-dn-title]{ font-weight:700; font-size:.92rem; color:var(--text-0); line-height:1.2; }
[data-dn-subtitle]{ font-size:.74rem; color:var(--text-2); display:flex; align-items:center; gap:5px; margin-top:1px; }
[data-dn-dot]{ width:6px; height:6px; border-radius:50%; background:var(--accent-green); box-shadow:0 0 6px 1px rgba(34,197,94,.6); display:inline-block; }
[data-dn-close]{ color:var(--text-2); background:none; border:none; cursor:pointer; padding:4px; border-radius:8px; transition:background .2s, color .2s; }
[data-dn-close]:hover{ background:rgba(15,23,42,.06); color:var(--text-0); }

[data-dn-messages]{
  flex:1; overflow-y:auto; padding:1.1rem 1.1rem .5rem; display:flex; flex-direction:column; gap:.65rem;
}
.dn-msg{ display:flex; }
.dn-msg-user{ justify-content:flex-end; }
.dn-msg-bot{ justify-content:flex-start; }
.dn-bubble{
  max-width:85%; padding:.65rem .9rem; border-radius:14px; font-size:.85rem; line-height:1.5;
}
.dn-msg-bot .dn-bubble{ background:var(--bg-2); color:var(--text-0); border:1px solid var(--line); border-bottom-left-radius:4px; }
.dn-msg-user .dn-bubble{ background:linear-gradient(135deg, var(--brand-400), var(--brand-500)); color:#fff; border-bottom-right-radius:4px; }
.dn-bubble a{ color:var(--ice-300); text-decoration:underline; }
.dn-msg-user .dn-bubble a{ color:#fff; }

.dn-typing{ display:flex; gap:4px; align-items:center; padding:.85rem 1rem; }
.dn-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-2); display:inline-block; animation:dn-typing-bounce 1.1s infinite; }
.dn-typing span:nth-child(2){ animation-delay:.15s; }
.dn-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes dn-typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

[data-dn-quick]{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.4rem 1.1rem .8rem; }
.dn-chip{
  font-size:.76rem; font-weight:500; padding:.4rem .75rem; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--line); color:var(--text-1);
  cursor:pointer; transition:all .2s ease; text-align:left;
}
.dn-chip:hover{ border-color:var(--brand-400); color:var(--text-0); background:rgba(22,163,74,.07); }

[data-dn-form]{ display:flex; gap:.5rem; padding:.85rem 1.1rem; border-top:1px solid var(--line); }
[data-dn-form] input{
  flex:1; min-width:0; padding:.65rem .9rem; border-radius:12px; border:1px solid var(--line-strong);
  background:var(--bg-2); font-size:.85rem; color:var(--text-0); outline:none;
  transition:border-color .2s ease;
}
[data-dn-form] input:focus{ border-color:var(--brand-400); }
[data-dn-form] button{
  width:40px; height:40px; border-radius:12px; border:none; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--brand-400), var(--brand-500));
  transition:transform .2s var(--ease-spring);
}
[data-dn-form] button:hover{ transform:scale(1.06); }

[data-dn-foot]{ font-size:.68rem; color:var(--text-2); text-align:center; padding:0 1.1rem .9rem; }
[data-dn-foot] a{ color:var(--ice-300); text-decoration:underline; }

@media (max-width: 480px){
  [data-dn-launcher]{ right:1.1rem; bottom:1.1rem; width:56px; height:56px; }
  [data-dn-panel]{ right:.75rem; left:.75rem; width:auto; bottom:5.5rem; }
}