/* =============================================================
   7 Plus Overseas · base.css
   1. Tokens  2. Reset  3. Type  4. Layout  5. Buttons  6. Helpers
   ============================================================= */

/* 1. TOKENS */
:root {
  --navy: #0b1b33;
  --navy-2: #102646;
  --navy-3: #071224;
  --ocean: #12b5c4;
  --ocean-2: #0e8f9b;
  --saffron: #f4a93b;
  --saffron-2: #e08d17;
  --paper: #f5f7fb;
  --white: #ffffff;
  --ink: #0e1a2b;
  --text: #3b4a60;
  --muted: #5d6b80;
  --line: #dfe5ee;
  --on-dark: #e8eef7;
  --on-dark-muted: #a8b6ca;
  --error: #c62828;

  --grad: linear-gradient(100deg, var(--ocean) 0%, #6ee7f0 45%, var(--saffron) 100%);

  --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2vw, 3rem);

  --container: 1200px;
  --gutter: clamp(1rem, 0.4rem + 2.4vw, 2rem);
  --section: clamp(4rem, 3rem + 4vw, 7rem);
  --header-h: 74px;
  --r: 18px;
  --r-lg: 28px;
  --shadow: 0 20px 45px -22px rgb(11 27 51 / 0.35);
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }

/* 3. TYPE */
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: 1.2rem; }
p { text-wrap: pretty; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; }

.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocean); }
.eyebrow--dark { color: var(--ocean-2); }

/* 4. LAYOUT */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tint { background: #eaf0f7; }
.section--dark { background: var(--navy); color: var(--on-dark-muted); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.head { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.head p:last-child { margin-top: 0.9rem; font-size: 1.1rem; color: var(--muted); }
.section--dark .head p:last-child { color: var(--on-dark-muted); }

/* 5. BUTTONS */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 50px; padding: 0.8rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s, border-color .3s; }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn--primary { background: var(--saffron); color: var(--navy); box-shadow: 0 14px 30px -14px rgb(244 169 59 / 0.9); }
.btn--primary:hover { background: #ffbf5e; }
.btn--ghost { border: 1.5px solid rgb(255 255 255 / 0.35); color: var(--white); }
.btn--ghost:hover { border-color: var(--ocean); background: rgb(18 181 196 / 0.12); }
.btn--block { width: 100%; }
/* Rotating gradient border */
.btn--glow { color: var(--white); background: var(--navy-2); isolation: isolate; }
.btn--glow::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--angle, 0deg), var(--ocean), var(--saffron), var(--ocean)); }
.btn--glow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--navy-2); }
.magnetic { will-change: transform; }

/* 6. HELPERS */
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 300; padding: .7rem 1.2rem; border-radius: 999px; background: var(--saffron); color: var(--navy); font-weight: 700; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }