/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height:auto; min-height:100%; }
:root{
  --bg:#1a0702;
  --text:#ffffff;
  --accent1:#c9936a;
  --accent2:#e9c7a5;
}
body{
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg); /* fallback while WebGL loads */
}

/* ---------- Background Canvas ---------- */
#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Spotlight circle (moves on click) ---------- */
#spotlight{
  position: fixed; left: 50%; top: 50%;
  width: 70vmax; height: 70vmax; border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(233,199,165,.24) 0%,
      rgba(140,94,72,.16) 40%,
      rgba(48,30,24,.08) 63%,
      rgba(0,0,0,0) 72%);
  filter: blur(0.5px);
  mix-blend-mode: screen;
}
#spotlight.pulse::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle, rgba(255,220,190,.35), rgba(255,220,190,0) 60%);
  animation: spotPulse .7s ease;
}
@keyframes spotPulse{
  from { transform: scale(.9); opacity: 1; }
  to   { transform: scale(1.15); opacity: 0; }
}

/* ---------- Header ---------- */
.site-header{
  position: absolute;
  top: 18px; left: 22px; right: 22px;
  display:flex; align-items:center; justify-content:space-between;
  z-index:5; padding:10px 14px; border-radius:16px;
  pointer-events:none; /* let clicks reach canvas; re-enable on children */
}
.site-header *{ pointer-events:auto; }

/* subtle glass look */
.glass{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}

.brand{ position:relative; display:flex; align-items:center; gap:10px; }

.brand__logo{ width:60px; height:60px; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(134, 132, 132, 0.35)); }

.brand__name{ font-weight:700; letter-spacing:.4px; font-size:18px; }

/* Symbols that appear on hover */
.brand__symbols{
  position:absolute; left:48px; top:50%; transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(2,1fr); gap:4px;
  opacity:0; filter:blur(6px); transform-origin:left center;
  transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
.brand__symbols span{
  font-size:13px;
  background: rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  padding:2px 6px; border-radius:8px;
  animation: orbit 3s linear infinite;
}
.brand:hover .brand__symbols{ opacity:1; filter:blur(0); transform:translateY(-50%) translateX(8px); }
@keyframes orbit{ from{ transform:translateY(-3px) rotate(0deg); } to{ transform:translateY(3px) rotate(360deg); } }

/* ---------- Navigation ---------- */
.main-nav ul{ list-style:none; display:flex; gap:28px; align-items:center; }
.main-nav a{
  text-decoration:none; color:var(--text); font-weight:600;
  letter-spacing:.02em; opacity:.92; position:relative; padding:6px 0;
}
.main-nav a:hover{ opacity:1; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  transform:scaleX(0); transform-origin:left;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  transition: transform .3s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); }

/* Mobile menu button */
.menu-btn{
  display:none;
  width:42px; height:42px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05); border-radius:12px;
}
.menu-btn span{ display:block; height:2px; margin:7px 10px; background:#fff; }

/* ---------- Hero Headline ---------- */
.hero{  display:grid; place-items:center; text-align:center; min-height: 100vh;}
#headline{
  font-size: clamp(34px, 6.5vw, 84px);
  font-weight:800; letter-spacing:.01em;
  text-shadow: 0 10px 36px rgba(0,0,0,.45);
  opacity:0; transform:translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
#headline.show{ opacity:1; transform:translateY(0); }

/* ---------- Scroll Down Indicator ---------- */
.scroll-indicator{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:4; user-select:none;
}
.mouse{
  width:28px; height:46px; border:2px solid rgba(255,255,255,.85);
  border-radius:20px; position:relative;
  box-shadow: 0 0 24px rgba(233,199,165,.15);
}
.wheel{
  width:4px; height:8px; background: rgba(255,255,255,.95);
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  border-radius:2px; animation: wheel 1.4s ease-in-out infinite;
}
@keyframes wheel{ 0%{ transform:translate(-50%,0); opacity:1; } 100%{ transform:translate(-50%,12px); opacity:0; } }
.scroll-text{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; opacity:.8; }

/* ---------- Custom Cursor ---------- */
.cursor-ring, .cursor-dot{
  position:fixed; left:0; top:0; pointer-events:none; z-index:8;
  transform:translate(-50%,-50%);
}
.cursor-ring{
  width:28px; height:28px; border:2px solid rgba(255,255,255,.7);
  border-radius:50%; transition: width .16s, height .16s, border-color .2s, transform .12s;
}
.cursor-dot{ width:6px; height:6px; background:#fff; border-radius:50%; }
.cursor-ring.is-hover{ width:38px; height:38px; border-color: var(--accent2); }
.cursor-ring.pulse{ animation: pulseRing .35s ease; }
@keyframes pulseRing{ 0%{ transform:translate(-50%,-50%) scale(.8); } 100%{ transform:translate(-50%,-50%) scale(1); } }

/* ---------- Small screens ---------- */
@media (max-width: 860px){
  .brand__name{ display:none; }
  .menu-btn{ display:block; }
  .main-nav{ position:fixed; top:70px; right:22px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:12px 16px; display:none; }
  .main-nav ul{ flex-direction:column; gap:14px; }
  .main-nav.open{ display:block; }
}

/* ================= THEME (coffee brown) ================= */
:root{
  --hg-bg:#0f0a08;
  --hg-bg-2:#160f0c;
  --hg-text:#f7f3ee;
  --accent1:#c9936a;  /* caramel */
  --accent2:#e9c7a5;  /* latte */
  --muted:#b6a89b;
  --card:#1b1411;
  --ring: rgba(233,199,165,.25);
  --glow: rgba(201,147,106,.65);
}

/* ================ COMMON LAYOUT ================= */
.hg-section{position:relative; isolation:isolate; color:var(--hg-text); background:var(--hg-bg);}
.hg-wrap{max-width:1200px; margin:auto; padding:6rem 1.25rem;}
.hg-head{margin-bottom:1.2rem}
.hg-head--center{text-align:center}
.hg-title{font-family:'Outfit','Inter',system-ui; font-weight:800; letter-spacing:.3px; line-height:1.1;
  font-size:clamp(1.6rem, 1rem + 2.2vw, 2.6rem);}
.hg-sub{color:var(--muted)}

/* ================== ORBS ================== */
.hg-orb{position:absolute; filter:blur(40px); opacity:.35; pointer-events:auto; mix-blend-mode:screen; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.hg-orb--a{width:360px;height:360px;background:radial-gradient(circle at 40% 40%, var(--accent2), transparent 60%); top:-120px; left:-60px;}
.hg-orb--b{width:420px;height:420px;background:radial-gradient(circle at 60% 60%, var(--accent1), transparent 60%); bottom:-120px; right:-80px;}
@keyframes orbFloat{0%{transform:translateY(0)} 50%{transform:translateY(-14px)} 100%{transform:translateY(0)}}
.hg-orb{animation:orbFloat 8s ease-in-out infinite}
.hg-orb:active{transform:translateX(14px) translateY(-12px) scale(1.02)}

/* ================== QUICK ACCESS ================== */
.hg-section.hg-quick{
  background:
    radial-gradient(1000px 500px at 10% -20%, #2a1b16 0%, transparent 60%),
    var(--hg-bg);
  overflow:hidden;
}
.hg-quick-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:.8rem;
}
@media (max-width:900px){.hg-quick-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.hg-quick-grid{grid-template-columns:1fr}}

.hg-qa-card{
  position:relative; display:flex; flex-direction:column; gap:.35rem; 
  padding:1.1rem 1.1rem 1.05rem; border-radius:1.15rem; text-decoration:none; color:var(--hg-text);
  background:
    radial-gradient(120px 80px at var(--mx,50%) var(--my,50%), rgba(233,199,165,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08)),
    var(--card);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  transform-style:preserve-3d; will-change:transform, opacity;
}
.hg-qa-card strong{font-size:1.05rem; letter-spacing:.2px}
.hg-qa-emoji{font-size:1.2rem; opacity:.85}
.hg-chip{
  align-self:flex-start; margin-top:.2rem; font-size:.75rem; padding:.25rem .5rem; border-radius:999px; 
  border:1px solid var(--ring); background:rgba(255,255,255,.03)
}
.hg-qa-card:hover{outline:1px solid var(--ring); box-shadow:0 12px 34px rgba(0,0,0,.45), 0 0 40px var(--glow)}

/* ================== CORE SERVICES ================== */
.hg-core{background:
  radial-gradient(1000px 520px at 90% -10%, rgba(201,147,106,.12), transparent 60%),
  var(--hg-bg);}
.hg-service{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 30%);
  padding:2rem; border-radius:1.5rem; border:1px solid rgba(255,255,255,.06); margin-top:2rem
}
.hg-service:nth-child(odd){background:linear-gradient(180deg, rgba(233,199,165,.05), rgba(255,255,255,0) 30%)}
.hg-service.hg-flip{grid-template-columns:.9fr 1.1fr}
@media (max-width:980px){.hg-service, .hg-service.hg-flip{grid-template-columns:1fr}}

.hg-service-copy h3{font-size:clamp(1.2rem, .9rem + 1.2vw, 1.8rem); margin-bottom:.5rem}
.hg-lead{color:#f4e9dc}
.hg-bullets{margin:.7rem 0 1.2rem; padding-left:1.1rem}
.hg-bullets li{margin:.35rem 0}
.hg-cta-row{display:flex; flex-wrap:wrap; gap:.8rem}
.hg-btn{
  display:inline-block; padding:.75rem 1rem; border-radius:999px; font-weight:700; text-decoration:none; color:#1b1411;
  background:linear-gradient(180deg, var(--accent2), var(--accent1)); border:0; cursor:pointer; 
  box-shadow:0 10px 30px rgba(201,147,106,.35)
}
.hg-btn:hover{filter:brightness(1.05)}
.hg-link{color:var(--accent2); text-decoration:none}
.hg-link:hover{text-decoration:underline}

.hg-service-media{position:relative; background:radial-gradient(400px 260px at 30% 10%, rgba(233,199,165,.08), transparent 60%), var(--hg-bg-2);
  padding:1.1rem; border-radius:1.25rem; border:1px solid rgba(255,255,255,.06)}
.hg-tilt{transition:transform .2s ease; transform-style:preserve-3d}
.hg-service-media video.hg-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3; /* make it subtle behind SVG */
  z-index: 0;
}

/* ======= Chart ======= */
.hg-chart{width:100%; display:block; border-radius:.9rem; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--card); padding:.75rem}
.hg-chart-grid{stroke:rgba(255,255,255,.06); fill:none}
.hg-chart-path{fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:480; stroke-dashoffset:480; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.hg-chart-dot{fill:var(--accent2); opacity:0; transform-origin:center; transition:opacity .6s .7s ease, transform .6s .7s ease}

/* ======= Before/After ======= */
.hg-ba{position:relative; border-radius:1rem; overflow:hidden; border:1px solid rgba(255,255,255,.06)}
.hg-ba-pane{height:280px; background-size:cover; background-position:center}
.hg-ba-before{background-image:
  linear-gradient(120deg, rgba(0,0,0,.35), rgba(0,0,0,.15)),
  repeating-linear-gradient(90deg, #4a3a31 0 2px, #3a2c25 2px 4px);}

.hg-ba-pane video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hg-ba-after{position:absolute; inset:0; width:50%; background-image:
  linear-gradient(120deg, rgba(0,0,0,.2), rgba(0,0,0,.1)),
  radial-gradient(800px 400px at 40% 10%, rgba(233,199,165,.14), transparent 60%),
  linear-gradient(180deg, #7b5a44, #5a3f30);}
.hg-ba:before, .hg-ba:after{
  content:attr(data-before); position:absolute; z-index:3; top:.5rem; left:.5rem; font-size:.75rem; 
  background:rgba(0,0,0,.4); padding:.25rem .5rem; border-radius:.5rem}
.hg-ba:after{content:attr(data-after); left:auto; right:.5rem}
.hg-ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0}
.hg-ba-handle{position:absolute; top:0; left:calc(50% - 1px); width:2px; height:100%; background:linear-gradient(var(--accent2), var(--accent1)); 
  box-shadow:0 0 20px rgba(201,147,106,.5); z-index:2}

/* ======= Flow diagram ======= */
.hg-flow{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center; padding:1rem; background:
  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border-radius:1rem}
.hg-flow-step{text-align:center; min-width:110px}
.hg-node{display:inline-flex; align-items:center; justify-content:center; padding:.65rem 1rem; border-radius:999px; 
  background:linear-gradient(180deg, rgba(233,199,165,.18), rgba(201,147,106,.08)); border:1px solid rgba(255,255,255,.08)}
.hg-arrow{width:90px; height:22px}
.hg-arrow-line, .hg-arrow-head{stroke:var(--accent2); stroke-width:2; fill:none; stroke-dasharray:120; stroke-dashoffset:120}
.hg-platforms{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem}
.hg-pill{font-size:.8rem; padding:.4rem .7rem; border-radius:999px; border:1px solid var(--ring); background:rgba(255,255,255,.03)}

/* ======= Reveal on scroll ======= */
.hg-reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.hg-reveal.in{opacity:1; transform:none}
.hg-chart.revealed .hg-chart-path{stroke-dashoffset:0}
.hg-chart.revealed ~ .hg-chart-dot{opacity:1; transform:scale(1.15)}

/* ================== HG PREMIUM SHOWCASE CSS ================== */
/* Coffee-brown premium palette */
:root{
  --bg:#0f0a08;
  --bg-2:#160f0c;
  --text:#f7f3ee;
  --muted:#b6a89b;
  --accent1:#c9936a;
  --accent2:#e9c7a5;
  --card:#1b1411;
  --glow:rgba(128, 90, 61, 0.5);
  --maxW:1200px;
  --phone-w:280px; --phone-h:500px; /* default phone frame */
}

/* base */
*{box-sizing:border-box}
body{font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto; background:var(--bg); color:var(--text); margin:0; -webkit-font-smoothing:antialiased;}
.hg-premium-section{position:relative; overflow:hidden; padding:3.2rem 0 6rem}
.hg-wrap{max-width:var(--maxW); margin:0 auto; padding:0 1.25rem}

/* headers */
.hg-head{margin-bottom:.32rem}
.hg-title{font-size:clamp(1.6rem, 1.2rem + 2vw, 2.4rem); font-weight:800; letter-spacing:.2px}
.hg-sub{color:var(--muted); margin-top:.32rem}

/* quick row */
.hg-quick-row{display:flex; gap:1rem; align-items:center; margin-top:1rem}
.hg-quick-btn{background:linear-gradient(180deg,var(--accent2),var(--accent1)); color:#1a120f; padding:.6rem .9rem; border-radius:999px; text-decoration:none; font-weight:700; box-shadow:0 12px 40px rgba(201,147,106,.18)}
.hg-quick-link{color:var(--accent2); text-decoration:none; font-weight:600}

/* bg layers (particles + shards) */
.hg-bg-layer{position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; z-index:0}
.hg-particles{position:absolute; inset:0; width:100%; height:100%; display:block}
.hg-bg-grid{position:absolute; inset:0; background:
  radial-gradient(1200px 400px at 10% -10%, rgba(201,147,106,.06), transparent 30%); mix-blend-mode:screen; opacity:.9; pointer-events:none}
.hg-bg-shard{position:absolute; width:320px; height:320px; border-radius:18px; filter:blur(8px);
  background:conic-gradient(from 120deg, rgba(233,199,165,.32), rgba(201,147,106,.22) 50%, transparent 75%); mix-blend-mode:screen; opacity:.5}
.shard-a{top:6%; left:-80px}
.shard-b{bottom:10%; right:-60px}

/* holographic ring */
.hg-bg-ring{position:absolute; left:50%; top:10%; width:420px; height:420px; transform:translateX(-50%) rotateX(70deg); border-radius:50%;
  background:conic-gradient(from 0deg, rgba(233,199,165,.12), rgba(201,147,106,.28), rgba(233,199,165,.12)); opacity:.5; filter:blur(6px)}

/* rail container / mask */
.hg-rail-mask{position:relative; margin-top:1.2rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); z-index:3}

/* rail (flex) */
.hg-rail{display:flex; gap:1.5rem; align-items:flex-start; will-change:transform; transform:translate3d(0,0,0);}

/* single card */
.hg-card{flex:0 0 auto; width:var(--phone-w); margin:0; list-style:none; text-align:center; transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s}
@media (max-width:1000px){ :root{ --phone-w: 270px; --phone-h: 555px } .hg-card{ width:72vw; } }

/* phone frame */
.hg-phone-frame{position:relative; width:100%; height:var(--phone-h); border-radius:36px; padding:10px; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); box-shadow:0 30px 70px rgba(0,0,0,.55)}
.hg-bezel{position:relative; width:100%; height:100%; border-radius:28px; overflow:hidden; background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.hg-notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:152px; height:22px; border-radius:12px; background:#070707; z-index:6}

/* glow + glare */
.hg-glow{position:absolute; inset:-30% -30% auto -30%; height:44%; background:radial-gradient(circle at 50% 20%, rgba(233,199,165,.12), transparent 40%); pointer-events:none}
.hg-glare{position:absolute; inset:-10% -20%; background:linear-gradient(15deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%); mix-blend-mode:screen; opacity:.5; pointer-events:none; transition:opacity .25s}

/* phone video */
.hg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .25s, filter .25s}
.hg-card:hover .hg-video{ transform:scale(1.02) translateZ(6px); filter:brightness(1.02) saturate(1.04) }

/* caption */
.hg-caption{margin-top:.6rem; color:var(--accent2); font-weight:700; font-size:.98rem}
.hg-caption span{display:block;color:var(--muted); font-weight:500; font-size:.78rem; margin-top:4px}

/* fullscreen button (top-right small) */
.hg-full-btn{position:absolute; top:10px; right:10px; z-index:10; background:rgba(0,0,0,.35); color:var(--accent2); border:1px solid rgba(255,255,255,.04); padding:.35rem .5rem; border-radius:8px; cursor:pointer; backdrop-filter: blur(6px)}
.hg-full-btn:hover{background:linear-gradient(180deg,var(--accent2),var(--accent1)); color:#140f0b; transform:scale(1.03)}

/* subtle sheen across the card on hover */
.hg-card::after{
  content:""; position:absolute; inset:0; border-radius:36px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 70%);
  transform:translateX(-40%); transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .6s;
  opacity:0;
}
.hg-card:hover::after{ transform:translateX(70%); opacity:.95; }

/* active / focused state */
.hg-card:active{ transform:translateY(6px) scale(.995); box-shadow:0 8px 28px rgba(0,0,0,.55) }

/* bottom row */
.hg-bottom-row{margin-top:.8rem}
.hg-note{color:var(--muted); font-size:.92rem}

/* modal */
.hg-modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.85)); z-index:9999; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s}
.hg-modal[aria-hidden="false"]{opacity:1; visibility:visible}
.hg-modal-inner{width:min(1100px,92vw); max-height:88vh; background:#000; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.hg-modal video{width:100%; height:100%; object-fit:contain}
.hg-modal-close{position:absolute; top:20px; right:20px; background:transparent; border:0; color:var(--accent2); font-size:1.3rem; cursor:pointer}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .hg-card, .hg-bezel, .hg-rail, .hg-bg-ring, .hg-bg-shard{transition:none; animation:none}
}


/* ===== Mobile 4 videos(coffee brown) ===== */
:root{
  --hg-bg:#0f0a08;
  --hg-bg-2:#160f0c;
  --hg-text:#f7f3ee;
  --accent1:#c9936a;   /* caramel */
  --accent2:#e9c7a5;   /* latte */
  --muted:#b6a89b;
  --card:#1b1411;
  --ring: rgba(233,199,165,.25);
  --glow: rgba(201,147,106,.65);
}

/* ===== SECTION BASE ===== */
.hg-section{position:relative; isolation:isolate; color:var(--hg-text); background:var(--hg-bg);}
.hg-wrap{max-width:1200px; margin:auto; padding:6rem 1.25rem;}
.hg-head{margin-bottom:1.1rem}
.hg-head--center{text-align:center}
.hg-title{font-family:'Outfit','Inter',system-ui; font-weight:800; letter-spacing:.3px; line-height:1.1;
  font-size:clamp(1.6rem, 1rem + 2.2vw, 2.6rem);}
.hg-sub{color:var(--muted)}
.hg-lead{color:#f4e9dc}
.hg-bullets{margin:.7rem 0 1.2rem; padding-left:1.1rem}
.hg-bullets li{margin:.35rem 0}
.hg-cta-row{display:flex; flex-wrap:wrap; gap:.8rem}
.hg-btn{
  display:inline-block; padding:.75rem 1rem; border-radius:999px; font-weight:700; text-decoration:none; color:#1b1411;
  background:linear-gradient(180deg, var(--accent2), var(--accent1)); border:0; cursor:pointer; 
  box-shadow:0 10px 30px rgba(201,147,106,.35)
}
.hg-btn:hover{filter:brightness(1.05)}
.hg-link{color:var(--accent2); text-decoration:none}
.hg-link:hover{text-decoration:underline}
.hg-tilt{transition:transform .2s ease; transform-style:preserve-3d}

/* ===== STUDIO SECTION BG ===== */
.hg-studio{
  background:
    radial-gradient(1200px 600px at 90% -20%, rgba(233,199,165,.10), transparent 60%),
    var(--hg-bg);
  overflow:hidden;
}
.hg-bg3d{position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; perspective:1000px}

/* Floor grid (3D) */
.hg-floor{
  position:absolute; left:0; right:0; bottom:-40px; height:520px; transform-origin:50% 100%;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg, rgba(233,199,165,.10) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg,  rgba(233,199,165,.08) 0 1px, transparent 1px 38px);
  transform:perspective(1200px) rotateX(64deg);
  filter:blur(.2px);
}

/* Depth shards */
.hg-shard{
  position:absolute; width:260px; height:260px; border-radius:24px; filter:blur(8px);
  background:conic-gradient(from 120deg, rgba(233,199,165,.35), transparent 40%, rgba(201,147,106,.25));
  mix-blend-mode:screen; opacity:.35; transform:translateZ(0) rotate(18deg);
  animation:shardFloat 12s ease-in-out infinite;
}
.hg-shard--a{top:10%; left:-60px}
.hg-shard--b{bottom:12%; right:-40px; animation-delay:-6s}
@keyframes shardFloat{0%,100%{transform:translate3d(0,0,0) rotate(18deg)} 50%{transform:translate3d(26px,-18px,0) rotate(12deg)}}

/* Holographic ring (3D coin) */
.hg-ring{
  position:absolute; width:380px; height:380px; left:50%; top:18%;
  transform:translate3d(-50%,0,0) rotateX(65deg) rotateZ(20deg);
  background:conic-gradient(from 0deg, rgba(233,199,165,.2), rgba(201,147,106,.35), rgba(233,199,165,.2));
  border-radius:50%;
  -webkit-mask: radial-gradient(circle 56% at 50% 50%, transparent 54%, #000 56%);
          mask: radial-gradient(circle 56% at 50% 50%, transparent 54%, #000 56%);
  box-shadow:0 0 60px rgba(201,147,106,.3);
  opacity:.6;
}

/* Floating cube (CSS 3D) */
.hg-cube{
  position:absolute; width:120px; height:120px; left:6%; top:22%;
  transform-style:preserve-3d; transform:translateZ(60px) rotateX(-16deg) rotateY(24deg);
}
.hg-cube .face{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.hg-cube .f1{transform:translateZ(60px); background:linear-gradient(180deg, rgba(233,199,165,.18), rgba(0,0,0,.12))}
.hg-cube .f2{transform:rotateY(90deg) translateZ(60px)}
.hg-cube .f3{transform:rotateY(180deg) translateZ(60px)}
.hg-cube .f4{transform:rotateY(-90deg) translateZ(60px)}
.hg-cube .f5{transform:rotateX(90deg) translateZ(60px)}
.hg-cube .f6{transform:rotateX(-90deg) translateZ(60px)}

/* ===== CONTENT LAYOUT ===== */
.hg-studio-grid{
  display:grid; grid-template-columns: 0.95fr 1.05fr; gap:1.2rem; align-items:center; margin-top:1.2rem;
}
@media (max-width:980px){ .hg-studio-grid{grid-template-columns:1fr} }

/* ===== Mobile phone ===== */
.hg-phone{display:flex; flex-direction:column; align-items:center; gap:.75rem}
.hg-phone-caption{font-size:.9rem; color:var(--muted)}

.hg-phone-glow{
  position:absolute; width:480px; height:480px; border-radius:50%; filter:blur(60px);
  background:radial-gradient(circle at 50% 40%, var(--accent2), transparent 60%);
  opacity:.35; transform:translateZ(-60px);
}

.hg-phone-body{
  position:relative; width:320px; height:660px; border-radius:38px; padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 20px 60px rgba(0,0,0,.55),
    0 0 60px rgba(201,147,106,.25);
}
@media (max-width:420px){ .hg-phone-body{width:78vw; height:calc(78vw*1.06);} }

.hg-phone-bezel{
  position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden;
  background:#000; box-shadow:inset 0 0 0 2px rgba(255,255,255,.06);
}
.hg-notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:160px; height:26px; background:#0a0a0a; border-bottom-left-radius:16px; border-bottom-right-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  display:flex; justify-content:center; align-items:center; gap:10px; z-index:3;
}
.hg-notch .cam{width:8px; height:8px; background:#1a1a1a; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.hg-notch .spk{width:52px; height:6px; background:#151515; border-radius:6px}

.hg-phone-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:brightness(.97) contrast(1.04) saturate(1.05);
}

/* glossy reflection */
.hg-reflection{
  position:absolute; inset:-10% -20%; pointer-events:none;
  background:
    linear-gradient(15deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%),
    radial-gradient(600px 200px at var(--gx,20%) -10%, rgba(255,255,255,.18), transparent 60%);
  mix-blend-mode:screen; opacity:.55;
}

/* Side buttons */
.hg-phone-sidebtns .btn{
  position:absolute; right:-3px; width:4px; height:56px; background:#37261d; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.btn--pwr{top:120px; height:68px}
.btn--vol.btn--up{left:-3px; right:auto; top:160px}
.btn--vol.btn--dn{left:-3px; right:auto; top:226px}

/* ===== Reveal on scroll (optional if you already have) ===== */
.hg-reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.hg-reveal.in{opacity:1; transform:none}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .hg-tilt{transition:none}
  .hg-bg3d .hg-ring, .hg-cube, .hg-shard{animation:none}
}
.scroll-fade-section {
  position: relative;
  min-height: 70vh; /* Taller for better scroll effect */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e0908;
  overflow: hidden;
  padding: 2rem;
}

.fade-text-container h2 {
  font-size: clamp(1.8rem, 6vw, 3.5rem); /* Bigger and responsive */
  font-weight: 500;
  line-height: 1.5;
  max-width: 90%;
  text-align: center;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.3); /* Dim at start */
  filter: blur(4px) brightness(0.5); /* Start blurry and dark */
  transition: all 1.5s ease-out;
}

.fade-text-container h2.scrolled {
  color: #ffffff;
  filter: blur(0px) brightness(1.0); /* Glow effect */
  text-shadow: 0 0 10px rgba(155, 100, 50, 0.7),
               0 0 15px rgba(155, 120, 120, 0.5);
}

.fade-text-container .highlight {
  font-weight: 500;
  color: #FFFFF0;	;
}

@media (max-width: 600px) {
  .scroll-fade-section {
    padding: 1.5rem;
  }
  .fade-text-container h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.4;
    max-width: 95%;
  }
}
.faq-section {
  position: relative;
  padding: 100px 10%;
  overflow: hidden;
}

.faq-title h2 {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 10px;
}

.faq-title p {
  text-align: center;
  font-size: 1.1rem;
  color: #aaa;
  margin-bottom: 60px;
}

.faq-container {
  max-width: 800px;
  margin: auto;
}

.faq-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(12px);
}

.faq-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  font-size: 1.2rem;
}

.toggle-icon {
  font-size: 1.8rem;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.faq-item.active .toggle-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.3s ease;
  padding: 0 20px;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 20px;
}

/* Floating 3D Shapes */
.floating-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.shape {
  position: absolute;
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, var(--accent), #ffdeba);
  border-radius: 20%;
  opacity: 0.1;
  animation: float 10s infinite ease-in-out alternate;
}

.shape:nth-child(1) { top: 20%; left: 10%; animation-duration: 12s; }
.shape:nth-child(2) { top: 50%; left: 70%; animation-duration: 15s; }
.shape:nth-child(3) { top: 80%; left: 30%; animation-duration: 18s; }

@keyframes float {
  from { transform: translateY(0px) rotate(0deg); }
  to { transform: translateY(-40px) rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .faq-title h2 { font-size: 2.2rem; }
  .faq-question { font-size: 1rem; }
}

.huegrid-footer {
  position: relative;
  background: linear-gradient(145deg, #0a0a0f, #250909);
  color: #fff;
  padding: 80px 20px 30px;
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
}

.footer-brand h2 {
  font-size: 2rem;
  color: #c9936a;
}

.footer-links h3,
.footer-contact h3,
.footer-newsletter h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #e9c7a5;
}

.footer-links ul {
  list-style: none;
}

.footer-links ul li {
  margin-bottom: 8px;
}

.footer-links ul li a {
  text-decoration: none;
  color: #ccc;
  transition: color 0.3s ease;
}

.footer-links ul li a:hover {
  color: #c9936a;
}

.footer-contact a {
  color: #c9936a;
  text-decoration: none;
}

.footer-newsletter input {
  padding: 10px;
  border: none;
  border-radius: 30px;
  width: 70%;
  margin-right: 10px;
  background: #111;
  color: #fff;
}

.footer-newsletter button {
  padding: 10px 20px;
  border: none;
  border-radius: 30px;
  background: #c9936a;
  color: #fff;
  cursor: pointer;
  transition: 0.3s ease;
}

.footer-newsletter button:hover {
  background: #e9c7a5;
}

.footer-social {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.footer-social a {
  margin: 0 10px;
  color: #fff;
  font-size: 1.5rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social a:hover {
  color: #c9936a;
  transform: scale(1.2);
}

.footer-bottom {
  text-align: center;
  font-size: 0.9rem;
  color: #999;
}

.floating-3d-elements {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(201,147,106,0.3) 100%);
  border-radius: 50%;
  animation: floatOrb 12s ease-in-out infinite alternate;
}

.orb:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.orb:nth-child(2) { top: 50%; left: 80%; animation-delay: 2s; }
.orb:nth-child(3) { top: 70%; left: 30%; animation-delay: 4s; }

@keyframes floatOrb {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-40px) scale(1.2); }
}