/* ===========================================================
   OONEX — Design System (Gold Edition & Dual Theme Support)
   Palette: Ink #0B0B0E · Paper #EDEAE2 · Gold Accents #BF953F / #D4AF37 / #FCF6BA
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --ink: #0B0B0E;
  --ink-soft: #141519;
  --paper: #EDEAE2;
  --paper-dim: #B9B6AE;
  --gold: #D4AF37;
  --gold-light: #FCF6BA;
  --gold-dark: #AA771C;
  --gold-gradient: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #D4AF37 50%, #FBF5B7 75%, #AA771C 100%);
  --violet: #6E5BFF;
  --line: #2A2B30;
  --muted: #8B8C92;
  --radius: 2px;
  --max: 1240px;
  --ease: cubic-bezier(.16,.8,.24,1);
  --bg-card: var(--ink);
  --bg-header: rgba(11,11,14,.86);
  --border-color: rgba(212,175,55,0.25);
}

[data-theme="light"] {
  --ink: #F9F8F5;
  --ink-soft: #EFECE6;
  --paper: #141519;
  --paper-dim: #55565B;
  --gold: #B38728;
  --gold-light: #8A651B;
  --gold-dark: #D4AF37;
  --gold-gradient: linear-gradient(135deg, #B38728 0%, #E6C665 50%, #8A651B 100%);
  --violet: #5339FF;
  --line: #D9D5CC;
  --muted: #73747A;
  --bg-card: #FFFFFF;
  --bg-header: rgba(249,248,245,.88);
  --border-color: rgba(179,135,40,0.3);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{padding:0 20px}}

.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.02em}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold)}

h1,h2,h3{font-family:'Instrument Serif',serif;font-weight:400;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(40px,7vw,84px);line-height:1.02}
h2{font-size:clamp(30px,4.4vw,52px);line-height:1.06}
h3{font-size:22px;line-height:1.2}
em{font-style:italic;color:var(--gold-light)}
p{margin:0}
.lede{font-size:19px;color:var(--paper-dim);max-width:56ch}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

/* ---------- Scrubber bar (signature element) ---------- */
.scrubber{
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:var(--line); z-index:200;
}
.scrubber-fill{
  height:100%; width:0%;
  background:var(--gold-gradient);
  transition:width .08s linear;
}
.scrubber-time{
  position:fixed; top:10px; right:18px; z-index:200;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--gold-light);
  background:var(--bg-header); padding:3px 8px; border:1px solid var(--border-color); border-radius:var(--radius);
  backdrop-filter:blur(4px);
}
@media (max-width:720px){.scrubber-time{display:none}}

/* ---------- Header / Nav ---------- */
header{
  position:sticky; top:0; z-index:150;
  background:var(--bg-header); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-color);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{font-family:'Instrument Serif',serif;font-size:24px;letter-spacing:.01em}
.brand span{color:var(--gold)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{
  font-size:13px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  color:var(--paper-dim); text-transform:uppercase; position:relative; padding:6px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--paper)}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:12px 20px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary{background:var(--gold-gradient); color:var(--ink); font-weight:700;}
.btn-primary:hover{transform:translateY(-2px); opacity:0.95}
.btn-ghost{border-color:var(--border-color); color:var(--paper)}
.btn-ghost:hover{border-color:var(--gold)}
.nav-cta{display:none}
@media(min-width:900px){.nav-cta{display:inline-flex}}
.nav-toggle{display:none; background:none;border:1px solid var(--line);color:var(--paper);padding:8px 12px;border-radius:var(--radius)}
@media(max-width:899px){
  .nav-links{position:fixed;top:76px;left:0;right:0;background:var(--ink);flex-direction:column;align-items:flex-start;
    padding:24px 20px;border-bottom:1px solid var(--line); gap:18px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .2s var(--ease);}
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav-toggle{display:inline-flex}
}

/* Sticky mobile CTA */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:160;
  display:flex; gap:1px; background:var(--line);
  transform:translateY(0); transition:transform .3s var(--ease);
}
.sticky-cta a{flex:1; text-align:center; padding:16px 0; background:var(--bg-card); font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.sticky-cta a.primary{background:var(--gold-gradient); color:var(--ink); font-weight:700}
@media(min-width:900px){.sticky-cta{display:none}}

/* ---------- Hero ---------- */
.hero{padding:96px 0 64px; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin:18px 0 22px}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.hero-stats{display:flex; gap:32px; margin-top:48px; flex-wrap:wrap}
.stat .num{font-family:'Instrument Serif',serif; font-size:38px; color:var(--gold)}
.stat .lbl{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}

.hero-video{
  position:relative; border:1px solid var(--border-color); border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/10; background:var(--ink-soft);
}
.hero-video iframe{width:100%;height:100%;border:0}
.hero-video-frame{
  position:absolute; inset:0; pointer-events:none; border:1px solid var(--border-color);
}
.timecode-badge{
  position:absolute; bottom:10px; left:10px; z-index:2;
  font-family:'JetBrains Mono',monospace; font-size:11px; background:var(--bg-header);
  padding:4px 8px; border-radius:var(--radius); color:var(--gold); border:1px solid var(--border-color);
}

/* ---------- Timecode section divider (signature) ---------- */
.tc-divider{
  display:flex; align-items:center; gap:18px; margin:0 0 40px;
}
.tc-divider .tc{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--gold-light);
  border:1px solid var(--border-color); padding:6px 10px; border-radius:var(--radius); white-space:nowrap;
  background:rgba(212,175,55,0.05);
}
.tc-divider .rule{height:1px; background:var(--border-color); width:100%}

section{padding:88px 0}
section.tight{padding:64px 0}
.section-head{max-width:640px; margin-bottom:56px}
.section-head h2{margin-top:14px}
.section-head p{margin-top:16px}

/* ---------- Service cards ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-color); border:1px solid var(--border-color)}
@media(max-width:960px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.services-grid{grid-template-columns:1fr}}
.service-card{
  background:var(--bg-card); padding:36px 30px; transition:background .2s var(--ease);
  display:flex; flex-direction:column; gap:14px; min-height:220px;
}
.service-card:hover{background:var(--ink-soft)}
.service-card .tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em}
.service-card p{color:var(--paper-dim); font-size:15px}
.service-card a.more{margin-top:auto; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold-light); text-transform:uppercase; letter-spacing:.05em}

/* ---------- Process ---------- */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
.process-step .tc{color:var(--gold)}
.process-step h3{margin-top:14px}
.process-step p{margin-top:10px;color:var(--paper-dim);font-size:14.5px}

/* ---------- Portfolio filter + grid ---------- */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px}
.filter-btn{
  font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  padding:9px 16px; border:1px solid var(--border-color); border-radius:999px; background:transparent; color:var(--paper-dim); cursor:pointer;
  transition:all .18s var(--ease);
}
.filter-btn:hover{border-color:var(--gold); color:var(--paper)}
.filter-btn.active{background:var(--gold-gradient); border-color:var(--gold); color:var(--ink); font-weight:700}

.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:960px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr}}
.reel{border:1px solid var(--border-color); border-radius:var(--radius); overflow:hidden; background:var(--bg-card); transition:transform .25s var(--ease), border-color .25s var(--ease);}
.reel:hover{transform:translateY(-4px); border-color:var(--gold)}
.reel-thumb{position:relative; aspect-ratio:16/9; overflow:hidden; background:#000}
.reel-thumb img{width:100%;height:100%;object-fit:cover; transition:transform .4s var(--ease)}
.reel:hover .reel-thumb img{transform:scale(1.05)}
.reel-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.reel-play svg{width:46px;height:46px; opacity:.9; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.reel-tag{position:absolute; top:10px; left:10px; font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; background:var(--bg-header); padding:4px 8px; border-radius:var(--radius); color:var(--gold); border:1px solid var(--border-color)}
.reel-body{padding:18px 18px 20px}
.reel-body h3{font-size:18px}
.reel-metric{margin-top:10px; display:flex; gap:8px; align-items:baseline}
.reel-metric .m-num{font-family:'JetBrains Mono',monospace; color:var(--gold); font-size:13px; font-weight:700}
.reel-metric .m-lbl{font-family:'JetBrains Mono',monospace; color:var(--muted); font-size:11px; text-transform:uppercase}

/* ---------- Testimonials ---------- */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-color); border:1px solid var(--border-color)}
@media(max-width:900px){.testimonials{grid-template-columns:1fr}}
.testimonial{background:var(--bg-card); padding:32px 28px; display:flex; flex-direction:column; gap:18px}
.testimonial blockquote{margin:0; font-family:'Instrument Serif',serif; font-style:italic; font-size:20px; line-height:1.4}
.testimonial .who{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.testimonial .stars{color:var(--gold); letter-spacing:2px}

/* ---------- Logos strip ---------- */
.logo-strip{display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:space-between; opacity:.75}
.logo-strip span{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light)}

/* ---------- Creativity engine ---------- */
.engine{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-color); border:1px solid var(--border-color)}
@media(max-width:800px){.engine{grid-template-columns:1fr}}
.engine-card{background:var(--bg-card); padding:40px}
.engine-card .tc{color:var(--gold); margin-bottom:16px; display:inline-block}
.engine-card p{color:var(--paper-dim); margin-top:12px}

/* ---------- Blog teaser ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}}
.blog-card{border:1px solid var(--border-color); padding:26px; border-radius:var(--radius); background:var(--bg-card); transition:border-color .2s var(--ease)}
.blog-card:hover{border-color:var(--gold)}
.blog-card .tc{color:var(--gold-light); font-size:11px}
.blog-card h3{margin-top:12px}
.blog-card p{color:var(--paper-dim); margin-top:10px; font-size:14.5px}
.blog-card .read{margin-top:16px; display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold); text-transform:uppercase}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--border-color); padding:22px 0}
.faq-item:last-child{border-bottom:1px solid var(--border-color)}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:20px}
.faq-q h3{font-size:19px}
.faq-q .plus{font-family:'JetBrains Mono',monospace; color:var(--gold); font-size:20px; transition:transform .2s var(--ease)}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease)}
.faq-a p{color:var(--paper-dim); padding-top:14px; max-width:70ch}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(135deg,var(--ink-soft),var(--ink)); border:1px solid var(--border-color); border-radius:var(--radius);
  padding:56px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.08);
}
.cta-banner h2{max-width:16ch}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border-color); padding:64px 0 32px; background:var(--bg-card)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-light); margin-bottom:16px}
.footer-col ul li{margin-bottom:10px}
.footer-col a:hover{color:var(--gold)}
.footer-social{display:flex; gap:14px; margin-top:6px}
.footer-social a{width:36px;height:36px;border:1px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center; transition:all .2s var(--ease)}
.footer-social a:hover{border-color:var(--gold); color:var(--gold)}
.footer-bottom{margin-top:56px; padding-top:24px; border-top:1px solid var(--border-color); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:translateY(0)}

/* Breadcrumb (service/blog pages) */
.breadcrumb{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); padding:20px 0 0}
.breadcrumb a:hover{color:var(--gold)}