/* ==========================================================================
   OBSDNHSE -- Main Stylesheet (Dashboard Direction)
   ========================================================================== */

:root {
  --bg: #08080b;
  --panel: #0f0f14;
  --panel-2: #141420;
  --line: rgba(255,255,255,0.09);
  --ink: #f1f0f5;
  --ink-dim: #9491a3;
  --ink-faint: #58566a;
  --violet: #a78bfa;
  --violet-2: #7c5cf0;
  --blue: #38bdf8;
  --pink: #ec4899;

  --max-width: 1280px;
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', Consolas, monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

body::before {
  content:"";
  position: fixed; inset:0; z-index:998; pointer-events:none; opacity:0.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.mono { font-family: var(--mono); }
.wrap { max-width: var(--max-width); margin:0 auto; padding:0 40px; position:relative; z-index:2; }

/* ---------- Nav ---------- */
.nav-shell { position: fixed; top:20px; left:0; right:0; z-index:300; display:flex; justify-content:center; padding:0 24px; pointer-events:none; }
.nav-shell .nav-pill { pointer-events:auto; }
.nav-pill {
  width:100%; max-width:1200px; display:flex; align-items:center; justify-content:space-between;
  background: rgba(15,15,20,0.65); border:1px solid var(--line); backdrop-filter: blur(16px);
  border-radius:999px; padding:8px 10px 8px 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.nav-pill img { height:34px; }
.nav-pill nav ul { list-style:none; display:flex; gap:32px; }
.nav-pill nav a { font-size:13px; color:var(--ink-dim); font-weight:500; transition:color .2s ease; }
.nav-pill nav a:hover, .nav-pill nav a.current { color:var(--ink); }
.nav-cta { background: linear-gradient(120deg,var(--blue),var(--violet),var(--pink)); color:#08080b; font-size:12.5px; font-weight:600; padding:11px 22px; border-radius:999px; display:inline-block; }
.menu-toggle { display:none; background:none; border:none; cursor:pointer; width:24px; height:16px; position:relative; }
.menu-toggle span { position:absolute; left:0; width:100%; height:2px; background:var(--ink); transition: all .2s ease; }
.menu-toggle span:nth-child(1) { top:0; }
.menu-toggle span:nth-child(2) { top:7px; width:70%; }
.menu-toggle span:nth-child(3) { top:14px; }

/* ---------- Video-style hero header (front page) ---------- */
.header { position:relative; height:92vh; min-height:660px; overflow:hidden; }
.header-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 900px 600px at 20% 20%, rgba(124,92,240,0.35), transparent 60%),
    radial-gradient(ellipse 800px 700px at 85% 30%, rgba(56,189,248,0.22), transparent 60%),
    radial-gradient(ellipse 700px 600px at 50% 90%, rgba(244,114,182,0.14), transparent 60%),
    linear-gradient(180deg, #0a0a10, #08080b);
  background-size: 160% 160%, 150% 150%, 140% 140%, 100% 100%;
  animation: bgdrift 22s ease-in-out infinite alternate;
}
@keyframes bgdrift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  100% { background-position: 40% 30%, 60% 40%, 30% 70%, 0 0; }
}
.particles { position:absolute; inset:0; z-index:1; }
.particles span {
  position:absolute; width:3px; height:3px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 8px var(--pink); opacity:0.6; animation: drift linear infinite;
}
@keyframes drift {
  from { transform: translateY(0) translateX(0); opacity:0; }
  10% { opacity:0.8; }
  90% { opacity:0.5; }
  to { transform: translateY(-120vh) translateX(30px); opacity:0; }
}
.header-vignette { position:absolute; inset:0; z-index:2; background: linear-gradient(180deg, rgba(8,8,11,0.2) 0%, rgba(8,8,11,0.1) 40%, rgba(8,8,11,0.95) 100%); }
.header-content { position:relative; z-index:10; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:60px; }
.hero-logo { display:block; width:auto; max-width:min(100%, 1000px); height:clamp(80px, 23vh, 260px); margin:0 auto 30px; }
.eyebrow { font-family:var(--mono); font-size:12px; color:var(--ink-dim); letter-spacing:0.1em; margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--pink); box-shadow:0 0 10px var(--pink); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.header-content h1 { font-size: clamp(38px, 6vw, 88px); font-weight:600; line-height:1.02; letter-spacing:-0.015em; max-width:900px; text-transform:uppercase; }
.header-content h1 .g { background:linear-gradient(100deg,var(--blue),var(--violet),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.header-content p { margin-top:28px; font-size:17px; color:var(--ink-dim); max-width:480px; line-height:1.7; }
.header-actions { margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }
.scroll-cue { position:absolute; bottom:30px; left:0; right:0; display:flex; justify-content:center; z-index:10; }
.scroll-cue span { font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-cue .ln { width:1px; height:34px; background: linear-gradient(180deg, var(--pink), transparent); animation:scrolldown 1.8s ease-in-out infinite; }
@keyframes scrolldown { 0% { transform:scaleY(0); transform-origin:top; } 50% { transform:scaleY(1); transform-origin:top; } 51% { transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:999px; font-size:13px; font-weight:600; transition: all .25s ease; }
.btn-solid { background:linear-gradient(120deg,var(--blue),var(--violet),var(--pink)); color:#08080b; }
.btn-solid:hover { filter:brightness(1.1); transform:translateY(-2px); }
.btn-ghost { border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover { background:rgba(255,255,255,0.05); }

/* ---------- Page header (inner pages) ---------- */
.page-header { position:relative; padding: 150px 0 130px; overflow:hidden; }
.page-header .header-bg { opacity:0.7; }
.page-header::after { content:''; position:absolute; left:0; right:0; bottom:0; height:160px; background:linear-gradient(180deg, transparent, var(--bg) 85%); pointer-events:none; z-index:2; }
.page-header .wrap { position:relative; z-index:5; }
.page-header h1 { font-size: clamp(32px, 5vw, 58px); font-weight:600; text-transform:uppercase; letter-spacing:-0.01em; max-width:760px; }
.page-header p.lede { margin-top:22px; font-size:16px; color:var(--ink-dim); max-width:560px; line-height:1.7; }

/* ---------- Live stats bar ---------- */
.livebar { display:grid; grid-template-columns: repeat(5,1fr); gap:14px; margin: -70px 0 40px; position:relative; z-index:15; }
.lstat { background: rgba(15,15,20,0.85); backdrop-filter: blur(12px); border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; opacity:0; animation: rise .6s cubic-bezier(.16,1,.3,1) forwards; }
.lstat:nth-child(1) { animation-delay:.05s; } .lstat:nth-child(2) { animation-delay:.12s; } .lstat:nth-child(3) { animation-delay:.19s; } .lstat:nth-child(4) { animation-delay:.26s; } .lstat:nth-child(5) { animation-delay:.33s; }
.lstat .lv { font-family:var(--mono); font-size:22px; font-weight:600; background:linear-gradient(100deg,var(--blue),var(--violet),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lstat .ll { font-family:var(--mono); font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); }
.lstat.clock { flex-direction:column-reverse; }
.lstat.clock .lv { background:none; -webkit-text-fill-color:initial; color:var(--ink); }

@keyframes rise { to { opacity:1; transform:translateY(0) scale(1); } }

/* ---------- Section heads ---------- */
section { padding: 90px 0; position:relative; z-index:2; }
.section-head { margin-bottom:40px; }
.section-head .ptag { font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:0.08em; margin-bottom:12px; }
.section-head .ptag b { color:var(--violet); }
.section-head h2 { font-size:clamp(26px,3vw,38px); font-weight:600; text-transform:uppercase; letter-spacing:-0.01em; }
.section-head p { color:var(--ink-dim); margin-top:14px; max-width:520px; font-size:14.5px; line-height:1.7; }

/* ---------- Panels (module cards) ---------- */
.modules { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.panel {
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:18px; padding:30px;
  position:relative; overflow:hidden;
  opacity:0; transform: translateY(24px) scale(0.98);
  animation: rise .7s cubic-bezier(.16,1,.3,1) forwards;
  transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.panel:hover { border-color: rgba(167,139,250,0.4); box-shadow: 0 20px 60px rgba(124,92,240,0.15); }
.modules .panel:nth-child(1) { animation-delay:.05s; } .modules .panel:nth-child(2) { animation-delay:.12s; }
.modules .panel:nth-child(3) { animation-delay:.19s; } .modules .panel:nth-child(4) { animation-delay:.26s; }
.modules .panel:nth-child(5) { animation-delay:.33s; } .modules .panel:nth-child(6) { animation-delay:.4s; }
.panel .ptag { font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:0.06em; margin-bottom:8px; }
.panel .ptag b { color:var(--violet); }
.panel h3 { font-size:19px; font-weight:600; letter-spacing:0.01em; text-transform:uppercase; margin-bottom:6px; }
.panel .desc { color:var(--ink-dim); font-size:13.5px; line-height:1.7; max-width:420px; }
.panel.span-2 { grid-column: span 2; }

.p-caps ul { list-style:none; margin-top:20px; display:flex; flex-direction:column; }
.p-caps li { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink-dim); transition: color .2s ease; }
.p-caps li:hover { color:var(--ink); }
.p-caps li span.plus { color:var(--ink-faint); font-family:var(--mono); }

.p-approach { display:grid; grid-template-columns: 1fr 200px; align-items:center; gap:20px; }
.orbit { position:relative; width:190px; height:190px; margin:0 auto; }
.orbit .ring { position:absolute; inset:0; border:1px dashed var(--line); border-radius:50%; animation: spin 18s linear infinite; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.orbit .comet { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 12px var(--pink), 0 0 24px var(--pink); offset-path: circle(95px at 95px 95px); animation: travel 4.5s linear infinite; }
@keyframes travel { from { offset-distance:0%; } to { offset-distance:100%; } }
.orbit .core { position:absolute; inset:35px; border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(167,139,250,0.35), rgba(236,72,153,0.12) 60%, transparent); border:1px solid var(--line); animation: pulse 3.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 rgba(167,139,250,0); } 50% { box-shadow: 0 0 30px rgba(167,139,250,0.35); } }
.orbit .node { position:absolute; font-family:var(--mono); font-size:9px; letter-spacing:0.06em; color:var(--ink-dim); display:flex; align-items:center; gap:6px; }
.orbit .node .d { width:7px; height:7px; border-radius:50%; }
.orbit .n1 { top:-6px; left:50%; transform:translateX(-50%); }
.orbit .n1 .d { background:var(--pink); box-shadow:0 0 8px var(--pink); }
.orbit .n2 { bottom:14px; left:-6px; }
.orbit .n2 .d { background:var(--violet); box-shadow:0 0 8px var(--violet); }
.orbit .n3 { bottom:14px; right:-14px; }
.orbit .n3 .d { background:var(--pink); box-shadow:0 0 8px var(--pink); }

.p-chart svg { margin-top:16px; }
.chart-labels { display:flex; justify-content:space-between; margin-top:8px; }
.chart-labels span { font-family:var(--mono); font-size:9px; color:var(--ink-faint); text-transform:uppercase; }

.p-work .art { margin-top:18px; height:170px; border-radius:14px; position:relative; overflow:hidden;
  background: linear-gradient(120deg, #1a1330, #0c1830 60%, #08080b); background-size:220% 220%; animation: gradShift 9s ease-in-out infinite; }
@keyframes gradShift { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.p-work .art::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(70deg, transparent 0 22px, rgba(167,139,250,0.10) 22px 23px), repeating-linear-gradient(-20deg, transparent 0 30px, rgba(56,189,248,0.08) 30px 31px); }
.p-work .dots { display:flex; gap:6px; margin-top:14px; }
.p-work .dots span { width:6px; height:6px; border-radius:50%; background:var(--line); }
.p-work .dots span.on { background:var(--violet); }

.tech-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; }
.tech-item { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px; border:1px solid var(--line); border-radius:12px; transition: border-color .2s ease; }
.tech-item:hover { border-color: var(--pink); }
.tech-item .badge { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.tech-item span.lbl { font-family:var(--mono); font-size:8.5px; color:var(--ink-faint); letter-spacing:0.05em; }

.tagrow { display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.tagrow a { flex:1; text-align:center; padding:16px 10px; background:var(--panel); font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); transition: all .2s ease; }
.tagrow a:hover, .tagrow a.on { color:var(--pink); background: var(--panel-2); }

/* ---------- Services tiers (Services page) ---------- */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tier { border:1px solid var(--line); border-radius:16px; padding:34px; display:flex; flex-direction:column; background: linear-gradient(160deg, var(--panel), var(--panel-2)); transition: all .3s ease; }
.tier:hover { border-color: var(--violet); transform: translateY(-4px); }
.tier .kicker { font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:16px; }
.tier h3 { font-size:21px; font-weight:600; text-transform:uppercase; margin-bottom:14px; }
.tier p { color:var(--ink-dim); font-size:14px; line-height:1.7; flex:1; margin-bottom:24px; }
.tier .cta-row { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:20px; }
.tier .price { font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); }
.tier .price b { color:#fff; font-size:15px; }
.tier .go { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition: all .25s ease; }
.tier:hover .go { background: linear-gradient(120deg,var(--blue),var(--violet),var(--pink)); color:#08080b; border-color:transparent; }

/* ---------- Process steps (Services page) ---------- */
.process-list { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.pstep { background:var(--panel); padding:34px 28px; }
.pstep .n { font-family:var(--mono); font-size:13px; color:var(--violet); margin-bottom:20px; display:block; }
.pstep h3 { font-size:17px; font-weight:600; margin-bottom:10px; text-transform:uppercase; }
.pstep p { color:var(--ink-dim); font-size:13.5px; line-height:1.7; }

/* ---------- FAQ accordion ---------- */
.faq-list { display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.faq-item { background:var(--panel); }
.faq-item summary { cursor:pointer; list-style:none; padding:22px 28px; font-size:15px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-family:var(--mono); font-size:18px; color:var(--ink-faint); transition: transform .2s ease; flex-shrink:0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color:var(--violet); }
.faq-item p { padding:0 28px 24px; color:var(--ink-dim); font-size:14px; line-height:1.7; max-width:640px; }

/* ---------- Work grid (Work page) ---------- */
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.work-tile { border:1px solid var(--line); border-radius:16px; overflow:hidden; background: var(--panel); transition: border-color .25s ease; }
.work-tile:hover { border-color: var(--pink); }
.work-thumb { aspect-ratio:16/10; background: linear-gradient(120deg, #1a1330, #0c1830 60%, #08080b); background-size:220% 220%; animation: gradShift 9s ease-in-out infinite; position:relative; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; }
.work-thumb::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(70deg, transparent 0 22px, rgba(167,139,250,0.10) 22px 23px); }
.work-info { padding:22px 26px; display:flex; justify-content:space-between; align-items:center; }
.work-info .cat { font-family:var(--mono); font-size:11px; color:var(--pink); text-transform:uppercase; letter-spacing:0.06em; }
.work-info h3 { font-size:17px; font-weight:600; margin-top:6px; text-transform:uppercase; }

/* ---------- Values grid (About page) ---------- */
.values-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact-info h3 { font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:10px; font-family:var(--mono); }
.contact-info .info-block { margin-bottom:30px; }
.contact-info a { color:var(--ink); font-weight:600; }
.contact-info a:hover { color:var(--pink); }
.contact-info p { color:var(--ink-dim); font-size:14.5px; line-height:1.7; }
.contact-form-wrap { background: linear-gradient(160deg, var(--panel), var(--panel-2)); border-radius:18px; padding:36px; border:1px solid var(--line); }
.form-row { margin-bottom:18px; }
.form-row label { display:block; font-size:12.5px; font-weight:600; margin-bottom:8px; color:var(--ink-dim); font-family:var(--mono); text-transform:uppercase; letter-spacing:0.04em; }
.form-row input, .form-row textarea, .form-row select {
  width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--sans); font-size:14.5px; background: rgba(255,255,255,0.02); color:var(--ink);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline:none; border-color:var(--violet); }
.form-row textarea { min-height:120px; resize:vertical; }
.form-note { font-size:12.5px; color:var(--ink-faint); margin-top:14px; padding:14px 16px; background: rgba(255,255,255,0.03); border-radius:10px; }

/* ---------- Footer ---------- */
footer.site-footer { padding: 60px 0 40px; border-top:1px solid var(--line); margin-top:40px; }
.footer-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
footer.site-footer img { height:78px; }
footer.site-footer .fr { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.footer-links { display:flex; gap:28px; }
.footer-links a { color:var(--ink-dim); font-size:12.5px; }
.footer-links a:hover { color:var(--pink); }

/* ---------- Cursor spotlight ---------- */
.spotlight { position:fixed; inset:0; z-index:400; pointer-events:none; transition: background .1s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-pill { position:relative; }
  .nav-pill nav { display:none; }
  .nav-pill nav.open {
    display:block;
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    right:0;
    background:rgba(10,10,14,0.98);
    backdrop-filter:blur(16px);
    border:1px solid var(--line);
    border-radius:20px;
    padding:10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
  .nav-pill nav.open ul { flex-direction:column; gap:2px; }
  .nav-pill nav.open ul a { display:block; padding:14px 16px; border-radius:12px; }
  .nav-pill nav.open ul a:hover, .nav-pill nav.open ul a.current { background:rgba(255,255,255,0.06); }
  .menu-toggle { display:block; }
  .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity:0; }
  .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width:100%; }
  .livebar { grid-template-columns: repeat(2,1fr); margin-top:20px; }
  .modules, .tiers, .work-grid, .values-grid, .contact-grid, .process-list { grid-template-columns: 1fr; }
  .panel.span-2 { grid-column: span 1; }
  .p-approach { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns:repeat(2,1fr); }
  .tagrow { flex-direction:column; }
  .footer-row { flex-direction:column; align-items:flex-start; }
}