/* Clipping Economy — Direction A "Console" design system (orange accent) */
:root{
  --bg:#0b0d11; --bg2:#0e1117; --bg3:#11141a; --card:#161a21; --card2:#1b2029;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15); --line3:rgba(255,255,255,.22);
  --txt:#eef1f5; --txt2:#c5ccd6; --dim:#8b93a1; --dim2:#5f6775;
  --acc:#ef4014; --acc-ink:#fff;
  --acc-d:color-mix(in srgb, var(--acc) 74%, #fff);
  --acc-soft:color-mix(in srgb, var(--acc) 13%, transparent);
  --acc-line:color-mix(in srgb, var(--acc) 42%, transparent);
  --display:'Space Grotesk',sans-serif; --mono:'JetBrains Mono',monospace;
  --maxw:1240px; --pad:48px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--txt); font-family:var(--display);
  -webkit-font-smoothing:antialiased; font-feature-settings:"ss01"; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--acc); color:#fff;}
.mono{font-family:var(--mono);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}

/* ── logo tile (real brand logos w/ letter fallback) ── */
.logo-tile{position:relative; overflow:hidden; background:#fff; display:grid; place-items:center;}
.logo-tile img{width:100%; height:100%; object-fit:contain; padding:18%; display:block;}
.logo-tile .ltr{display:none; line-height:1;}
.logo-tile.noimg{background:var(--lc,#5f6775);}
.logo-tile.noimg img{display:none;}
.logo-tile.noimg .ltr{display:block; color:#fff;}

/* reveal */
.rev{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.rev.in{opacity:1; transform:none;}
.rev[data-d="1"]{transition-delay:.07s;} .rev[data-d="2"]{transition-delay:.14s;}
.rev[data-d="3"]{transition-delay:.21s;} .rev[data-d="4"]{transition-delay:.28s;}
@media (prefers-reduced-motion:reduce){.rev{opacity:1; transform:none; transition:none;}}

/* ── section label (mono kicker) ── */
.kick{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; color:var(--acc-d); text-transform:uppercase;}
.kick .sq{width:7px; height:7px; background:var(--acc); border-radius:2px;}
.sec-h{font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.05;
  font-size:42px; margin:18px 0 0;}
.sec-sub{font-size:17px; line-height:1.55; color:var(--dim); max-width:560px; margin:16px 0 0;}

/* ── NAV ── */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(11,13,17,.72); border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:16px var(--pad); display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px;}
.mark{width:34px; height:34px; border:1.5px solid var(--acc); border-radius:8px; display:grid; place-items:center; position:relative; flex-shrink:0;}
.mark::before{content:""; position:absolute; left:6px; top:6px; width:7px; height:7px; border-left:1.5px solid var(--acc); border-top:1.5px solid var(--acc);}
.mark::after{content:""; position:absolute; right:6px; bottom:6px; width:7px; height:7px; border-right:1.5px solid var(--acc); border-bottom:1.5px solid var(--acc);}
.mark i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--acc); margin-left:2px;}
.bname{font-weight:600; font-size:16px; letter-spacing:-.01em; line-height:1;}
.bsub{font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--dim2); margin-top:5px; text-transform:uppercase;}
.nlinks{display:flex; gap:30px; align-items:center;}
.nlinks a{font-size:14px; color:var(--dim); transition:color .15s;}
.nlinks a:hover{color:var(--txt);}
.nav-r{display:flex; align-items:center; gap:14px;}
.cmd{display:flex; align-items:center; gap:10px; height:36px; padding:0 12px; border:1px solid var(--line2); border-radius:8px; color:var(--dim); font-size:13px; background:var(--bg3);}
.cmd .k{font-family:var(--mono); font-size:11px; color:var(--dim2); border:1px solid var(--line2); border-radius:4px; padding:1px 5px;}
.btn{height:38px; padding:0 18px; border-radius:9px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent; transition:transform .12s, box-shadow .2s, border-color .15s, background .15s; white-space:nowrap;}
.btn-acc{background:var(--acc); color:var(--acc-ink); border-color:var(--acc);}
.btn-acc:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(239,64,20,.28);}
.btn-ghost{background:transparent; color:var(--txt); border-color:var(--line2);}
.btn-ghost:hover{border-color:var(--dim);}
.btn-lg{height:50px; padding:0 24px; font-size:15px; border-radius:10px;}

/* ── HERO ── */
.hero{position:relative; overflow:hidden;}
.hero .grid-bg{position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.55;
  -webkit-mask-image:radial-gradient(125% 95% at 72% 0%, #000 32%, transparent 80%);
          mask-image:radial-gradient(125% 95% at 72% 0%, #000 32%, transparent 80%);}
.hero .glow{position:absolute; top:-240px; right:-140px; width:660px; height:660px; z-index:0;
  background:radial-gradient(circle, rgba(239,64,20,.16), transparent 65%); pointer-events:none;}
.hero-in{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:78px var(--pad) 84px;
  display:grid; grid-template-columns:1.02fr 1fr; gap:54px; align-items:center;}
.h-dot{width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 rgba(239,64,20,.5); animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,64,20,.45)}70%{box-shadow:0 0 0 9px rgba(239,64,20,0)}100%{box-shadow:0 0 0 0 rgba(239,64,20,0)}}
.h1{font-size:64px; line-height:1.0; letter-spacing:-.032em; font-weight:600; margin:22px 0 0;}
.h1 .hl{color:var(--acc);}
.h-deck{font-size:18px; line-height:1.55; color:var(--dim); max-width:466px; margin-top:22px;}
.h-cta{display:flex; gap:12px; margin-top:32px;}
.h-stats{display:flex; gap:36px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line);}
.h-stats .n{font-size:27px; font-weight:600; letter-spacing:-.02em;}
.h-stats .n b{color:var(--acc); font-weight:600;}
.h-stats .l{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim2); text-transform:uppercase; margin-top:6px;}

/* console window */
.win{border:1px solid var(--line2); border-radius:14px; background:linear-gradient(180deg,#13171e,#0f1217); overflow:hidden; box-shadow:0 34px 90px rgba(0,0,0,.55);}
.win-bar{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);}
.win-bar .dots{display:flex; gap:6px;}
.win-bar .dots i{width:10px; height:10px; border-radius:50%; background:#2b313b;}
.win-title{font-family:var(--mono); font-size:11px; color:var(--dim2); margin-left:8px;}
.win-stat{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--acc-d); display:flex; align-items:center; gap:6px;}
.win-body{padding:18px;}
.src-lbl{font-family:var(--mono); font-size:10px; color:var(--dim2); letter-spacing:.08em; margin-bottom:7px;}
.timeline{position:relative; height:42px; border:1px solid var(--line); border-radius:7px; background:#0c0f14; overflow:hidden; display:flex; align-items:center; padding:0 4px; gap:2px;}
.timeline i{flex:1; background:#2d343f; border-radius:1px;}
.sel{position:absolute; top:-1px; bottom:-1px; border:1.5px solid var(--acc); border-radius:6px; background:var(--acc-soft); left:30%; width:22%;}
.sel::before,.sel::after{content:""; position:absolute; top:50%; transform:translateY(-50%); width:3px; height:16px; background:var(--acc); border-radius:2px;}
.sel::before{left:-2px;} .sel::after{right:-2px;}
.scan{position:absolute; top:0; bottom:0; width:2px; background:var(--acc); opacity:.85; box-shadow:0 0 12px 2px rgba(239,64,20,.6); left:0; animation:scan 5s ease-in-out infinite;}
@keyframes scan{0%,100%{left:6%}50%{left:90%}}
.fan{height:26px; position:relative; margin:3px 0;}
.fan svg{position:absolute; inset:0; width:100%; height:100%;}
.clip-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.clip{position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; aspect-ratio:9/16;
  background:repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.03) 6px 7px), #0e1218;
  display:flex; flex-direction:column; justify-content:flex-end; padding:8px; transition:transform .18s, border-color .18s;}
.clip:hover{transform:translateY(-3px); border-color:var(--acc);}
.clip.live{border-color:var(--acc);}
.clip .play{position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); width:26px; height:26px; border-radius:50%; border:1.5px solid var(--dim); display:grid; place-items:center; background:rgba(12,15,20,.5);}
.clip .play i{width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--dim); margin-left:1px;}
.clip.live .play{border-color:var(--acc);} .clip.live .play i{border-left-color:var(--acc);}
.clip .caps{display:flex; flex-direction:column; gap:3px; margin-bottom:7px;}
.clip .caps b{height:3px; border-radius:2px; background:var(--dim2); display:block;}
.clip .caps b:nth-child(1){width:86%;} .clip .caps b:nth-child(2){width:54%; background:var(--acc); opacity:.85;}
.clip .dur{font-family:var(--mono); font-size:8.5px; color:var(--dim); display:flex; justify-content:space-between;}
.clip .badge{position:absolute; top:7px; left:7px; font-family:var(--mono); font-size:7.5px; letter-spacing:.06em; color:var(--acc); border:1px solid var(--acc-line); border-radius:3px; padding:1px 4px; background:var(--acc-soft);}
.win-foot{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10.5px; color:var(--dim2);}
.win-foot b{color:var(--acc-d);}

/* ── EXPLAINER ── */
.explain{position:relative; border-top:1px solid var(--line); background:var(--bg2); padding:84px 0;}
.def{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:stretch;}
.def-l{display:flex; flex-direction:column; gap:16px;}
.def-l .kick{align-self:flex-start;}
.def-card{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:40px 42px; position:relative; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:24px;}
.def-card::before{content:"// definition"; position:absolute; top:16px; right:20px; font-family:var(--mono); font-size:10.5px; color:var(--dim2); letter-spacing:.08em;}
.def-term{display:flex; align-items:baseline; gap:14px; margin-bottom:8px;}
.def-term h3{font-size:38px; font-weight:600; letter-spacing:-.02em; margin:0;}
.def-term .pos{font-family:var(--mono); font-size:14px; color:var(--acc-d); font-style:italic;}
.def-pron{font-family:var(--mono); font-size:13px; color:var(--dim2); margin-bottom:0;}
.def-body{font-size:20px; line-height:1.75; color:var(--txt2); margin:0;}
.def-body .mk{color:var(--acc-d);}
.def-eg{margin-top:0; padding-top:22px; border-top:1px dashed var(--line2); font-size:15px; color:var(--dim); line-height:1.6;}
.def-eg b{color:var(--txt2); font-weight:500;}

/* pipeline */
.pipe{margin-top:14px;}
.pipe-step{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); position:relative;}
.pipe-step:last-child{border-bottom:none;}
.pipe-num{flex:0 0 auto; width:38px; height:38px; border-radius:9px; border:1px solid var(--line2); display:grid; place-items:center; font-family:var(--mono); font-size:13px; color:var(--acc-d); background:var(--bg3);}
.pipe-step:hover .pipe-num{border-color:var(--acc); color:var(--acc);}
.pipe-tx h4{font-size:18px; font-weight:600; margin:2px 0 4px; letter-spacing:-.01em;}
.pipe-tx p{font-size:14.5px; line-height:1.5; color:var(--dim); margin:0;}
.pipe-tag{margin-left:auto; align-self:center; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--dim2); text-transform:uppercase; border:1px solid var(--line); border-radius:5px; padding:3px 8px; white-space:nowrap;}

/* ── TOOLS ── */
.tools{padding:88px 0; border-top:1px solid var(--line);}
.sec-top{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:34px 0 24px;}
.chip{font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--dim); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 14px; cursor:pointer; transition:all .15s; white-space:nowrap;}
.chip:hover{color:var(--txt); border-color:var(--line3);}
.chip.on{background:var(--acc); color:var(--acc-ink); border-color:var(--acc);}
.chip .ct{opacity:.6; margin-left:6px;}
.tool-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.tcard{border:1px solid var(--line); border-radius:13px; background:var(--card); padding:20px; transition:transform .18s, border-color .18s, background .18s; cursor:pointer; display:flex; flex-direction:column;}
.tcard:hover{transform:translateY(-4px); border-color:var(--line3); background:var(--card2);}
.tcard-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.tlogo{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:18px; color:#fff; letter-spacing:-.02em;}
.trate{font-family:var(--mono); font-size:12px; color:var(--acc-d); display:flex; align-items:center; gap:4px;}
.tcard h4{font-size:17px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em;}
.tcat{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--dim2); text-transform:uppercase;}
.tcard p{font-size:13.5px; line-height:1.5; color:var(--dim); margin:13px 0 16px; flex:1;}
.tmeta{display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--dim2);}
.tmeta .price b{color:var(--txt2); font-weight:500;}
.tmeta .arr{color:var(--acc); opacity:0; transform:translateX(-4px); transition:all .18s;}
.tcard:hover .tmeta .arr{opacity:1; transform:none;}
.tpill{font-size:9.5px; padding:2px 7px; border-radius:5px; background:var(--acc-soft); color:var(--acc-d); border:1px solid var(--acc-line); letter-spacing:.04em;}

/* ── AGENCIES ── */
.agencies{padding:88px 0; border-top:1px solid var(--line); background:var(--bg2);}
.atable{margin-top:34px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--card);}
.arow{display:grid; grid-template-columns:2.4fr 1.7fr 1.3fr 40px; align-items:center; gap:18px; padding:18px 22px; border-bottom:1px solid var(--line); transition:background .15s; cursor:pointer; color:inherit; text-decoration:none;}
.arow:last-child{border-bottom:none;}
.arow:hover{background:var(--card2);}
.arow.head{background:var(--bg3); padding:13px 22px;}
.arow.head span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim2); text-transform:uppercase;}
.aname{display:flex; align-items:center; gap:13px;}
.amark{width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:15px; color:#fff; flex-shrink:0;}
.aname .nm{font-size:16px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;}
.aname > div{min-width:0;}
.aname .lo{font-family:var(--mono); font-size:11px; color:var(--dim2); margin-top:3px;}
.afocus{font-size:14px; color:var(--dim);}
.atier{font-family:var(--mono); font-size:12.5px; color:var(--txt2);}
.aclients{font-family:var(--mono); font-size:12.5px; color:var(--dim);}
.aarr{color:var(--dim2); transition:color .15s, transform .15s; justify-self:end;}
.arow:hover .aarr{color:var(--acc); transform:translateX(3px);}

/* ── PLAYBOOKS ── */
.playbooks{padding:88px 0; border-top:1px solid var(--line);}
.pb-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:34px;}
.pb{position:relative; border:1px solid var(--line); border-radius:14px; background:var(--card); padding:28px 30px; overflow:hidden; transition:transform .18s, border-color .18s; cursor:pointer; display:flex; gap:22px; align-items:flex-start;}
.pb:hover{transform:translateY(-4px); border-color:var(--line3);}
.pb-no{font-family:var(--mono); font-size:13px; color:var(--acc); border:1px solid var(--acc-line); background:var(--acc-soft); border-radius:8px; padding:8px 11px; flex-shrink:0;}
.pb-tx h4{font-size:20px; font-weight:600; margin:2px 0 8px; letter-spacing:-.015em; line-height:1.2;}
.pb-tx p{font-size:14.5px; line-height:1.55; color:var(--dim); margin:0 0 16px;}
.pb-meta{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; color:var(--dim2);}
.pb-meta span{white-space:nowrap;}
.pb-meta .rt{color:var(--acc-d);}
.pb-meta .go{margin-left:auto; color:var(--dim); display:flex; align-items:center; gap:6px; transition:color .15s;}
.pb:hover .pb-meta .go{color:var(--acc);}

/* ── NEWSLETTER ── */
.news{padding:88px 0; border-top:1px solid var(--line); background:var(--bg2);}
.news-card{position:relative; border:1px solid var(--line2); border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#13171e,#0f1217); padding:52px 56px;}
.news-card .glow2{position:absolute; top:-180px; left:-80px; width:480px; height:480px; background:radial-gradient(circle, rgba(239,64,20,.14), transparent 65%);}
.news-in{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 1fr; gap:54px; align-items:center;}
.news h3{font-size:38px; font-weight:600; letter-spacing:-.025em; line-height:1.07; margin:16px 0 0;}
.news p{font-size:16.5px; line-height:1.55; color:var(--dim); margin:16px 0 0; max-width:430px;}
.news-stats{display:flex; gap:28px; margin-top:26px; font-family:var(--mono); font-size:12px; color:var(--dim2);}
.news-stats b{color:var(--txt2); font-weight:500;}
.term{border:1px solid var(--line2); border-radius:12px; background:#0b0e13; overflow:hidden;}
.term-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line);}
.term-bar i{width:9px; height:9px; border-radius:50%; background:#2b313b;}
.term-bar span{font-family:var(--mono); font-size:10.5px; color:var(--dim2); margin-left:6px;}
.term-body{padding:22px;}
.term-line{font-family:var(--mono); font-size:13px; color:var(--dim); margin-bottom:16px;}
.term-line .pr{color:var(--acc);}
.term-line .cm{color:var(--txt);}
.nform{display:flex; flex-direction:column; gap:11px;}
.ninput{height:48px; border-radius:9px; border:1px solid var(--line2); background:var(--bg3); color:var(--txt); font-family:var(--mono); font-size:14px; padding:0 15px; outline:none; transition:border-color .15s;}
.ninput::placeholder{color:var(--dim2);}
.ninput:focus{border-color:var(--acc);}
.nform .btn-acc{height:48px; justify-content:center; border-radius:9px;}
.nnote{font-family:var(--mono); font-size:10.5px; color:var(--dim2); text-align:center; margin-top:3px;}

/* ── FOOTER ── */
.foot{border-top:1px solid var(--line); padding:60px 0 38px; background:var(--bg);}
.foot-in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.foot-brand .bsub{margin-top:8px;}
.foot-brand p{font-size:14px; line-height:1.6; color:var(--dim); max-width:280px; margin:18px 0 0;}
.fcol h5{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--dim2); text-transform:uppercase; margin:0 0 16px;}
.fcol a{display:block; font-size:14px; color:var(--dim); margin-bottom:11px; transition:color .15s;}
.fcol a:hover{color:var(--txt);}
.foot-bot{display:flex; align-items:center; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--dim2);}
.foot-bot .made b{color:var(--acc-d);}

/* ── responsive ── */
@media (max-width:1080px){
  :root{--pad:32px;}
  .hero-in,.def,.news-in{grid-template-columns:1fr; gap:40px;}
  .tool-grid{grid-template-columns:repeat(2,1fr);}
  .h1{font-size:52px;} .sec-h{font-size:34px;}
  .cmd{display:none;}
}
@media (max-width:680px){
  :root{--pad:20px;}
  .nlinks{display:none;}
  .h1{font-size:40px;} .sec-h{font-size:28px;}
  .tool-grid,.pb-grid{grid-template-columns:1fr;}
  .h-stats{gap:22px;}
  .news-card{padding:32px 24px;}
  .arow{grid-template-columns:1.6fr 50px; }
  .arow .afocus,.arow .aclients{display:none;}
  .arow.head{display:none;}
  .foot-in{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:1 / -1;}
}