/* ====================================================
   AXOLTL.APP — Editorial Dark
   Bricolage Grotesque display · Satoshi body · JetBrains Mono technical
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Spectral:ital,wght@0,400;0,700;1,400&display=swap');

@font-face {
  font-family: 'Satoshi';
  src: url('assets/Satoshi-Regular.otf') format('opentype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/Satoshi-Medium.otf') format('opentype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/Satoshi-Bold.otf') format('opentype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/Satoshi-Black.otf') format('opentype');
  font-weight: 900; font-display: swap;
}

:root {
  --c-bg:        #0c0b09;
  --c-surface:   #161513;
  --c-surface2:  #1e1d1a;
  --c-surface3:  #262522;
  --c-text:      #f5ede8;
  --c-text-dim:  rgba(245,237,232,0.48);
  --c-text-mid:  rgba(245,237,232,0.72);
  --c-teal:      #01696f;
  --c-teal-l:    #4fc4b7;
  --c-blush:     #f0d0c8;
  --c-coral:     #e8967a;
  --c-amber:     #f5b942;
  --c-violet:    #9b8ec4;
  --c-sky:       #6fb4d4;
  --c-glow:      rgba(79,196,183,0.22);
  --c-glow-blush:rgba(240,208,200,0.12);
  --c-border:    rgba(245,237,232,0.07);
  --c-glass:     rgba(22,21,19,0.7);
  --radius:      18px;
  --radius-lg:   28px;
  --radius-xl:   44px;
  --ease:        cubic-bezier(0.25,0.46,0.45,0.94);
  --tr:          0.4s var(--ease);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
}

@media (max-width: 768px) {
  :root {
    --radius-lg: 24px;
    --radius-xl: 32px;
  }
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }

/* AMBIENT */
.ambient {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 10% 5%, rgba(1,105,111,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 85%, var(--c-glow-blush) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(155,142,196,0.05) 0%, transparent 50%);
  animation: ambient-shift 20s ease-in-out infinite alternate;
}
@keyframes ambient-shift { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(12deg)} }

.ambient::after {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity:0.45;
}

/* NAV */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0.9rem 5%;
  display:flex; justify-content:space-between; align-items:center;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  background:rgba(12,11,9,0.55);
  border-bottom:1px solid var(--c-border);
  transition:var(--tr);
}
.nav.scrolled { background:rgba(12,11,9,0.94); border-bottom-color: rgba(245,237,232,0.12); }

.nav__logo {
  display:flex; align-items:center; gap:0.7rem;
  font-family: 'Spectral', serif;
  font-weight:700; font-size:1.4rem;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg, var(--c-teal-l) 0%, var(--c-blush) 50%, var(--c-coral) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 200%;
  animation:gradient-flow 5s ease infinite;
  text-decoration:none;
  transition:var(--tr);
}
.nav__logo img {
  width: 32px; height: 32px;
  filter: drop-shadow(0 0 8px rgba(240,208,200,0.1));
  transition: 0.5s var(--ease);
}
.nav__logo:hover {
  color: var(--c-teal-l);
}
.nav__logo:hover img {
  transform: scale(1.15) rotate(-5deg);
  filter: drop-shadow(0 0 12px var(--c-teal-l));
}
.nav__logo img { width:32px; height:32px; transition:var(--tr); }
.nav__logo:hover img { transform:rotate(15deg) scale(1.12); filter:drop-shadow(0 0 10px var(--c-glow)); }

.nav__links { display:flex; gap:2rem; align-items:center; }

.nav__links a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--font-body);
  font-weight:500; font-size:0.83rem;
  color:var(--c-text-dim);
  transition:var(--tr);
  position:relative;
  letter-spacing:0.01em;
}
.nav__links a:not(.nav__cta)::after {
  content:''; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
  width:0; height:1.5px;
  background:var(--c-teal-l);
  border-radius:1px;
  transition:width 0.28s ease;
}
.nav__links a:hover { color:var(--c-text); }
.nav__links a:not(.nav__cta):hover::after { width:100%; }
.nav__links a.active { color:var(--c-text); }
.nav__links a.active:not(.nav__cta)::after { width:100%; }

.nav__cta {
  min-height:44px;
  padding:0.62rem 1.3rem !important;
  background:linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-l) 100%) !important;
  color:#fff !important;
  border-radius:50px !important;
  font-weight:700 !important; font-size:0.8rem !important;
  letter-spacing:0.02em !important;
  transition:var(--tr) !important;
  box-shadow:0 4px 18px rgba(79,196,183,0.28);
}
.nav__cta:hover { transform:translateY(-2px) !important; box-shadow:0 8px 28px rgba(79,196,183,0.45) !important; }
.nav__cta::after { display:none !important; }

.nav__toggle { display:none; background:none; border:none; cursor:pointer; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:6px; z-index:1001; }
.nav__toggle span { display:block; width:22px; height:1.5px; background:var(--c-blush); border-radius:2px; transition:var(--tr); transform-origin: center; }

.nav__toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle.active span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.nav__toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(12, 11, 9, 0.98);
    padding: 2rem 5%;
    border-bottom: 1px solid var(--c-border);
    backdrop-filter: blur(32px);
    gap: 1.5rem;
    z-index: 999;
    transform: translateY(-10px);
    opacity: 0;
    transition: 0.3s var(--ease);
    pointer-events: none;
  }
  .nav__links.active {
    display: flex;
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .nav__links a {
    width:fit-content;
    align-self:center;
    padding-inline:0.4rem;
    justify-content:center;
  }
}

/* HERO */
.hero {
  min-height:100vh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
  padding:8rem 5% 4rem;
  position:relative;
}

.hero__glow {
  position:absolute; width:clamp(260px, 55vw, 480px); height:clamp(260px, 55vw, 480px); border-radius:50%;
  background:radial-gradient(circle, var(--c-glow) 0%, transparent 70%);
  animation:glow-pulse 5s ease-in-out infinite;
  pointer-events:none;
  top:calc(50% - 360px); left:calc(50% - 240px);
}
@keyframes glow-pulse { 0%,100%{transform:scale(1);opacity:0.55} 50%{transform:scale(1.18);opacity:0.28} }

.hero__mascot {
  width:clamp(160px, 28vw, 240px); height:clamp(160px, 28vw, 240px);
  margin-bottom:2rem;
  filter:drop-shadow(0 24px 48px rgba(79,196,183,0.22));
  animation:hero-float 5.5s ease-in-out infinite;
  position:relative; z-index:2;
}
@keyframes hero-float {
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-10px) rotate(0.8deg)}
  70%{transform:translateY(-6px) rotate(-0.8deg)}
}

.hero__badge {
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.4rem 1.1rem;
  background:linear-gradient(135deg, var(--c-glass), rgba(79,196,183,0.08));
  border:1px solid rgba(79,196,183,0.22);
  border-radius:50px;
  font-family:var(--font-mono);
  font-size:clamp(0.7rem, 2vw, 0.875rem); font-weight:600;
  color:var(--c-teal-l);
  margin-bottom:2rem;
  backdrop-filter:blur(12px);
  position:relative; z-index:2;
  letter-spacing:0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: visible;
  overflow-wrap:normal;
  word-break:normal;
  max-width: min(100%, 44rem);
}

.hero__badge-dot {
  width:6px; height:6px; background:#34d399; border-radius:50%;
  box-shadow:0 0 6px #34d399;
  animation:pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 6px #34d399} 50%{opacity:0.4;box-shadow:0 0 14px #34d399} }

.hero h1 {
  font-family:var(--font-display);
  font-size:clamp(3rem, 8.5vw, 6rem);
  font-weight:750;
  letter-spacing:-0.04em;
  line-height:0.96;
  margin-bottom:1.5rem;
  max-width:900px;
  position:relative; z-index:2;
}
.hero h1 .line-white { color:var(--c-text); }
.hero h1 .line-gradient {
  background:linear-gradient(135deg, var(--c-teal-l) 0%, var(--c-blush) 50%, var(--c-coral) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 200%;
  animation:gradient-flow 5s ease infinite;
}
@keyframes gradient-flow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.hero__sub {
  font-size:1.1rem; max-width:500px;
  color:var(--c-text-mid);
  margin-bottom:2.5rem;
  position:relative; z-index:2;
  line-height:1.85;
}
.hero__sub strong {
  font-weight:700;
  background:linear-gradient(135deg, var(--c-teal-l) 0%, var(--c-blush) 50%, var(--c-coral) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  background-size:200% 200%;
  animation:gradient-flow 5s ease infinite;
}

.hero__ctas { display:flex; gap:0.9rem; flex-wrap:wrap; justify-content:center; position:relative; z-index:2; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  min-height:44px;
  padding:0.82rem 1.75rem;
  border-radius:50px;
  font-family:var(--font-body);
  font-weight:700; font-size:0.88rem;
  letter-spacing:0.01em;
  border:none; cursor:pointer;
  transition:var(--tr);
}
.btn--primary { background:linear-gradient(135deg, var(--c-teal) 0%, var(--c-teal-l) 100%); color:#fff; box-shadow:0 6px 24px rgba(79,196,183,0.3); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(79,196,183,0.45); }
.btn--blush { background:linear-gradient(135deg,rgba(232,150,122,0.15),rgba(240,208,200,0.1)); color:var(--c-blush); border:1px solid rgba(240,208,200,0.2); }
.btn--blush:hover { transform:translateY(-2px); background:linear-gradient(135deg,rgba(232,150,122,0.22),rgba(240,208,200,0.16)); border-color:rgba(240,208,200,0.36); }
.btn--ghost { background:transparent; color:var(--c-text-mid); border:1px solid var(--c-border); }
.btn--ghost:hover { color:var(--c-text); border-color:rgba(245,237,232,0.2); transform:translateY(-2px); }
.btn--white { background:var(--c-text); color:var(--c-bg); font-weight:800; }
.btn--white:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,237,232,0.15); }
.btn__icon { flex-shrink:0; }

/* PROVIDER PILLS */
.hero__providers { margin-top:3rem; position:relative; z-index:2; }
.hero__providers-label {
  font-family:var(--font-mono);
  font-size:0.75rem; color:var(--c-text-dim);
  letter-spacing:0.18em; text-transform:uppercase;
  display:block; margin-bottom:1.1rem;
  font-weight: 500;
}
.hero__providers-logos { display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; }
.provider-pill {
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.55rem 1.1rem;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:50px;
  font-size:0.95rem; font-weight:500; color:var(--c-text-mid);
  transition:var(--tr);
}
.provider-pill:hover { border-color:rgba(245,237,232,0.18); color:var(--c-text); transform: translateY(-2px); }
.provider-pill__logo { width:22px; height:22px; border-radius:3.5px; object-fit:contain; }

/* SECTION */
.section { padding:6rem 5%; max-width:1140px; margin:0 auto; }
.section__header { text-align:center; margin-bottom:3.5rem; }
.section__label {
  font-family:var(--font-mono);
  font-size:0.95rem; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--c-teal-l); display:block; margin-bottom:1.1rem;
  font-weight: 700;
}
.section__title {
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4vw,2.9rem);
  font-weight:700; letter-spacing:-0.03em; line-height:1.1;
  margin-bottom:0.8rem;
}
.section__desc { font-size:1rem; color:var(--c-text-mid); max-width:520px; margin:0 auto; line-height:1.8; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-stagger { opacity:0; transform:translateY(22px); transition:opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-stagger.visible { opacity:1; transform:translateY(0); }
.reveal-stagger.visible > * { animation:stagger-in 0.5s var(--ease) both; }
.reveal-stagger.visible > *:nth-child(1){animation-delay:0s}
.reveal-stagger.visible > *:nth-child(2){animation-delay:0.07s}
.reveal-stagger.visible > *:nth-child(3){animation-delay:0.14s}
.reveal-stagger.visible > *:nth-child(4){animation-delay:0.21s}
.reveal-stagger.visible > *:nth-child(5){animation-delay:0.28s}
@keyframes stagger-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* SCENARIOS */
.scenarios { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.scenario {
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:2.25rem;
  display:flex; flex-direction:column; gap:0.9rem;
  transition:var(--tr); position:relative; overflow:hidden;
}
.scenario::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--c-teal-l);
  opacity:0; transition:0.4s ease;
}
.scenario:hover { transform:translateY(-6px); border-color:var(--c-border); box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.scenario:hover::before { opacity:1; }

.scenario--a::before { background: linear-gradient(90deg, var(--c-teal-l), var(--c-sky)); }
.scenario--b::before { background: linear-gradient(90deg, var(--c-coral), var(--c-amber)); }
.scenario--c::before { background: linear-gradient(90deg, var(--c-violet), var(--c-sky)); }
.scenario--d::before { background: linear-gradient(90deg, var(--c-amber), var(--c-teal-l)); }

.scenario--e { grid-column:span 2; }

.scenario__visual { width:100%; height:260px; object-fit:contain; border-radius:calc(var(--radius-lg) - 6px); background:var(--c-surface2); padding:1.5rem; }
.scenario__tag { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-teal-l); font-weight:500; }
.scenario__title { font-family:var(--font-display); font-size:1.28rem; font-weight:700; letter-spacing:-0.02em; line-height:1.2; }
.scenario__desc { font-size:0.87rem; color:var(--c-text-mid); line-height:1.78; flex-grow:1; }
.scenario__flow { font-family:var(--font-mono); font-size:0.68rem; color:var(--c-text-dim); padding:0.65rem 0.9rem; background:var(--c-surface2); border-radius:8px; letter-spacing:0.02em; line-height:1.6; display:flex; align-items:center; gap:0.4em; flex-wrap:wrap; }
.scenario__flow-arrow { display:inline-block; width:18px; height:14px; vertical-align:middle; flex-shrink:0; }
.scenario__flow-arrow img { width:100%; height:100%; object-fit:contain; display:block; }

/* PROTOCOL BANNER (The Blind Relay) */
.protocol {
  width: min(92%, 1280px);
  max-width: 1280px;
  margin: 80px auto;
  background: linear-gradient(160deg, var(--c-surface) 0%, #151d1a 50%, var(--c-surface2) 100%);
  border: 1px solid rgba(79,196,183,0.18);
  border-radius: 48px;
  padding: 5rem 6.5rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 5rem;
  align-items: center;
  overflow: hidden;
  position: relative;
  text-align: left;
  box-shadow: 0 40px 100px rgba(0,0,0,0.4);
}

.protocol::after {
  content:''; position:absolute; top:-30%; right:-10%; width:clamp(260px, 55vw, 600px); height:clamp(260px, 55vw, 600px);
  background:radial-gradient(circle, rgba(79,196,183,0.14) 0%, transparent 70%);
  pointer-events:none;
}

.protocol__content { position: relative; z-index: 1; }

.protocol__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--c-teal-l);
  margin-bottom: 2rem;
}

.protocol__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  line-height: 1.0;
  color: #fff;
}

.protocol__desc {
  font-size: 1.15rem;
  color: var(--c-text-mid);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  max-width: 520px;
}

.protocol__desc em {
  color: var(--c-blush);
  font-style: normal;
  font-weight: 600;
}

.protocol__features {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.8rem;
}

.protocol__features li {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 0.95rem; font-weight: 500;
  color: var(--c-text-mid);
}

.protocol__features li .check {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(79,196,183,0.18);
  color: var(--c-teal-l);
  border-radius: 50%;
  font-size: 0.75rem; font-weight: 900;
  flex-shrink: 0;
  border: 1px solid rgba(79,196,183,0.25);
}

.protocol__visual { position: relative; z-index: 1; display: flex; justify-content: flex-end; }

.protocol__visual img {
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 30px 60px rgba(79,196,183,0.22));
  transition: 0.6s var(--ease);
}
.protocol__visual img:hover { transform: scale(1.04) rotate(1deg); }

/* HOW IT WORKS */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; position:relative; }
.steps::before { content:''; position:absolute; top:28px; left:calc(16.66% + 20px); right:calc(16.66% + 20px); height:1px; background:linear-gradient(90deg, var(--c-teal-l), var(--c-violet), var(--c-coral)); opacity:0.25; }
.step { text-align:center; padding:0.5rem; }
.step__number { width:56px; height:56px; border-radius:50%; background:var(--c-surface2); border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem; transition:var(--tr); color:var(--c-teal-l); }
.step:hover .step__number { background:rgba(79,196,183,0.1); border-color:var(--c-teal-l); transform:scale(1.06); }
.step__title { font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:0.5rem; }
.step__desc { font-size:0.84rem; color:var(--c-text-mid); line-height:1.75; }

/* SECURITY CHIPS */
.security-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; max-width:780px; margin:0 auto; }
.security-chip { display:flex; align-items:flex-start; gap:1rem; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:1.4rem 1.6rem; transition:var(--tr); }
.security-chip:hover { transform:translateY(-3px); border-color:rgba(79,196,183,0.18); }
.security-chip__icon { width:38px; height:38px; border-radius:10px; background:var(--c-surface2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.security-chip__text strong { display:block; font-family:var(--font-display); font-size:0.9rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:0.25rem; }
.security-chip__text span { font-size:0.78rem; color:var(--c-text-dim); line-height:1.6; }

/* MASCOT STATES */
.states__grid { display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; }
.state-card { text-align:center; padding:1.5rem; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); min-width:160px; transition:var(--tr); }
.state-card:hover { transform:translateY(-4px) scale(1.02); border-color:rgba(79,196,183,0.18); }
.state-card__label { font-family:var(--font-display); font-size:0.95rem; font-weight:700; letter-spacing:-0.01em; margin-top:0.8rem; }
.state-card__sub { font-size:0.72rem; color:var(--c-text-dim); margin-top:0.25rem; font-family:var(--font-mono); letter-spacing:0.02em; }

/* CTA BANNER */
.cta-banner { background:linear-gradient(160deg, var(--c-surface) 0%, rgba(1,105,111,0.1) 40%, rgba(240,208,200,0.04) 100%); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); padding:5rem 5%; text-align:center; }
.cta-banner h2 { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:750; letter-spacing:-0.035em; margin-bottom:0.75rem; }
.cta-banner p { font-size:1rem; color:var(--c-text-mid); max-width:420px; margin:0 auto 2rem; line-height:1.8; }

/* FOOTER */
.footer { padding:3rem 5% 2rem; border-top:1px solid var(--c-border); }
.footer--full { text-align:left; padding:4rem 5% 2.5rem; }
.footer__grid { display:grid; grid-template-columns:auto repeat(3, minmax(0, 1fr)); gap:2rem; margin-bottom:2.5rem; max-width:1140px; margin-left:auto; margin-right:auto; align-items:start; }
.footer__brand .nav__logo { margin-bottom:0.6rem; display:flex; align-items:center; gap:0.5rem; }
.footer__brand .nav__logo img { flex-shrink:0; }
.footer__tagline { font-family:var(--font-mono); font-size:0.7rem; color:var(--c-text-dim); letter-spacing:0.04em; }
.footer__col h4 { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--c-text-mid); margin-bottom:0.9rem; }
.footer__col a { display:block; font-size:0.82rem; color:var(--c-text-dim); margin-bottom:0.5rem; transition:var(--tr); }
.footer__col a:hover { color:var(--c-teal-l); transform:translateX(3px); }
.footer__bottom { border-top:1px solid var(--c-border); padding-top:1.5rem; text-align:center; max-width:1140px; margin:0 auto; }
.footer__copy { font-size:0.78rem; color:var(--c-text-dim); }
.footer__copy a { color:var(--c-teal-l); }
.footer__copy a:hover { color:var(--c-blush); }

/* SHARED */
.line-gradient {
  background:linear-gradient(135deg, var(--c-teal-l) 0%, var(--c-blush) 50%, var(--c-coral) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; background-size:200% 200%;
  animation:gradient-flow 5s ease infinite;
}

p strong,
li strong {
  font-weight:700;
  background:linear-gradient(135deg, var(--c-teal-l) 0%, var(--c-blush) 50%, var(--c-coral) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  background-size:200% 200%;
  animation:gradient-flow 5s ease infinite;
}

/* PAGE HERO (subpages) */
.page-hero { padding:8rem 5% 3rem; text-align:center; max-width:820px; margin:0 auto; }
.page-hero__title { font-family:var(--font-display); font-size:clamp(2.4rem,5.5vw,4rem); font-weight:750; letter-spacing:-0.04em; line-height:1.05; margin:0.8rem 0 1rem; }
.page-hero__desc { font-size:1.05rem; color:var(--c-text-mid); max-width:500px; margin:0 auto; line-height:1.85; }

/* DOCS */
.docs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.doc-card { display:flex; flex-direction:column; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:2rem; transition:var(--tr); }
.doc-card:hover { transform:translateY(-4px); }
.doc-card--teal:hover{border-color:rgba(79,196,183,0.3)} .doc-card--coral:hover{border-color:rgba(232,150,122,0.3)} .doc-card--violet:hover{border-color:rgba(155,142,196,0.3)} .doc-card--amber:hover{border-color:rgba(245,185,66,0.3)} .doc-card--sky:hover{border-color:rgba(111,180,212,0.3)}
.doc-card__icon { width:50px; height:50px; border-radius:13px; background:var(--c-surface2); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.doc-card--teal .doc-card__icon{color:var(--c-teal-l)} .doc-card--coral .doc-card__icon{color:var(--c-coral)} .doc-card--violet .doc-card__icon{color:var(--c-violet)} .doc-card--amber .doc-card__icon{color:var(--c-amber)} .doc-card--sky .doc-card__icon{color:var(--c-sky)}
.doc-card__title { font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:-0.015em; margin-bottom:0.5rem; }
.doc-card__desc { font-size:0.83rem; color:var(--c-text-dim); line-height:1.75; flex-grow:1; }
.doc-card__link { font-family:var(--font-mono); font-size:0.7rem; color:var(--c-teal-l); margin-top:1.2rem; display:inline-block; letter-spacing:0.02em; transition:var(--tr); }
.doc-card:hover .doc-card__link { transform:translateX(4px); }

/* SECURITY THREAT CARDS */
.prose { max-width:900px; margin:0 auto; }
.prose__two-col { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.threat-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:2rem; transition:var(--tr); }
.threat-card:hover { transform:translateY(-3px); }
.threat-card--defended { border-left:2px solid var(--c-teal-l); }
.threat-card h4 { font-family:var(--font-display); font-size:1rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:0.6rem; }
.threat-card p { font-size:0.85rem; color:var(--c-text-dim); line-height:1.78; }

/* PROTOCOL STACK */
.protocol-stack { display:flex; flex-direction:column; gap:0; max-width:700px; margin:0 auto; }
.proto-layer { display:flex; align-items:stretch; background:var(--c-surface); border:1px solid var(--c-border); transition:var(--tr); }
.proto-layer:first-child{border-radius:var(--radius) var(--radius) 0 0} .proto-layer:last-child{border-radius:0 0 var(--radius) var(--radius)} .proto-layer+.proto-layer{border-top:none}
.proto-layer:hover { border-color:rgba(79,196,183,0.2); z-index:1; }
.proto-layer__num { display:flex; align-items:center; justify-content:center; min-width:68px; font-family:var(--font-mono); font-size:0.82rem; font-weight:600; color:var(--c-teal-l); background:var(--c-surface2); border-right:1px solid var(--c-border); letter-spacing:0.05em; }
.proto-layer__content { padding:1.5rem 2rem; flex:1; }
.proto-layer__content h4 { font-family:var(--font-display); font-size:0.92rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:0.3rem; }
.proto-layer__content p { font-size:0.83rem; color:var(--c-text-dim); line-height:1.75; }
.proto-layer__content strong { color:var(--c-blush); font-weight:600; }

/* ABOUT */
.about-story { display:grid; grid-template-columns:1fr auto; gap:4rem; align-items:center; }
.about-story__text p { font-size:1rem; color:var(--c-text-mid); line-height:1.88; margin-bottom:1.25rem; }
.about-story__mascot { display:flex; justify-content:center; }
.about-story__mascot img { animation:hero-float 5.5s ease-in-out infinite; filter:drop-shadow(0 20px 40px rgba(79,196,183,0.18)); }

.principles { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.principle { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:2rem; transition:var(--tr); }
.principle:hover { transform:translateY(-3px); border-color:rgba(79,196,183,0.18); }
.principle__title { font-family:var(--font-display); font-size:1.1rem; font-weight:750; letter-spacing:-0.02em; margin-bottom:0.65rem; color:var(--c-blush); }
.principle__desc { font-size:0.85rem; color:var(--c-text-dim); line-height:1.78; }

.tech-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.tech-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  transition: var(--tr);
  width: calc(33.333% - 0.85rem);
  display: flex;
  flex-direction: column;
}
.tech-grid .tech-item:nth-last-child(-n+2) {
  width: calc(45% - 0.75rem);
  padding: 2.2rem 2.5rem; /* Make them feel 'bigger' internally too */
}
.tech-item:hover { border-color: rgba(79, 196, 183, 0.18); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
.tech-item strong { display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-teal-l); margin-bottom: 0.8rem; }
.tech-item span { font-size: 0.82rem; color: var(--c-text-mid); line-height: 1.65; }

.author-card { background:linear-gradient(160deg, var(--c-surface) 0%, #1a2420 50%, var(--c-surface2) 100%); border:1px solid rgba(79,196,183,0.12); border-radius:var(--radius-xl); padding:4rem; text-align:center; }
.author-card h3 {
  font-family:var(--font-display);
  font-size:2.2rem;
  font-weight:750;
  letter-spacing:-0.03em;
  margin-bottom:0.75rem;
  background:linear-gradient(135deg, var(--c-teal-l) 0%, var(--c-blush) 50%, var(--c-coral) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  background-size:200% 200%;
  animation:gradient-flow 5s ease infinite;
}
.author-card p { font-size:1rem; color:var(--c-text-mid); max-width:460px; margin:0 auto 2rem; line-height:1.85; }
.author-card__links { display:flex; gap:1rem; justify-content:center; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .nav__links{gap:1.5rem}
  .scenarios{grid-template-columns:1fr}
  .protocol { grid-template-columns: 1fr; padding: 4rem 3rem; gap: 3rem; text-align: center; }
  .protocol__features { align-items: center; }
  .scenario--e{grid-column:span 1; flex-direction: column; gap: 1.5rem;}
  .scenario--e .scenario__visual { height: 280px; width: 100%; order: -1; }
  .steps{grid-template-columns:1fr} .steps::before{display:none}
  .docs-grid{grid-template-columns:repeat(2,1fr)}
  .prose__two-col{grid-template-columns:1fr}
  .about-story{grid-template-columns:1fr;text-align:center} .about-story__mascot{order:-1}
  .principles{grid-template-columns:1fr}
  .tech-item { width: calc(50% - 0.65rem); }
  .footer__grid{grid-template-columns:auto repeat(2, minmax(0, 1fr));gap:2rem}
  .footer__col:last-child{grid-column:2}
}
@media (max-width:768px) {
  .nav{padding:0.85rem 5%} .nav__links{display:none} .nav__toggle{display:flex}
  .nav__logo { font-size: 1.6rem; gap: 0.78rem; }
  .nav__logo img { width: 42px; height: 42px; }
  .hero{padding:7rem 1.5rem 3rem} .hero__mascot{width:180px;height:180px;margin-bottom:1.5rem}
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.5rem); line-height: 1.1; margin-bottom: 1.2rem; }
  .hero__sub { font-size: 1rem; line-height: 1.7; margin-bottom: 2rem; }
  .hero__ctas {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 18rem;
    margin-inline: auto;
  }
  .hero__badge {
    margin-bottom: 1.5rem;
    width: min(100%, 24rem);
    padding: 0.28rem 0.65rem;
    gap: 0.2rem;
    letter-spacing: 0.03em;
    line-height: 1.1;
    font-size: clamp(0.48rem, 1.55vw, 0.62rem);
  }
  .section{padding:4.5rem 1.5rem}
  .section__header{margin-bottom:2.5rem}
  .section__title{font-size: 2.1rem;}
  .security-grid{grid-template-columns:1fr}
  .docs-grid{grid-template-columns:1fr}
  .tech-grid{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:1rem;padding-bottom:0}
  .tech-item,
  .tech-grid .tech-item:nth-last-child(-n+2) { width: 100%; min-width: 100%; flex: 1 1 auto; padding: 1.8rem 2rem; }
  .footer__grid{grid-template-columns:1fr;gap:1.75rem;text-align:left}
  .footer__brand{display:flex;flex-direction:column;align-items:flex-start}
  .footer__brand .nav__logo{justify-content:flex-start}
  .footer__col{padding-top:0.15rem}
  .footer__col h4{margin-bottom:0.9rem}
  .footer__col a{margin-bottom:0.45rem}
  .footer__bottom{text-align:center}
  .footer__copy{width:100%; text-align:center}
  .page-hero{padding:7rem 1.5rem 2.5rem}
  .page-hero__title{font-size: 2.6rem;}
  .protocol { margin: 40px 1rem; padding: 3rem 1.5rem; border-radius: 32px; }
  .protocol__title{font-size: 2.5rem;}
  .protocol__desc{font-size: 1rem;}
  .author-card{padding:3rem 1.5rem 2.1rem; border-radius: 32px;}
  .author-card h3{font-size: 1.8rem;}
  .proto-layer{flex-direction:column}
  .proto-layer__num{min-width:auto;border-right:none;border-bottom:1px solid var(--c-border);padding:0.5rem}
  .states__grid{gap:1.5rem}
  .cta-banner{padding:4rem 1.5rem; display:flex; flex-direction:column; align-items:center}
  .cta-banner h2{font-size: 2.2rem;}
  .cta-banner .btn{display:flex; width:fit-content; min-width:min(100%, 14rem); align-self:center; margin-inline:auto; justify-content:center}
  .scenario{padding:1.75rem}
  .scenario__visual{height:200px}
  .social-icons{gap:1.5rem}
  .author-card .social-icons{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:0.65rem !important;
    padding-bottom:0;
    -webkit-overflow-scrolling:touch;
  }
  .author-card .author-card__info h3,
  .author-card h3 { font-size: clamp(1.5rem, 6vw, 1.9rem) !important; line-height: 1.2; }
  .author-card .author-card__info p,
  .author-card p { font-size: clamp(0.875rem, 2.5vw, 1rem) !important; }
  .author-card .connect-with-me h4 { font-size: clamp(0.8rem, 2.8vw, 0.95rem) !important; }
  .author-card .social-icon,
  .author-card .social-icon-link img.social-icon { width: clamp(20px, 5vw, 28px) !important; height: clamp(20px, 5vw, 28px) !important; }
  .lore-spotlight { padding: 2.5rem 1.25rem; margin: 2.5rem auto; border-radius: 28px; }
  .faq-item { padding: 1.35rem 1.15rem; }
}
@media (max-width:480px) {
  .hero h1 { font-size: 2.2rem; }
  .section__title { font-size: 1.8rem; }
  .protocol__title { font-size: 2.1rem; }
  .hero__ctas { width: 100%; max-width: 18rem; margin-inline: auto; }
  .btn { width: fit-content; min-width: 100%; justify-content: center; margin-inline: auto; }
  .hero__badge { width: min(100%, 18rem); font-size: clamp(0.44rem, 2.2vw, 0.56rem); padding: 0.24rem 0.55rem; }
  .nav__logo { font-size: 1.35rem; gap: 0.68rem; }
  .nav__logo img { width: 38px; height: 38px; }
}

@media (max-width:320px) {
  .nav { padding: 0.75rem 4%; }
  .page-hero,
  .section,
  .cta-banner,
  .cta-band { padding-left: 1rem; padding-right: 1rem; }
  .hero { padding: 6.5rem 1rem 2.5rem; }
  .hero h1 { font-size: 1.95rem; }
  .hero__sub,
  .page-hero__desc,
  .section__desc,
  .faq-item__a,
  .answer-item p { font-size: 1rem; }
  .btn,
  .nav__cta,
  .social-icon-link { min-height: 44px; min-width: 44px; }
}

/* LORE SPOTLIGHT */
.lore-spotlight {
  background: linear-gradient(135deg, rgba(240,208,200,0.04) 0%, rgba(12,11,9,1) 100%);
  border: 1px solid rgba(240,208,200,0.08);
  border-radius: var(--radius-xl);
  padding: 4rem;
  margin: 4rem auto;
  max-width: 900px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lore-spotlight::before,
.lore-spotlight::after {
  position: absolute;
  font-family: var(--font-display);
  font-size: 11rem;
  color: var(--c-blush);
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
}
.lore-spotlight::before {
  content: '“';
  top: -10px; left: 10px;
}
.lore-spotlight::after {
  content: '”';
  bottom: -40px; right: 10px;
}
.lore-spotlight__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.6;
  color: var(--c-text-mid);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lore-spotlight__text em {
  font-style: normal;
  color: var(--c-blush);
  font-weight: 700;
}

/* SOCIAL DASHBOARD */
.connect-with-me {
  margin: 8rem auto 4rem;
  text-align: center;
}
.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.social-icon-link {
  color: var(--c-text-mid);
  transition: var(--tr);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.social-icon-link:hover {
  color: var(--c-teal-l);
  transform: translateY(-4px);
}
.social-icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
}
.connect-with-me h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--c-teal-l);
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* FAQ PAGE */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-teal-l);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  transition: var(--tr);
}
.faq-item:hover {
  border-left-color: var(--c-coral);
  background: var(--c-surface2);
  transform: translateX(4px);
}
.faq-item__q {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.8rem;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.faq-item__a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--c-text-mid);
  line-height: 1.75;
}
.faq-item__a a {
  color: var(--c-teal-l);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--tr);
}
.faq-item__a a:hover {
  color: var(--c-coral);
}

/* GEO ANSWER GRID (index.html) */
.answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.answer-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: var(--tr);
}
.answer-item:hover {
  background: var(--c-surface2);
  border-color: rgba(79,196,183,0.22);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.answer-item h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-teal-l);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.answer-item p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--c-text-mid);
  line-height: 1.7;
}
.answer-item a {
  color: var(--c-teal-l);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.answer-item a:hover {
  color: var(--c-coral);
}

/* CTA BAND */
.cta-band {
  text-align: center;
  padding: 5rem 5%;
  margin: 4rem 0 0;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 750;
  color: var(--c-text);
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}
.cta-band p {
  font-family: var(--font-body);
  color: var(--c-text-mid);
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}