/* ============================================================
   AuraFlow AI — Landing (Neon Protocol / cyberpunk)
   Port dari desain Stitch. Butuh fonts.css. Palette sendiri (bukan tokens.css glass).
   ============================================================ */
:root {
  --n-bg: #111319;
  --n-surface-lowest: #0c0e13;
  --n-surface-low: #191b21;
  --n-surface: #1e1f25;
  --n-surface-high: #282a30;
  --n-primary: #ffabf3;           /* magenta terang */
  --n-primary-container: #ff00ff; /* magenta penuh */
  --n-on-primary: #5b005b;
  --n-on-primary-container: #510051;
  --n-cyan: #00fbfb;
  --n-text: #e2e2e9;
  --n-text-variant: #dcbed4;
  --n-mono: 'Space Mono', monospace;
  --n-sans: 'Sora', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body.neon {
  margin: 0; background: var(--n-bg); color: var(--n-text);
  font-family: var(--n-sans); overflow-x: clip; max-width: 100%; -webkit-font-smoothing: antialiased;
}
body.neon ::selection { background: var(--n-primary-container); color: #fff; }
a { color: inherit; text-decoration: none; }

/* ---- efek khas ---- */
.faceted-clip { clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px); }
.neon-border { border: 1px solid var(--n-primary); box-shadow: 0 0 10px rgba(255,171,243,.3), inset 0 0 5px rgba(255,171,243,.2); }
.neon-border-cyan { border: 1px solid var(--n-cyan); box-shadow: 0 0 10px rgba(0,251,251,.3), inset 0 0 5px rgba(0,251,251,.2); }
.scanline {
  background: linear-gradient(to bottom, rgba(18,16,16,0) 50%, rgba(0,0,0,.25) 50%),
              linear-gradient(90deg, rgba(255,0,0,.06), rgba(0,255,0,.02), rgba(0,0,255,.06));
  background-size: 100% 4px, 3px 100%; pointer-events: none;
}
.hero-gradient { background: radial-gradient(circle at 50% 50%, rgba(255,0,255,.10) 0%, rgba(0,0,0,0) 70%); }
.glitch:hover { text-shadow: 2px 0 var(--n-cyan), -2px 0 var(--n-primary-container); animation: n-glitch .3s infinite; }
@keyframes n-glitch { 0%,100%{transform:translate(0)} 20%{transform:translate(-2px,2px)} 40%{transform:translate(-2px,-2px)} 60%{transform:translate(2px,2px)} 80%{transform:translate(2px,-2px)} }
.hud-bracket { position: relative; }
.hud-bracket::before { content:'['; position:absolute; left:-8px; top:0; color:var(--n-cyan); font-family:var(--n-mono); }
.hud-bracket::after { content:']'; position:absolute; right:-8px; top:0; color:var(--n-cyan); font-family:var(--n-mono); }

/* ---- tipografi ---- */
.mono { font-family: var(--n-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.logo { font-weight: 800; font-size: 20px; letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--n-primary), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-xl { font-weight: 800; font-size: clamp(36px, 6vw, 48px); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; font-style: italic; color: #fff; margin: 0; }
.h-lg { font-weight: 700; font-size: clamp(26px, 4vw, 32px); line-height: 1.2; letter-spacing: -.01em; text-transform: uppercase; color: #fff; margin: 0; }
.display { font-weight: 800; font-size: clamp(30px, 5vw, 40px); line-height: 1.1; color: #fff; margin: 0; }
.title { font-weight: 600; font-size: 20px; line-height: 1.4; text-transform: uppercase; color: #fff; margin: 0; }
.body { font-size: 16px; line-height: 1.6; color: var(--n-text-variant); }
.muted { color: var(--n-text-variant); }
.text-primary { color: var(--n-primary); }
.text-cyan { color: var(--n-cyan); }

/* ---- layout ---- */
.wrap { max-width: 1440px; margin-inline: auto; }
.px { padding-inline: clamp(16px, 5vw, 64px); }
@media (max-width: 768px) { .hide-sm { display: none !important; } }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 50; height: 64px; display: flex; align-items: center; justify-content: space-between;
  background: rgba(30,31,37,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 24px -12px rgba(255,171,243,.15); }
.nav a.active { color: var(--n-primary); font-weight: 700; border-bottom: 2px solid var(--n-primary); padding-bottom: 4px; }
.nav a.link { color: var(--n-text-variant); font-weight: 500; transition: color .3s; }
.nav a.link:hover { color: var(--n-primary); }
.btn-pill { padding: 8px 18px; background: var(--n-primary); color: var(--n-on-primary); font-weight: 700; border: none; cursor: pointer; transition: transform .2s; }
.btn-pill:hover { transform: scale(.95); }
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.icon-fill { fill: currentColor; stroke: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255,171,243,.3); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- buttons ---- */
.btn { font-weight: 700; font-size: 1.05rem; padding: 16px 32px; cursor: pointer; border: none; transition: all .3s; text-transform: uppercase; letter-spacing: .12em; }
.btn-primary { background: var(--n-primary); color: var(--n-on-primary); position: relative; overflow: hidden; }
.btn-primary:hover { transform: scale(1.05); }
.btn-ghost-cyan { background: transparent; color: var(--n-cyan); border: 1px solid rgba(0,251,251,.5); }
.btn-ghost-cyan:hover { background: rgba(0,251,251,.1); }
.btn-white { background: #fff; color: var(--n-bg); font-weight: 900; font-style: italic; font-size: 1.25rem; padding: 20px 48px; }
.btn-white:hover { background: var(--n-primary); color: #fff; }

/* ---- hero ---- */
.hero { position: relative; min-height: 880px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero > .bg { position: absolute; inset: 0; }
.badge { display: inline-block; padding: 6px 16px; margin-bottom: 24px; background: var(--n-primary-container); color: var(--n-on-primary-container); letter-spacing: .2em; }
.hud-side { position: absolute; top: 25%; left: 40px; opacity: .35; }
.hud-side p { margin: 0; color: var(--n-cyan); font-family: var(--n-mono); font-size: 12px; letter-spacing: .1em; }
.hud-side .bar { border-left: 2px solid var(--n-cyan); padding-left: 16px; }
.hero-panel { margin-top: 80px; position: relative; width: 100%; max-width: 900px; height: clamp(240px, 40vw, 384px);
  border: 1px solid rgba(255,255,255,.05); background: rgba(25,27,33,.4); backdrop-filter: blur(8px); border-radius: 12px; padding: 16px; }
.hero-panel .corner-tl { position: absolute; top:-16px; left:-16px; width:48px; height:48px; border-top:2px solid var(--n-primary); border-left:2px solid var(--n-primary); }
.hero-panel .corner-br { position: absolute; bottom:-16px; right:-16px; width:48px; height:48px; border-bottom:2px solid var(--n-cyan); border-right:2px solid var(--n-cyan); }
.hero-panel .frame { width:100%; height:100%; overflow:hidden; border-radius:8px; position:relative; }
.hero-panel img { width:100%; height:100%; object-fit:cover; opacity:.8; transition: transform .7s; }
.hero-panel:hover img { transform: scale(1.1); }
.play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.play > span { width:80px; height:80px; border-radius:50%; background:rgba(255,171,243,.2); backdrop-filter:blur(16px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background .3s; }
.play > span:hover { background: rgba(255,171,243,.4); }
.play svg { width:40px; height:40px; fill: var(--n-primary); }

/* ---- features ---- */
.section { padding-block: 96px; }
.bg-lowest { background: var(--n-surface-lowest); }
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.feat { min-width: 0; padding: 32px; background: rgba(25,27,33,.5); border: 1px solid rgba(255,255,255,.05); transition: border-color .5s; }
.feat:hover { border-color: rgba(255,171,243,.5); }
.feat.cyan:hover { border-color: rgba(0,251,251,.5); }
.feat svg { width: 36px; height: 36px; margin-bottom: 24px; }
.feat h3 { margin: 0 0 16px; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: center; border-block: 1px solid rgba(255,255,255,.05); }
.stat b { display: block; font-weight: 800; font-size: 60px; letter-spacing: -.03em; margin-bottom: 8px; }
.stat .underline { width: 48px; height: 4px; margin: 16px auto 0; }

/* ---- bento ---- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 200px; gap: 24px; }
.bento .big { grid-column: span 8; grid-row: span 3; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.bento .big img { width:100%; height:100%; object-fit: cover; transition: transform 2s; }
.bento .big:hover img { transform: scale(1.05); }
.bento .big .cap { position: absolute; left: 32px; bottom: 32px; }
.bento .big .shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--n-bg), transparent 60%); }
.bento .cell { grid-column: span 4; grid-row: span 2; padding: 32px; background: var(--n-surface-high); display: flex; flex-direction: column; justify-content: center; }
.bento .cell.p { border: 1px solid rgba(255,171,243,.2); }
.bento .cell.c { border: 1px solid rgba(0,251,251,.2); }
.bento .cell svg { width: 28px; height: 28px; margin-bottom: 16px; }
.bento .cta { grid-column: span 12; grid-row: span 2; padding: 48px; background: rgba(255,0,255,.08); border: 1px solid rgba(255,171,243,.4);
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* ---- footer ---- */
.footer { background: var(--n-surface-lowest); border-top: 1px solid rgba(255,255,255,.05); padding-block: 64px; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; position: relative; }
.footer h5 { margin: 0 0 24px; color: #fff; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.footer ul a:hover { color: var(--n-primary); }
.soc { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; color: var(--n-text-variant); transition: all .3s; }
.soc:hover { color: var(--n-primary); border-color: var(--n-primary); }
.footer .watermark { position: absolute; right: 0; bottom: -20px; font-size: 120px; font-weight: 900; font-style: italic; text-transform: uppercase; opacity: .05; line-height: 1; user-select: none; pointer-events: none; }
.footer-bottom { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.05); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(220,190,212,.5); }

/* ---- responsif ---- */
@media (max-width: 1000px) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento .big, .bento .cell, .bento .cta { grid-column: auto; grid-row: auto; }
  .bento .big { min-height: 320px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hud-side { display: none; }
}
@media (max-width: 640px) {
  .feat-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .glitch:hover { animation: none; } * { transition: none !important; } }