/* ============================================================
   MYTHAGATE — brand design system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* teal scale (from logo) */
  --mint:        #6DD9CC;   /* highlight */
  --teal:        #2F9E98;   /* primary */
  --petrol:      #006265;   /* deep */
  --teal-glow:   #4ECDC4;   /* hover / glow */

  /* surfaces */
  --bg:          #14181A;   /* near-black, green tint */
  --bg-2:        #10141599; /* darker veil */
  --surface:     #1B2226;   /* cards */
  --surface-2:   #161D20;   /* recessed */
  --border:      #232C30;   /* dividers */
  --border-lit:  #2F9E9844; /* glowing edge */

  /* text */
  --text:        #ECF1F0;
  --muted:       #9FB0AE;
  --faint:       #6A7B79;

  /* magic accent */
  --amethyst:    #9D7BD8;

  /* gradient: mint -> petrol (logo) */
  --grad-gate:   linear-gradient(180deg, #6DD9CC 0%, #2F9E98 48%, #006265 100%);
  --grad-gate-soft: linear-gradient(160deg, #4ECDC4 0%, #2F9E98 55%, #00474a 100%);

  --maxw: 1200px;
  --nav-h: 76px;

  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--nav-h); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- type ---------- */
.display{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:.01em;
}
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--teal-glow);
}
.h-xl{ font-size:clamp(2.3rem, 5vw, 4.6rem); }
.h-lg{ font-size:clamp(2rem, 4.4vw, 3.4rem); }
.h-md{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--muted); line-height:1.6; }
.measure{ max-width:62ch; }
.measure-s{ max-width:46ch; }

.text-grad{
  background:var(--grad-gate);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ position:relative; padding-block:clamp(72px,11vh,140px); }
.section--tight{ padding-block:clamp(56px,8vh,96px); }

/* ---------- buttons ---------- */
.btn{
  --bh:54px;
  display:inline-flex; align-items:center; gap:.6em;
  height:var(--bh); padding:0 1.6rem;
  font-family:var(--font-body); font-weight:600; font-size:16px;
  letter-spacing:.02em;
  border-radius:8px;
  cursor:pointer; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, color .3s, border-color .3s;
  position:relative; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{
  background:var(--grad-gate-soft); color:#04201f;
  box-shadow:0 6px 24px -6px #2f9e9866, inset 0 1px 0 #ffffff33;
  font-weight:700;
}
.btn--primary:hover{ box-shadow:0 12px 36px -8px #4ecdc4aa, inset 0 1px 0 #ffffff44; }
.btn--ghost{
  background:transparent; color:var(--text);
  border-color:var(--border);
}
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal-glow); box-shadow:0 0 0 1px var(--teal) inset, 0 8px 28px -12px #2f9e9866; }
.btn--lg{ --bh:60px; padding:0 2.1rem; font-size:1.05rem; }
.btn--sm{ --bh:44px; padding:0 1.15rem; font-size:.86rem; }

/* ---------- hex chips / decorative ---------- */
.hex-clip{ clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); } /* pointy-side ... used flat-top below */
.hex-flat{ clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* a small hex bullet */
.hexbullet{
  width:12px;height:14px;flex:none;
  background:var(--grad-gate);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* divider */
.hex-divider{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--border); padding-block:8px; }
.hex-divider::before,.hex-divider::after{ content:""; height:1px; flex:1; max-width:120px; background:linear-gradient(90deg,transparent,var(--border)); }
.hex-divider::after{ background:linear-gradient(270deg,transparent,var(--border)); }
.hex-divider .d{ width:14px;height:16px; background:var(--teal); opacity:.7; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

/* glow utilities */
.glow-radial{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; opacity:.5; }

/* card base */
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);
  border-radius:6px;
  position:relative;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.card:hover{ border-color:var(--border-lit); transform:translateY(-3px); box-shadow:0 18px 44px -22px #00000088; }

/* image placeholders (drop real renders later) */
.ph{
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(47,158,152,.05) 11px 12px),
    radial-gradient(120% 90% at 50% 12%, #1d2629 0%, #12181a 78%);
  position:relative; overflow:hidden;
}
.ph::after{
  content:attr(data-ph);
  position:absolute; inset:auto 0 0 0; bottom:12px; text-align:center;
  font-family:ui-monospace,monospace; font-size:.7rem; letter-spacing:.04em;
  color:var(--faint);
}
.ph-hex{
  position:absolute; inset:0; margin:auto; width:62%; aspect-ratio:1;
  border:1.5px solid rgba(47,158,152,.28);
  clip-path:polygon(50% 1%,99% 26%,99% 74%,50% 99%,1% 74%,1% 26%);
  opacity:.7;
}

/* badges */
.badge{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.34em .7em; border-radius:2px;
}
.badge--live{ color:#04201f; background:var(--mint); box-shadow:0 0 18px -2px #4ecdc488; }
.badge--soon{ color:var(--faint); background:#1d2528; border:1px solid var(--border); }