@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
   ATN — Clean & Modern Design System v3.0
   White-first, blue accent, professional & airy
   ============================================================ */

:root {
  --blue:       #2563eb;
  --blue-mid:   #60a5fa;
  --sky:        #38bdf8;
  --blue-light: #eff6ff;
  --navy:       #0f172a;   /* text only, not backgrounds */
  --grad:       var(--blue);
  --surface:    #ffffff;
  --surface-2:  #f8fafc;
  --surface-3:  #f1f5f9;
  --border:     #e2e8f0;
  --text-1:     #0f172a;
  --text-2:     #334155;
  --text-3:     #64748b;
  --text-4:     #94a3b8;
  --shadow-sm:  0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:  0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:  0 12px 40px rgba(37,99,235,.14);
  --radius:     16px;
  --radius-lg:  24px;
  --hdr-h:      80px;
  --ease-premium: cubic-bezier(.16,1,.3,1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* Native cross-document page transitions (Chromium today, progressive enhancement
   elsewhere — pages without support just navigate normally, no breakage). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .65s;
  animation-timing-function: cubic-bezier(.16,1,.3,1);
}

/* Page load entrance — every page fades in on arrival instead of just appearing. */
@keyframes page-fade-in { from { opacity:0; } to { opacity:1; } }
body { animation: page-fade-in .75s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { body { animation:none; } }

body { font-family: 'Inter','Noto Sans',system-ui,sans-serif; overflow-x:hidden; background:#fff; color:var(--text-1); }
h1,h2,h3,h4,h5,h6 { font-family:'Montserrat',sans-serif; font-weight:800; line-height:1.15; }

/* Accent text (flat brand blue, no gradient sheen) */
.grad-text {
  color: var(--blue);
}

/* Border wrapper (flat brand-blue border, no animated gradient) */
.grad-border-wrap {
  padding: 2px;
  border-radius: var(--radius-lg);
  background: var(--blue);
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.75rem; border-radius:50px;
  font-weight:600; font-size:.95rem; cursor:pointer; border:none;
  transition:transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
  position:relative; overflow:hidden; white-space:nowrap;
  text-decoration:none;
}
.btn:hover  { transform:translateY(-3px); }
.btn:active { transform:translateY(-1px); transition-duration:.15s; }
.btn svg { transition: transform .35s var(--ease-premium); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.30);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(37,99,235,.44); }

/* Light-bg outline button (blue border, blue text) */
.btn-outline-dark {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}
.btn-outline-dark:hover {
  background: var(--blue-light);
}

/* Dark-bg outline button (white border) — kept for any dark/blue sections */
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
}
.btn-outline-light:hover {
  border-color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1);
}

/* Ripple */
.ripple-ink { position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); animation:ripple-anim .6s ease-out forwards; pointer-events:none; }
@keyframes ripple-anim { to { transform:scale(3); opacity:0; } }

/* Eyebrow labels */
.eyebrow {
  display:inline-block;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--blue);
  border-left: 2px solid var(--blue);
  padding-left: .6rem;
  line-height: 1;
}
/* eyebrow-light — for blue/dark bg sections */
.eyebrow-light {
  color: rgba(255,255,255,.85);
  border-left-color: var(--sky);
}

/* Cards */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
}
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* Glass card (for dark sections) */
.card-glass {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
}

/* Light stat card — solid light blue fill */
.glass-card {
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* Divider */
.divider { height:3px; width:56px; border-radius:4px; background:var(--grad); }

/* Feature icon (gradient fill) */
.feature-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px;
  background: var(--grad); color:#fff; flex-shrink:0;
}
/* Feature icon soft (light blue fill) */
.feature-icon-soft {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px;
  background: var(--blue-light); color: var(--blue); flex-shrink:0;
}

/* Scroll-reveal — progressive enhancement (elements start visible without JS)
   JS adds body.js-reveal to enable transitions, then reveals elements (incl. in-viewport
   ones on a delayed frame) so above-the-fold content animates in on load too. */
body.js-reveal .reveal:not(.visible)            { opacity:0; transform:translateY(32px);   transition:opacity 1.1s var(--ease-premium),transform 1.1s var(--ease-premium); }
body.js-reveal .reveal.from-left:not(.visible)  { transform:translateX(-28px); }
body.js-reveal .reveal.from-right:not(.visible) { transform:translateX(28px);  }
body.js-reveal .reveal.d1:not(.visible) { transition-delay:.12s; }
body.js-reveal .reveal.d2:not(.visible) { transition-delay:.28s; }
body.js-reveal .reveal.d3:not(.visible) { transition-delay:.44s; }
body.js-reveal .reveal.d4:not(.visible) { transition-delay:.60s; }
body.js-reveal .reveal.d5:not(.visible) { transition-delay:.76s; }
body.js-reveal .reveal.d6:not(.visible) { transition-delay:.92s; }
.reveal.visible { opacity:1; transform:none; transition:opacity 1.1s var(--ease-premium),transform 1.1s var(--ease-premium); }

/* ── WHITE HERO (home page) ──────────────────────────────────────────────── */
.hero-light {
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.hero-light::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 78% 35%, rgba(37,99,235,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 12% 85%, rgba(56,189,248,.06) 0%, transparent 55%);
  pointer-events: none;
}

/* Light decorative blobs */
@keyframes blob-float-1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-20px)} }
@keyframes blob-float-2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-16px,16px)} }
.blob { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.blob-1 { width:500px; height:500px; background:rgba(37,99,235,.06); animation:blob-float-1 16s ease-in-out infinite; }
.blob-2 { width:400px; height:400px; background:rgba(56,189,248,.05); animation:blob-float-2 20s ease-in-out infinite; }

/* Keep hero-dark for any section still needing it */
.hero-dark { background:var(--navy); position:relative; overflow:hidden; }
.hero-dark::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 70% 40%, rgba(37,99,235,.25) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(56,189,248,.15) 0%, transparent 55%);
  pointer-events:none;
}
.hero-grid {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px; pointer-events:none;
}

/* ── PAGE HERO (inner pages — white-first, matches home hero-light) ───────── */
.page-hero {
  background: var(--surface);
  padding: 7rem 0 5rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 75% 30%, rgba(37,99,235,.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(56,189,248,.07) 0%, transparent 55%);
  pointer-events:none;
  animation: hero-breathe 10s ease-in-out infinite;
}
@keyframes hero-breathe { 0%,100% { opacity:1; } 50% { opacity:.7; } }

/* ── Header entrance (injected async, fades+drops in once partial loads) ──── */
#mainHeader.nav-enter { opacity:0; transform:translateY(-20px); }
#mainHeader.nav-enter-active {
  opacity:1; transform:translateY(0);
  transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium);
}

/* ── Header: big + transparent at rest, shrinks & solidifies continuously as
   you scroll (values interpolated per-frame by load-partials.js — the short
   transition below just smooths the gap between frames, no more jump-cut). */
.nav-header {
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background .3s var(--ease-premium), backdrop-filter .3s var(--ease-premium),
    border-color .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 5.5rem;
  transition: height .3s var(--ease-premium);
}
.nav-logo-img {
  height: 3.25rem;
  width: auto;
  transition: height .3s var(--ease-premium), transform .35s var(--ease-premium);
}
.nav-logo-link img { transition: transform .35s var(--ease-premium); }
.nav-logo-link:hover img { transform: scale(1.06) rotate(-1deg); }

/* ── Mobile menu — animated open/close instead of instant show/hide ───────── */
#mobileMenu {
  overflow:hidden; max-height:0; opacity:0;
  transition: max-height .65s var(--ease-premium), opacity .5s var(--ease-premium);
}
#mobileMenu.mobile-menu-open { max-height:560px; opacity:1; }
#mobileMenu nav a {
  opacity:0; transform:translateY(-10px);
  transition: opacity .5s var(--ease-premium), transform .5s var(--ease-premium);
}
#mobileMenu.mobile-menu-open nav a { opacity:1; transform:translateY(0); }
#mobileMenu.mobile-menu-open nav a:nth-child(1) { transition-delay:.08s; }
#mobileMenu.mobile-menu-open nav a:nth-child(2) { transition-delay:.16s; }
#mobileMenu.mobile-menu-open nav a:nth-child(3) { transition-delay:.24s; }
#mobileMenu.mobile-menu-open nav a:nth-child(4) { transition-delay:.32s; }
#mobileMenu.mobile-menu-open nav a:nth-child(5) { transition-delay:.40s; }
#mobileMenu.mobile-menu-open nav a:nth-child(6) { transition-delay:.48s; }
#mobileMenu.mobile-menu-open nav a:nth-child(7) { transition-delay:.56s; }

/* ── BLUE ACCENT SECTION (video, CTA bands) ──────────────────────────────── */
.section-blue {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
  position: relative; overflow: hidden;
}
.section-blue::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 70% 40%, rgba(56,189,248,.22), transparent 60%);
  pointer-events: none;
}

/* Stats */
.stat-number {
  font-family:'Montserrat',sans-serif; font-weight:900;
  font-size:clamp(2.5rem,5vw,3.75rem); line-height:1;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Nav links */
.nav-active { color:var(--blue)!important; font-weight:700!important; }
.nav-link {
  position:relative; padding:.25rem 0;
  color: var(--text-2);
  font-size:.875rem; font-weight:500;
  transition:color .25s var(--ease-premium);
}
.nav-link::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px;
  border-radius:2px; background:var(--grad);
  transform:scaleX(0); transition:transform .4s var(--ease-premium); transform-origin:left;
}
.nav-link:hover { color:var(--blue); }
.nav-link:hover::after, .nav-link.nav-active::after { transform:scaleX(1); }

/* Form inputs */
.input {
  width:100%; padding:.7rem 1rem;
  border:1.5px solid var(--border);
  border-radius:12px; font-family:inherit; font-size:.95rem;
  background:#fff; color:var(--navy);
  transition:border-color .2s, box-shadow .2s; outline:none;
}
.input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.input::placeholder { color:var(--text-4); }
textarea.input { resize:vertical; min-height:120px; }
.form-label { display:block; font-size:.85rem; font-weight:600; color:var(--text-2); margin-bottom:.4rem; }

/* Sections */
.section    { padding:5rem 0; }
.section-sm { padding:3rem 0; }
.section-lg { padding:8rem 0; }
.container  { max-width:1280px; margin:0 auto; padding:0 2rem; }
@media (max-width:640px) { .container { padding:0 1.25rem; } }

/* Scroll offset */
[id] { scroll-margin-top: var(--hdr-h, 80px); }

/* Social */
.social-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); background:#fff;
  transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s var(--ease-premium);
}
.social-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(37,99,235,.15);
  border-color: var(--blue-mid);
}