/* d2x — "Sentinel" direction: warm-gray body + vivid gradient panels,
   yellow pill CTAs, monospace-heavy type, ASCII/encoded hero texture. */

/* Self-hosted fonts (variable, latin subset) — no Google Fonts request. */
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/hanken-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url('fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root {
  --grad: linear-gradient(168deg, #FFCE3A 0%, #FF9A1F 14%, #FA4B2A 30%, #EE1C6B 48%, #A21CAF 66%, #5B21B6 84%, #332BA6 100%);
  --grad-soft: linear-gradient(110deg, #FA4B2A, #EE1C6B, #7C3AED);
  --yellow: #FFD23F;
  --ink: #14110C;
  --bg: #E9E7E3;
  --bg-2: #E2E0DC;
  --surface: #FFFFFF;
  --border: #D7D4CE;
  --muted: #57544C;   /* ~6:1 on --bg (body text) */
  --faint: #6F6B62;   /* ~4.3:1 on --bg (secondary labels) */
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 26px;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--yellow); color: #1a1305; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.mono { font-family: var(--mono); }

/* Pills */
.pill { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.82rem; font-weight:500; padding:11px 18px; border-radius:999px; background:var(--yellow); color:#1a1305; transition:.2s var(--ease); cursor:pointer; }
.pill:hover { transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(255,160,20,.7); }
.pill.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45); }
.pill.ghost:hover { background:rgba(255,255,255,.14); box-shadow:none; }
.pill.dark { background:var(--ink); color:#fff; }

/* Section tag like [01/04] */
.tag { display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--muted); }
.tag b { background:var(--yellow); color:#1a1305; padding:2px 8px; border-radius:6px; font-weight:600; }

/* ============ HERO PANEL ============ */
.hero { padding: 14px; }
.hero-panel { position:relative; border-radius:var(--radius); overflow:hidden; background:var(--grad); color:#fff; padding: 26px clamp(22px,4vw,54px) clamp(34px,4vw,46px); min-height:calc(100svh - 28px); display:flex; flex-direction:column; }
.ascii { position:absolute; top:0; left:0; right:0; height:46%; z-index:0; font-family:var(--mono); font-size:13px; line-height:1.15; letter-spacing:.18em; color:rgba(20,8,0,.22); white-space:pre; overflow:hidden; user-select:none; pointer-events:none; -webkit-mask-image:linear-gradient(#000 0%, #000 30%, transparent 100%); mask-image:linear-gradient(#000 0%, #000 30%, transparent 100%); }
.hero-panel > * { position:relative; z-index:1; }

.sx-nav { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.sx-logo { display:flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.sx-logo .mk { padding:5px 9px; border-radius:8px; display:inline-flex; align-items:center; background:#fff; color:#7C3AED; font-weight:800; font-size:.84rem; letter-spacing:-.01em; }
.sx-logo .brandline { font-family:var(--mono); font-size:.8rem; font-weight:500; opacity:.7; }
.sx-links { display:flex; gap:26px; font-family:var(--mono); font-size:.82rem; }
.sx-links a { color:rgba(255,255,255,.86); transition:color .2s; }
.sx-links a:hover { color:#fff; }
/* nav sits on the bright top of the gradient → dark ink for contrast */
.sx-nav { color:#14110C; }
.sx-nav .sx-logo .mk { background:#14110C; color:#fff; }
.sx-nav .sx-links a { color:rgba(20,17,12,.72); }
.sx-nav .sx-links a:hover { color:#14110C; }
.btn-square { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.1em; padding:11px 17px; border-radius:8px; background:#14110C; color:#fff; transition:.2s var(--ease); }
.btn-square:hover { transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(0,0,0,.55); }
.btn-square svg { width:13px; height:13px; }
/* ADMIN dropdown */
.admin-dd { position:relative; }
.admin-dd .btn-square { cursor:pointer; }
.admin-dd .btn-square .caret { transition:transform .2s var(--ease); }
.admin-dd.open .btn-square .caret { transform:rotate(180deg); }
.admin-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:232px; background:#14110C; border-radius:11px; padding:8px; display:none; flex-direction:column; gap:2px; box-shadow:0 20px 44px -16px rgba(0,0,0,.6); z-index:60; }
.admin-dd.open .admin-menu { display:flex; }
.admin-menu a { font-family:var(--mono); font-size:.82rem; color:#fff; padding:10px 12px; border-radius:8px; transition:background .15s; }
.admin-menu a:hover { background:rgba(255,255,255,.1); }

.hero-grid { display:grid; grid-template-columns: 1.5fr .9fr; gap:40px; align-items:center; flex:1; }
.hero h1 { font-family:var(--sans); font-weight:600; font-size:clamp(2.6rem,6.4vw,5.1rem); line-height:1.02; letter-spacing:-.02em; margin-bottom:26px; }
.hero-cta-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.hero-card { border-radius:18px; overflow:hidden; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); aspect-ratio:4/5; position:relative; box-shadow:0 30px 60px -28px rgba(0,0,0,.5); }
.hero-card img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.hero-card .play { position:absolute; right:14px; bottom:14px; width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; color:#14110C; }

.hero-mark { align-self:center; justify-self:end; font-family:var(--sans); font-weight:700; font-size:clamp(6rem,15vw,15rem); line-height:.78; letter-spacing:-.05em; color:#fff; text-align:right; }

.hero-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:clamp(34px,5vw,56px); padding-top:24px; border-top:1px solid rgba(255,255,255,.18); flex-wrap:wrap; }
.hero-note { font-family:var(--mono); font-size:.82rem; color:rgba(255,255,255,.82); max-width:360px; line-height:1.5; }
.proof { display:flex; align-items:center; gap:14px; }
.proof .n { font-family:var(--sans); font-size:1.5rem; font-weight:700; }
.proof .lbl { font-family:var(--mono); font-size:.7rem; color:rgba(255,255,255,.75); }
.dots { display:flex; }
.dots span { width:30px; height:30px; border-radius:50%; margin-left:-9px; border:2px solid rgba(255,255,255,.6); }
.dots span:nth-child(1){ background:#FA4B2A; margin-left:0; }
.dots span:nth-child(2){ background:#EE1C6B; }
.dots span:nth-child(3){ background:#7C3AED; }
.dots span.more{ background:var(--yellow); color:#1a1305; display:grid; place-items:center; font-family:var(--mono); font-size:.9rem; }

/* ============ TRUST / BUILT-WITH STRIP ============ */
.trust { padding: 34px 0; border-bottom:1px solid var(--border); }
.trust .row { display:flex; flex-wrap:wrap; gap:14px 38px; align-items:center; justify-content:space-between; }
.trust .lead { font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.08em; }
.trust .item { font-family:var(--mono); font-size:.92rem; color:var(--muted); }

/* ============ SECTIONS ============ */
.section { padding: clamp(70px,9vw,120px) 0; }
.section-head { text-align:center; max-width:680px; margin:0 auto 60px; }
.section-head .tag { justify-content:center; margin-bottom:18px; }
.section-head h2 { font-family:var(--sans); font-weight:600; font-size:clamp(1.8rem,4vw,2.9rem); letter-spacing:-.02em; line-height:1.06; }
.section-head p { color:var(--muted); margin-top:14px; font-size:1.02rem; }

/* Project rows */
.project { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; padding:54px 0; border-top:1px solid var(--border); }
.project:nth-child(even) .project-media { order:2; }
.project-num { font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.project-num b { background:var(--yellow); color:#1a1305; padding:2px 8px; border-radius:6px; margin-right:8px; }
.project h3 { font-family:var(--sans); font-weight:600; font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.02em; margin:14px 0 8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.project .tagline { font-family:var(--mono); font-size:.82rem; background:var(--grad-soft); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:16px; }
.project p.desc { color:var(--muted); margin-bottom:22px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.chip { font-family:var(--mono); font-size:.72rem; color:var(--muted); padding:5px 11px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.project-links a.live { font-family:var(--mono); font-size:.84rem; font-weight:500; display:inline-flex; align-items:center; gap:7px; color:#14110C; border-bottom:2px solid var(--yellow); padding-bottom:2px; transition:.2s; }
.project-links a.live:hover { gap:11px; }
.badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.badge.live { color:#1a1305; background:var(--yellow); }
.badge.beta { color:#fff; background:#7C3AED; }
.badge.live .dot { width:6px; height:6px; border-radius:50%; background:#1a1305; }

.project-media { position:relative; }
.shot { border-radius:18px; border:1px solid var(--border); overflow:hidden; background:var(--surface); box-shadow:0 22px 50px -26px rgba(40,20,10,.4); transition:transform .5s var(--ease), box-shadow .5s; cursor:zoom-in; }
.shot:hover { transform:translateY(-6px); box-shadow:0 30px 60px -26px rgba(40,20,10,.5); }
.shot img { width:100%; }
.phones { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.phone { border-radius:20px; border:1px solid var(--border); overflow:hidden; background:var(--surface); box-shadow:0 18px 44px -24px rgba(40,20,10,.42); transition:transform .45s var(--ease); cursor:zoom-in; }
.phone:hover { transform:translateY(-8px) scale(1.02); }
.phone .cap { font-family:var(--mono); font-size:.6rem; color:var(--faint); text-align:center; padding:7px 4px; letter-spacing:.04em; }
.dual { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.media-eyebrow { font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.06em; margin-bottom:14px; }

/* ============ CTA BAND ============ */
.cta { padding: 0 14px; }
.cta-panel { position:relative; overflow:hidden; border-radius:var(--radius); background:linear-gradient(110deg,#FA4B2A,#EE1C6B 48%,#7C3AED); color:#fff; padding:clamp(40px,6vw,72px) clamp(26px,5vw,64px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-panel h2 { font-family:var(--sans); font-weight:600; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.02em; line-height:1.05; max-width:560px; }
.cta-blob { position:absolute; width:380px; height:380px; right:-60px; top:-120px; border-radius:50%; background:radial-gradient(circle, rgba(255,210,63,.6), transparent 60%); filter:blur(20px); }

/* ============ STUDIO ============ */
.studio { padding: clamp(60px,8vw,100px) 0; }
.studio .box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(34px,5vw,60px); }
.studio h2 { font-family:var(--sans); font-weight:600; font-size:clamp(1.6rem,3.5vw,2.5rem); letter-spacing:-.02em; margin-bottom:16px; max-width:680px; }
.studio p { color:var(--muted); max-width:680px; }
.text-link { color:var(--ink); border-bottom:2px solid var(--yellow); font-weight:500; }
.text-link:hover { background:rgba(255,210,63,.25); }

/* ============ FOOTER PANEL ============ */
.foot { padding: 14px; }
.foot-panel { position:relative; overflow:hidden; border-radius:var(--radius); background:linear-gradient(125deg,#7C3AED,#5B21B6 45%,#A21CAF 78%,#EE1C6B); color:#fff; padding:clamp(44px,5vw,64px) clamp(26px,4vw,54px) 34px; }
.foot-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin-bottom:42px; }
.foot-brand .sx-logo { margin-bottom:16px; }
.foot-brand p { font-family:var(--mono); font-size:.82rem; color:rgba(255,255,255,.82); max-width:300px; line-height:1.55; margin-bottom:20px; }
.foot-mail { display:flex; gap:8px; max-width:320px; }
.foot-mail input { flex:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:11px 14px; color:#fff; font-family:var(--mono); font-size:.82rem; }
.foot-mail input::placeholder { color:rgba(255,255,255,.6); }
.foot-mail .pill { padding:11px 14px; }
.foot-col h4 { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:16px; }
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot-col a { font-family:var(--mono); font-size:.84rem; color:rgba(255,255,255,.88); transition:color .2s; }
.foot-col a:hover { color:#fff; }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid rgba(255,255,255,.2); font-family:var(--mono); font-size:.74rem; color:rgba(255,255,255,.75); flex-wrap:wrap; gap:12px; }

.foot-bottom a { color:rgba(255,255,255,.85); transition:color .2s; }
.foot-bottom a:hover { color:#fff; }
.foot-legal { display:flex; gap:10px; }

/* ============ LEGAL PAGES ============ */
.legal-hero { padding:14px; }
.legal-hero .panel { background:linear-gradient(120deg,#FA4B2A,#EE1C6B 52%,#7C3AED); color:#fff; border-radius:var(--radius); padding:26px clamp(22px,4vw,54px) clamp(40px,5vw,60px); }
.legal-hero .sx-logo { color:#fff; }
.legal-hero .back-home { font-family:var(--mono); font-size:.8rem; display:inline-flex; gap:8px; align-items:center; color:rgba(255,255,255,.85); margin:34px 0 22px; transition:gap .2s; }
.legal-hero .back-home:hover { gap:12px; color:#fff; }
.legal-hero h1 { font-family:var(--sans); font-weight:600; font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.02em; line-height:1.02; }
.legal-wrap { max-width:780px; margin:0 auto; padding:0 22px; }
.legal { padding:clamp(50px,7vw,88px) 0; }
.legal h2 { font-family:var(--sans); font-weight:600; font-size:1.22rem; margin:36px 0 10px; }
.legal h2:first-child { margin-top:0; }
.legal p, .legal li { color:var(--muted); margin-bottom:10px; line-height:1.66; }
.legal ul { padding-left:20px; margin-bottom:14px; }
.legal strong { color:var(--ink); }
.legal a { color:#14110C; border-bottom:2px solid var(--yellow); }
.legal code { font-family:var(--mono); font-size:.85em; background:var(--bg-2); padding:1px 5px; border-radius:4px; }

/* Reveal */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i,0)*80ms); }
.reveal.in { opacity:1; transform:none; }

/* Lightbox */
#lb { position:fixed; inset:0; z-index:11000; background:rgba(20,17,12,.88); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:5vh 5vw; cursor:zoom-out; }
#lb.open { display:flex; }
#lb img { max-height:90vh; max-width:100%; border-radius:14px; }

@media (max-width:900px){
  .hero-panel { min-height:auto; }
  .hero-grid { grid-template-columns:1fr; gap:28px; }
  .hero-card { max-width:320px; }
  .project { grid-template-columns:1fr; gap:32px; }
  .project:nth-child(even) .project-media { order:0; }
  .foot-top { grid-template-columns:1fr 1fr; }
  .sx-links { display:none; }
}
@media (max-width:560px){ .phones { grid-template-columns:repeat(2,1fr); } .foot-top{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } .reveal{ opacity:1; transform:none; } }