:root {
  --bg:           #ede9e1;
  --surface:      #e4e0d8;
  --surface2:     #d8d4cb;
  --border:       #b8b4aa;
  --border-heavy: #8a867c;
  --orange:       #c94b0f;
  --orange-glow:  #c94b0f22;
  --green:        #3a6b30;
  --green-dim:    #3a6b3018;
  --purple:       #5c3d8f;
  --purple-dim:   #5c3d8f18;
  --blue:         #1a5fa8;
  --blue-dim:     #1a5fa818;
  --white:        #1a1815;
  --muted:        #6b6760;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Space Grotesk', sans-serif;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('/grain.png') repeat;
  opacity: 0.42;
}
nav, section, footer, .marquee-strip { position: relative; z-index: 1; }

/* ── SITE GRID LINES ── */
.site-grid {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
}
.site-grid .vline {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(26,24,21,0.14);
}

/* ── HORIZONTAL RULES (in-flow, intersect the fixed vertical lines) ── */
.h-rule {
  width: 100%; height: 1px;
  background: rgba(26,24,21,0.16);
  position: relative; z-index: 1;
  flex-shrink: 0;
}
.marquee-strip { border-top: none; border-bottom: none; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(10%, 1.5rem); height: 52px;
  background: rgba(237,233,225,0.95); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26,24,21,0.12);
}
.logo { display:flex; align-items:center; text-decoration:none; }
.logo img { height:36px; width:auto; display:block; }
.nav-links { display:flex; gap:0; list-style:none; justify-content:center; }
.nav-links a {
  display:block; padding:6px 18px; font-size:0.72rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; border:none; background:none; transition:color 0.18s;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); background:none; border:none; }

.nav-right {
  display:flex; align-items:center; gap:0.5rem; justify-content:flex-end;
}
.nav-yt-link {
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:color 0.18s; padding:6px;
}
.nav-yt-link:hover { color:#c00; }
.nav-store-btn {
  display:inline-block; padding:5px 14px;
  font-family:'Space Mono',monospace; font-size:0.7rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--orange); border:1px solid var(--orange);
  text-decoration:none; transition:all 0.18s; white-space:nowrap;
}
.nav-store-btn:hover { background:var(--orange); color:#fff; }

.hamburger { display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--white); transition:all 0.2s; }
.hamburger.open span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  display:none; position:fixed; top:52px; left:0; right:0;
  background:rgba(237,233,225,0.98); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(26,24,21,0.12); z-index:99;
  padding:1.5rem clamp(1rem,5vw,2.5rem); flex-direction:column; gap:6px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  display:block; padding:12px 16px; font-size:0.85rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);
  text-decoration:none; border-bottom:1px solid rgba(26,24,21,0.08); transition:color 0.18s;
}
.mobile-menu a:hover { color:var(--white); }
.mobile-menu a.store-link { color:var(--orange); border:none; }

/* ── MARQUEE ── */
.marquee-strip {
  width:100%; overflow:hidden; background:#1a1815;
  padding:13px 0;
}
.marquee-inner {
  display:flex; width:max-content;
  animation: marquee 28s linear infinite;
}
.marquee-inner:hover { animation-play-state: paused; }
.marquee-item {
  font-family:'Space Mono',monospace; font-size:0.72rem;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(237,233,225,0.6); white-space:nowrap; padding:0 0.5rem;
}
.marquee-sep {
  font-family:'Space Mono',monospace; font-size:0.72rem;
  color:var(--orange); padding:0 1rem; line-height:1;
  display:flex; align-items:center;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.marquee-inner.rtl  { animation-name: marquee-rtl; }
.marquee-inner.fast { animation-duration: 18s; }
.marquee-inner.slow { animation-duration: 40s; }

.marquee-strip.light {
  background: var(--surface2);
}
.marquee-strip.light .marquee-item {
  color: rgba(26,24,21,0.55);
}
.marquee-strip.light .marquee-sep {
  color: var(--orange);
}

/* ── FLOATING BUBBLES ── */
.bubbles {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.bubble {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,75,15,0.22) 0%, rgba(201,75,15,0.07) 45%, transparent 70%);
  filter: blur(60px);
  will-change: transform;
  animation: floatBubble var(--dur,15s) ease-in-out var(--delay,0s) infinite;
}
@keyframes floatBubble {
  0%,100% { transform: translate(0,0)                              scale(1); }
  25%     { transform: translate(var(--x1,40px),var(--y1,-60px))  scale(1.1); }
  55%     { transform: translate(var(--x2,-35px),var(--y2,30px))  scale(0.92); }
  80%     { transform: translate(var(--x3,20px),var(--y3,50px))   scale(1.05); }
}

/* ── SECTION BACKGROUNDS ── */
section {
  min-height: 100vh;
  padding: clamp(6rem,12vh,10rem) max(11%, 1.5rem) clamp(4rem,8vh,6rem);
  position: relative; overflow: hidden;
}

#home {
  background: radial-gradient(ellipse 70% 55% at 65% 50%, rgba(201,75,15,0.08) 0%, transparent 70%),
              var(--bg);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; overflow:hidden;
}

#about {
  background: var(--surface);
  display:flex; flex-direction:column; justify-content:center;
}

#faq {
  background: var(--bg);
  display:flex; flex-direction:column; justify-content:center;
}

#contact {
  background: var(--surface);
  display:flex; flex-direction:column; justify-content:center;
}

/* ── SECTION LABELS & TITLES ── */
.section-label {
  font-family:'Space Mono',monospace; font-size:0.75rem; letter-spacing:0.2em;
  text-transform:uppercase; margin-bottom:1.2rem; color:var(--orange);
}

.section-title {
  font-size:clamp(2rem,5vw,4rem); font-weight:900; letter-spacing:-0.03em;
  line-height:1; margin-bottom:3rem; color:var(--white);
}

/* ── HERO TEXT ── */
.hero-eyebrow {
  font-family:'Space Mono',monospace; font-size:0.8rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--orange); margin-bottom:1.5rem;
  opacity:0; transform:translateY(20px); animation:fadeUp 0.7s 0.2s forwards;
}
.hero-title {
  font-size:clamp(3rem,9vw,8rem); font-weight:900; line-height:0.9;
  letter-spacing:-0.03em; margin-bottom:2rem;
  opacity:0; transform:translateY(30px); animation:fadeUp 0.8s 0.35s forwards;
}
.hero-title .line-orange { color:var(--orange); }
.hero-title .line-green  { color:#1a1815; }
.hero-sub {
  font-size:clamp(1rem,2vw,1.25rem); color:rgba(26,24,21,0.6);
  max-width:520px; line-height:1.6; margin-bottom:3rem;
  opacity:0; transform:translateY(20px); animation:fadeUp 0.8s 0.5s forwards;
}
.hero-cta-row {
  display:flex; flex-wrap:wrap; gap:1rem;
  opacity:0; transform:translateY(20px); animation:fadeUp 0.8s 0.65s forwards;
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block; padding:16px 36px; background:var(--orange); color:#fff;
  font-family:'Space Mono',monospace; font-weight:700; font-size:0.9rem;
  letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--orange);
  cursor:pointer; text-decoration:none; transition:all 0.18s;
}
.btn-primary:hover { background:transparent; color:var(--orange); transform:translateY(-2px); }
.btn-secondary {
  display:inline-block; padding:16px 36px; background:transparent; color:var(--white);
  font-family:'Space Mono',monospace; font-weight:700; font-size:0.9rem;
  letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--border-heavy);
  cursor:pointer; text-decoration:none; transition:all 0.18s;
}
.btn-secondary:hover { border-color:var(--white); transform:translateY(-2px); }

/* ── 3D CUBE ── */
.cube-deco {
  position:absolute; right:0; top:0; bottom:0; width:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; animation:fadeUp 1s 0.9s forwards; pointer-events:none;
}
.cube-scene { width:clamp(160px,22vw,260px); height:clamp(160px,22vw,260px); perspective:700px; }
.cube-3d {
  width:100%; height:100%; position:relative; transform-style:preserve-3d;
  animation:rotateCube3d 10s linear infinite;
}
@keyframes rotateCube3d {
  0%   { transform:rotateX(22deg) rotateY(0deg); }
  100% { transform:rotateX(22deg) rotateY(360deg); }
}
.cube-face {
  position:absolute; width:100%; height:100%;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:4px; padding:4px; border:1px solid rgba(0,0,0,0.08);
}
.cube-face.front  { transform:translateZ(clamp(80px,11vw,130px)); }
.cube-face.back   { transform:rotateY(180deg) translateZ(clamp(80px,11vw,130px)); }
.cube-face.right  { transform:rotateY(90deg)  translateZ(clamp(80px,11vw,130px)); }
.cube-face.left   { transform:rotateY(-90deg) translateZ(clamp(80px,11vw,130px)); }
.cube-face.top    { transform:rotateX(90deg)  translateZ(clamp(80px,11vw,130px)); }
.cube-face.bottom { transform:rotateX(-90deg) translateZ(clamp(80px,11vw,130px)); }
.cubie { border:1px solid rgba(0,0,0,0.35); }

/* ── CARDS ── */
.clay-card {
  background: rgba(228,224,216,0.85);
  border:1px solid var(--border); padding:2rem; position:relative; overflow:hidden;
  transition:transform 0.22s, border-color 0.22s;
}
.clay-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.25) 0%,transparent 60%);
  pointer-events:none;
}
.clay-card:hover { transform:translateY(-4px); border-color:var(--border-heavy); }
.clay-card.orange-accent { border-top:2px solid var(--orange); }
.clay-card.green-accent  { border-top:2px solid var(--border-heavy); }
.clay-card.purple-accent { border-top:2px solid var(--border-heavy); }
.clay-card.blue-accent   { border-top:2px solid var(--border-heavy); }

.card-icon {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem; border:1px solid;
}
.card-icon svg { width:26px; height:26px; }
.card-icon.orange { background:var(--orange-glow); border-color:var(--orange); }
.card-icon.green  { background:rgba(0,0,0,0.06);   border-color:var(--border-heavy); }
.card-icon.purple { background:rgba(0,0,0,0.06);   border-color:var(--border-heavy); }
.card-icon.blue   { background:rgba(0,0,0,0.06);   border-color:var(--border-heavy); }

.card-title { font-size:1.1rem; font-weight:700; margin-bottom:0.6rem; color:var(--white); }
.card-body  { font-size:0.92rem; line-height:1.65; color:var(--muted); }

/* ── STAT ROW ── */
.stat-row {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px; overflow:hidden; background:transparent;
}
.stat-cell { background:rgba(17,17,19,0.85); padding:1.8rem; text-align:center; }
.stat-number {
  font-family:'Space Mono',monospace; font-size:clamp(2rem,4vw,3rem);
  font-weight:700; color:var(--orange); line-height:1; margin-bottom:0.4rem;
}
.stat-label { font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(232,224,255,0.5); }

/* ── ABOUT BIO ── */
.about-bio-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
}
@media(max-width:820px){ .about-bio-grid { grid-template-columns:1fr; } }
.about-bio-text { display:flex; flex-direction:column; gap:1.4rem; }
.about-bio-text p { font-size:clamp(0.97rem,1.5vw,1.1rem); color:rgba(26,24,21,0.7); line-height:1.75; }
.about-cards-col { display:flex; flex-direction:column; gap:1.2rem; }
.text-orange { color:var(--orange); }

/* ── PHOTO GALLERY ── */
.about-photos {
  display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:3rem;
}
@media(max-width:600px){ .about-photos { grid-template-columns:1fr; } }
.about-photo-wrap {
  position:relative; overflow:hidden;
  border:1px solid var(--border); transition:border-color 0.22s, transform 0.22s;
}
.about-photo-wrap:hover { border-color:var(--orange); transform:translateY(-4px); }
.about-photo-wrap img {
  width:100%; height:340px; object-fit:cover; display:block;
  filter:saturate(0.8) brightness(0.95); transition:filter 0.3s, transform 0.3s;
}
.about-photo-wrap:hover img { filter:saturate(1) brightness(1); transform:scale(1.03); }
.about-photo-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:0.8rem 1rem;
  background:linear-gradient(transparent, rgba(237,233,225,0.92));
  font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(26,24,21,0.8);
}

/* ── FAQ CARDS GRID ── */
.faq-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:1.5rem;
}

.faq-card {
  background:rgba(228,224,216,0.7);
  border:1px solid var(--border);
  padding:0;
  position:relative;
  overflow:hidden;
  transition:border-color 0.2s, transform 0.2s;
  cursor:pointer;
}
.faq-card:hover { border-color:var(--border-heavy); transform:translateY(-3px); }
.faq-card.open  { border-color:var(--orange); }

.faq-card-q {
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.5rem 1.6rem;
  background:none; border:none; width:100%;
  font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700;
  color:var(--white); text-align:left; cursor:pointer;
}
.faq-card.open .faq-card-q { color:var(--orange); }

.faq-card-num {
  font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.15em;
  color:var(--muted); flex-shrink:0; margin-bottom:0.3rem;
  display:block;
}
.faq-card-title { display:block; }

.faq-chevron {
  width:20px; height:20px; flex-shrink:0;
  color:var(--muted); transition:transform 0.25s, color 0.2s;
}
.faq-card.open .faq-chevron { transform:rotate(180deg); color:var(--orange); }

.faq-card-a {
  max-height:0; overflow:hidden;
  font-size:0.92rem; color:var(--muted); line-height:1.7;
  padding:0 1.6rem;
  transition:max-height 0.35s ease, padding 0.35s ease;
  border-top:0px solid var(--border);
}
.faq-card.open .faq-card-a {
  max-height:300px; padding:0 1.6rem 1.5rem;
  border-top:1px solid var(--border);
}
.faq-a-link { color:var(--orange); text-decoration:none; }
.faq-a-link:hover { text-decoration:underline; }

/* ── STORE OVERLAY ── */
.store-overlay {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.82); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:1rem;
}
.store-overlay.active { display:flex; }
.store-modal-card {
  background:var(--surface); border:1px solid var(--orange);
  width:100%; max-width:480px; overflow:hidden;
  animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn { 0%{opacity:0;transform:scale(0.88)} 100%{opacity:1;transform:scale(1)} }
.store-modal-top {
  display:flex; align-items:center; gap:1rem; padding:1rem 1.4rem;
  border-bottom:1px solid var(--border); background:var(--surface2);
}
.store-modal-url {
  flex:1; background:var(--bg); border:1px solid var(--border); padding:7px 18px;
  font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.modal-close {
  background:transparent; border:1px solid var(--border-heavy); color:var(--white);
  font-family:'Space Mono',monospace; font-size:0.8rem; font-weight:700;
  padding:6px 18px; cursor:pointer; transition:all 0.18s; white-space:nowrap;
}
.modal-close:hover { border-color:var(--orange); color:var(--orange); }
.store-modal-body {
  padding:2.8rem 2.4rem 2.4rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem;
}
.store-modal-title { font-family:'Space Mono',monospace; font-weight:700; font-size:1.3rem; color:var(--white); }
.store-modal-desc  { font-size:0.95rem; color:var(--muted); line-height:1.6; max-width:320px; }
.store-launch-btn {
  display:inline-block; margin-top:0.6rem; padding:16px 40px;
  background:var(--orange); color:#000; font-family:'Space Mono',monospace;
  font-weight:700; font-size:0.9rem; letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid var(--orange); text-decoration:none; transition:all 0.18s;
}
.store-launch-btn:hover { background:transparent; color:var(--orange); }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
@media(max-width:720px){ .contact-grid { grid-template-columns:1fr; } }
.contact-info { display:flex; flex-direction:column; gap:1.2rem; }

.contact-block {
  display:flex; align-items:flex-start; gap:1rem; padding:1.4rem;
  background:rgba(228,224,216,0.6); border:1px solid var(--border); transition:border-color 0.2s;
}
.contact-block:hover { border-color:var(--orange); }
.contact-block-icon {
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border-heavy);
}
.contact-block-icon svg { width:20px; height:20px; }
.contact-block-title {
  font-size:0.78rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.contact-block-value { font-size:0.97rem; font-weight:600; color:var(--white); }

.contact-form {
  background:rgba(228,224,216,0.6); border:1px solid var(--border);
  padding:2.2rem; display:flex; flex-direction:column; gap:1.2rem; position:relative;
}
.form-label {
  font-size:0.78rem; font-family:'Space Mono',monospace; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px;
}
.form-input, .form-textarea {
  width:100%; background:rgba(237,233,225,0.9); border:1px solid var(--border);
  padding:12px 16px; color:var(--white);
  font-family:'Space Grotesk',sans-serif; font-size:0.97rem; transition:border-color 0.18s; outline:none;
}
.form-input:focus, .form-textarea:focus { border-color:var(--orange); }
.form-textarea { resize:vertical; min-height:120px; }
.form-submit {
  display:inline-block; padding:16px 36px; background:var(--orange); color:#fff;
  font-family:'Space Mono',monospace; font-weight:700; font-size:0.9rem;
  letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--orange);
  cursor:pointer; transition:all 0.18s; align-self:flex-start;
}
.form-submit:hover { background:transparent; color:var(--orange); transform:translateY(-2px); }

/* ── FOOTER ── */
footer {
  border-top:1px solid var(--border); padding:2.5rem clamp(1.5rem,8vw,6rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--surface);
}
.footer-logo { display:flex; align-items:center; }
.footer-logo img { height:32px; width:auto; display:block; }
.footer-copy { font-size:0.82rem; color:var(--muted); }

/* ── ANIMATIONS ── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  nav { grid-template-columns: 1fr auto; }
  .nav-links { display:none; }
  .nav-right .nav-store-btn { display:none; }
  .hamburger { display:flex; }
  .cube-deco  { display:none; }
  .stat-row   { grid-template-columns:repeat(2,1fr); }
  .faq-grid   { grid-template-columns:1fr; }
  .site-grid span[style*="50%"] { display:none; }
}