/* ============================================================
   Velfine Overseas — Front-end stylesheet
   Dark premium theme with layered 3D depth.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* This page is authored dark. Declaring it stops Chrome's automatic dark
     mode from inverting an already-dark design into an unreadable light one. */
  color-scheme: dark;

  /* surfaces, darkest to lightest */
  --ink:        #040A16;
  --ink-2:      #071224;
  --surface:    #0B1A2F;
  --surface-2:  #10233D;
  --surface-3:  #16304F;

  /* accents */
  --gold:       #F79021;
  --gold-soft:  #FFD9AE;
  --gold-2:     #FFBC72;
  --gold-deep:  #C4700F;
  --emerald:    #0AA2E3;
  --emerald-2:  #6FCEF7;

  /* type */
  --text:       #E9EFFA;
  --text-2:     #B9C6DB;
  --muted:      #8194B1;
  --faint:      #5D6E8B;

  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.055);
  --glass:      rgba(255,255,255,.035);
  --glass-2:    rgba(255,255,255,.06);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-1: 0 2px 10px rgba(0,0,0,.35);
  --shadow-2: 0 18px 40px -20px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.35);
  --shadow-3: 0 40px 80px -32px rgba(0,0,0,.9), 0 8px 24px rgba(0,0,0,.45);
  --shadow-gold: 0 20px 60px -24px rgba(247,144,33,.45);

  --inner-hl: inset 0 1px 0 rgba(255,255,255,.08);

  --container: 1240px;
  --gutter: 24px;
  --header-h: 86px;

  --ease: cubic-bezier(.22,.68,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 86px) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink, #040A16);
  color: var(--text, #E9EFFA);
  font-family: var(--font-body, "Inter","Segoe UI",system-ui,sans-serif);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

/* Inline icon default — component rules override by specificity. */
.ico { width: 18px; height: 18px; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1.1em; color: var(--text-2, #B9C6DB); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold, #F79021); color: #1A0C00; }

:focus-visible {
  outline: 2px solid var(--gold, #F79021);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2, #071224); }
::-webkit-scrollbar-thumb { background: #24334f; border-radius: 8px; border: 3px solid var(--ink-2, #071224); }
::-webkit-scrollbar-thumb:hover { background: #33456a; }

/* ---------- 3. Layout utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding-inline: var(--gutter, 24px);
}
.container-wide { max-width: 1440px; }
.container-narrow { max-width: 880px; }

/* The decorative .glow spans are 500-650px wide and sit on negative offsets,
   so on a 375px phone they pushed the layout viewport out to 475px — which is
   what makes a phone render the whole page as if zoomed. Sections clip them.
   overflow: clip rather than hidden: it does not create a scroll container, so
   sticky and absolutely positioned children keep working. No clip margin — a
   margin is itself overflow, which is the thing being removed. */
.section, .section-tight {
  position: relative;
  overflow: clip;
}
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section-tight { padding: clamp(56px, 6vw, 88px) 0; }
.section-alt { background: linear-gradient(180deg, var(--ink, #040A16) 0%, var(--ink-2, #071224) 50%, var(--ink, #040A16) 100%); }

.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;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 999;
  background: var(--gold, #F79021); color: #1A0C00; padding: 10px 18px;
  border-radius: 0 0 10px 10px; font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- 4. Section heading kit ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold, #F79021);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #F79021));
}
.eyebrow-center { justify-content: center; }
.eyebrow-center::after {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--gold, #F79021), transparent);
}

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { font-size: 1.06rem; margin-top: 18px; }

.serif-accent {
  font-family: var(--font-serif, "Instrument Serif",Georgia,serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--gold-2, #FFBC72);
}

.divider {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line, rgba(255,255,255,.09)), transparent);
}

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--gold, #F79021);
  --btn-fg: #1A0C00;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border: 0; border-radius: 100px;
  background: var(--btn-bg, #F79021); color: var(--btn-fg, #1A0C00);
  font-family: var(--font-body, "Inter","Segoe UI",system-ui,sans-serif);
  font-size: .93rem; font-weight: 650; letter-spacing: .01em;
  cursor: pointer;
  transition: transform .35s var(--ease, cubic-bezier(.22,.68,.28,1)), box-shadow .35s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s;
  box-shadow: var(--shadow-gold, 0 20px 60px -24px rgba(247,144,33,.45)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  overflow: hidden;
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 46%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 26px 60px -20px rgba(247,144,33,.6), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08)); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(-1px) scale(.995); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text, #E9EFFA);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  background: var(--glass, rgba(255,255,255,.035));
}
.btn-ghost:hover {
  background: var(--glass-2, rgba(255,255,255,.06));
  border-color: rgba(247,144,33,.5);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}

.btn-emerald { --btn-bg: var(--emerald, #0AA2E3); --btn-fg: #00131F; box-shadow: 0 20px 60px -24px rgba(10,162,227,.45), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08)); }
.btn-emerald:hover { box-shadow: 0 26px 60px -20px rgba(10,162,227,.55), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08)); }

.btn-sm { padding: 11px 22px; font-size: .85rem; }
.btn-lg { padding: 18px 38px; font-size: 1rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: .92rem; color: var(--gold, #F79021);
  transition: gap .3s var(--ease, cubic-bezier(.22,.68,.28,1)), color .3s;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease, cubic-bezier(.22,.68,.28,1)); }
.link-arrow:hover { gap: 14px; color: var(--gold-2, #FFBC72); }

/* ---------- 6. Decorative backdrops ---------- */
/* No filter: blur() here on purpose. These are 500–650px elements, and a 90px
   blur forces each one onto its own GPU layer; on some drivers the section
   washed out to white a second or two after load, once the hero canvas started
   animating and the compositor re-laid the layers. The gradients already fade
   to transparent well before their edge, so the blur was adding cost and a
   rendering hazard for almost no visual difference. */
.glow {
  position: absolute; border-radius: 50%;
  opacity: .5; pointer-events: none; z-index: 0;
}
.glow-gold    { background: radial-gradient(circle closest-side, rgba(247,144,33,.40), rgba(247,144,33,.14) 45%, transparent 78%); }
.glow-emerald { background: radial-gradient(circle closest-side, rgba(10,162,227,.28), rgba(10,162,227,.10) 45%, transparent 78%); }
.glow-blue    { background: radial-gradient(circle closest-side, rgba(72,120,255,.26), rgba(72,120,255,.09) 45%, transparent 78%); }

/* Likewise no mix-blend-mode. `overlay` blends against whatever backdrop the
   compositor hands it, which is not stable while canvases are starting up —
   the same white-out. At 3.5% opacity the texture reads the same painted
   normally. isolation keeps any future blending inside the section. */
.noise { isolation: isolate; }
.noise::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Perspective grid floor — cheap, convincing depth */
.grid-floor {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 46vh;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to top, transparent 18%, #040A16 82%),
    linear-gradient(rgba(247,144,33,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,144,33,.14) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  transform: perspective(360px) rotateX(66deg);
  transform-origin: bottom center;
  opacity: .55;
}

/* ---------- 7. Top bar ---------- */
.topbar {
  position: relative; z-index: 60;
  background: linear-gradient(90deg, var(--ink-2, #071224), var(--surface, #0B1A2F) 50%, var(--ink-2, #071224));
  border-bottom: 1px solid var(--line-2, rgba(255,255,255,.055));
  font-size: .82rem;
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 42px; flex-wrap: wrap;
}
.topbar-list { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar a, .topbar span.tb-item {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-2, #B9C6DB); transition: color .25s;
}
.topbar a:hover { color: var(--gold, #F79021); }
.topbar svg { width: 14px; height: 14px; color: var(--gold, #F79021); flex: none; }

.social-row { display: flex; align-items: center; gap: 8px; }
.social-row a {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line-2, rgba(255,255,255,.055));
  transition: transform .3s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s, border-color .3s;
}
.social-row a:hover {
  transform: translateY(-2px);
  background: rgba(247,144,33,.16);
  border-color: rgba(247,144,33,.45);
}
.social-row svg { width: 14px; height: 14px; }

/* ---------- 8. Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,13,24,.94);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line-2, rgba(255,255,255,.055));
  transition: background .35s, box-shadow .35s, border-color .35s;
}
.site-header.scrolled {
  background: rgba(5,8,15,.92);
  box-shadow: 0 12px 40px -18px rgba(0,0,0,.9);
  border-bottom-color: var(--line, rgba(255,255,255,.09));
}
.header-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h, 86px);
}

.brand { display: inline-flex; align-items: center; gap: 13px; flex: none; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--gold-2, #FFBC72), var(--gold, #F79021) 45%, var(--gold-deep, #C4700F));
  color: #1A0C00;
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.03em;
  box-shadow: var(--shadow-gold, 0 20px 60px -24px rgba(247,144,33,.45)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .5s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.brand:hover .brand-mark { transform: rotateY(180deg); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 13px; }

/* Wordmark logo (used when a logo is uploaded in the admin panel) */
.brand-logo {
  height: 60px; width: auto; max-width: 210px;
  object-fit: contain; flex: none;
  transition: transform .5s var(--ease, cubic-bezier(.22,.68,.28,1)), filter .4s;
}
.brand:hover .brand-logo { transform: scale(1.035); filter: brightness(1.08); }
.brand-footer .brand-logo { height: 74px; }

.brand-divider { width: 1px; height: 34px; background: var(--line, rgba(255,255,255,.09)); flex: none; }
.brand-tag {
  font-size: .66rem; line-height: 1.45; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted, #8194B1); font-weight: 550;
  max-width: 130px;
}
@media (max-width: 1180px) { .brand-divider, .brand-tag { display: none; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.02em; color: #fff;
}
.brand-sub {
  font-size: .63rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted, #8194B1); font-weight: 500;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px; border-radius: 100px;
  font-size: .88rem; font-weight: 550; color: var(--text-2, #B9C6DB);
  transition: color .14s, background .14s;
}
.nav > li > a:hover, .nav > li.current > a { color: #fff; background: var(--glass, rgba(255,255,255,.035)); }
.nav > li.current > a { color: var(--gold, #F79021); }
.nav .caret { width: 12px; height: 12px; transition: transform .3s; opacity: .6; }
.nav > li:hover .caret { transform: rotate(180deg); }

/* Dropdown — 3D flip-in */
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%;
  min-width: 290px; padding: 10px;
  background: rgba(13,21,36,.97);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  border-radius: var(--r, 16px);
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9));
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-10px) rotateX(-12deg);
  transform-origin: top center;
  transition: opacity .16s var(--ease, cubic-bezier(.22,.68,.28,1)), transform .18s var(--ease, cubic-bezier(.22,.68,.28,1)), visibility .18s;
  z-index: 90;
}
.nav > li:hover .dropdown,
.nav > li:focus-within .dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) rotateX(0);
}
.dropdown::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px;
  font-size: .88rem; color: var(--text-2, #B9C6DB);
  transition: background .12s, color .12s, transform .14s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.dropdown a:hover { background: var(--glass-2, rgba(255,255,255,.06)); color: #fff; transform: translateX(4px); }
.dd-emoji {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  color: var(--gold, #F79021);
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line-2, rgba(255,255,255,.055));
}
.dd-label { display: flex; flex-direction: column; gap: 1px; }
.dd-label small { color: var(--faint, #5D6E8B); font-size: .72rem; line-height: 1.3; }

.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }

.burger {
  display: none; width: 46px; height: 46px; border-radius: 13px;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line, rgba(255,255,255,.09));
  cursor: pointer; place-items: center; flex-direction: column; gap: 5px;
}
.burger span {
  display: block; width: 19px; height: 2px; border-radius: 2px;
  background: var(--text, #E9EFFA); transition: transform .2s var(--ease, cubic-bezier(.22,.68,.28,1)), opacity .15s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  background: #05080F;
  padding: 24px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-2%);
  transition: opacity .18s var(--ease, cubic-bezier(.22,.68,.28,1)), transform .2s var(--ease, cubic-bezier(.22,.68,.28,1)), visibility .2s;
}
.mobile-nav.open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-close {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line, rgba(255,255,255,.09)); cursor: pointer;
}
.mobile-close svg { width: 20px; height: 20px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav > ul > li > a,
.mobile-nav .m-sub a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border-radius: 13px;
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 600; font-size: 1.05rem;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.mobile-nav > ul > li > a:hover { background: var(--glass, rgba(255,255,255,.035)); border-color: var(--line-2, rgba(255,255,255,.055)); }
.mobile-nav .m-sub { padding-left: 14px; margin: 2px 0 8px; border-left: 1px solid var(--line, rgba(255,255,255,.09)); }
.mobile-nav .m-sub a { font-size: .93rem; font-weight: 500; font-family: var(--font-body, "Inter","Segoe UI",system-ui,sans-serif); color: var(--text-2, #B9C6DB); padding: 11px 14px; }
.mobile-nav .m-actions { margin-top: 24px; display: grid; gap: 12px; }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  min-height: min(880px, calc(100vh - var(--header-h, 86px)));
  display: flex; align-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 30%, rgba(20,34,58,.85), transparent 60%),
    radial-gradient(90% 70% at 10% 10%, rgba(247,144,33,.10), transparent 60%),
    linear-gradient(180deg, var(--ink-2, #071224), var(--ink, #040A16)) , #040A16;
  padding: clamp(56px, 7vw, 96px) 0;
}
.hero-canvas {
  position: absolute; inset: 0; z-index: 0;
  opacity: .9;
}
.hero .container { position: relative; z-index: 3; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.hero-slide { display: none; }
.hero-slide.active { display: block; animation: heroIn .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) both; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px) rotateX(6deg); }
  to   { opacity: 1; transform: none; }
}

.hero-title {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4.15rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 22px;
  color: var(--text, #E9EFFA);
}
.hero-title .ln { display: block; }
.hero-title .ln:nth-child(2) { color: var(--gold, #F79021); }
.hero-text {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  max-width: 560px; color: var(--text-2, #B9C6DB);
  margin-bottom: 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px;
  padding-top: 30px; border-top: 1px solid var(--line-2, rgba(255,255,255,.055));
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 100px;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line-2, rgba(255,255,255,.055));
  font-size: .79rem; color: var(--text-2, #B9C6DB);
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.hero-badge b { color: var(--gold, #F79021); font-weight: 650; }

/* slider controls */
.hero-nav {
  display: flex; align-items: center; gap: 14px;
  margin-top: 32px;
}
.hero-dots { display: flex; gap: 8px; }
.hero-dot {
  width: 30px; height: 4px; border-radius: 4px; border: 0; padding: 0;
  background: rgba(255,255,255,.2); cursor: pointer; overflow: hidden;
  transition: background .3s;
}
.hero-dot.active { background: rgba(247,144,33,.35); }
.hero-dot i { display: block; height: 100%; width: 0; background: var(--gold, #F79021); }
.hero-dot.active i { animation: dotFill 7s linear forwards; }
@keyframes dotFill { to { width: 100%; } }
.hero-count { font-size: .78rem; color: var(--faint, #5D6E8B); letter-spacing: .1em; font-variant-numeric: tabular-nums; }

/* Globe stage */
.globe-stage {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  perspective: 1200px;
}
.globe-canvas {
  width: 100%; height: 100%;
  filter: drop-shadow(0 30px 70px rgba(10,162,227,.16));
}
.globe-ring {
  position: absolute; inset: 6%;
  border: 1px solid rgba(247,144,33,.16);
  border-radius: 50%;
  transform: rotateX(74deg) rotateZ(0deg);
  animation: ringSpin 26s linear infinite;
  pointer-events: none;
}
.globe-ring.r2 { inset: -4%; border-color: rgba(10,162,227,.14); animation-duration: 40s; animation-direction: reverse; }
@keyframes ringSpin { to { transform: rotateX(74deg) rotateZ(360deg); } }

.globe-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 100px;
  background: rgba(13,21,36,.85);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  font-size: .78rem; font-weight: 550; color: var(--text, #E9EFFA);
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  white-space: nowrap;
  animation: floaty 6s ease-in-out infinite;
}
.globe-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald, #0AA2E3); box-shadow: 0 0 0 4px rgba(10,162,227,.18); }
.globe-chip.c1 { top: 10%; left: 0; animation-delay: 0s; }
.globe-chip.c2 { top: 46%; right: 0; animation-delay: 1.4s; }
.globe-chip.c3 { bottom: 12%; left: 5%; animation-delay: 2.8s; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-11px); }
}

/* ---------- 10. Marquee ---------- */
.marquee {
  position: relative; overflow: hidden;
  padding: 20px 0;
  border-block: 1px solid var(--line-2, rgba(255,255,255,.055));
  background: linear-gradient(90deg, var(--ink-2, #071224), var(--surface, #0B1A2F) 50%, var(--ink-2, #071224));
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink-2, #071224), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink-2, #071224), transparent); }
.marquee-track {
  display: flex; gap: 44px; width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #8194B1); font-weight: 550; white-space: nowrap;
}
.marquee-item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold, #F79021); opacity: .7;
}

/* ---------- 11. 3D card primitive ---------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .55s var(--ease, cubic-bezier(.22,.68,.28,1)), box-shadow .45s var(--ease, cubic-bezier(.22,.68,.28,1)), border-color .35s;
}
.tilt-inner { transform-style: preserve-3d; }
.tilt .lift-1 { transform: translateZ(26px); }
.tilt .lift-2 { transform: translateZ(46px); }

.glare {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.14), transparent 62%);
  opacity: 0; transition: opacity .4s;
}
.tilt:hover .glare { opacity: 1; }

/* ---------- 12. Product cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(160deg, var(--surface-2, #10233D), var(--surface, #0B1A2F) 60%);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  overflow: hidden;
  isolation: isolate;
}
.product-card:hover { border-color: rgba(247,144,33,.35); box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), 0 0 0 1px rgba(247,144,33,.12), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08)); }

.pc-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface-3, #16304F);
}
.pc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter .6s;
}
.product-card:hover .pc-media img { transform: scale(1.07); }
.pc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(5,8,15,.9));
}
.pc-emoji {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--gold, #F79021);
  background: rgba(5,8,15,.78);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-1, 0 2px 10px rgba(0,0,0,.35)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.pc-count {
  position: absolute; bottom: 16px; right: 16px; z-index: 3;
  padding: 6px 13px; border-radius: 100px;
  background: rgba(5,8,15,.82);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  font-size: .74rem; color: var(--text-2, #B9C6DB); font-weight: 550;
}
.pc-body { padding: 26px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 3; }
.pc-body h3 { margin-bottom: 11px; }
.pc-body h3 a { transition: color .25s; }
.product-card:hover .pc-body h3 a { color: var(--gold, #F79021); }
.pc-body p { font-size: .93rem; color: var(--muted, #8194B1); margin-bottom: 20px; }
.pc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Compact category chip list */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px; border-radius: 100px;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line, rgba(255,255,255,.09));
  font-size: .86rem; font-weight: 550; color: var(--text-2, #B9C6DB);
  transition: transform .3s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s, border-color .3s, color .3s;
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.cat-chip:hover, .cat-chip.active {
  transform: translateY(-2px);
  background: rgba(247,144,33,.14);
  border-color: rgba(247,144,33,.45);
  color: #fff;
}

/* ---------- 13. Stats ---------- */
.stats-strip {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-2, rgba(255,255,255,.055));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  border-radius: var(--r-lg, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.stat {
  padding: 34px 26px; text-align: center;
  background: linear-gradient(165deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  transition: background .4s;
}
.stat:hover { background: linear-gradient(165deg, var(--surface-3, #16304F), var(--surface-2, #10233D)); }
.stat-value {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(150deg, #fff, var(--gold, #F79021) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 11px; font-size: .8rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted, #8194B1); font-weight: 550;
}

/* ---------- 14. Feature / why cards ---------- */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px;
}
.feature-card {
  position: relative; padding: 32px 28px;
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(165deg, var(--surface-2, #10233D), var(--surface, #0B1A2F) 70%);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  overflow: hidden;
}
.feature-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,144,33,.6), transparent);
  opacity: 0; transition: opacity .4s;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover { border-color: rgba(247,144,33,.28); }
.feat-icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 22px;
  background: linear-gradient(150deg, rgba(247,144,33,.22), rgba(247,144,33,.06));
  border: 1px solid rgba(247,144,33,.28);
  color: var(--gold, #F79021);
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .5s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.feature-card:hover .feat-icon { transform: translateZ(24px) rotateY(-14deg) scale(1.06); }
.feat-icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: 1.16rem; margin-bottom: 12px; }
.feature-card p { font-size: .93rem; color: var(--muted, #8194B1); margin: 0; }

/* ---------- 15. Process timeline ---------- */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.step-card {
  position: relative; padding: 30px 26px 28px;
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(170deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  overflow: hidden;
}
.step-num {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 700;
  font-size: 3.4rem; line-height: 1; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247,144,33,.35);
  position: absolute; top: 16px; right: 20px;
  transition: -webkit-text-stroke-color .4s, transform .5s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.step-card:hover .step-num { -webkit-text-stroke-color: rgba(247,144,33,.7); transform: translateZ(20px) scale(1.05); }
.step-card h3 { font-size: 1.1rem; margin: 0 90px 12px 0; }
.step-card p { font-size: .91rem; color: var(--muted, #8194B1); margin: 0; }
.step-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold, #F79021), transparent);
  transition: width .6s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.step-card:hover::after { width: 100%; }

/* ---------- 16. Split feature block ---------- */
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.split-media {
  position: relative; perspective: 1100px;
}
.split-media img {
  width: 100%; border-radius: var(--r-lg, 24px);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9));
  transform: rotateY(-7deg) rotateX(3deg);
  transition: transform .8s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.split-media:hover img { transform: rotateY(0) rotateX(0); }
.split-media .float-card {
  position: absolute; bottom: 18px; right: 18px;
  padding: 20px 24px; border-radius: var(--r, 16px);
  background: rgba(13,21,36,.97);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  max-width: 250px;
}
.float-card .fc-value {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-size: 1.7rem; font-weight: 700;
  color: var(--gold, #F79021); line-height: 1;
}
.float-card .fc-label { font-size: .8rem; color: var(--muted, #8194B1); margin-top: 6px; }

.check-list { display: grid; gap: 13px; margin: 26px 0 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: .95rem; color: var(--text-2, #B9C6DB);
}
.check-list li svg { width: 21px; height: 21px; flex: none; color: var(--emerald, #0AA2E3); margin-top: 1px; }

/* ---------- 17. Gallery ---------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.gallery-item {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--r, 16px); overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8));
  cursor: pointer;
  transition: transform .5s var(--ease, cubic-bezier(.22,.68,.28,1)), box-shadow .5s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.gallery-item:nth-child(4n+1) { grid-row: span 2; aspect-ratio: 4 / 6.4; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.gallery-item:hover { transform: translateY(-5px) scale(1.012); box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)); }
.gallery-item:hover img { transform: scale(1.09); }
.gallery-cap {
  position: absolute; inset: auto 0 0 0; padding: 18px 18px 16px;
  background: linear-gradient(transparent, rgba(5,8,15,.94));
  transform: translateY(8px); opacity: 0;
  transition: transform .45s var(--ease, cubic-bezier(.22,.68,.28,1)), opacity .45s;
}
.gallery-item:hover .gallery-cap { transform: none; opacity: 1; }
.gallery-cap strong { display: block; font-size: .95rem; font-weight: 600; }
.gallery-cap small { color: var(--gold, #F79021); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: #03050A;
  display: grid; place-items: center; padding: 30px;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1100px, 92vw); max-height: 86vh; object-fit: contain;
  border-radius: var(--r, 16px); box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9));
  transform: scale(.94); transition: transform .4s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 22px; right: 22px;
  width: 48px; height: 48px; border-radius: 14px; cursor: pointer;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line, rgba(255,255,255,.09));
  display: grid; place-items: center;
}
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: var(--text-2, #B9C6DB); font-size: .9rem; }

/* ---------- 18. Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.testi-card {
  position: relative; padding: 34px 30px 30px;
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(165deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  display: flex; flex-direction: column;
}
.testi-quote {
  position: absolute; top: 16px; right: 24px;
  font-family: var(--font-serif, "Instrument Serif",Georgia,serif); font-size: 5rem; line-height: 1;
  color: rgba(247,144,33,.16); pointer-events: none;
}
.testi-stars { display: flex; gap: 3px; margin-bottom: 18px; color: var(--gold, #F79021); }
.testi-stars svg { width: 16px; height: 16px; }
.testi-card p { font-size: .96rem; color: var(--text-2, #B9C6DB); margin-bottom: 24px; }
.testi-who { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-2, rgba(255,255,255,.055)); }
.testi-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--gold, #F79021), var(--gold-deep, #C4700F));
  color: #1A0C00; font-weight: 700; font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif);
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-who strong { display: block; font-size: .95rem; }
.testi-who small { color: var(--muted, #8194B1); font-size: .81rem; }

/* ---------- 19. Markets / countries ---------- */
.markets-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.market-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 17px; border-radius: 12px;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line-2, rgba(255,255,255,.055));
  font-size: .87rem; color: var(--text-2, #B9C6DB);
  transition: transform .3s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s, border-color .3s;
}
.market-pill:hover { transform: translateY(-2px); background: var(--glass-2, rgba(255,255,255,.06)); border-color: rgba(247,144,33,.32); }
.market-pill .pin { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald, #0AA2E3); flex: none; box-shadow: 0 0 0 3px rgba(10,162,227,.16); }

/* ---------- 20. Doc list ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.doc-item {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; border-radius: 14px;
  background: linear-gradient(150deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  font-size: .92rem; color: var(--text-2, #B9C6DB);
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .35s var(--ease, cubic-bezier(.22,.68,.28,1)), border-color .3s;
}
.doc-item:hover { transform: translateY(-3px); border-color: rgba(247,144,33,.3); }
.doc-item svg { width: 20px; height: 20px; color: var(--gold, #F79021); flex: none; }

/* ---------- 21. CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl, 32px);
  padding: clamp(44px, 6vw, 76px);
  background:
    radial-gradient(90% 140% at 88% 12%, rgba(247,144,33,.22), transparent 62%),
    radial-gradient(70% 120% at 8% 92%, rgba(10,162,227,.16), transparent 62%),
    linear-gradient(150deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  text-align: center;
}
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { max-width: 620px; margin-inline: auto; margin-bottom: 32px; font-size: 1.04rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- 22. Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(64px, 8vw, 108px) 0 clamp(52px, 6vw, 76px);
  background:
    radial-gradient(100% 120% at 82% 0%, rgba(247,144,33,.13), transparent 58%),
    linear-gradient(180deg, var(--ink-2, #071224), var(--ink, #040A16)) , #040A16;
  border-bottom: 1px solid var(--line-2, rgba(255,255,255,.055));
}
.page-hero .container { position: relative; z-index: 3; }
.page-hero h1 { margin-bottom: 18px; }
.page-hero p { font-size: 1.08rem; max-width: 660px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: .82rem; color: var(--faint, #5D6E8B); margin-bottom: 22px;
}
.breadcrumb a { color: var(--muted, #8194B1); transition: color .25s; }
.breadcrumb a:hover { color: var(--gold, #F79021); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb [aria-current] { color: var(--gold, #F79021); }

/* ---------- 23. Product detail ---------- */
.pd-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 4.5vw, 60px); align-items: start;
}
.pd-visual {
  position: sticky; top: calc(var(--header-h, 86px) + 24px);
  border-radius: var(--r-lg, 24px); overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.09)); box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9));
}
.pd-visual img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.spec-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--r, 16px); overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.09));
  background: linear-gradient(160deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.spec-table th, .spec-table td {
  padding: 15px 20px; text-align: left; font-size: .92rem;
  border-bottom: 1px solid var(--line-2, rgba(255,255,255,.055));
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { color: var(--muted, #8194B1); font-weight: 550; width: 44%; }
.spec-table td { color: var(--text, #E9EFFA); font-weight: 500; }
.spec-table tr:hover { background: rgba(255,255,255,.02); }

.variety-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.variety-card {
  padding: 24px 22px; border-radius: var(--r, 16px);
  background: linear-gradient(160deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .4s var(--ease, cubic-bezier(.22,.68,.28,1)), border-color .3s, box-shadow .4s;
}
.variety-card:hover { transform: translateY(-4px); border-color: rgba(247,144,33,.3); box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)); }
.variety-card h4 { font-size: 1rem; margin-bottom: 9px; }
.variety-card p { font-size: .89rem; color: var(--muted, #8194B1); margin: 0; }
.variety-card .vc-media { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line-2, rgba(255,255,255,.055)); }
.variety-card .vc-media img { width: 100%; height: 100%; object-fit: cover; }

.prose { font-size: 1rem; color: var(--text-2, #B9C6DB); }
.prose p { margin-bottom: 1.15em; }
.prose h3 { margin: 1.7em 0 .7em; color: #fff; }
.prose ul { display: grid; gap: 10px; margin: 1em 0; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold, #F79021);
}
.prose strong { color: #fff; font-weight: 600; }
.prose a { color: var(--gold, #F79021); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 24. Forms ---------- */
.form-card {
  padding: clamp(28px, 4vw, 42px);
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(160deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--text-2, #B9C6DB); }
.field label .req { color: var(--gold, #F79021); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  background: rgba(5,8,15,.55);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  border-radius: 12px;
  color: var(--text, #E9EFFA); font-family: inherit; font-size: .94rem;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238194B1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
  padding-right: 42px;
}
.field select option { background: var(--surface, #0B1A2F); color: var(--text, #E9EFFA); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(247,144,33,.6);
  background: rgba(5,8,15,.8);
  box-shadow: 0 0 0 4px rgba(247,144,33,.1);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint, #5D6E8B); }
.field .hint { font-size: .78rem; color: var(--faint, #5D6E8B); }
.field.err input, .field.err select, .field.err textarea { border-color: #E2564E; box-shadow: 0 0 0 4px rgba(226,86,78,.12); }
.field .err-msg { font-size: .78rem; color: #FF8A82; }

.checkbox-row { display: flex; align-items: flex-start; gap: 11px; font-size: .87rem; color: var(--muted, #8194B1); }
.checkbox-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold, #F79021); flex: none; }

.alert {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 20px; border-radius: 14px; margin-bottom: 24px;
  font-size: .92rem; border: 1px solid;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert-ok   { background: rgba(10,162,227,.1);  border-color: rgba(10,162,227,.35);  color: var(--emerald-2, #6FCEF7); }
.alert-err  { background: rgba(226,86,78,.1);   border-color: rgba(226,86,78,.35);   color: #FF9A93; }
.alert-info { background: rgba(247,144,33,.09); border-color: rgba(247,144,33,.3);   color: var(--gold-2, #FFBC72); }

/* Contact info cards */
.contact-cards { display: grid; gap: 14px; }
.contact-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px; border-radius: var(--r, 16px);
  background: linear-gradient(160deg, var(--surface-2, #10233D), var(--surface, #0B1A2F));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .4s var(--ease, cubic-bezier(.22,.68,.28,1)), border-color .3s;
}
.contact-card:hover { transform: translateY(-3px); border-color: rgba(247,144,33,.3); }
.cc-icon {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: var(--gold, #F79021);
  background: linear-gradient(150deg, rgba(247,144,33,.2), rgba(247,144,33,.05));
  border: 1px solid rgba(247,144,33,.25);
}
.cc-icon svg { width: 21px; height: 21px; }
.contact-card strong { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #8194B1); font-weight: 600; margin-bottom: 6px; }
.contact-card .cc-value { font-size: 1rem; color: var(--text, #E9EFFA); font-weight: 500; line-height: 1.5; }
.contact-card .cc-value a:hover { color: var(--gold, #F79021); }

.map-frame {
  border-radius: var(--r-lg, 24px); overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.09)); box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8));
  aspect-ratio: 16 / 8; background: var(--surface-2, #10233D);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) invert(.9) hue-rotate(180deg) contrast(.85); }

/* ---------- 25. Footer ---------- */
.site-footer {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ink-2, #071224), #03060C);
  border-top: 1px solid var(--line, rgba(255,255,255,.09));
  padding-top: clamp(56px, 6vw, 84px);
}
.footer-grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 52px;
}
.footer-brand p { font-size: .93rem; color: var(--muted, #8194B1); margin: 20px 0 22px; max-width: 330px; }
.footer-col h4 {
  font-family: var(--font-body, "Inter","Segoe UI",system-ui,sans-serif); font-size: .78rem; font-weight: 650;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold, #F79021);
  margin-bottom: 20px;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: .92rem; color: var(--muted, #8194B1); transition: color .25s, padding-left .25s; }
.footer-col a:hover { color: var(--text, #E9EFFA); padding-left: 5px; }
.footer-contact li { display: flex; gap: 12px; font-size: .92rem; color: var(--muted, #8194B1); align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; color: var(--gold, #F79021); flex: none; margin-top: 3px; }
.footer-contact a:hover { color: var(--gold, #F79021); }

.footer-bottom {
  position: relative; z-index: 3;
  border-top: 1px solid var(--line-2, rgba(255,255,255,.055));
  padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  font-size: .84rem; color: var(--faint, #5D6E8B);
}
.footer-bottom a { color: var(--muted, #8194B1); }
.footer-bottom a:hover { color: var(--gold, #F79021); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* Floating actions */
.float-actions {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: flex; flex-direction: column; gap: 12px;
}
.fab {
  width: 52px; height: 52px; border-radius: 16px; cursor: pointer;
  display: grid; place-items: center; border: 1px solid var(--line, rgba(255,255,255,.09));
  background: rgba(13,21,36,.96);
  color: var(--text, #E9EFFA);
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .35s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s, opacity .3s, visibility .3s;
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab svg { width: 23px; height: 23px; }
.fab-wa { background: linear-gradient(150deg, #2AC066, #1E9E52); border-color: rgba(255,255,255,.15); color: #fff; }
.fab-top { opacity: 0; visibility: hidden; }
.fab-top.show { opacity: 1; visibility: visible; }

/* ---------- 26. Reveal on scroll ---------- */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1));
  /* No will-change here. There are ~74 .reveal elements on the homepage and
     each one would be promoted to its own compositor layer for the whole life
     of the page. Together with the two animating canvases that is enough to
     exhaust layer memory on modest GPUs, which shows up as sections rendering
     white. The transition works fine without it. */
}
.reveal.in { opacity: 1; transform: none; }
.reveal-3d { transform: perspective(900px) translateY(34px) rotateX(9deg); }
.reveal-3d.in { transform: none; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
[data-delay="6"] { transition-delay: .48s; }

/* ---------- 27. Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .globe-stage { max-width: 460px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pd-grid { grid-template-columns: 1fr; }
  .pd-visual { position: static; }
}

@media (max-width: 980px) {
  .nav, .header-cta .btn { display: none; }
  .burger { display: grid; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; --header-h: 68px; }
  .brand-logo { height: 42px; }
  .brand-footer .brand-logo { height: 56px; }
  .topbar-list .tb-hide-sm { display: none; }
  .topbar-list .tb-phone { display: block; }
  .topbar-in { justify-content: center; }
  .topbar-list { gap: 8px 18px; justify-content: center; }
  .hero { min-height: auto; }
  .globe-chip { display: none; }
  .gallery-item:nth-child(4n+1) { grid-row: auto; aspect-ratio: 4/3; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 24px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .step-card h3 { margin-right: 60px; }
  .step-num { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 28. Print ---------- */
@media print {
  .site-header, .topbar, .site-footer, .float-actions, .hero-canvas, .globe-stage { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 20px 0; }
}

/* ---------- 29. Category marks ----------
   Vector marks replaced the emoji that used to sit in these slots. Emoji are
   a different typeface on every operating system, cannot take a brand colour,
   and turn into a blank box where the font is missing. */
.pc-emoji .ico { width: 25px; height: 25px; stroke-width: 1.6; }
.dd-emoji .ico { width: 18px; height: 18px; stroke-width: 1.7; }
.product-card:hover .pc-emoji { border-color: rgba(247,144,33,.45); }

.m-ico {
  width: 26px; height: 26px; flex: none; margin-right: 10px;
  display: inline-grid; place-items: center;
  color: var(--gold, #F79021);
}
.m-ico .ico { width: 18px; height: 18px; }
.mobile-nav .m-sub a { display: flex; align-items: center; }