/* Jcommerce & Tech: the tech layer. Sits over the navy-and-gold look without replacing it:
   a live node network in the hero, decoding labels, cursor-lit card edges,
   HUD corners on screens, a studio console, a capability ticker and a section rail. */

/* hero: node network */
.net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 2.2s cubic-bezier(.22,1,.36,1) .4s;
  -webkit-mask-image:radial-gradient(75% 85% at 72% 48%,#000 20%,transparent 78%);mask-image:radial-gradient(75% 85% at 72% 48%,#000 20%,transparent 78%)}
.loaded .net,html:not(.js) .net{opacity:1}
@media (max-width:960px){
  .net{-webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 60%,transparent 98%);mask-image:linear-gradient(180deg,transparent 30%,#000 60%,transparent 98%)}
}

/* hero: live studio line */
.sysline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sysline i{position:relative;width:7px;height:7px;border-radius:50%;background:#6FD39C;box-shadow:0 0 10px rgba(111,211,156,.8)}
.sysline i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(111,211,156,.6);animation:ping 2.4s cubic-bezier(.22,1,.36,1) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.8);opacity:0}}
.sysline b{font-weight:500;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.sysline span{color:rgba(142,154,178,.55)}
@media (max-width:960px){.sysline{justify-content:center}}


/* cards: a gold edge that follows the cursor */
.tenet,.gantt{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;opacity:0;transition:opacity .5s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(238,217,162,.95),rgba(201,165,92,.35) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.spot:hover::after{opacity:1}
.light .spot::after,.paper .spot::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(156,122,54,.9),rgba(156,122,54,.3) 40%,transparent 70%)}
@media (pointer:coarse){.spot::after{display:none}}

/* screens: HUD corner brackets */
.hud::after{content:"";position:absolute;inset:12px;pointer-events:none;z-index:3;--c:rgba(238,217,162,.65);--l:16px;opacity:.85;transition:inset .7s cubic-bezier(.22,1,.36,1),opacity .5s;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
.hud:hover::after,.feature:hover .hud::after{inset:8px;opacity:1}

/* studio console */
.term-fig{margin-top:clamp(60px,8vw,100px)}
.term{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#081329,#050C1C);border:1px solid var(--hair);box-shadow:0 40px 90px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(238,217,162,.08)}
.term::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.term-h{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--hair-soft);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.term-h i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(201,165,92,.55)}
.term-h i:first-child{background:rgba(201,165,92,.5)}
.term-h span{margin-left:10px}
.term-h b{margin-left:auto;font-weight:500;color:#6FD39C;letter-spacing:.14em;text-transform:uppercase;font-size:9.5px}
.term-b{position:relative;margin:0;padding:22px 24px 26px;font-family:var(--mono);font-size:13.5px;line-height:1.85;color:#C8CFDD;white-space:pre;overflow-x:auto;min-height:calc(1.85em * 8 + 48px);scrollbar-width:thin;scrollbar-color:rgba(201,165,92,.3) transparent}
.term-b .tl{display:block}
.term-b .u{color:#EED9A2}
.term-b .p{color:#6E7C99}
.term-b .ok{color:#6FD39C}
.term-b .go{color:#EED9A2}
.term-b .dim{color:#3F4C68}
.term-b .val{color:#E8E2D4}
.js .term-b .tl.wait{visibility:hidden}
@keyframes caret{50%{opacity:0}}
.term-b .cur{display:inline-block;width:.6em;height:1.15em;vertical-align:-.22em;background:#EED9A2;animation:caret .8s steps(1) infinite}
.term-cap{margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.term-cap b{color:var(--gold);font-weight:500}
@media (max-width:600px){.term-b{font-size:11.5px;padding:18px 16px 20px}.term-h span{display:none}}
@media (max-width:960px){.term-cap{display:block;text-align:center}}

/* capability ticker */
.ticker{position:relative;overflow:hidden;background:#081227;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-in{display:flex;width:max-content;animation:tick 60s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,226,212,.7);white-space:nowrap}
.ticker span::after{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);opacity:.75}
@keyframes tick{to{transform:translateX(-50%)}}

/* section rail */
.rail{position:fixed;right:18px;top:50%;z-index:85;transform:translate(24px,-50%);opacity:0;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;gap:2px;padding:10px 8px;border-radius:14px;background:rgba(8,18,39,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(201,165,92,.16)}
.rail.show{opacity:1;transform:translate(0,-50%)}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,226,212,.45);transition:color .4s}
.rail a i{width:10px;height:1px;background:currentColor;transition:width .5s cubic-bezier(.22,1,.36,1),background-color .4s}
.rail a em{position:absolute;right:calc(100% + 16px);font-style:normal;white-space:nowrap;padding:5px 10px;border-radius:99px;background:rgba(8,18,39,.85);border:1px solid rgba(201,165,92,.25);color:#EED9A2;opacity:0;transform:translateX(6px);transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none}
.rail a:hover{color:#EED9A2}
.rail a:hover em{opacity:1;transform:none}
.rail a.on{color:#EED9A2}
.rail a.on i{width:22px;background:linear-gradient(90deg,#8E6C2E,#EED9A2)}
@media (max-width:1180px){.rail{display:none}}

@media (prefers-reduced-motion:reduce){
  .ticker-in{animation:none}
}

/* ── personality: small, per-element touches. Transform/opacity only, on hover, focus or reveal ── */
@keyframes redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes nudge{0%,100%{transform:none}40%{transform:translateY(-4px) rotate(-6deg)}70%{transform:translateY(1px) rotate(2deg)}}
@keyframes shine{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}

/* credentials strip: the icon gives a little hop */
.strip div{transition:background-color .5s}
.strip div:hover svg{animation:nudge .7s cubic-bezier(.22,1,.36,1)}
.strip div:hover b{color:var(--gold-hi)}
.strip b{transition:color .4s}

/* practice rows: a soft gold wash slides in, the number becomes a tag, the drawing redraws itself */
.prac::after{content:"";position:absolute;inset:0 -24px;z-index:-1;border-radius:18px;background:linear-gradient(90deg,rgba(201,165,92,.07),transparent 70%);opacity:0;transform:translateX(-24px);transition:opacity .6s,transform .8s cubic-bezier(.22,1,.36,1);pointer-events:none}
.prac:hover::after{opacity:1;transform:none}
.practice-list{position:relative;z-index:0}
.prac .num{transition:color .4s,background-color .4s;border-radius:99px;align-self:start}
@media (min-width:601px){.prac .num{padding:12px 10px 4px;margin-left:-10px;justify-self:start}}
.prac:hover .num{background:rgba(201,165,92,.14);color:var(--gold-hi)}
.prac:hover .ico .draw{animation:redraw 1.4s cubic-bezier(.65,0,.35,1) both;animation-delay:var(--dd,0s)}
.prac .ico{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.prac:hover .ico{transform:rotate(-4deg) scale(1.04)}
.prac li{transition:border-color .4s,color .4s}
.prac:hover li{border-color:rgba(201,165,92,.45);color:var(--ivory)}

/* tenets: numbered like plates in a book, icon redraws on hover */
.tenets{counter-reset:tn}
.tenet{counter-increment:tn}
.tenet::before{content:counter(tn,decimal-leading-zero) " / 04";position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(201,165,92,.5);transition:color .4s}
.tenet:hover::before{color:var(--gold-hi)}
.tenet:hover .draw{animation:redraw 1.2s cubic-bezier(.65,0,.35,1) both;animation-delay:var(--dd,0s)}
.tenet svg{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.tenet:hover svg{transform:translateY(-3px) scale(1.06)}

/* method: each step's dot sends out a ring */
.step .dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--gold);opacity:0;pointer-events:none}
.step:hover .dot::after{animation:ring 1.1s cubic-bezier(.22,1,.36,1)}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
.step h3{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.step:hover h3{transform:translateX(4px)}

/* work: facts light up one by one, index rows get a numbered tag and a turning plus */
.facts div{transition:background-color .5s}
.facts div:hover{background:#18306A}
.facts strong{transition:transform .6s cubic-bezier(.22,1,.36,1);transform-origin:left bottom}
.facts div:hover strong{transform:scale(1.06)}
.row-btn .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid transparent;transition:border-color .4s,background-color .4s,color .4s}
.row-btn:hover .n{border-color:rgba(142,108,46,.5);background:rgba(156,122,54,.08)}
.row-btn:hover .x{transform:rotate(90deg)}
.row.open .row-btn:hover .x{transform:none}

/* pricing: plans tilt toward the cursor (set by tech.js), add-on rows lean in, the badge catches light */
.plan.tilt.in{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ly,0px));transition:opacity 1.1s cubic-bezier(.22,1,.36,1) var(--rd,0s),transform .5s cubic-bezier(.22,1,.36,1),border-color .6s}
.plan.tilt.in:hover{--ly:-6px}
.tier .price b{transition:color .4s}
.tier:hover .price b{color:var(--gold-hi)}
.tier .pn em{position:relative;overflow:hidden}
.tier .pn em::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-120%) skewX(-20deg)}
.tier:hover .pn em::after{animation:shine 1s cubic-bezier(.65,0,.35,1)}
.addons li span{transition:transform .5s cubic-bezier(.22,1,.36,1),color .4s}
.addons li i{transition:border-color .4s}
.addons li:hover span{transform:translateX(6px);color:var(--ivory)}
.addons li:hover i{border-bottom-color:var(--gold);border-bottom-style:solid}
.terms svg{box-sizing:content-box;padding:9px;border-radius:50%;background:rgba(201,165,92,.1);border:1px solid var(--hair);margin-top:-6px;transition:transform .7s cubic-bezier(.22,1,.36,1),background-color .4s}
.terms div:hover svg{transform:rotate(-10deg) scale(1.06);background:rgba(201,165,92,.2)}

/* outline buttons fill with a soft gold sweep */
.btn-line::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,rgba(201,165,92,.18),rgba(201,165,92,.06));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.btn-line:hover::before{transform:scaleX(1)}

/* founder: the signature writes itself in */
.js .sign .sig{display:inline-block;clip-path:inset(-10% 100% -20% 0);transition:clip-path 1.8s cubic-bezier(.65,0,.35,1) .5s}
.js .sign.in .sig{clip-path:inset(-10% -5% -20% 0)}

/* contact: arrows lift off, fields draw a gold line as you type */
.direct svg{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.direct a:hover svg{transform:translate(3px,-3px) scale(1.1)}
.direct a:hover small{color:var(--gold)}
.fld:has(>input,>textarea)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:linear-gradient(90deg,var(--gold-hi),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.fld:has(>input,>textarea):focus-within::after{transform:scaleX(1)}
.fld:focus-within>label{color:var(--gold-hi)}
.fld label{transition:color .4s}
.socials a:hover svg{transform:rotate(-8deg) scale(1.08)}
.socials svg{transition:transform .5s cubic-bezier(.22,1,.36,1)}

/* footer links underline from the left */
.foot-top ul a{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .5s cubic-bezier(.22,1,.36,1),color .4s}
.foot-top ul a:hover{background-size:100% 1px}

@media (max-width:960px){.prac::after{inset:0 -8px}}
@media (max-width:600px){.row-btn .n{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){
  .js .sign .sig{clip-path:none}
  .prac:hover .ico .draw,.tenet:hover .draw{animation:none}
}