/* MIKTRIKI // Edition 02 — Independent by design */
:root{
  color-scheme:dark;
  --ink:#0b0d14;--ink-2:#111520;--ink-3:#1b2030;
  --paper:#efeee8;--paper-2:#e6e5de;--white:#f8f7f3;
  --violet:#bea8ff;--violet-2:#8268d2;--acid:#c9ef9e;
  --muted:#b0aebe;--line:rgba(237,233,252,.16);--line-dark:rgba(20,24,32,.16);
  --ease:cubic-bezier(.2,.7,.2,1);--pad:clamp(20px,4.3vw,68px);
  --max:1440px;
  font-family:"Arial", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:94px}
body{margin:0;min-width:320px;background:var(--ink);color:var(--paper);overflow-x:hidden}
body.menu-open{overflow:hidden}
::selection{background:var(--violet);color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--acid);outline-offset:5px}
img,svg{display:block;max-width:100%}
button{cursor:pointer}
.wrap{width:min(calc(100% - 2*var(--pad)),var(--max));margin-inline:auto}
.skip-link{position:fixed;z-index:1000;left:18px;top:-80px;background:var(--acid);color:var(--ink);padding:12px 20px;border-radius:8px}
.skip-link:focus{top:15px}
.site-header{position:relative;z-index:30}
.header-shell{border-bottom:1px solid var(--line);background:rgba(11,13,20,.96)}
.header-inner{height:90px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.wordmark{display:inline-flex;align-items:center;gap:14px;flex-shrink:0;font-size:21px;font-weight:850;letter-spacing:-.065em}
.wordmark-icon{width:28px;height:28px;flex-shrink:0}
.wordmark .period{color:var(--violet)}
.header-right{display:flex;align-items:center;gap:clamp(20px,3.5vw,58px)}
.main-nav{display:flex;align-items:center;gap:clamp(19px,2.8vw,44px)}
.main-nav a,.nav-cta{font-size:12px;font-weight:700;letter-spacing:.115em;text-transform:uppercase}
.main-nav a{color:#bebbc9;transition:color .25s}
.main-nav a:hover,.main-nav a[aria-current=page]{color:var(--white)}
.nav-cta{display:inline-flex;align-items:center;gap:21px;padding:13px 17px;border:1px solid rgba(211,202,241,.35);border-radius:3px;white-space:nowrap;transition:background .2s,border-color .2s}
.nav-cta:hover{background:rgba(190,168,255,.11);border-color:var(--violet)}
.nav-cta span{color:var(--violet)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);width:45px;height:45px;border-radius:4px;align-items:center;justify-content:center;padding:10px}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:20px;height:2px;background:var(--paper);transition:transform .2s,opacity .2s;content:""}
.menu-toggle span::before{transform:translateY(-6px)}.menu-toggle span::after{transform:translateY(4px)}
.utility-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;color:#a7a3b6;font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:700}
.utility-line .utility-end{display:flex;align-items:center;gap:12px}
.pulse{width:6px;height:6px;background:var(--acid);border-radius:50%;box-shadow:0 0 0 5px rgba(201,239,158,.10)}
/* TYPOGRAPHY */
.kicker{display:inline-flex;gap:14px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.kicker::before{content:"";width:23px;height:2px;background:currentColor}
.kicker.purple{color:var(--violet)}.kicker.dark{color:#5c4d88}
.display{font-size:clamp(68px,10.5vw,182px);font-weight:750;line-height:.82;letter-spacing:-.088em;margin:0;max-width:1240px}
.display em,.display-2 em{font-weight:400;font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:-.075em}
.display em{color:var(--violet)}
.display-2{font-size:clamp(48px,6.3vw,108px);letter-spacing:-.075em;line-height:.97;font-weight:750;margin:0}
.section-title{font-size:clamp(43px,5.2vw,87px);font-weight:750;letter-spacing:-.072em;line-height:.98;margin:18px 0 0}
.body-lg{font-size:clamp(17px,1.45vw,21px);line-height:1.62;color:var(--muted);font-weight:400}
.mono{font-family:Consolas,"SFMono-Regular",Menlo,monospace;font-size:11px;letter-spacing:.065em}
.micro{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800}
.accent{color:var(--violet)}
.arrow{font-size:19px;font-weight:400;line-height:1}
/* HERO */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero:before{content:"";position:absolute;inset:-30% -22% auto 48%;height:900px;z-index:-2;background:radial-gradient(ellipse at center,rgba(91,73,151,.28),transparent 62%);pointer-events:none}
.hero-inner{min-height:clamp(670px,78vh,890px);display:flex;flex-direction:column;justify-content:space-between;padding-bottom:46px}
.hero-top{padding-top:clamp(100px,12vw,180px);position:relative}
.hero-top .kicker{margin-bottom:38px}
.hero-title{position:relative;z-index:2}
.hero-title .line{display:block}
.hero-title .line:nth-child(2){margin-left:clamp(3px,3.1vw,48px)}
.hero-deck{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,410px);align-items:end;gap:30px;margin-top:45px}
.hero-deck .statement{color:#a7a0be;text-transform:uppercase;font-size:12px;font-weight:750;letter-spacing:.18em;line-height:1.85;max-width:250px}
.hero-deck p{margin:0;font-size:clamp(18px,2vw,26px);line-height:1.44;letter-spacing:-.028em;color:#e0dce9}
.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:28px;margin-top:76px}
.hero-bottom .micro{color:#8f8b9d}
.hero-bottom a{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;display:inline-flex;align-items:center;gap:18px}
.hero-bottom a .arrow{color:var(--acid)}
/* ABSTRACT HERO OBJECT */
.hero-art{position:absolute;z-index:1;pointer-events:none;top:12%;left:55%;height:min(58vw,670px);width:min(50vw,610px);opacity:.88;filter:drop-shadow(0 0 54px rgba(147,113,236,.11))}
.hero-art svg{width:100%;height:100%;overflow:visible}
.hero-art .rotor{transform-origin:50% 50%;animation:orbit 70s linear infinite}
.hero-art .rotor2{transform-origin:50% 50%;animation:orbit 85s linear infinite reverse}
@keyframes orbit{to{transform:rotate(360deg)}}
/* TICKER */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#131521}
.ticker-inner{min-height:73px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.ticker-item{display:inline-flex;gap:12px;align-items:center;font-size:11px;font-weight:780;letter-spacing:.14em;text-transform:uppercase;color:#aaa7bb;white-space:nowrap}
.ticker-item strong{font-size:13px;font-weight:800;color:var(--paper)}
.ticker-item:before{content:"✳";color:var(--violet);font-size:17px}
/* SECTIONS */
.section{padding:clamp(90px,11vw,162px) 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:55px}
.section-head .section-title{max-width:770px}
.section-head .body-lg{max-width:340px;margin:0 0 4px}
.text-link{display:inline-flex;align-items:center;gap:22px;align-self:flex-start;padding-bottom:9px;border-bottom:1px solid currentColor;text-transform:uppercase;font-size:11px;letter-spacing:.15em;font-weight:800}
.text-link .arrow{transition:transform .2s}
.text-link:hover .arrow{transform:translate(4px,-4px)}
/* WORK */
.work-section{background:var(--paper);color:#121722}
.work-section .section-head .body-lg{color:#626779}
.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}
.project-card{grid-column:span 6;min-height:420px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(25px,3.3vw,45px);background:#151923;color:#f3f2ef;transition:transform .35s var(--ease)}
.project-card:nth-child(2){background:#312842}
.project-card:nth-child(3){background:#28333b}
.project-card:nth-child(4){background:#e0d8f4;color:#151621}
.project-card:hover{transform:translateY(-5px)}
.project-card:focus-visible{outline:3px solid #6744c2;outline-offset:4px}
.project-top,.project-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;position:relative;z-index:3}
.project-top .mono{color:inherit;opacity:.68;text-transform:uppercase}
.project-top .arrow{font-size:26px}
.project-art{position:absolute;inset:12% 10% 10% 35%;display:grid;place-items:center;pointer-events:none}
.project-art svg{max-width:100%;max-height:100%;width:350px;height:300px;opacity:.8}
.project-bottom{align-items:end}
.project-bottom h3{font-size:clamp(32px,3.35vw,53px);line-height:.98;letter-spacing:-.065em;max-width:350px;margin:0 0 16px}
.project-bottom p{font-size:14px;line-height:1.6;max-width:330px;margin:0;color:inherit;opacity:.73}
.project-tag{display:inline-block;border:1px solid currentColor;opacity:.7;border-radius:50px;padding:8px 12px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.work-footer{display:flex;justify-content:space-between;align-items:center;gap:22px;border-top:1px solid var(--line-dark);margin-top:36px;padding-top:30px}
.work-footer p{color:#686c76;font-size:13px;line-height:1.5;max-width:510px}
/* MANIFESTO */
.manifesto{background:#161525;color:var(--paper);position:relative;overflow:hidden}
.manifesto:before{content:"";position:absolute;width:64vw;aspect-ratio:1;right:-20vw;top:-13vw;border:1px solid rgba(186,162,255,.12);border-radius:50%;box-shadow:0 0 0 110px rgba(186,162,255,.017),0 0 0 220px rgba(186,162,255,.014);pointer-events:none}
.manifesto-inner{display:grid;grid-template-columns:1fr 1.8fr;gap:clamp(40px,9vw,150px)}
.manifesto-copy .display-2{margin:0 0 46px}
.manifesto-copy .display-2 em{color:var(--violet)}
.manifesto-copy .body-lg{max-width:600px;color:#b4aec5}
.pillars{border-top:1px solid rgba(255,255,255,.2);margin-top:58px}
.pillar{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:27px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.pillar .number{font-family:Consolas,monospace;color:var(--violet);font-size:13px}
.pillar h3{font-size:clamp(19px,2vw,29px);letter-spacing:-.035em;margin:0 0 8px}
.pillar p{margin:0;color:#a6a1b4;line-height:1.55;font-size:14px;max-width:570px}
/* NOVA */
.nova-section{background:#0d111b;overflow:hidden}
.nova-stage{display:grid;grid-template-columns:1fr 1fr;min-height:620px;gap:clamp(38px,8vw,140px);align-items:center}
.nova-title{font-size:clamp(100px,14vw,235px);letter-spacing:-.12em;line-height:.85;font-weight:740;margin:25px 0 35px}
.nova-title .point{color:var(--acid)}
.nova-section .body-lg{max-width:500px}
.nova-section .text-link{margin-top:30px;color:var(--acid)}
.nova-interface{border:1px solid #363847;border-radius:10px;background:#161b27;box-shadow:0 25px 95px rgba(0,0,0,.27);overflow:hidden;transform:rotate(-2deg)}
.interface-header{padding:21px 25px;border-bottom:1px solid #383c4a;display:flex;align-items:center;justify-content:space-between}
.interface-dots{display:flex;gap:7px}
.interface-dots i{width:7px;height:7px;border-radius:50%;background:#605d76}
.interface-dots i:first-child{background:var(--acid)}
.interface-header .mono{color:#a3a0b6;font-size:10px}
.interface-body{padding:clamp(24px,3.4vw,50px)}
.interface-small{display:flex;justify-content:space-between;align-items:center;color:#a49bb7}
.interface-status{display:flex;gap:8px;align-items:center}
.interface-status:before{content:"";background:var(--acid);width:6px;height:6px;border-radius:50%}
.interface-command{font:clamp(20px,3.4vw,44px)/1.22 Consolas,Menlo,monospace;letter-spacing:-.06em;margin:49px 0 35px}
.interface-command span{color:var(--violet)}
.interface-command b{color:var(--acid);font-weight:400}
.interface-seq{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.interface-seq div{border-top:1px solid #44465b;padding-top:12px;font-size:9px;letter-spacing:.12em;color:#acabbc;text-transform:uppercase}
.interface-seq strong{display:block;font-size:19px;color:var(--paper);letter-spacing:0;margin-bottom:9px}
/* CONTACT BAND */
.next-section{background:var(--acid);color:#111a15;position:relative}
.next-inner{padding-top:100px;padding-bottom:100px;display:flex;justify-content:space-between;align-items:end;gap:30px}
.next-section .display-2{max-width:970px}
.next-section .kicker{margin-bottom:28px}
.next-section .text-link{align-self:flex-end;white-space:nowrap}
.next-section .text-link:hover{color:#48543c}
/* FOOTER */
.site-footer{background:#0b0d14;color:#999aaf}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr;gap:35px;padding:80px 0 110px}
.footer-brand{font-size:clamp(55px,9vw,147px);font-weight:800;line-height:.8;letter-spacing:-.095em;margin:0;color:#eeeaf5}
.footer-brand span{color:var(--violet)}
.footer-main p{line-height:1.5;max-width:470px;font-size:15px;margin:26px 0 0}
.footer-side{display:grid;grid-template-columns:1fr 1fr;gap:30px;justify-items:end}
.footer-col{display:flex;flex-direction:column;gap:17px}
.footer-col h2{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#d7d1eb;margin:0 0 13px}
.footer-col a{font-size:14px;transition:color .2s}
.footer-col a:hover{color:var(--violet)}
.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:70px;font-family:Consolas,monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.footer-bottom a:hover{color:white}
/* INNER PAGES */
.inner-hero{padding:clamp(100px,12vw,176px) 0 clamp(80px,9vw,145px);background:radial-gradient(ellipse at 85% 30%,rgba(114,83,190,.15),transparent 52%)}
.inner-hero .kicker{margin-bottom:39px}
.inner-hero .display-2{max-width:1200px}
.inner-hero .lead{font-size:clamp(20px,2.2vw,30px);letter-spacing:-.032em;line-height:1.42;color:#c7c3d5;max-width:710px;margin:50px 0 0}
.inner-hero .page-index{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:23px;margin-top:85px;color:#9994ac;text-transform:uppercase;font:11px Consolas,monospace;letter-spacing:.08em}
.light-section{background:var(--paper);color:#151922}
.dark-section{background:#141624;color:var(--paper)}
.chapter{border-top:1px solid var(--line-dark);padding-top:23px;margin-top:38px}
.chapter-dark{border-color:var(--line)}
.editorial-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(45px,8vw,130px)}
.editorial-grid h2{font-size:clamp(40px,5.4vw,80px);letter-spacing:-.07em;line-height:1;max-width:700px;margin:0}
.editorial-grid p{font-size:clamp(18px,1.7vw,24px);line-height:1.65;color:#616473;margin:0 0 24px}
.dark-section .editorial-grid p{color:#beb8cc}
.stack-list{list-style:none;padding:0;margin:0}
.stack-list li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:20px;border-bottom:1px solid var(--line-dark);padding:25px 0}
.stack-list li:first-child{border-top:1px solid var(--line-dark)}
.stack-list li>span:first-child{font:12px Consolas,monospace;color:#6e5d9d}
.stack-list h3{font-size:27px;letter-spacing:-.04em;margin:0 0 8px}
.stack-list p{font-size:16px;line-height:1.6;color:#696977;margin:0}
.project-detail{display:grid;grid-template-columns:42% 1fr;gap:clamp(30px,6vw,100px);padding:clamp(65px,8vw,125px) 0;border-bottom:1px solid var(--line-dark)}
.project-detail:first-child{border-top:1px solid var(--line-dark)}
.project-detail .project-no{font:13px Consolas,monospace;color:#695784;letter-spacing:.12em}
.project-detail h2{font-size:clamp(38px,4vw,65px);line-height:1;letter-spacing:-.066em;margin:25px 0}
.project-detail .detail-copy{font-size:clamp(17px,1.6vw,22px);color:#595d6a;line-height:1.6;max-width:710px;margin:0 0 25px}
.detail-tags{display:flex;flex-wrap:wrap;gap:9px}
.detail-tags span{font:10px Consolas,monospace;text-transform:uppercase;letter-spacing:.08em;border:1px solid #aeb0ac;padding:11px 12px}
.detail-meta{display:flex;justify-content:space-between;gap:30px;align-items:center}
.detail-status{display:inline-flex;gap:10px;align-items:center;color:#5e6371;text-transform:uppercase;letter-spacing:.11em;font-weight:800;font-size:10px}
.detail-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#8c75c8}
.quote-block{margin:0;border-left:2px solid var(--violet);padding-left:35px;font-size:clamp(32px,4vw,61px);line-height:1.1;letter-spacing:-.056em;font-weight:650}
.note-block{background:#ddd9eb;padding:35px;color:#282333}
.note-block p{font-size:15px;line-height:1.65;margin:0}
.workflow-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.workflow-step{padding:32px;min-height:280px;border:1px solid #45445a}
.workflow-step .mono{color:var(--violet)}
.workflow-step h3{font-size:32px;letter-spacing:-.05em;margin:60px 0 15px}
.workflow-step p{margin:0;color:#b4b0c7;line-height:1.65;font-size:15px}
.endnote{padding:90px 0;border-top:1px solid var(--line-dark)}
.endnote p{font-size:clamp(22px,3vw,40px);max-width:800px;letter-spacing:-.04em;line-height:1.35;margin:0}
[hidden]{display:none!important}
@media(min-width:1400px){.hero-art{left:57%}}
@media(max-width:1100px){
  .header-right{gap:23px}
  .main-nav{gap:19px}
  .hero-art{left:51%;top:20%;opacity:.64}
  .display{font-size:clamp(70px,10vw,133px)}
  .hero-inner{min-height:760px}
  .manifesto-inner{grid-template-columns:1fr 1.55fr}
}
@media(max-width:800px){
  .header-inner{height:76px}
  .menu-toggle{display:flex;z-index:35;position:relative}
  .header-right{margin-left:auto}
  .nav-cta{padding:12px}
  .main-nav{position:absolute;top:76px;left:0;right:0;background:#161721;border-bottom:1px solid var(--line);padding:22px var(--pad) 32px;display:none;flex-direction:column;gap:0;align-items:stretch;box-shadow:0 30px 80px rgba(0,0,0,.38)}
  .main-nav.is-open{display:flex}
  .main-nav a{font-size:18px;letter-spacing:-.025em;border-bottom:1px solid var(--line);padding:18px 3px}
  .menu-toggle[aria-expanded=true] span{background:transparent}
  .menu-toggle[aria-expanded=true] span:before{transform:rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:after{transform:translateY(-2px) rotate(-45deg)}
  .hero-inner{min-height:730px}
  .hero-top{padding-top:100px}
  .hero-art{width:510px;height:510px;left:40%;top:18%;opacity:.40}
  .display{font-size:clamp(69px,11.8vw,110px)}
  .hero-deck{grid-template-columns:1fr 1.2fr}
  .section-head{align-items:start;flex-direction:column}
  .manifesto-inner{grid-template-columns:1fr;gap:45px}
  .nova-stage{grid-template-columns:1fr;gap:70px;padding-bottom:20px}
  .nova-interface{width:min(100%,620px);margin:0 auto}
  .next-inner{align-items:start;flex-direction:column}
  .next-inner .text-link{align-self:flex-start}
  .footer-main{grid-template-columns:1fr;gap:60px}
  .footer-side{justify-items:start}
  .editorial-grid{grid-template-columns:1fr;gap:45px}
}
@media(max-width:560px){
  .utility-line{font-size:9px;padding:13px 0}
  .utility-line .utility-end{display:none}
  .nav-cta{font-size:10px;gap:10px;padding:11px 12px}
  .wordmark{font-size:19px}
  .hero-inner{min-height:750px}
  .hero-top{padding-top:90px}
  .hero-top .kicker{margin-bottom:34px}
  .hero-art{left:20%;top:30%;height:460px;width:460px;opacity:.29}
  .display{font-size:clamp(64px,16.4vw,95px)}
  .hero-title .line:nth-child(2){margin-left:0}
  .hero-deck{grid-template-columns:1fr;gap:20px;margin-top:44px}
  .hero-deck .statement{font-size:10px;max-width:290px}
  .hero-deck p{font-size:21px;max-width:350px}
  .hero-bottom{margin-top:55px}
  .hero-bottom .micro{max-width:135px;font-size:9px;line-height:1.7}
  .hero-bottom a{font-size:10px;gap:9px}
  .ticker-inner{flex-wrap:wrap;justify-content:start;padding:20px 0;gap:18px 27px}
  .ticker-item{font-size:9px}
  .ticker-item strong{font-size:11px}
  .section{padding:80px 0}
  .section-head{margin-bottom:35px}
  .project-grid{gap:12px}
  .project-card{grid-column:span 12;min-height:335px;padding:26px}
  .project-bottom h3{font-size:43px}
  .project-art{inset:4% 4% 13% 28%;opacity:.8}
  .project-tag{font-size:8px}
  .work-footer{align-items:start;flex-direction:column}
  .manifesto-copy .display-2{font-size:58px}
  .pillar{grid-template-columns:36px 1fr;gap:14px}
  .nova-title{font-size:clamp(95px,25vw,150px)}
  .interface-command{font-size:29px}
  .interface-body{padding:24px}
  .interface-seq div{font-size:8px}
  .next-inner{padding-top:83px;padding-bottom:83px}
  .footer-main{padding:70px 0 70px}
  .footer-brand{font-size:clamp(59px,13.9vw,95px)}
  .footer-side{grid-template-columns:1fr 1fr;gap:35px}
  .footer-bottom{align-items:start;flex-direction:column;justify-content:center;padding:25px 0;gap:13px}
  .inner-hero .display-2{font-size:clamp(55px,12vw,75px)}
  .inner-hero .lead{margin-top:36px}
  .inner-hero .page-index{margin-top:65px}
  .project-detail{grid-template-columns:1fr;gap:18px;padding:68px 0}
  .project-detail h2{margin:8px 0}
  .workflow-list{grid-template-columns:1fr}
  .workflow-step{min-height:210px}
  .workflow-step h3{margin-top:35px}
  .quote-block{padding-left:20px;font-size:36px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}