/* ═══ TOKENS – Kobaltas ═══════════════════════════════ */
:root{
  --bg:#F4F7FC; --surface:#FFFFFF; --surface-2:#EDF2FA; --surface-3:#E2EAF6;
  --ink:#0E1729; --ink-2:#33415C; --muted:#61708F;
  --line:#DEE6F3; --line-2:#C3D0E6;
  --accent:#1F62E0; --accent-2:#164BB0; --accent-wash:rgba(31,98,224,.09);
  --warm:#E0522F; --ok:#14795C;
  --glow:rgba(31,98,224,.16);
  --code-op:.055;
  --shadow:0 1px 2px rgba(14,23,41,.06), 0 14px 40px -22px rgba(14,23,41,.35);
  --radius:5px;
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --maxw:1160px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220; --surface:#121B2D; --surface-2:#18233A; --surface-3:#1F2C47;
    --ink:#E6EBF5; --ink-2:#B9C4DA; --muted:#7E8CAB;
    --line:#1C2740; --line-2:#2B3960;
    --accent:#4C8DFF; --accent-2:#7FB0FF; --accent-wash:rgba(76,141,255,.13);
    --warm:#FF7A5C; --ok:#3ECF9A;
    --glow:rgba(76,141,255,.22);
    --code-op:.085;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 20px 46px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1220; --surface:#121B2D; --surface-2:#18233A; --surface-3:#1F2C47;
  --ink:#E6EBF5; --ink-2:#B9C4DA; --muted:#7E8CAB;
  --line:#1C2740; --line-2:#2B3960;
  --accent:#4C8DFF; --accent-2:#7FB0FF; --accent-wash:rgba(76,141,255,.13);
  --warm:#FF7A5C; --ok:#3ECF9A;
  --glow:rgba(76,141,255,.22);
  --code-op:.085;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 20px 46px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none;
  transition:background-color .45s ease, color .45s ease;
}
.bar,.proj,.build,.mock,.caps,.cap,.how > div,.term,.strip div{
  transition:background-color .45s ease, color .45s ease, border-color .45s ease;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:600; text-wrap:balance; line-height:1.1; letter-spacing:-.014em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
::selection{background:var(--accent); color:#fff}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; position:relative; z-index:2}
.mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; font-weight:500}
.num{font-variant-numeric:tabular-nums}

/* ═══ CODE BACKGROUND ═════════════════════════════════ */
.codebg{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  opacity:var(--code-op); color:var(--accent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);
}
.codebg pre{
  margin:0; font-family:var(--mono); font-size:11.5px; line-height:1.85;
  white-space:pre; animation:drift 90s linear infinite;
}
.codebg--slow pre{animation-duration:160s}
@keyframes drift{from{transform:translateY(0)} to{transform:translateY(-50%)}}
.glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(110% 62% at 76% 0%, var(--glow), transparent 60%);
}
.grid-veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  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(88% 58% at 50% 0%,#000,transparent 74%);
  mask-image:radial-gradient(88% 58% at 50% 0%,#000,transparent 74%);
}

/* ═══ TOP BAR ═════════════════════════════════════════ */
.bar{position:sticky; top:0; z-index:70; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line)}
.bar__in{display:flex; align-items:center; gap:20px; height:72px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; white-space:nowrap}
.brand svg{height:30px; width:auto; color:var(--accent); flex:none}
.brand svg path{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.5s cubic-bezier(.35,0,.2,1) forwards}
.brand svg path:nth-child(2){animation-delay:.22s}
.brand svg path:nth-child(3){animation-delay:.44s}
.brand svg path:nth-child(4){animation-delay:.72s; animation-duration:1.1s}
@keyframes draw{to{stroke-dashoffset:0}}
.brand b{font-family:var(--display); font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.brand b span{color:var(--muted); font-weight:400}
.bar nav{display:flex; gap:20px; margin-left:auto}
.bar nav a{font-size:.83rem; color:var(--muted); text-decoration:none; font-weight:500; padding:6px 0; position:relative; transition:color .2s}
.bar nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--accent); transition:right .28s cubic-bezier(.2,.8,.3,1)}
.bar nav a:hover{color:var(--ink)}
.bar nav a:hover::after{right:0}
.tools{display:flex; align-items:center; gap:8px; margin-left:auto}
.bar nav + .tools{margin-left:20px}
@media (max-width:960px){ .bar nav + .tools{margin-left:auto} }
.seg{display:flex; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden}
.seg button{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; font-weight:600; padding:6px 9px; background:transparent; color:var(--muted); border:0; cursor:pointer; transition:background .25s, color .25s}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff}
.iconbtn{width:33px; height:31px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--radius); background:transparent; color:var(--ink-2); cursor:pointer; transition:border-color .2s, color .2s}
.iconbtn:hover{border-color:var(--accent); color:var(--accent)}
.iconbtn svg{width:16px; height:16px}
.iconbtn[data-act="theme"] svg{transition:transform .55s cubic-bezier(.2,.8,.3,1)}
:root[data-theme="light"] .iconbtn[data-act="theme"] svg{transform:rotate(-160deg)}
@media (max-width:960px){ .bar nav{display:none} }

/* ═══ HERO ════════════════════════════════════════════ */
.hero{position:relative; padding:88px 0 68px; border-bottom:1px solid var(--line); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:50px; align-items:center}
.eyebrow{color:var(--accent); display:inline-flex; align-items:center; gap:9px; margin-bottom:22px}
.eyebrow i{width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 2.6s infinite; flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem); font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144; letter-spacing:-.03em; margin-bottom:22px}
.lede{font-size:1.08rem; color:var(--ink-2); max-width:54ch; margin-bottom:13px}
.lede-2{font-size:.95rem; color:var(--muted); max-width:56ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; padding:13px 19px; border-radius:var(--radius); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .28s, background .2s, border-color .2s, color .2s}
.btn svg{width:14px; height:14px; flex:none}
.btn--solid{background:var(--accent); color:#fff; box-shadow:0 6px 22px -10px var(--accent)}
.btn--solid:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px var(--accent)}
.btn--ghost{border-color:var(--line-2); color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}

.term{border:1px solid var(--line-2); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; font-family:var(--mono)}
.term__bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.term__bar i{width:9px; height:9px; border-radius:50%; display:block; background:var(--line-2)}
.term__bar i:first-child{background:var(--warm)}
.term__bar span{margin-left:8px; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.term__body{padding:16px 16px 18px; min-height:262px; font-size:12.5px; line-height:1.85; color:var(--ink-2)}
.term__body .l{display:block; white-space:pre-wrap; word-break:break-word; min-height:1.85em}
.term__body .p{color:var(--accent); font-weight:600}
.term__body .ok{color:var(--ok)}
.term__body .c{color:var(--muted); font-style:italic}
.term__body .w{color:var(--warm)}
.caret{display:inline-block; width:7px; height:13px; background:var(--accent); vertical-align:-2px; animation:blink 1.05s steps(1) infinite; margin-left:1px}
@keyframes blink{50%{opacity:0}}
@media (max-width:960px){ .hero__grid{grid-template-columns:1fr; gap:38px} .hero{padding:54px 0 48px} }

.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:46px}
.strip div{background:var(--surface); padding:18px 18px 20px}
.strip b{display:block; font-family:var(--display); font-size:1.85rem; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 60; color:var(--accent); margin-bottom:8px}
.strip span{font-size:.82rem; color:var(--muted); display:block; line-height:1.45}
@media (max-width:720px){ .strip{grid-template-columns:repeat(2,1fr)} }

/* ═══ SECTIONS ════════════════════════════════════════ */
section{padding:82px 0; border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.sec__hd{display:grid; grid-template-columns:180px minmax(0,1fr); gap:36px; margin-bottom:46px; align-items:start}
.sec__hd h2{font-size:clamp(1.65rem,3.2vw,2.25rem); font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 96}
.sec__hd p{color:var(--muted); font-size:.96rem; max-width:62ch; margin-top:12px}
.sec__idx{color:var(--accent); padding-top:9px; border-top:2px solid var(--accent); display:inline-block}
@media (max-width:780px){ .sec__hd{grid-template-columns:1fr; gap:14px} section{padding:60px 0} }

.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1; transform:none}

/* ═══ DIAGNOSTIKA (cinkelis) ══════════════════════════ */
.dx{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:20px; align-items:start}
.dx__list{display:flex; flex-direction:column; gap:8px}
.dx__q{display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; padding:14px 15px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); color:var(--ink-2); font-family:inherit; font-size:.9rem; line-height:1.45; cursor:pointer; transition:border-color .22s, background .22s, color .22s, transform .22s}
.dx__q i{font-style:normal; font-family:var(--mono); font-size:.68rem; color:var(--muted); flex:none; padding-top:3px; font-variant-numeric:tabular-nums}
.dx__q:hover{border-color:var(--accent); color:var(--ink); transform:translateX(2px)}
.dx__q[aria-selected="true"]{border-color:var(--accent); background:var(--accent-wash); color:var(--ink)}
.dx__q[aria-selected="true"] i{color:var(--accent)}
.dx__panel{border:1px solid var(--line-2); border-radius:var(--radius); background:var(--surface); padding:24px 24px 22px; position:sticky; top:90px; box-shadow:var(--shadow)}
.dx__tag{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:15px}
.dx__tag b{width:6px; height:6px; border-radius:50%; background:var(--warm); display:block}
.dx__panel dl{margin:0; display:grid}
.dx__row{display:grid; grid-template-columns:132px minmax(0,1fr); gap:14px; padding:14px 0; border-bottom:1px solid var(--line)}
.dx__row:last-child{border-bottom:0; padding-bottom:0}
.dx__row dt{font-family:var(--mono); font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding-top:3px}
.dx__row:nth-child(2) dt{color:var(--warm)}
.dx__row:nth-child(3) dt{color:var(--ok)}
.dx__row dd{margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.55}
.dx--in{animation:dxin .4s cubic-bezier(.2,.8,.3,1)}
@keyframes dxin{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@media (max-width:900px){ .dx{grid-template-columns:1fr} .dx__panel{position:static} }

/* ═══ BUILDS ══════════════════════════════════════════ */
.builds{display:flex; flex-direction:column; gap:20px}
.build{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; transition:border-color .3s, box-shadow .3s, transform .3s}
.build:hover{border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-2px)}
.build:nth-child(even) .build__vis{order:-1; border-right:1px solid var(--line); border-left:0}
.build__txt{padding:30px 30px 32px; display:flex; flex-direction:column; gap:12px}
.build__no{display:flex; align-items:center; gap:10px; color:var(--accent)}
.build__no b{font-family:var(--mono); font-size:1.05rem; font-weight:600; color:var(--warm); font-variant-numeric:tabular-nums}
.build__txt h3{font-size:1.26rem; font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 40}
.build__txt > p{font-size:.92rem; color:var(--ink-2)}
.build__meta{margin-top:6px; display:grid; gap:10px}
.build__meta > div{display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; align-items:start; font-size:.85rem}
.build__meta dt{color:var(--accent); font-family:var(--mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; padding-top:3px}
.build__meta dd{margin:0; color:var(--ink-2)}
.build__vis{background:var(--surface-2); border-left:1px solid var(--line); padding:26px; display:grid; place-items:center; position:relative}
.build__vis::before{content:""; position:absolute; inset:0; background-image:radial-gradient(var(--line-2) 1px, transparent 1px); background-size:18px 18px; opacity:.45}
@media (max-width:900px){ .build{grid-template-columns:1fr} .build:nth-child(even) .build__vis{order:0; border-left:0; border-right:0} .build__vis{border-left:0; border-top:1px solid var(--line)} }

.mock{width:100%; max-width:430px; background:var(--surface); border:1px solid var(--line-2); border-radius:6px; box-shadow:var(--shadow); overflow:hidden; font-size:12px; position:relative; z-index:1}
.mock__bar{display:flex; align-items:center; gap:6px; padding:9px 11px; background:var(--surface-3); border-bottom:1px solid var(--line-2)}
.mock__bar i{width:7px; height:7px; border-radius:50%; background:var(--line-2); display:block}
.mock__bar span{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; color:var(--muted); margin-left:6px}
.mock__body{padding:14px}

.dlv{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.dlv div{padding:12px 6px; text-align:center; background:var(--surface-2); transition:background .3s}
.mock:hover .dlv div{background:var(--surface-3)}
.dlv svg{width:20px; height:20px; color:var(--accent); margin-bottom:6px}
.dlv b{display:block; font-size:9.5px; font-weight:600; color:var(--ink); line-height:1.25}
.dlv em{display:block; font-style:normal; font-size:8.5px; color:var(--muted); margin-top:2px}

.flt{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px}
.flt b{font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:5px 8px; border:1px solid var(--line-2); border-radius:3px; color:var(--muted); font-weight:500}
.flt b.on{background:var(--accent); border-color:var(--accent); color:#fff}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.cards i{display:block; aspect-ratio:3/4; background:linear-gradient(160deg,var(--surface-3),var(--surface-2)); border-radius:3px; position:relative}
.cards i::after{content:""; position:absolute; left:6px; right:22%; bottom:7px; height:4px; border-radius:2px; background:var(--line-2)}

.code{font-family:var(--mono); font-size:10.5px; line-height:1.75; color:var(--ink-2); white-space:pre; overflow-x:auto; display:block; padding:2px}
.code .k{color:var(--accent)}
.code .s{color:var(--ok)}
.code .c{color:var(--muted)}
.code .w{color:var(--warm)}

.tbl{width:100%; border-collapse:collapse; font-size:10.5px}
.tbl th{text-align:left; font-family:var(--mono); font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:6px 7px; border-bottom:1px solid var(--line-2)}
.tbl td{padding:7px; border-bottom:1px solid var(--line); color:var(--ink-2); font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.badge{font-family:var(--mono); font-size:8px; letter-spacing:.06em; padding:2px 5px; border-radius:3px; font-weight:600}
.badge.paid{background:var(--accent-wash); color:var(--accent)}
.badge.free{background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok)}
.tbl__foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; padding-top:9px; border-top:1px solid var(--line-2)}
.tbl__foot em{font-style:normal; font-family:var(--mono); font-size:9px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tbl__foot b{font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border:1px solid var(--accent); border-radius:3px; color:var(--accent); font-weight:500; flex:none}

.form label{display:block; font-size:10px; color:var(--muted); margin-bottom:4px; font-weight:500}
.form .sel{display:flex; align-items:center; justify-content:space-between; padding:8px 9px; border:1px solid var(--accent); border-radius:3px; font-size:11px; color:var(--ink); background:var(--surface); box-shadow:0 0 0 3px var(--accent-wash)}
.form .sel svg{width:10px; height:10px; color:var(--muted)}
.form .opts{margin-top:5px; border:1px solid var(--line-2); border-radius:3px; overflow:hidden}
.form .opts i{display:block; padding:7px 9px; font-size:10.5px; font-style:normal; color:var(--ink-2); border-bottom:1px solid var(--line)}
.form .opts i:last-child{border-bottom:0}
.form .opts i.sel-on{background:var(--accent-wash); color:var(--accent); font-weight:600}
.form .cond{margin-top:11px; padding:10px; border:1px dashed var(--line-2); border-radius:3px; display:grid; gap:6px}
.form .cond span{display:block; height:22px; border:1px solid var(--line); border-radius:3px; background:var(--surface-2); position:relative}
.form .cond span::before{content:attr(data-l); position:absolute; left:7px; top:50%; transform:translateY(-50%); font-size:9.5px; color:var(--muted); font-family:var(--mono)}

.rdr{display:grid; gap:5px}
.rdr > div{display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); align-items:center; gap:6px; font-family:var(--mono); font-size:9.5px}
.rdr code{background:var(--surface-2); border:1px solid var(--line); border-radius:3px; padding:4px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.rdr code.to{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 34%,var(--line))}
.rdr em{font-style:normal; text-align:center; font-size:8px; letter-spacing:.04em; color:var(--warm); font-weight:600}
.lng{display:grid; gap:7px}
.lng > div{display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--line); border-radius:3px; background:var(--surface-2)}
.lng b{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--ink); width:22px}
.lng > div > span{flex:1; height:5px; border-radius:3px; background:var(--line-2); overflow:hidden; position:relative}
.lng > div > span::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w,100%); background:var(--accent); border-radius:3px}
.lng em{font-style:normal; font-family:var(--mono); font-size:9px; color:var(--muted); font-variant-numeric:tabular-nums; width:30px; text-align:right}

/* ═══ SVETAINĖS (galerija) ════════════════════════════ */
.sites{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:20px}
.site{display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s}
.site:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow)}
.site__chrome{display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--surface-3); border-bottom:1px solid var(--line-2)}
.site__chrome i{width:7px; height:7px; border-radius:50%; background:var(--line-2); display:block; flex:none}
.site__chrome i:first-child{background:var(--warm)}
.site__url{flex:1; margin-left:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.03em; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:3px 9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.site__shot{position:relative; aspect-ratio:16/10; background:linear-gradient(155deg,var(--surface-2),var(--surface-3)); overflow:hidden}
.site__shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.site:hover .site__shot img{transform:scale(1.03)}
.site__ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:20px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted)}
.site__ph b{font-family:var(--display); font-size:1.05rem; font-weight:600; letter-spacing:-.01em; color:var(--ink-2)}
.site__ph em{font-style:normal; font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; opacity:.7}
.site__meta{padding:17px 18px 18px; display:flex; flex-direction:column; gap:7px; flex:1}
.site__meta h3{font-size:1.02rem; font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 32; color:var(--ink)}
.site__meta p{font-size:.85rem; color:var(--muted); line-height:1.5}
.site__foot{margin-top:auto; padding-top:13px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.site__plat{font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; padding:3px 7px; border:1px solid var(--line); border-radius:3px; color:var(--muted)}
.site__tag{font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border:1px solid var(--accent); border-radius:999px; color:var(--accent); background:var(--accent-wash); white-space:nowrap; line-height:1.5}
.site__tag--warm{border-color:var(--warm); color:var(--warm); background:transparent}
.site__go{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:5px}
.site__go svg{width:11px; height:11px}

/* ═══ CAPABILITIES ════════════════════════════════════ */
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.cap{background:var(--surface); padding:26px 22px 28px}
.cap:hover{background:var(--surface-2)}
.cap h3{font-size:1.06rem; margin:14px 0 10px; font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 30}
.cap p{font-size:.88rem; color:var(--muted); line-height:1.58}
.cap__ic{width:30px; height:30px; color:var(--accent)}
.cap__ic svg{width:100%; height:100%}
.cap ul{margin-top:15px; display:flex; flex-wrap:wrap; gap:5px}
.cap li{font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; padding:3px 7px; background:var(--accent-wash); border-radius:3px; color:var(--accent)}

/* ═══ PROJECTS ════════════════════════════════════════ */
section{scroll-margin-top:80px}
.filterbar{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:16px 16px 16px; margin-bottom:26px}
.filterbar__hd{display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between; align-items:baseline; margin-bottom:14px; padding-bottom:13px; border-bottom:1px dashed var(--line-2)}
.filterbar__hd .lbl{color:var(--muted)}
.filterbar__hd .cnt{color:var(--accent); font-variant-numeric:tabular-nums}
.filters{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:9px 12px; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); border-radius:var(--radius); cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s}
.chip svg{width:14px; height:14px; flex:none; opacity:.9}
.chip:hover{color:var(--accent); border-color:var(--accent); transform:translateY(-1px)}
.chip .n{font-size:.65rem; letter-spacing:0; padding:1px 6px; border-radius:99px; background:var(--surface-2); color:var(--muted); font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.chip[aria-pressed="true"] .n{background:rgba(255,255,255,.24); color:#fff}
.chip[aria-pressed="true"] svg{opacity:1}

.pager{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:34px}
.pager[hidden]{display:none}
.pg{min-width:38px; height:38px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); border-radius:var(--radius); font-family:var(--mono); font-size:.78rem; font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums; transition:background .2s, color .2s, border-color .2s}
.pg:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.pg:disabled{opacity:.32; cursor:default}
.pg[aria-current="page"]{background:var(--accent); border-color:var(--accent); color:#fff}
.pg__nums{display:flex; gap:6px}
.pg svg{width:14px; height:14px}

.projects{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(335px,100%),1fr)); gap:18px}
.proj{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s, opacity .7s, background-color .45s}
.proj::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .38s cubic-bezier(.2,.8,.3,1)}
.proj:hover{border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow)}
.proj:hover::before{transform:scaleY(1)}
.proj[hidden]{display:none}
.proj__plat{display:flex; align-items:center; gap:8px; color:var(--accent)}
.dot{width:6px; height:6px; border-radius:50%; background:var(--warm); flex:none}
.proj h3{font-size:1.12rem; font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36; line-height:1.25}
.proj__sub{font-size:.87rem; color:var(--muted); margin-top:-6px}
.proj__work{display:flex; flex-direction:column; gap:9px}
.proj__work li{position:relative; padding-left:20px; font-size:.885rem; color:var(--ink-2); line-height:1.5}
.proj__work li::before{content:"›"; position:absolute; left:3px; top:-1px; color:var(--accent); font-family:var(--mono); font-weight:600}
.proj__foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:5px}
.stackpill{font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; padding:3px 7px; border:1px solid var(--line); border-radius:3px; color:var(--muted)}

/* ═══ PROCESS ═════════════════════════════════════════ */
.how{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(235px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.how > div{background:var(--surface); padding:26px 22px}
.how > div:hover{background:var(--surface-2)}
.how b{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:var(--warm); display:block; margin-bottom:12px; font-variant-numeric:tabular-nums}
.how h3{font-size:1rem; margin-bottom:9px; font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 28}
.how p{font-size:.87rem; color:var(--muted); line-height:1.55}

/* ═══ STACK ═══════════════════════════════════════════ */
.stack{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); gap:28px 34px}
.stack h4{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:12px}
.stack li{color:var(--ink-2); padding:4px 0; font-family:var(--mono); font-size:.79rem}

/* ═══ CONTACT ═════════════════════════════════════════ */
.contact{border-bottom:0; padding-bottom:70px}
.contact__grid{display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:46px; align-items:end}
.contact__side{display:flex; flex-direction:column; gap:22px}
.who{display:flex; align-items:center; gap:16px}
.avatar{position:relative; width:104px; height:104px; flex:none; border-radius:50%; background:radial-gradient(circle at 50% 32%, var(--surface-3), var(--surface-2)); border:1px solid var(--line-2); box-shadow:0 0 0 5px var(--accent-wash), 0 14px 30px -14px rgba(0,0,0,.6); overflow:hidden}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block}
.who__t b{display:block; font-family:var(--display); font-size:1.06rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-bottom:3px}
.who__t span{font-family:var(--mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
.contact h2{font-size:clamp(1.9rem,4.4vw,3rem); font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 120; margin-bottom:18px}
.contact p{color:var(--ink-2); max-width:48ch; font-size:1.02rem}
.cinfo li{display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.93rem}
.cinfo li > span:first-child{color:var(--muted)}
.cinfo a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s}
.cinfo a:hover{border-color:var(--accent)}
@media (max-width:840px){
  .contact__grid{grid-template-columns:1fr; gap:30px; align-items:start}
  .contact__txt{padding-bottom:0}
  .avatar{width:84px; height:84px}
}

footer{padding:28px 0 44px; color:var(--muted); font-size:.8rem; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
.sig{display:flex; align-items:center; gap:12px}
.sig svg{height:34px; width:auto; color:var(--accent)}

@media (max-width:760px){ :root{--code-op:.045} :root[data-theme="dark"]{--code-op:.05} }
@media (max-width:420px){ .wrap{padding-inline:18px} .brand b{font-size:.9rem} .brand b span{display:none} .bar__in{gap:12px} .tools{gap:6px} }

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}

/* ═══ DAUGIAPUSLAPIS ══════════════════════════════════ */
.bar nav a.is-active{color:var(--ink)}
.bar nav a.is-active::after{right:0}
@media (max-width:960px){ .bar nav{display:none} }

/* puslapio antraštė (vidiniai puslapiai) */
.pagehead{position:relative; padding:70px 0 54px; border-bottom:1px solid var(--line); overflow:hidden}
.pagehead h1{font-size:clamp(2rem,4.6vw,3.1rem); font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 120; letter-spacing:-.028em; margin-bottom:18px}
.pagehead p{color:var(--ink-2); font-size:1.05rem; max-width:60ch}
.crumbs{display:flex; align-items:center; gap:9px; margin-bottom:18px; color:var(--muted)}
.crumbs a{color:var(--accent); text-decoration:none}
.crumbs a:hover{border-bottom:1px solid var(--accent)}
@media (max-width:780px){ .pagehead{padding:44px 0 38px} }

/* sekcijos nuoroda į vidinį puslapį */
.more{display:inline-flex; align-items:center; gap:9px; margin-top:26px; font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--accent); text-decoration:none; padding:11px 16px; border:1px solid var(--line-2); border-radius:var(--radius); transition:border-color .2s, transform .2s, background .2s}
.more:hover{border-color:var(--accent); background:var(--accent-wash); transform:translateY(-2px)}
.more svg{width:13px; height:13px}
.sec__foot{display:flex; justify-content:center; margin-top:8px}

/* projektų santrauka pradžios puslapyje */
.platsum{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.platsum a{background:var(--surface); padding:22px 20px 24px; text-decoration:none; display:flex; flex-direction:column; gap:9px; transition:background .25s}
.platsum a:hover{background:var(--surface-2)}
.platsum b{font-family:var(--display); font-size:1.7rem; font-weight:600; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums}
.platsum span{font-family:var(--mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.platsum em{font-style:normal; font-size:.84rem; color:var(--ink-2); line-height:1.45}

/* ═══ SVETAINIŲ KORTELĖ (desktop + mobile) ════════════ */
.sites2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(468px,100%),1fr)); gap:20px}
.siterow{display:flex; flex-direction:column; gap:11px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:20px; transition:border-color .25s, box-shadow .25s, transform .25s}
.siterow:hover{border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-2px)}
.siterow__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px}
.siterow__head h3{font-size:1.12rem; font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 36}
.siterow__head .site__plat{margin-left:auto}
.siterow > p{font-size:.86rem; color:var(--muted); line-height:1.55}
.siterow__shots{display:grid; grid-template-columns:minmax(0,1fr) 126px; gap:14px; align-items:end; margin-top:4px}
.sitecol{display:flex; flex-direction:column; gap:8px; min-width:0}
.sitecol__lbl{font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.shot{border:1px solid var(--line-2); border-radius:6px; overflow:hidden; background:var(--surface-2)}
.shot__img{position:relative; aspect-ratio:600/317; overflow:hidden; background:linear-gradient(155deg,var(--surface-2),var(--surface-3))}
.shot__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.phone{position:relative; width:100%; border:2px solid var(--line-2); border-radius:19px; padding:7px 5px 8px; background:var(--surface-2); box-shadow:var(--shadow)}
.phone::before{content:""; position:absolute; left:50%; top:11px; transform:translateX(-50%); width:34px; height:4px; border-radius:99px; background:var(--line-2); z-index:2}
.phone__scr{position:relative; aspect-ratio:43/80; border-radius:13px; overflow:hidden; background:linear-gradient(160deg,var(--surface-3),var(--surface-2))}
.phone__scr img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.phone__ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:8px; font-family:var(--mono); font-size:.5rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.phone__ph b{font-size:1.1rem; color:var(--line-2)}
.siterow .site__foot{margin-top:6px; padding-top:12px; border-top:1px solid var(--line); justify-content:flex-end}
@media (max-width:520px){
  .siterow__shots{grid-template-columns:minmax(0,1fr) 104px; gap:10px}
}

/* ═══ KONTAKTAI (perdaryta) ═══════════════════════════ */
.contact{border-bottom:0; padding-bottom:70px}
.contact__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:start}
.contact__txt{min-width:0}
.contact__side{min-width:0; display:flex; flex-direction:column; gap:20px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
.who{display:flex; align-items:center; gap:16px}
.avatar{position:relative; width:88px; height:88px; flex:none; border-radius:50%; background:radial-gradient(circle at 50% 32%, var(--surface-3), var(--surface-2)); border:1px solid var(--line-2); box-shadow:0 0 0 5px var(--accent-wash); overflow:hidden}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block}
.who__t{min-width:0}
.who__t b{display:block; font-family:var(--display); font-size:1.08rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-bottom:4px}
.who__t span{font-family:var(--mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); display:block; line-height:1.4}
.contact__side .cinfo{margin:0}
.contact__side .cinfo li{padding:11px 0}
.contact__side .cinfo li:last-child{border-bottom:0; padding-bottom:0}
@media (max-width:860px){
  .contact__grid{grid-template-columns:1fr; gap:30px}
  .avatar{width:74px; height:74px}
}

/* ═══ LOGOTIPAS ANTRAŠTĖJE ════════════════════════════ */
.brand{display:flex; align-items:center; gap:0; text-decoration:none}
.brand__logo{display:block; height:44px; width:auto; max-width:330px}
.brand__logo--light{display:none}
:root[data-theme="light"] .brand__logo--dark{display:none}
:root[data-theme="light"] .brand__logo--light{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .brand__logo--dark{display:none}
  :root:not([data-theme="dark"]) .brand__logo--light{display:block}
}
@media (max-width:1100px){ .brand__logo{height:38px; max-width:260px} }
@media (max-width:460px){
  .brand__logo{height:30px; max-width:180px}
  .bar__in{gap:10px; height:66px}
  .tools{gap:7px}
  .iconbtn{width:34px; height:33px}
  .burger{width:36px; height:34px}
}
footer .brand__logo{height:34px; opacity:.92}

a.iconbtn{text-decoration:none}
.iconbtn--mail{color:var(--accent); border-color:var(--accent)}
.iconbtn--mail:hover{background:var(--accent); color:#fff}

/* ═══ UŽKLAUSOS FORMA ═════════════════════════════════ */
.cform{margin-top:26px}
.cform__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld--full{grid-column:1 / -1}
.fld > span{font-family:var(--mono); font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.fld input,.fld select,.fld textarea{
  font-family:var(--body); font-size:.92rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--radius); padding:11px 12px; width:100%;
  transition:border-color .2s, box-shadow .2s; appearance:none;
}
.fld textarea{min-height:112px; resize:vertical; line-height:1.55}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px; cursor:pointer}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.fld input:invalid:not(:placeholder-shown),.fld textarea:invalid:not(:placeholder-shown){border-color:var(--warm)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted); opacity:.7}
.cform__foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:20px}
.cform__note{font-size:.8rem; color:var(--muted); line-height:1.5; margin-top:12px; max-width:60ch}
.cform__msg{display:none; margin-top:14px; padding:12px 14px; border:1px solid var(--ok); border-radius:var(--radius); background:color-mix(in srgb,var(--ok) 12%,transparent); color:var(--ok); font-size:.88rem}
.cform__msg.on{display:block}
.linkbtn{background:none; border:0; padding:0; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.linkbtn:hover{color:var(--accent); border-color:var(--accent)}
@media (max-width:560px){ .cform__grid{grid-template-columns:1fr} }

/* ═══ APSAUGA NUO ROBOTŲ ══════════════════════════════ */
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}

/* ═══ MOBILUS SKYDELIS IŠ DEŠINĖS ═════════════════════ */
.desk-only{display:flex}
@media (max-width:960px){ .desk-only{display:none} }

.burger{display:none; width:38px; height:36px; place-items:center; border:1px solid var(--line-2); border-radius:var(--radius); background:transparent; color:var(--ink); cursor:pointer; transition:border-color .2s, color .2s}
.burger:hover{border-color:var(--accent); color:var(--accent)}
.burger span{display:block; width:17px; height:1.7px; background:currentColor; border-radius:2px; position:relative; transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.7px; background:currentColor; border-radius:2px; transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px; width:11px}
.burger[aria-expanded="true"] span{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(-90deg)}
.burger[aria-expanded="true"] span::after{width:17px; transform:translateY(-5.5px) rotate(-90deg); opacity:0}
@media (max-width:960px){ .burger{display:grid} }

.drawer{position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none}
.drawer.open{visibility:visible; pointer-events:auto}
.drawer__scrim{position:absolute; inset:0; background:rgba(4,8,16,.62); backdrop-filter:blur(3px); opacity:0; transition:opacity .38s ease}
.drawer.open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(360px,88vw);
  background:var(--surface); border-left:1px solid var(--line-2);
  box-shadow:-28px 0 60px -30px rgba(0,0,0,.7);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .42s cubic-bezier(.22,.85,.28,1);
}
.drawer.open .drawer__panel{transform:none}
.drawer__panel::before{content:""; position:absolute; inset:0; background:radial-gradient(85% 42% at 100% 0%, var(--glow), transparent 62%); pointer-events:none}

.drawer__top{display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line); position:relative; z-index:1}
.drawer__top .brand__logo{height:32px; max-width:200px}
.drawer__x{margin-left:auto; width:36px; height:36px; flex:none; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:var(--radius); background:transparent; color:var(--ink-2); cursor:pointer; transition:border-color .2s, color .2s, transform .3s}
.drawer__x:hover{border-color:var(--accent); color:var(--accent); transform:rotate(90deg)}
.drawer__x svg{width:15px; height:15px}

.drawer__nav{display:flex; flex-direction:column; padding:8px 0; position:relative; z-index:1}
.drawer__nav a{display:flex; align-items:center; gap:14px; padding:15px 20px; text-decoration:none; color:var(--ink-2); border-bottom:1px solid var(--line); font-size:1.02rem; font-weight:500; opacity:0; transform:translateX(16px); transition:color .2s, background .2s}
.drawer.open .drawer__nav a{animation:drawIn .42s cubic-bezier(.2,.8,.3,1) forwards}
.drawer.open .drawer__nav a:nth-child(1){animation-delay:.10s}
.drawer.open .drawer__nav a:nth-child(2){animation-delay:.15s}
.drawer.open .drawer__nav a:nth-child(3){animation-delay:.20s}
.drawer.open .drawer__nav a:nth-child(4){animation-delay:.25s}
.drawer.open .drawer__nav a:nth-child(5){animation-delay:.30s}
@keyframes drawIn{to{opacity:1; transform:none}}
.drawer__nav a i{font-style:normal; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--muted); width:20px; flex:none}
.drawer__nav a svg{width:15px; height:15px; margin-left:auto; color:var(--muted); transition:transform .25s, color .2s}
.drawer__nav a:hover{color:var(--ink); background:var(--surface-2)}
.drawer__nav a:hover svg{transform:translateX(3px); color:var(--accent)}
.drawer__nav a.is-active{color:var(--accent); background:var(--accent-wash)}
.drawer__nav a.is-active i{color:var(--accent)}

.drawer__info{padding:22px 20px 10px; display:flex; flex-direction:column; gap:12px; position:relative; z-index:1}
.drawer__lbl{color:var(--muted)}
.drawer__mail{font-family:var(--mono); font-size:.92rem; color:var(--accent); text-decoration:none; word-break:break-all; border-bottom:1px solid transparent}
.drawer__mail:hover{border-color:var(--accent)}
.drawer__meta{display:flex; flex-direction:column; gap:0; margin-top:4px}
.drawer__meta li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.84rem}
.drawer__meta li span:first-child{color:var(--muted)}
.drawer__meta li span:last-child{color:var(--ink-2); text-align:right}
.drawer__cta{justify-content:center; margin-top:14px}

.drawer__foot{margin-top:auto; padding:16px 20px 22px; display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); position:relative; z-index:1}
.drawer__foot .seg{flex:1}
.drawer__foot .seg button{flex:1; padding:9px 0; font-size:.72rem}
.drawer__foot .iconbtn{width:40px; height:36px}
body.locked{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .drawer__panel{transition:none}
  .drawer.open .drawer__nav a{animation:none; opacity:1; transform:none}
}