@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

/* ============ LIGHT (default) ============ */
:root,
[data-theme="light"]{
  --bg:#f8f4ea;
  --bg-alt:#efe7d6;
  --surface:#ffffff;
  --border: rgba(28,23,18,0.12);
  --border-strong: rgba(28,23,18,0.22);
  --amber-1:#c76a10;
  --amber-2:#8f4c0c;
  --amber-3:#e3b57a;
  --green:#3f7d2c;
  --green-soft: rgba(63,125,44,0.08);
  --text:#1c1712;
  --text-soft: #4a4136;
  --text-faint: #7a7062;
  --shadow: 0 20px 50px -25px rgba(28,23,18,0.35);
  --scrim-a: rgba(248,244,234,0.94);
  --scrim-b: rgba(248,244,234,0.6);
}

/* ============ DARK ============ */
[data-theme="dark"]{
  --bg:#0a0908;
  --bg-alt:#14110d;
  --surface:#181410;
  --border: rgba(247,173,43,0.16);
  --border-strong: rgba(247,173,43,0.32);
  --amber-1:#f7ad2b;
  --amber-2:#d97b1f;
  --amber-3:#7a4a12;
  --green:#7CFA63;
  --green-soft: rgba(124,250,99,0.12);
  --text:#f5efe0;
  --text-soft: rgba(245,239,224,0.72);
  --text-faint: rgba(245,239,224,0.5);
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  --scrim-a: rgba(10,9,8,0.92);
  --scrim-b: rgba(10,9,8,0.55);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Work Sans',sans-serif;
  overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.display{font-family:'Oswald',sans-serif; text-transform:uppercase;}
.wrap{width:100%; max-width:1240px; margin:0 auto; padding:0 5vw;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Oswald'; font-size:12px; letter-spacing:.22em; color:var(--green);
  border:1px solid var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent);
  padding:7px 14px; border-radius:999px;
  background:var(--green-soft); margin-bottom:22px;
}
.eyebrow::before{content:'●'; font-size:8px; color:var(--green);}

.hex-field{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg, var(--border) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(-60deg, var(--border) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 100px);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:3px; font-size:13px; font-weight:600; letter-spacing:.05em;
  text-decoration:none; border:1px solid var(--amber-1); cursor:pointer; font-family:'Work Sans';
  transition:box-shadow .25s, transform .2s, background .2s;
}
.btn-fill{
  background:linear-gradient(135deg,var(--amber-1),var(--amber-2)); color:#1a1206;
}
[data-theme="light"] .btn-fill{ color:#fff6e6; }
.btn-fill:hover{ box-shadow:0 10px 30px -8px color-mix(in srgb, var(--amber-1) 60%, transparent); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--amber-1); color:var(--amber-1); }
.btn-block{ width:100%; justify-content:center; }

.section{ position:relative; padding:110px 0; }
.section-alt{ background:var(--bg-alt); }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,4vw,44px); font-weight:700; line-height:1.05; }
.section-head p{ margin-top:16px; color:var(--text-soft); font-size:16px; line-height:1.7; }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:32px; transition:border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover{ border-color:var(--border-strong); transform:translateY(-4px); box-shadow:var(--shadow); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

::selection{ background:var(--amber-1); color:#1a1206; }

/* scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:5px; }