/* ============================================================
   ATA Design System — Colors & Type
   "Linear meets Apple in agribusiness"
   ============================================================ */

/* ----------------------------------------------------------
   Local brand fonts shipped in /fonts.
   - Inter (optical sizes 18pt/24pt/28pt) — body + display.
     We use the 28pt cut for display headlines (tighter, more
     dramatic geometry — closer to SF Pro Display's feel).
   - Arimo — UI alt / Arial-metric-compatible secondary.
   ---------------------------------------------------------- */

/* INTER 18pt — small body / UI / labels */
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap; }

/* INTER 24pt — medium copy (subheads, large body) */
@font-face { font-family: 'Inter 24'; src: url('fonts/Inter_24pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24'; src: url('fonts/Inter_24pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24'; src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter 24'; src: url('fonts/Inter_24pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap; }

/* INTER 28pt — display headlines (hero, section). The optical
   28pt cut is tighter and more elegant at large sizes — this
   replaces the SF Pro Display substitution in earlier drafts. */
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter_28pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter_28pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter_28pt-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* ---------- Brand: Primary ---------- */
  --ata-blue:           #234EFF;   /* primary */
  --ata-blue-glow:      #5B7FFF;   /* accent / electric blue */
  --ata-navy:           #0B1F4D;   /* deep navy */
  --ata-cyan:           #6EE7FF;   /* cyan glow highlight */

  /* ---------- Surfaces ---------- */
  --ata-bg:             #050816;   /* page background */
  --ata-surface:        #0D1324;   /* card / panel */
  --ata-surface-2:      #121A2E;   /* elevated card */
  --ata-surface-3:      #1A2440;   /* hover / pressed elevated */

  /* ---------- Glass / Borders ---------- */
  --ata-glass:          rgba(255, 255, 255, 0.05);
  --ata-glass-strong:   rgba(255, 255, 255, 0.08);
  --ata-border:         rgba(255, 255, 255, 0.08);
  --ata-border-strong:  rgba(255, 255, 255, 0.14);
  --ata-border-blue:    rgba(91, 127, 255, 0.35);

  /* ---------- Text ---------- */
  --ata-fg:             #F5F7FF;   /* primary text */
  --ata-fg-muted:       #B6C0DA;   /* secondary text */
  --ata-fg-subtle:      #7B86A6;   /* tertiary / labels */
  --ata-fg-disabled:    #4C5878;
  --ata-fg-on-blue:     #FFFFFF;

  /* ---------- Semantic ---------- */
  --ata-success:        #2ED4A2;
  --ata-warning:        #F5B547;
  --ata-danger:         #FF5C7A;
  --ata-info:           var(--ata-blue-glow);

  /* ---------- Gradients ---------- */
  --ata-gradient-primary:
    linear-gradient(135deg, #234EFF 0%, #5B7FFF 100%);
  --ata-gradient-deep:
    linear-gradient(135deg, #0B1F4D 0%, #234EFF 100%);
  --ata-gradient-glow:
    radial-gradient(60% 60% at 50% 50%, rgba(35, 78, 255, 0.55), rgba(35, 78, 255, 0));
  --ata-gradient-mesh:
    radial-gradient(60% 50% at 12% 8%, rgba(35, 78, 255, 0.20), transparent 60%),
    radial-gradient(50% 40% at 92% 18%, rgba(91, 127, 255, 0.18), transparent 60%),
    radial-gradient(70% 50% at 80% 100%, rgba(110, 231, 255, 0.08), transparent 65%),
    #050816;

  /* ---------- Radius ---------- */
  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   28px;
  --radius-xl:   36px;
  --radius-2xl:  48px;
  --radius-pill: 999px;

  /* ---------- Spacing (8px base) ---------- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   96px;
  --space-9:  128px;

  /* ---------- Shadows ---------- */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-xl:    0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-glow:  0 0 40px rgba(35, 78, 255, 0.35);
  --shadow-glow-strong: 0 0 60px rgba(35, 78, 255, 0.55), 0 0 24px rgba(91, 127, 255, 0.35);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ---------- Motion ---------- */
  --ease-ata:        cubic-bezier(0.16, 1, 0.3, 1); /* "Apple" easing */
  --ease-out-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:   180ms;
  --duration-base:   320ms;
  --duration-slow:   450ms;
  --duration-xslow:  650ms;
  --transition-base: all var(--duration-slow) var(--ease-ata);

  /* ---------- Type families ---------- */
  --font-display: 'Inter Display', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---------- Type scale (semantic) ---------- */
  --text-hero-size:        72px;
  --text-hero-lh:          0.95;
  --text-hero-tracking:    -0.03em;

  --text-display-size:     56px;
  --text-display-lh:       1.02;
  --text-display-tracking: -0.025em;

  --text-section-size:     48px;
  --text-section-lh:       1.05;
  --text-section-tracking: -0.022em;

  --text-h2-size:          36px;
  --text-h2-lh:            1.12;
  --text-h2-tracking:      -0.018em;

  --text-h3-size:          24px;
  --text-h3-lh:            1.25;
  --text-h3-tracking:      -0.014em;

  --text-card-size:        20px;
  --text-card-lh:          1.3;
  --text-card-tracking:    -0.01em;

  --text-body-size:        16px;
  --text-body-lh:          1.6;
  --text-body-tracking:    0;

  --text-small-size:       14px;
  --text-small-lh:         1.5;
  --text-small-tracking:   0;

  --text-label-size:       12px;
  --text-label-lh:         1.4;
  --text-label-tracking:   0.06em;
}

/* ============================================================
   BASE
   ============================================================ */
html { 
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background: var(--ata-bg);
  color: var(--ata-fg);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE TOKENS (use as classes)
   ============================================================ */
.t-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-hero-size);
  line-height: var(--text-hero-lh);
  letter-spacing: var(--text-hero-tracking);
}
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-size);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-tracking);
}
.t-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-section-size);
  line-height: var(--text-section-lh);
  letter-spacing: var(--text-section-tracking);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-tracking);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-tracking);
}
.t-card {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-card-size);
  line-height: var(--text-card-lh);
  letter-spacing: var(--text-card-tracking);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ata-fg-muted);
}
.t-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
  color: var(--ata-fg-muted);
}
.t-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-label-size);
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--ata-fg-subtle);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Gradient text helper */
.t-gradient {
  background: var(--ata-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   GLASS UTILITY
   ============================================================ */
.glass {
  background: var(--ata-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--ata-border);
  box-shadow: var(--shadow-card), var(--shadow-inset-top);
}

/* ============================================================
   PRELOADER
   ============================================================ */
.stage {
  position: fixed; inset: 0; z-index: 999;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(35,78,255,0.22), transparent 60%),
    radial-gradient(50% 40% at 92% 18%, rgba(91,127,255,0.20), transparent 60%),
    radial-gradient(70% 50% at 80% 100%, rgba(110,231,255,0.10), transparent 65%),
    #050816;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 56px; padding: 24px;
  overflow: hidden;
}
.stage::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.5;
}
.stage > * { position: relative; z-index: 1; }

/* === Orb === */
.orb-wrap {
  position: relative; width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.glow {
  position: absolute; inset: -40px; border-radius: 999px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(35,78,255,0.55), transparent 70%);
  filter: blur(24px);
  animation: pulse 2.6s cubic-bezier(0.16,1,0.3,1) infinite;
}
.ring {
  position: absolute; border-radius: 999px;
  border: 1px solid rgba(91,127,255,0.30);
  box-shadow: 0 0 24px rgba(35,78,255,0.20), inset 0 0 24px rgba(91,127,255,0.10);
}
.ring.r1 { inset: 0; animation: spin 6s linear infinite; }
.ring.r1::after {
  content: ''; position: absolute; top: -3px; left: 50%;
  width: 6px; height: 6px; border-radius: 999px;
  background: #5B7FFF; box-shadow: 0 0 12px #5B7FFF;
  transform: translateX(-50%);
}
.ring.r2 {
  inset: 22px; border-color: rgba(91,127,255,0.18);
  animation: spin 9s linear infinite reverse;
}
.ring.r2::after {
  content: ''; position: absolute; bottom: -2px; left: 50%;
  width: 4px; height: 4px; border-radius: 999px;
  background: #6EE7FF; box-shadow: 0 0 10px #6EE7FF;
  transform: translateX(-50%);
}
.core {
  position: relative;
  width: 110px; height: 110px; border-radius: 999px;
  background:
    radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, #234EFF 0%, #5B7FFF 100%);
  box-shadow:
    0 0 60px rgba(35,78,255,0.55),
    0 0 24px rgba(91,127,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -10px 24px rgba(11,31,77,0.55);
  animation: float 4s cubic-bezier(0.16,1,0.3,1) infinite;
}
.core::after {
  content: ''; position: absolute; inset: 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  mask: linear-gradient(180deg, #000 0%, transparent 60%);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 60%);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* === Brand === */
.brand {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.logo {
  height: 26px; filter: brightness(0) invert(1);
  opacity: 0.95;
}
.logo-preloader {
  height: 46px; filter: brightness(0) invert(1);
  opacity: 0.95;
}
.tagline {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ata-fg-subtle);
  display: inline-flex; align-items: center; gap: 10px;
}
.tagline .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: linear-gradient(135deg,#234EFF,#5B7FFF);
  box-shadow: 0 0 10px #5B7FFF;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* === Progress === */
.progress-wrap {
  width: min(420px, 80vw);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.bar {
  width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden; position: relative;
}
.bar .fill {
  position: absolute; inset: 0;
  width: 0%;
  background: linear-gradient(90deg, #234EFF, #5B7FFF, #6EE7FF);
  box-shadow: 0 0 16px rgba(35,78,255,0.6);
  border-radius: 999px;
  animation: load 2.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes load {
  0%   { width: 0%; }
  40%  { width: 38%; }
  75%  { width: 72%; }
  100% { width: 100%; }
}
.meta {
  width: 100%; display: flex; justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ata-fg-subtle);
}
.meta .pct { color: var(--ata-fg); font-variant-numeric: tabular-nums; }

/* === Particles === */
.p {
  position: fixed; border-radius: 999px;
  background: #5B7FFF; box-shadow: 0 0 12px #5B7FFF;
  pointer-events: none;
  animation: drift 9s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translateY(0); opacity: 0.2; }
  50%      { transform: translateY(-30px); opacity: 0.55; }
}

/* Hide preloader when app is loaded */
#preloader.hidden {
  display: none;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}

@media (max-width: 480px) {
  section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* WhatsApp CTA card padding */
  .cta-card {
    padding: 32px 24px !important;
  }
}