/* ALPHA CV — landing page (extends ui.css tokens & retro-glass windows) */
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px}
.skip:focus{left:12px}
.landing main,.lp-bar,.lp-foot{max-width:1240px;margin-left:auto;margin-right:auto}
.landing main{padding:0 clamp(14px,3vw,34px)}
.lp-bar{position:sticky;top:10px;z-index:40;margin:18px auto 0;width:calc(100% - 2*clamp(14px,3vw,34px));-webkit-transform:translateZ(0);transform:translateZ(0)}
.lp-nav{display:flex;gap:2px;margin-left:12px;font-family:'IBM Plex Mono',monospace}
.lp-nav a{padding:5px 11px;font-size:12px;font-weight:500;border-radius:6px;border:var(--bw) solid transparent;color:var(--ink);text-decoration:none;transition:all .18s var(--ease)}
.lp-nav a:hover{border-color:var(--ink);background:rgba(255,255,255,.8)}
.rbtn.big{padding:12px 20px;font-size:14px}
.lp-sec{margin-top:clamp(64px,9vw,110px)}
.lp-sec > .sec-title{font-size:13px;margin-bottom:22px}
.lp-lead{margin:-10px 0 22px;font-size:14px}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(36px,6vw,70px)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.06em;
  padding:5px 11px;border:var(--bw) solid var(--ink);border-radius:99px;background:rgba(255,255,255,.75);box-shadow:2px 2px 0 var(--ink)}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.hero h1{font-family:'Silkscreen',monospace;font-weight:400;font-size:clamp(26px,3.7vw,44px);line-height:1.12;letter-spacing:.01em;margin:20px 0 18px}
.hero h1 .hl{background:linear-gradient(transparent 62%, rgba(77,93,250,.28) 62%);padding:0 4px}
.hero .sub{font-size:clamp(15px,1.35vw,17px);line-height:1.65;color:rgba(20,22,33,.75);max-width:560px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:rgba(20,22,33,.7)}
.trust li::before{content:"✓ ";color:var(--ok);font-weight:700}

/* hero visual */
.hero-visual{position:relative;min-height:440px}
.mock-paper{position:relative;z-index:1;margin:78px 0 0 26px;animation:floaty 7s ease-in-out infinite}
.mock-ai{position:absolute;z-index:2;top:0;right:-6px;width:min(330px,82%);animation:floaty 7s ease-in-out -2s infinite}
.mock-ats{position:absolute;z-index:2;bottom:-18px;left:-8px;width:220px;animation:floaty 7s ease-in-out -4s infinite}
@keyframes floaty{50%{transform:translateY(-6px)}}
.beacon{width:9px;height:9px;border-radius:50%;background:var(--acc);border:var(--bw) solid var(--ink);animation:pulse 1.7s infinite}
.mock-ai-body{padding:11px 13px;font-size:12.5px;line-height:1.5;min-height:58px}
.caret{display:inline-block;width:7px;height:13px;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:pulse 1s steps(2) infinite}
.mp{display:grid;grid-template-columns:34% 66%;background:#fff;min-height:330px;font-size:11px;color:#3c455e}
.mp-side{background:linear-gradient(170deg,#3d4ec9,#6a4fd8);color:#fff;padding:16px 13px;display:flex;flex-direction:column;gap:3px}
.mp-photo{width:42px;height:42px;border-radius:10px;border:2px solid rgba(255,255,255,.7);background:radial-gradient(circle at 50% 38%,#ffd8bf 0 30%,transparent 31%),radial-gradient(circle at 50% 100%,#ffb48a 0 45%,transparent 46%),#8fa0ff;margin-bottom:8px}
.mp-side b{font-size:14px;font-weight:800}
.mp-side small{opacity:.85;font-size:10.5px}
.mp em{font-style:normal;font-weight:800;font-size:9px;letter-spacing:.16em;margin:12px 0 5px;color:#3d4ec9}
.mp-side em{color:rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px}
.mp-chips{display:flex;flex-wrap:wrap;gap:4px}
.mp-chips span{font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.mp-main{padding:14px 16px;display:flex;flex-direction:column}
.mp-main em:first-child{margin-top:2px}
.mp-main p{line-height:1.5;transition:background .4s}
.mp-row{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.mp-row b{color:#1d2333;font-size:11.5px}
.mp-row span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#8790a8;white-space:nowrap}
.mp-main ul{margin:4px 0 0 14px;line-height:1.5}
.mp-main li{transition:background .4s,color .4s}
.mp .flash{background:rgba(77,93,250,.14);border-radius:3px}
.mock-ats-body{display:flex;align-items:center;gap:10px;padding:10px 12px}
.ats-n b{font-family:'Silkscreen',monospace;font-size:26px;line-height:1}
.ats-n small{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(20,22,33,.6)}
.seg{flex:1;display:flex;gap:2px;border:var(--bw) solid var(--ink);border-radius:5px;padding:2px;background:#fff}
.seg i{flex:1;height:12px;border-radius:1px;transition:background .15s}
.seg i.f{background:var(--ink)}
.seg i.f.w{background:var(--warn)}
.seg i.f.b{background:var(--bad)}
.seg.big i{height:18px}

/* ---------- steps ---------- */
.step-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step-list li{padding:20px 20px 18px}
.step-list .num{font-family:'Silkscreen',monospace;font-size:26px;color:var(--acc);display:block;margin-bottom:8px}
.step-list b{font-size:16px;display:block;margin-bottom:6px}
.step-list p{font-size:13.5px;line-height:1.6;color:rgba(20,22,33,.72)}

/* ---------- features ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{padding:18px 18px 16px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.feat:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink-soft),0 26px 60px rgba(20,22,33,.14)}
.feat-ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--ink);color:#fff;border:var(--bw) solid var(--ink);box-shadow:2px 2px 0 var(--ink-soft);margin-bottom:12px}
.feat-ic.acc{background:var(--acc)}
.feat-ic.ok{background:var(--ok)}
.feat-ic svg{width:19px;height:19px}
.feat h3{font-size:15px;font-weight:800;margin-bottom:5px}
.feat p{font-size:13px;line-height:1.6;color:rgba(20,22,33,.72)}

/* ---------- demo ---------- */
.demo-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:start}
.demo-col{display:flex;flex-direction:column;gap:20px}
.tpl-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pill{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:6px;border:var(--bw) solid var(--ink);background:rgba(255,255,255,.75);transition:all .15s var(--ease)}
.pill:hover{background:#fff}
.pill.on{background:var(--ink);color:#fff;box-shadow:2px 2px 0 var(--acc)}
.acc-row{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.acc-row span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(20,22,33,.65)}
.sw{width:22px;height:22px;border-radius:50%;border:var(--bw) solid var(--ink);cursor:pointer;transition:transform .15s}
.sw:hover{transform:scale(1.15)}
.sw.sel{box-shadow:2.5px 2.5px 0 var(--ink)}
.dp-wrap{padding:14px;border-radius:8px;background:repeating-linear-gradient(45deg, rgba(20,22,33,.045) 0 10px, transparent 10px 20px)}
.dp{--racc:#3d4ec9;background:#fff;border:var(--bw) solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 var(--ink-soft);font-size:11.5px;line-height:1.5;color:#3c455e;min-height:290px;overflow:hidden;transition:box-shadow .2s}
.dp .dp-name{display:block;font-size:19px;font-weight:800;color:#1d2333}
.dp .dp-title{display:block;font-weight:600;color:#525d7a}
.dp .dp-contact{display:block;font-size:10.5px;color:#5b6480;margin-top:3px}
.dp .dp-h{display:block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--racc);margin:12px 0 5px}
.dp .dp-skills span{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:99px;margin:0 4px 4px 0;background:color-mix(in srgb,var(--racc) 12%,#fff);color:var(--racc);border:1px solid color-mix(in srgb,var(--racc) 30%,#fff)}
.dp .dp-item{margin-top:6px;color:#525d7a}
.dp .dp-item b{color:#1d2333}
.dp .dp-item span{float:right;font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#8790a8}
.dp p{margin-top:2px}
.dp-side,.dp-main{padding:18px 18px}
.dp.t-alpha{display:grid;grid-template-columns:36% 64%}
.dp.t-alpha .dp-side{background:linear-gradient(170deg,var(--racc),color-mix(in srgb,var(--racc) 55%,#7a4fd8));color:#fff}
.dp.t-alpha .dp-side *{color:#fff}
.dp.t-alpha .dp-side .dp-title,.dp.t-alpha .dp-side .dp-contact{opacity:.88}
.dp.t-alpha .dp-side .dp-h{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px}
.dp.t-alpha .dp-side .dp-skills span{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.dp:not(.t-alpha) .dp-side{padding-bottom:0}
.dp:not(.t-alpha) .dp-main{padding-top:0}
.dp.t-classic{font-family:Georgia,'Times New Roman',serif}
.dp.t-classic .dp-side{text-align:center}
.dp.t-classic .dp-h{border-bottom:1.5px solid var(--racc);padding-bottom:3px;text-align:left}
.dp.t-classic .dp-skills{text-align:left}
.dp.t-compact{font-size:10.5px;line-height:1.4}
.dp.t-compact .dp-name{font-size:16px}
.dp.t-compact .dp-h{margin:8px 0 3px}
.dp.t-editorial .dp-h{border-bottom:1px solid color-mix(in srgb,var(--racc) 40%,#d8dce7);padding-bottom:3px}
.dp.t-minimal .dp-h{color:#1d2333;font-weight:700;border-bottom:1px solid rgba(20,22,33,.12);padding-bottom:3px}
.dp.t-minimal .dp-skills span{background:none;border-color:rgba(20,22,33,.18);color:#3c455e}
.dp.t-bold .dp-name{font-size:21px;letter-spacing:.02em}
.dp.t-bold .dp-title{text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:10px}
.dp.t-bold .dp-h{display:inline-block;background:var(--racc);color:#fff;padding:3px 8px;border-radius:4px}
.ats-top-lp{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.ats-big b{font-family:'Silkscreen',monospace;font-size:38px;line-height:1;display:block;min-width:76px}
.ats-big small{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;color:rgba(20,22,33,.6)}
.checks{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;min-height:122px}
.chk{display:flex;gap:9px;align-items:baseline;font-size:12.5px;animation:pop .35s var(--ease) backwards}
.chk i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;flex:0 0 34px}
.chk.ok i{color:var(--ok)}.chk.warn i{color:var(--warn)}.chk.bad i{color:var(--bad)}
.jm-post{font-size:12.5px;line-height:1.6;color:rgba(20,22,33,.75);padding:10px 12px;border:var(--bw) dashed var(--ink-soft);border-radius:7px;background:rgba(255,255,255,.55)}
.jm-post b{color:var(--ink)}
.jm-cov{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;margin:12px 0 8px}
.jm-chips{display:flex;flex-wrap:wrap;gap:7px}
.jm-chips .chip{padding:4px 10px;border-radius:6px;font-size:10.5px;font-weight:600;font-family:'IBM Plex Mono',monospace;border:var(--bw) solid var(--ink);background:#fff;box-shadow:2px 2px 0 var(--ink-soft);animation:pop .3s var(--ease) backwards}
.jm-chips .chip.hit{background:var(--ink);color:#fff}
.jm-chips button.chip.miss{color:var(--bad);border-color:var(--bad);cursor:pointer;transition:all .15s}
.jm-chips button.chip.miss:hover{background:var(--bad);color:#fff}
.hint-lp{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(20,22,33,.55);margin-top:10px}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
.price-grid.one{grid-template-columns:1fr;max-width:430px}
.price-amt{font-family:'Silkscreen',monospace;font-size:40px;line-height:1.1}
.price-amt small{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(20,22,33,.6);margin-left:6px}
.price-sub{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:rgba(20,22,33,.65);margin-top:4px}
.price.pro{box-shadow:6px 6px 0 var(--acc),0 26px 60px rgba(20,22,33,.14)}
.price.pro .tb{background:var(--ink);color:#fff}
.price.pro .tb .stripes{background:repeating-linear-gradient(180deg,#fff 0 1.5px,transparent 1.5px 4px)}
.price.pro .tb .dots i{border-color:#fff;background:transparent}

/* ---------- faq ---------- */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px dashed var(--ink-soft)}
.faq details:last-child{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:700;font-size:14.5px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;font-weight:600;width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border:var(--bw) solid var(--ink);border-radius:6px;background:#fff;transition:transform .2s var(--ease)}
.faq details[open] summary::after{content:"–";background:var(--ink);color:#fff}
.faq summary:hover{background:rgba(255,255,255,.55)}
.faq details p{padding:0 18px 16px;font-size:13.5px;line-height:1.65;color:rgba(20,22,33,.75);max-width:700px}

/* ---------- final ---------- */
.final-body{padding:clamp(28px,5vw,52px) 22px;text-align:center}
.final h2{font-family:'Silkscreen',monospace;font-weight:400;font-size:clamp(20px,3vw,32px);line-height:1.2}
.final p{color:rgba(20,22,33,.7);margin:10px 0 22px;font-size:14px}
.lp-foot{margin:46px auto 40px}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero-visual{max-width:580px;width:100%;margin:10px auto 20px}
  .feat-grid{grid-template-columns:1fr 1fr}
  .demo-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .lp-nav{display:none}
  .step-list{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .lp-bar{top:6px;padding:7px 10px}
  .lp-bar .brand span{display:none}
  .lp-bar .rbtn{padding:7px 10px;font-size:12px}
  .feat-grid{grid-template-columns:1fr}
  .hero-visual{min-height:0}
  .mock-paper{margin:84px 0 0 0}
  .mock-ai{right:0;width:86%}
  .mock-ats{left:auto;right:6px;bottom:-26px;width:190px}
  .mp{grid-template-columns:38% 62%;min-height:290px}
  .hero-cta .rbtn{flex:1 1 100%}
  .dp.t-alpha{grid-template-columns:1fr}
}
/* ---------- touch devices / iOS WebKit (Safari + Chrome on iPhone) ----------
   Blur-behind glass + sticky + animated layers make WebKit stop repainting and
   swallow touches after scrolling back up. On phones: opaque glass, no floating
   animations, no fixed blurred orbs. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
  .landing .win,.lp-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.94)}
  .lp-bar{top:max(6px,env(safe-area-inset-top));box-shadow:4px 4px 0 var(--ink-soft)}
  .landing .orb{display:none}
  .mock-paper,.mock-ai,.mock-ats{animation:none}
  .rv{transition:opacity .4s ease;transform:none}
  .feat:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.mock-paper,.mock-ai,.mock-ats{animation:none}}