/* ════════════════════════════════════════════════════════════════════
   SKYGLOBE GROUP — UNIFIED DESIGN SYSTEM  (skyglobe-ds.css)
   One World. One Mission.

   The single source of truth for brand colour, typography, spacing,
   premium components and flawless cross-device responsiveness.
   Loaded first on every page. Apple / Google grade polish on any screen.

   ARCHITECTURE
   · Tokens        — brand palette, compact type scale, tight spacing rhythm.
   · @layer sg-base — global polish (rendering, focus, scrollbars, motion).
                      Lives in a LOW-priority cascade layer, so a page's own
                      inline CSS ALWAYS wins. Non-breaking by construction.
   · Components     — opt-in `.sg-*` classes: buttons, cards, forms, bottom
                      nav, sheets, dialogs, skeletons, empty/error states.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. BRAND TOKENS ───────────────────────────────────────────────── */
:root{
  /* Core palette — the real SKYGLOBEGROUP identity */
  --sg-navy:#041022;         /* primary deep base */
  --sg-blue:#071B3B;         /* secondary surface */
  --sg-blue-2:#0A2E65;       /* interactive blue (primary action) */
  --sg-blue-hi:#123E87;      /* blue hover */
  --sg-gold:#D4A73A;         /* signature accent / authority */
  --sg-gold-hi:#E8C566;      /* highlight / light edge */
  --sg-gold-pale:#FBF6E9;    /* gold tint surface */

  /* Platform accents (honour the real logos) */
  --terra:#12864E;           /* TERRA · trust green */
  --terra-deep:#0d6b3e;
  --yunex:#7C3AED;           /* YUNEX / NORIA · intelligent purple */
  --yunex-2:#0a5bd6;         /* supporting blue */
  --noria:#7C3AED;           /* NORIA · the intelligence layer */
  --pink:#E85D9E; --orange:#F0742E;

  /* Neutrals — white-first, premium */
  --sg-ink:#0B1530;          /* primary text */
  --sg-ink-soft:#374151;     /* body text */
  --sg-muted:#5A6684;        /* secondary text */
  --sg-faint:#8A93AC;        /* tertiary / placeholder */
  --sg-white:#ffffff;
  --sg-bg:#ffffff;           /* app background — white is the brand */
  --sg-surface:#ffffff;      /* card surface */
  --sg-surface-2:#F7F8FB;    /* sunken / subtle fill */
  --sg-surface-3:#EEF1F7;    /* hover fill */

  /* Lines & focus */
  --sg-border:#E7EAF2;
  --sg-border-strong:#D6DBE7;
  --sg-focus:rgba(10,46,101,.28);

  /* Radius scale */
  --sg-r-xs:8px; --sg-r-sm:12px; --sg-r:16px; --sg-r-lg:20px; --sg-r-xl:26px; --sg-r-pill:100px;

  /* Elevation — soft, layered, never heavy */
  --sg-shadow-1:0 1px 2px rgba(11,21,48,.04), 0 2px 6px rgba(11,21,48,.05);
  --sg-shadow-2:0 4px 12px rgba(11,21,48,.06), 0 10px 28px rgba(11,21,48,.07);
  --sg-shadow-3:0 10px 24px rgba(11,21,48,.09), 0 24px 56px rgba(11,21,48,.11);

  /* Gradients */
  --sg-grad-gold:linear-gradient(135deg,var(--sg-gold),var(--sg-gold-hi));
  --sg-grad-navy:linear-gradient(160deg,var(--sg-navy),var(--sg-blue));
  --sg-grad-noria:linear-gradient(135deg,#7C3AED,#0a5bd6);

  /* Motion — one easing everywhere */
  --sg-ease:cubic-bezier(.22,.7,.3,1);
  --sg-trans:.28s var(--sg-ease);
  --sg-trans-fast:.16s var(--sg-ease);

  /* Typography */
  --sg-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --sg-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  /* COMPACT fluid type scale — clean, readable, never oversized.
     Deliberately restrained per the premium, dense-but-calm brief. */
  --sg-fs-display:clamp(1.9rem, 4vw, 3rem);
  --sg-fs-h1:clamp(1.55rem, 3.2vw, 2.3rem);
  --sg-fs-h2:clamp(1.3rem, 2.4vw, 1.75rem);
  --sg-fs-h3:clamp(1.08rem, 1.7vw, 1.3rem);
  --sg-fs-lead:clamp(1rem, 1.25vw, 1.14rem);
  --sg-fs-body:clamp(.925rem, .95vw, 1rem);
  --sg-fs-small:.82rem;
  --sg-fs-tiny:.72rem;

  /* Tight, intentional spacing rhythm (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px;
  --sg-section:clamp(2.5rem, 5vw, 4.5rem);
  --sg-gutter:clamp(1rem, 3vw, 2rem);
  --sg-container:1200px;

  /* Bottom-nav height (used to pad scroll areas so content never hides) */
  --sg-dock-h:64px;

  /* Safe areas */
  --sg-safe-top:env(safe-area-inset-top, 0px);
  --sg-safe-bottom:env(safe-area-inset-bottom, 0px);
  --sg-safe-left:env(safe-area-inset-left, 0px);
  --sg-safe-right:env(safe-area-inset-right, 0px);
  --sg-z-nav:100; --sg-z-dock:100; --sg-z-overlay:900; --sg-z-sheet:1000; --sg-z-toast:1100;
}

/* ── 2. GLOBAL POLISH  (low-priority layer — page CSS always wins) ──── */
@layer sg-base{
  *,*::before,*::after{box-sizing:border-box}
  html{
    -webkit-text-size-adjust:100%; text-size-adjust:100%;
    scroll-behavior:smooth; -webkit-tap-highlight-color:transparent;
  }
  body{
    font-family:var(--sg-font);
    color:var(--sg-ink);
    background:var(--sg-bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    font-feature-settings:"kern" 1, "liga" 1;
    line-height:1.55;
  }
  img,svg,video,canvas{max-width:100%;height:auto}
  button,input,select,textarea{font-family:inherit}
  /* Refined focus ring for keyboard users everywhere */
  :focus-visible{outline:2px solid var(--sg-blue-2);outline-offset:2px;border-radius:6px}
  ::selection{background:rgba(124,58,237,.16);color:var(--sg-ink)}
  /* Premium thin scrollbars */
  *{scrollbar-width:thin;scrollbar-color:var(--sg-border-strong) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--sg-border-strong);border-radius:100px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background:var(--sg-faint)}
  ::-webkit-scrollbar-track{background:transparent}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── 3. LAYOUT PRIMITIVES ──────────────────────────────────────────── */
.sg-container{width:100%;max-width:var(--sg-container);margin-inline:auto;padding-inline:max(var(--sg-gutter),var(--sg-safe-left))}
.sg-section{padding-block:var(--sg-section)}
.sg-grid{display:grid;gap:clamp(.9rem,2vw,1.5rem)}
.sg-grid-2{grid-template-columns:repeat(2,1fr)}
.sg-grid-3{grid-template-columns:repeat(3,1fr)}
.sg-grid-4{grid-template-columns:repeat(4,1fr)}
.sg-grid-auto{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
@media(max-width:1024px){.sg-grid-4{grid-template-columns:repeat(2,1fr)}.sg-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sg-grid-2,.sg-grid-3,.sg-grid-4{grid-template-columns:1fr}}

/* ── 4. TYPOGRAPHY ─────────────────────────────────────────────────── */
.sg-display{font-size:var(--sg-fs-display);font-weight:700;line-height:1.06;letter-spacing:-.02em}
.sg-h1{font-size:var(--sg-fs-h1);font-weight:700;line-height:1.1;letter-spacing:-.018em}
.sg-h2{font-size:var(--sg-fs-h2);font-weight:650;line-height:1.16;letter-spacing:-.012em}
.sg-h3{font-size:var(--sg-fs-h3);font-weight:600;line-height:1.24;letter-spacing:-.006em}
.sg-lead{font-size:var(--sg-fs-lead);font-weight:400;line-height:1.5;color:var(--sg-muted)}
.sg-body{font-size:var(--sg-fs-body);line-height:1.62;color:var(--sg-ink-soft)}
.sg-small{font-size:var(--sg-fs-small);color:var(--sg-muted)}
.sg-serif{font-family:var(--sg-serif)}
.sg-wordmark{font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.sg-balance{text-wrap:balance}.sg-prose{max-width:64ch}
.sg-gold-text{background:var(--sg-grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sg-noria-text{background:var(--sg-grad-noria);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Section header pattern */
.sg-eyebrow{display:inline-flex;align-items:center;gap:.5em;background:var(--sg-gold-pale);color:#9a7012;border:1px solid rgba(212,167,58,.3);font-size:var(--sg-fs-tiny);font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:.45em 1em;border-radius:var(--sg-r-pill)}

/* ── 5. BUTTONS ────────────────────────────────────────────────────── */
.sg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sg-font);font-size:.925rem;font-weight:600;line-height:1;
  padding:0 1.25rem;height:44px;border-radius:var(--sg-r-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--sg-trans-fast),box-shadow var(--sg-trans),background var(--sg-trans),color var(--sg-trans),border-color var(--sg-trans);
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.sg-btn:active{transform:translateY(1px) scale(.99)}
.sg-btn-sm{height:36px;padding:0 .9rem;font-size:.85rem;border-radius:var(--sg-r-xs)}
.sg-btn-lg{height:52px;padding:0 1.75rem;font-size:1rem}
.sg-btn-navy{background:var(--sg-blue-2);color:#fff}
.sg-btn-navy:hover{background:var(--sg-blue-hi);transform:translateY(-1px);box-shadow:var(--sg-shadow-2)}
.sg-btn-gold{background:var(--sg-grad-gold);color:var(--sg-navy)}
.sg-btn-gold:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,167,58,.3)}
.sg-btn-noria{background:var(--sg-grad-noria);color:#fff}
.sg-btn-noria:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(124,58,237,.32)}
.sg-btn-terra{background:var(--terra);color:#fff}
.sg-btn-terra:hover{background:var(--terra-deep);transform:translateY(-1px);box-shadow:0 8px 24px rgba(18,134,78,.28)}
.sg-btn-ghost{background:var(--sg-surface);color:var(--sg-blue-2);border-color:var(--sg-border-strong)}
.sg-btn-ghost:hover{background:var(--sg-surface-2);border-color:var(--sg-blue-2)}
.sg-btn-block{width:100%}
.sg-btn[disabled],.sg-btn:disabled{opacity:.5;pointer-events:none}

/* ── 6. CARDS & SURFACES ───────────────────────────────────────────── */
.sg-card{background:var(--sg-surface);border:1px solid var(--sg-border);border-radius:var(--sg-r-lg);padding:clamp(1rem,2.4vw,1.5rem);box-shadow:var(--sg-shadow-1);transition:transform var(--sg-trans),box-shadow var(--sg-trans),border-color var(--sg-trans)}
.sg-card-hover:hover{transform:translateY(-3px);box-shadow:var(--sg-shadow-3);border-color:var(--sg-border-strong)}
.sg-card-dark{background:var(--sg-grad-navy);color:#eaf0ff;border:1px solid rgba(244,215,122,.12);border-radius:var(--sg-r-lg);padding:clamp(1rem,2.4vw,1.5rem)}
.sg-rule{height:1px;border:0;background:var(--sg-border)}

/* ── 7. FORM CONTROLS ──────────────────────────────────────────────── */
.sg-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.sg-label{font-size:var(--sg-fs-small);font-weight:600;color:var(--sg-ink-soft)}
.sg-input,.sg-select,.sg-textarea{font-family:var(--sg-font);font-size:.95rem;color:var(--sg-ink);background:var(--sg-surface);border:1px solid var(--sg-border-strong);border-radius:var(--sg-r-sm);padding:0 .9rem;height:46px;width:100%;transition:border-color var(--sg-trans-fast),box-shadow var(--sg-trans-fast);-webkit-appearance:none;appearance:none}
.sg-textarea{min-height:112px;padding:.7rem .9rem;resize:vertical;line-height:1.55}
.sg-input:focus,.sg-select:focus,.sg-textarea:focus{outline:none;border-color:var(--sg-blue-2);box-shadow:0 0 0 4px var(--sg-focus)}
.sg-input::placeholder,.sg-textarea::placeholder{color:var(--sg-faint)}
.sg-select option{color:var(--sg-ink);background:var(--sg-white)}

/* Segmented control (modern tab pattern, replaces clunky button rows) */
.sg-seg{display:inline-flex;background:var(--sg-surface-2);border:1px solid var(--sg-border);border-radius:var(--sg-r-sm);padding:3px;gap:2px}
.sg-seg button{border:none;background:none;font:inherit;font-size:.85rem;font-weight:600;color:var(--sg-muted);padding:.45rem .9rem;border-radius:9px;cursor:pointer;transition:.15s var(--sg-ease)}
.sg-seg button.on{background:var(--sg-surface);color:var(--sg-ink);box-shadow:var(--sg-shadow-1)}

/* ── 8. CHIPS / BADGES ─────────────────────────────────────────────── */
.sg-chip{display:inline-flex;align-items:center;gap:.4em;font-size:.78rem;font-weight:600;padding:.35em .8em;border-radius:var(--sg-r-pill);background:var(--sg-surface-2);color:var(--sg-ink-soft);border:1px solid var(--sg-border)}
.sg-badge-gold{background:var(--sg-gold-pale);color:#9a7012;border-color:rgba(212,167,58,.3)}
.sg-badge-ok{background:#E8F7EE;color:#12864E;border-color:#BBE8CB}
.sg-badge-warn{background:#FEF4E2;color:#B45309;border-color:#F6D699}
.sg-badge-err{background:#FDECEA;color:#C0392B;border-color:#F6C9C3}

/* ── 9. BOTTOM NAVIGATION (premium native-app dock) ────────────────── */
.sg-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--sg-z-dock);
  display:none;align-items:stretch;justify-content:space-around;gap:2px;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--sg-border);
  padding:6px 8px calc(6px + var(--sg-safe-bottom));
}
.sg-dock a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 4px;border-radius:12px;text-decoration:none;
  color:var(--sg-muted);font-size:.66rem;font-weight:600;letter-spacing:.01em;
  min-height:52px;transition:color var(--sg-trans-fast),background var(--sg-trans-fast);
  -webkit-tap-highlight-color:transparent;
}
.sg-dock a .di{width:23px;height:23px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:transform var(--sg-trans-fast)}
.sg-dock a:active .di{transform:scale(.9)}
.sg-dock a.on{color:var(--sg-blue-2)}
.sg-dock a.on .di{transform:translateY(-1px)}
.sg-dock-pad{height:calc(var(--sg-dock-h) + var(--sg-safe-bottom))}
@media(max-width:820px){.sg-dock{display:flex}.sg-dock-pad{display:block}}

/* ── 10. BOTTOM SHEETS, DIALOGS & OVERLAYS (no clunky pop-ups) ──────── */
.sg-scrim{position:fixed;inset:0;z-index:var(--sg-z-overlay);background:rgba(4,16,34,.42);opacity:0;visibility:hidden;transition:opacity var(--sg-trans),visibility var(--sg-trans);backdrop-filter:blur(2px)}
.sg-scrim.open{opacity:1;visibility:visible}

.sg-sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--sg-z-sheet);background:var(--sg-surface);border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(11,21,48,.18);padding:10px 20px calc(24px + var(--sg-safe-bottom));transform:translateY(101%);transition:transform .34s var(--sg-ease);max-height:88vh;overflow:auto;overscroll-behavior:contain}
.sg-sheet.open{transform:none}
.sg-sheet .grabber{width:38px;height:4px;border-radius:100px;background:var(--sg-border-strong);margin:2px auto 14px}
/* On tablet/desktop the same component becomes a centred dialog */
@media(min-width:721px){
  .sg-sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,92vw);border-radius:var(--sg-r-xl);transform:translate(-50%,-46%) scale(.98);opacity:0;transition:transform .3s var(--sg-ease),opacity .3s var(--sg-ease);padding:24px}
  .sg-sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .sg-sheet .grabber{display:none}
}
.sg-sheet-title{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}

/* ── 11. LOADING / SKELETON / EMPTY / ERROR STATES ─────────────────── */
.sg-skeleton{background:linear-gradient(100deg,var(--sg-surface-2) 30%,var(--sg-surface-3) 50%,var(--sg-surface-2) 70%);background-size:200% 100%;animation:sg-shimmer 1.3s infinite linear;border-radius:8px}
@keyframes sg-shimmer{to{background-position:-200% 0}}
.sg-spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--sg-border);border-top-color:var(--sg-blue-2);animation:sg-spin .7s linear infinite;display:inline-block}
@keyframes sg-spin{to{transform:rotate(360deg)}}
.sg-dots{display:inline-flex;gap:5px;align-items:center}
.sg-dots i{width:7px;height:7px;border-radius:50%;background:var(--sg-blue-2);opacity:.4;animation:sg-blink 1.1s infinite}
.sg-dots i:nth-child(2){animation-delay:.18s}.sg-dots i:nth-child(3){animation-delay:.36s}
@keyframes sg-blink{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.sg-state{text-align:center;padding:clamp(2rem,6vw,3.5rem) 1.25rem;max-width:420px;margin-inline:auto}
.sg-state .ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 14px;background:var(--sg-surface-2);color:var(--sg-muted)}
.sg-state h4{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.sg-state p{font-size:.9rem;color:var(--sg-muted);line-height:1.55;margin-bottom:16px}

/* ── 12. TOAST ─────────────────────────────────────────────────────── */
.sg-toast{position:fixed;left:50%;bottom:calc(20px + var(--sg-safe-bottom));transform:translateX(-50%) translateY(20px);z-index:var(--sg-z-toast);background:var(--sg-navy);color:#fff;font-size:.88rem;font-weight:500;padding:.75rem 1.1rem;border-radius:var(--sg-r-pill);box-shadow:var(--sg-shadow-3);opacity:0;visibility:hidden;transition:opacity var(--sg-trans),transform var(--sg-trans),visibility var(--sg-trans)}
.sg-toast.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ── 13. ACCESSIBILITY & MOTION UTILITIES ──────────────────────────── */
.sg-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes sg-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sg-rise{animation:sg-rise .34s var(--sg-ease) both}
.sg-rise-2{animation:sg-rise .34s var(--sg-ease) .07s both}
.sg-rise-3{animation:sg-rise .34s var(--sg-ease) .14s both}
@keyframes sg-fade{from{opacity:0}to{opacity:1}}
.sg-fade{animation:sg-fade .3s var(--sg-ease) both}

/* ── 14. UTILITIES ─────────────────────────────────────────────────── */
.sg-stack{display:flex;flex-direction:column}
.sg-row{display:flex;align-items:center}
.sg-wrap{flex-wrap:wrap}
.sg-gap-sm{gap:8px}.sg-gap{gap:16px}.sg-gap-lg{gap:24px}
.sg-center{align-items:center;justify-content:center}
.sg-between{justify-content:space-between}
.sg-text-center{text-align:center}
.sg-mt{margin-top:16px}.sg-mt-lg{margin-top:28px}.sg-mb{margin-bottom:16px}.sg-mb-lg{margin-bottom:28px}
@media(max-width:600px){
  .sg-hide-mobile{display:none!important}
  .sg-btn-block-m{width:100%}
  .sg-row-stack-m{flex-direction:column;align-items:stretch}
}
@media(min-width:601px){.sg-only-mobile{display:none!important}}

/* ── 15. THE NORIA STAR — honour mark on every SkyGlobe logo ────────── */
.noria-star{color:var(--noria);font-style:normal;display:inline-block;transform:translateY(-.35em);font-size:.55em;margin-left:.12em}
@keyframes noria-breathe{0%,100%{opacity:.85}50%{opacity:1;text-shadow:0 0 8px rgba(124,58,237,.55)}}
.noria-star--live{animation:noria-breathe 3.2s ease-in-out infinite}
.sg-badge-live{background:rgba(124,58,237,.1);color:var(--noria);border:1px solid rgba(124,58,237,.3);border-radius:var(--sg-r-pill);font-size:.76rem;font-weight:600;padding:.35em .8em;display:inline-flex;align-items:center;gap:.4em}