/* =========================================
   Root Variables
========================================= */
:root{
  color-scheme: light;
  --bg:#11100d;
  --ink:#e8e1d6;
  --ink-2:rgba(232,225,214,.78);
  --ink-3:rgba(232,225,214,.62);
  --line:rgba(232,225,214,.12);

  --earth-1:#5d4c36;
  --earth-2:#7a6244;
  --earth-3:#a07c4c;
  --earth-4:#5b6a4a;
  --earth-5:#3f4d3b;

  --shadow:0 22px 80px rgba(0,0,0,.62);
  --radius:18px;
}

/* =========================================
   Global Reset / Base
========================================= */
{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

html,
body{
  forced-color-adjust:none;
  background:#11100d;
  color:#e8e1d6;
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(160,124,76,.16), transparent 62%),
    radial-gradient(900px 600px at 20% 35%, rgba(91,106,74,.10), transparent 58%),
    radial-gradient(900px 600px at 85% 45%, rgba(93,76,54,.12), transparent 58%),
    var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  letter-spacing:.2px;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

/* =========================================
   Layout Wrapper
========================================= */
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:0 16px 70px 16px;
}

/* =========================================
   Top Bar / Navigation
========================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(17,16,13,.90), rgba(17,16,13,.62));
  border-bottom:1px solid rgba(232,225,214,.10);
}

.topbar-inner{
  max-width:980px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  font-weight:680;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;
  opacity:.92;
  white-space:nowrap;
}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav a{
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:8px 10px;
  border:1px solid rgba(232,225,214,.10);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  transition:transform .15s ease, background .15s ease;
  text-align:center;
}

.nav .nav-cta{
  border-color:rgba(160,124,76,.35);
  background:linear-gradient(135deg, rgba(160,124,76,.26), rgba(91,106,74,.18));
}

@media (hover:hover) and (pointer:fine){
  .nav a:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.06);
  }

  .btn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.06);
  }
}

/* =========================================
   Mobile Navigation
========================================= */
@media (max-width:700px){
  .topbar-inner{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .brand{
    text-align:center;
    white-space:normal;
  }

  .nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    justify-content:stretch;
  }

  .nav a{
    padding:10px 8px;
  }
}

/* =========================================
   Section Shell
========================================= */
.section{
  margin-top:22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  overflow:visible;
  position:relative;
}

.section-pad{
  padding:22px 18px;
  position:relative;
  z-index:2;
}

/* =========================================
   Typography
========================================= */
.kicker{
  font-size:12px;
  letter-spacing:3.2px;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 10px 0;
}

h1{
  margin:0 0 10px 0;
  font-size:44px;
  line-height:1.05;
  letter-spacing:.3px;
  color:var(--ink);
}

@media (max-width:520px){
  h1{ font-size:30px; }
}

h2{
  margin:0 0 8px 0;
  font-size:16px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ink-2);
}

.subhead{
  margin:0;
  color:var(--ink-2);
  font-size:15px;
  line-height:1.6;
  max-width:62ch;
  font-weight:750;
}

.bodycopy{
  margin:0;
  color:var(--ink-2);
  line-height:1.7;
  font-size:14px;
}

/* =========================================
   Hero Layout
========================================= */
.hero{
  padding:64px 18px 72px 18px;
  min-height:95vh;
  position:relative;
  overflow:visible;
}

.hero-content{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:start;
  margin-top:-48px;
  position:relative;
  z-index:2;
}

.hero-copy{
  margin-top:-1px;
  position:relative;
  z-index:4;
}

.hero-cta{
  position:absolute;
  right:18px;
  top:90px;
  z-index:4;
  display:flex;
  justify-content:flex-end;
}

/* =========================================
   Hero Background Circle
========================================= */
.hero-bg{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%, -50%);
  width:min(620px, 130vw);
  aspect-ratio:1/1;
  border-radius:50%;
  z-index:2;
  pointer-events:none;
}

.hero-bg .halo{
  position:absolute;
  inset:-6%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(160,124,76,.18) 0%,
    rgba(91,106,74,.12) 30%,
    rgba(17,16,13,0) 62%
  );
  filter:blur(14px);
  opacity:.55;
}

.hero-bg .ring{
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:conic-gradient(
    var(--earth-1),
    var(--earth-2),
    var(--earth-3),
    var(--earth-4),
    var(--earth-5),
    var(--earth-1)
  );
  filter:blur(44px) brightness(1.35);
  opacity:.82;
  transform-origin:center;
  animation:
    breathe 4.6s ease-in-out infinite,
    rotate 24s linear infinite;
}

.hero-bg .inner{
  position:absolute;
  inset:15%;
  border-radius:50%;
  background:rgba(17,16,13,.82);
  box-shadow:0 0 140px rgba(0,0,0,.55);
}

/* =========================================
   Circle Text
========================================= */
.circle-text{
  position:absolute;
  inset:20%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:10px;
  z-index:2;
  pointer-events:none;
}

.circle-tag{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--ink-2);
  opacity:.9;
}

.circle-price{
  font-size:76px;
  font-weight:850;
  letter-spacing:1px;
  line-height:1;
  color:var(--ink);
}

.circle-line{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ink-2);
  opacity:.95;
}

/* =========================================
   CTA Card
========================================= */
.cta-card{
  width:min(270px,100%);
  border:1px solid rgba(232,225,214,.12);
  border-radius:16px;
  padding:18px 16px;
  background:rgba(0,0,0,.22);
  text-align:center;
  line-height:1.25;
}

.cta-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.cta-fine{
  margin-top:12px;
  font-size:12px;
  line-height:1.6;
  color:var(--ink-3);
}

/* =========================================
   Buttons
========================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 16px;
  border-radius:14px;
  border:1px solid rgba(232,225,214,.14);
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-size:12px;
  background:rgba(255,255,255,.03);
  transition:transform .15s ease, background .15s ease;
  color:var(--ink);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
  touch-action:manipulation;
}

.btn.primary{
  border-color:rgba(160,124,76,.35);
  background:linear-gradient(135deg, rgba(160,124,76,.26), rgba(91,106,74,.18));
}

.section-ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  align-items:center;
}

/* =========================================
   Copy Feedback Toast
========================================= */
.copyFeedback{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,0.85);
  color:#ffffff;
  padding:14px 22px;
  border-radius:10px;
  font-size:16px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:2147483647;
}

/* =========================================
   Tiles / Content Blocks
========================================= */
.tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:6px;
}

.tile{
  border:1px solid rgba(232,225,214,.10);
  border-radius:16px;
  padding:16px 14px;
  background:rgba(0,0,0,.18);
  color:var(--ink-2);
}

.tile ul{
  margin:0;
  padding-left:18px;
  color:var(--ink-2);
  line-height:1.65;
  font-size:14px;
}

.tile li{ margin:6px 0; }

@media (max-width:760px){
  .tiles{ grid-template-columns:1fr; }
}

/* =========================================
   Nerd Math Block
========================================= */
.nerd-math{
  margin-top:16px;
  border:1px solid rgba(232,225,214,.10);
  border-radius:16px;
  padding:14px 14px;
  background:rgba(0,0,0,.18);
}

.nerd-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(232,225,214,.08);
  color:var(--ink-2);
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-size:12px;
}

.nerd-line:last-child{
  border-bottom:none;
}

.nerd-line.strong{
  color:var(--ink);
  font-weight:750;
}

.nerd-note{
  margin-top:10px;
  color:var(--ink-3);
  font-size:12px;
  line-height:1.6;
}

/* =========================================
   Links / Fine Print
========================================= */
.link{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

.fine{
  margin:12px 0 0 0;
  color:var(--ink-3);
  font-size:12px;
  line-height:1.6;
}

/* =========================================
   Marquee
========================================= */
.marquee-over{
  position:absolute;
  left:0;
  right:0;
  top:80%;
  transform:translateY(-50%);
  z-index:1;
}

.marquee{
  border-top:5px solid rgba(232,225,214,.14);
  border-bottom:5px solid rgba(232,225,214,.14);
  padding:14px 0;
  overflow:hidden;
  background:linear-gradient(90deg,
    rgba(17,16,13,.62),
    rgba(17,16,13,.18),
    rgba(17,16,13,.62)
  );
  mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-track{
  display:flex;
  gap:26px;
  width:max-content;
  animation:scroll 20s linear infinite;
}

.marquee span{
  font-size:16px;
  font-weight:700;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
  opacity:.95;
}

/* =========================================
   Mobile Hero Fix
========================================= */
@media (max-width:900px){
  .hero{
    display:flex;
    flex-direction:column;
    min-height:auto;
    padding:24px 18px 0 18px;
    overflow:visible;
  }

  .hero-content{
    display:block;
    order:1;
    margin-top:0;
    gap:0;
  }

  .hero-copy{
    margin-top:0;
    text-align:center;
  }

  .hero-bg{
    order:2;
    position:relative;
    left:50%;
    top:auto;
    transform:translate(-50%, -36px);
    width:min(480px, 140vw);
    margin:-8px 0 -30px 0;
  }

.cta-card{
  width:90%;
  max-width:360px;
  margin:0 auto;
  padding:0px 12px;
}
  .marquee-over{
    top:80%;
  }

  .hero-cta{
    order:3;
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    width:100%;
    margin-top:-50px;
    justify-content:center;
  }
}

/* =========================================
   Motion / Reduced Motion
========================================= */
@keyframes breathe{
  0%{ transform:scale(1.00); opacity:.62; }
  50%{ transform:scale(1.06); opacity:.96; }
  100%{ transform:scale(1.00); opacity:.62; }
}

@keyframes rotate{
  from{ rotate:0deg; }
  to{ rotate:360deg; }
}

@keyframes scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-bg .ring{ animation:none; }
  .marquee-track{ animation:none; }
}