/* ============================================================
   ALIGA 2025 — Global Stylesheet
   - Brand tokens (navy + aqua + gold)
   - Light/Dark themes (via [data-theme])
   - A11y focus, motion-safety, visible skip link
   - Modern components, grids and utilities
   - Scroll‑driven reveals (with safe fallback)
   ============================================================ */

/* Organize with cascade layers */
@layer reset, tokens, base, components, utilities, animations;

/* =========================
   RESET
   ========================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  html:focus-within { scroll-behavior: smooth; }
  body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  :where(h1, h2, h3, h4, h5, h6, p) { margin-block: 0; }
  :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; margin: 0; }

  /* Motion safety */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }
}

/* =========================
   TOKENS & THEMES
   ========================= */
@layer tokens {
  :root {
    /* Brand */
    --brand-navy: #0A1E2A;
    --brand-aqua: #00D3D9;
    --brand-aqua-600: #00B4B9;
    --brand-gold: #F2C14E;

    /* Effects & rhythm */
    --shadow-1: 0 8px 24px rgba(0,0,0,.25);
    --radius-xl: 14px;
    --radius-2xl: 20px;
    --container: 1200px;

    /* Defaults (overridden by theme) */
    --aliga-bg: #0A1E2A;
    --aliga-bg-soft: #0F2C3A;
    --aliga-text: #EAF6F6;
    --aliga-muted: #B9D4D6;
    --aliga-card: rgba(255,255,255,.05);
    --aliga-border: rgba(255,255,255,.10);
    --aliga-outline: rgba(0,211,217,.35);
  }

  /* Light theme */
  [data-theme="light"] {
    color-scheme: light;
    --aliga-bg: #F6F9FB;
    --aliga-bg-soft: #FFFFFF;
    --aliga-text: #0B1420;
    --aliga-muted: #4B5E6C;
    --aliga-card: rgba(0,0,0,.035);
    --aliga-border: rgba(10,20,30,.12);
    --aliga-outline: rgba(0, 158, 165, .40);
  }

  /* Dark theme */
  [data-theme="dark"] {
    color-scheme: dark;
    --aliga-bg: #0A1E2A;
    --aliga-bg-soft: #0F2C3A;
    --aliga-text: #EAF6F6;
    --aliga-muted: #B9D4D6;
    --aliga-card: rgba(255,255,255,.05);
    --aliga-border: rgba(255,255,255,.10);
    --aliga-outline: rgba(0,211,217,.35);
  }

  /* Wide‑gamut upgrades (OKLCH) where supported */
  @supports (color: oklch(50% 0.1 200)) {
    :root {
      --brand-navy: oklch(29% 0.06 260);
      --brand-aqua: oklch(78% 0.11 210);
      --brand-aqua-600: oklch(72% 0.10 210);
      --brand-gold: oklch(83% 0.09 85);
    }
  }

  /* High contrast users */
  @media (prefers-contrast: more) {
    :root { --aliga-border: color-mix(in oklab, var(--aliga-text), black 85%); }
  }
}

/* =========================
   BASE
   ========================= */
@layer base {
  body {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    color: var(--aliga-text);
    background:
      radial-gradient(1200px 600px at 75% -10%, color-mix(in oklab, var(--brand-aqua), transparent 86%), transparent 45%),
      linear-gradient(180deg, color-mix(in oklab, var(--aliga-bg), black 10%) 0%, var(--aliga-bg) 60%, color-mix(in oklab, var(--aliga-bg), black 10%) 100%);
  }

  a { color: var(--brand-aqua); text-decoration: none; text-underline-offset: .18em; }
  a:hover { text-decoration: underline; }
  :focus-visible { outline: 2px solid var(--aliga-outline); outline-offset: 2px; }

  .container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
  section { scroll-margin-top: 88px; }

  /* Skip link (visible on focus) */
  .skip-link{
    position: absolute; left: 12px; top: -100%;
    background: var(--brand-aqua); color: #001417; padding: 10px 14px; border-radius: 10px; z-index: 100;
    box-shadow: var(--shadow-1);
  }
  .skip-link:focus{ top: 12px; }
}

/* =========================
   COMPONENTS
   ========================= */
@layer components {
  /* Header & Navigation */
  header { position: sticky; top: 0; z-index: 60; backdrop-filter: saturate(140%) blur(8px); background: color-mix(in oklab, var(--aliga-bg-soft), transparent 22%); border-bottom: 1px solid var(--aliga-border); }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand img { inline-size: 26px; block-size: 26px; }
  .brand span { font-weight: 700; letter-spacing: .3px; }

  .nav-links { display: flex; gap: 18px; align-items: center; }
  .nav-links a { color: var(--aliga-muted); padding: 8px 6px; border-radius: 10px; }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] { color: var(--aliga-text); background: color-mix(in oklab, var(--aliga-card), transparent 40%); }

  .menu-toggle { display: none; font-size: 1.6rem; background: none; border: 1px solid var(--aliga-border); color: var(--aliga-text); border-radius: 10px; padding: 6px 10px; }
  .theme-toggle { display:inline-grid; place-items:center; inline-size:40px; block-size:40px; border-radius:12px; background: color-mix(in oklab, var(--aliga-card), transparent 30%); border:1px solid var(--aliga-border); }
  .nav-actions { display:flex; gap:8px; align-items:center; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; font-weight: 600; cursor: pointer; transition: transform .04s ease, box-shadow .2s ease; border:1px solid transparent; }
  .btn-primary { background: linear-gradient(180deg, var(--brand-aqua), var(--brand-aqua-600)); color:#001417; box-shadow: 0 6px 24px rgba(0,211,217,.35); }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,211,217,.45); }
  .btn-ghost { background: transparent; border: 1px solid var(--aliga-border); color: var(--aliga-text); }
  .btn-ghost:hover { background: color-mix(in oklab, var(--aliga-card), transparent 30%); }
  .btn-block { inline-size: 100%; }

  /* Hero */
  .hero { padding-block: 88px 54px; }
  .hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; }
  @media (max-width: 1024px){ .hero-grid { grid-template-columns: 1fr; } }
  .headline { font-size: clamp(2rem, 1rem + 2.8vw, 3rem); line-height: 1.1; margin: 0 0 14px; }
  .subhead { color: var(--aliga-muted); max-inline-size: 760px; }
  .hero-cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }

  /* Sections & content */
  .section { padding-block: 60px; }
  .section h2 { font-size: 1.8rem; margin: 0 0 8px; }
  .lead { color: var(--aliga-muted); }

  .card { background: var(--aliga-card); border: 1px solid var(--aliga-border); border-radius: 20px; box-shadow: var(--shadow-1); padding: 18px; }

  .chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px;
    border: 1px solid var(--aliga-border);
    background: color-mix(in oklab, var(--brand-gold), transparent 92%);
  }
  .chip svg { opacity: .95; }

  .grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width:1024px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

  /* Integrations strip */
  #integrations .integration-grid{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top:20px; }
  #integrations .integration-item{
    flex:0 1 120px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px; border-radius:12px;
    background: rgba(255,255,255,.03); border:1px solid var(--aliga-border); transition:.25s;
  }
  #integrations .integration-item:hover{ background: color-mix(in oklab, var(--aliga-card), transparent 20%); transform: translateY(-2px); border-color: var(--brand-aqua); }
  #integrations .integration-item img{ max-block-size:32px; inline-size:auto; filter: grayscale(1) contrast(1.1) brightness(1.05); opacity:.9; transition:.25s; }
  #integrations .integration-item:hover img{ filter:none; opacity:1; }
  #integrations .integration-item span{ font-size:.85rem; color: var(--aliga-muted); }

  /* Trust strip (moved from inline) */
  .iso-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .iso-tile { display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--aliga-border); border-radius:12px; padding:10px 14px; block-size:84px; box-shadow: var(--shadow-1); }
  .iso-tile img { max-block-size:100%; max-inline-size:100%; object-fit:contain; }
  @media (max-width:1024px){ .iso-strip { grid-template-columns:1fr 1fr; } }

  /* Footer */
  footer { border-top:1px solid var(--aliga-border); background:#07171F; padding-block: 40px 64px; }
  .footgrid { display:grid; grid-template-columns:1.2fr .9fr .9fr 1.1fr; gap:18px; }
  @media (max-width:1024px){ .footgrid { grid-template-columns:1fr; } }
  .small { font-size:.92rem; color: var(--aliga-muted); }
  .footer-social { display:flex; gap:10px; flex-wrap:wrap; }

  /* Contact form */
  .form-card { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--aliga-border); border-radius:20px; box-shadow: var(--shadow-1); padding:20px; }
  .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width: 900px){ .form-grid { grid-template-columns:1fr; } }

  .field { display:grid; gap:6px; }
  .field label { font-weight:700; letter-spacing:.2px; }
  .required::after { content:" *"; color:#FFB4AA; font-weight:800; }

  .input, .select, .textarea {
    inline-size:100%; border-radius:12px; border:1px solid var(--aliga-border);
    background: rgba(0,0,0,.22); color: var(--aliga-text); padding:12px 14px;
  }
  [data-theme="light"] .input,
  [data-theme="light"] .select,
  [data-theme="light"] .textarea { background:#ffffff; }

  .textarea { min-block-size:120px; resize:vertical; }
  .input:focus, .select:focus, .textarea:focus { outline:2px solid var(--aliga-outline); outline-offset:2px; border-color: color-mix(in oklab, var(--brand-aqua), black 25%); }

  .inline-help { color: var(--aliga-muted); font-size:.9rem; }

  .actions-row { margin-top:10px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
  @media (max-width:900px){ .actions-row { grid-template-columns:1fr; } }

  .note-row { margin-top:8px; display:flex; gap:6px; align-items:center; color: var(--aliga-muted); font-size:.92rem; }

  .toast { display:none; margin-top:12px; padding:12px 14px; border-radius:12px; background: rgba(0,211,217,.12); border:1px solid rgba(0,211,217,.35); }
  .toast.show { display:block; }
  .toast[role="status"] { outline: 0; }
  .error-msg { display:none; color:#FFB4AA; font-size:.9rem; }

  .input-icon { position:relative; }
  .input-icon span { position:absolute; inset-inline-end:10px; inset-block-start:50%; transform:translateY(-50%); opacity:.7; pointer-events:none; }
}

/* =========================
   UTILITIES
   ========================= */
@layer utilities {
  .floating { position:fixed; inset-inline-end:16px; inset-block-end:110px; display:flex; flex-direction:column; gap:10px; z-index:58; }

  /* Mobile menu */
  @media (max-width:900px){
    .menu-toggle{ display:block; }
    .nav-links{
      display:none; position:absolute; inset-inline:0; inset-block-start:64px;
      background:#07171F; padding:16px; border-top:1px solid var(--aliga-border); flex-direction:column;
    }
    .nav-links.show{ display:flex; }
    .nav-links a{ padding:10px 8px; }
  }

  /* Reveal — safe default visible; upgrade when supported */
  .reveal { opacity: 1; transform: none; }
}

/* =========================
   ANIMATIONS
   ========================= */
@layer animations {
  /* Scroll-driven reveal (native support) */
  @supports (animation-timeline: view()) {
    .reveal {
      opacity: 0; transform: translateY(12px);
      animation: fade-slide 1s ease both;
      animation-timeline: view();
      animation-range: entry 20% cover 30%;
    }
    @keyframes fade-slide { to { opacity:1; transform: translateY(0); } }
  }

  /* Spinner for .btn-busy */
  @keyframes spin { to { transform: rotate(360deg); } }
  .btn-busy::after{
    content:"";
    inline-size:14px; block-size:14px; margin-inline-start:8px;
    border:2px solid rgba(0,0,0,.2); border-top-color: rgba(0,0,0,.6);
    border-radius:50%; display:inline-block; animation: spin .7s linear infinite;
  }
}