/* ═══════════════════════════════════════════════
   STRANGER PRINTS — Complete Stylesheet
   Version: 2.0 — Static HTML Site
   ═══════════════════════════════════════════════ */

/* ── RESET & VARIABLES ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:dark;
  --bg:#070709;--bg1:#0c0c10;--bg2:#111118;--bg3:#18181f;
  --brd:#1f1f2a;--brd2:#2a2a38;
  --tx:#a0a0ae;--txd:#686878;--txm:#484858;
  --mag:#FF2D78;--mag-d:rgba(255,45,120,0.08);--mag-b:rgba(255,45,120,0.14);
  --mag-g:0 0 12px rgba(255,45,120,0.25),0 0 40px rgba(255,45,120,0.08);
  --cy:#00D4FF;--cy-d:rgba(0,212,255,0.08);--cy-b:rgba(0,212,255,0.14);
  --cy-g:0 0 12px rgba(0,212,255,0.25),0 0 40px rgba(0,212,255,0.08);
  --fp:'Silkscreen',monospace;--fm:'Space Mono',monospace;--fb:'Outfit',sans-serif;
}
html{font-size:16px;scroll-behavior:smooth;background:var(--bg);color-scheme:dark}
body{font-family:var(--fb);color:var(--tx);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(255,45,120,0.3);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:3px}
input,textarea,select,button{background:var(--bg1);color:var(--tx);border:1px solid var(--brd);font-family:inherit}
.c{max-width:1200px;margin:0 auto;padding:0 24px}
.mg{color:var(--mag)}.cy{color:var(--cy)}

/* Noise + scanlines */
body::before{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::after{content:'';position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.015) 3px,rgba(0,0,0,0.015) 4px)}


/* ── TOPBAR ── */
.topbar{background:var(--bg1);border-bottom:1px solid var(--brd);padding:7px 0;position:relative;z-index:10}
.topbar .c{display:flex;justify-content:space-between;align-items:center}
.tl,.tr{display:flex;align-items:center;gap:20px}
.topbar span,.topbar a{font-family:var(--fm);font-size:0.7rem;color:var(--txm);letter-spacing:0.03em}
.topbar a:hover{color:var(--mag)}
.dot-pulse{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mag);box-shadow:0 0 8px rgba(255,45,120,0.45);margin-right:6px;animation:pul 2.5s infinite}
@keyframes pul{0%,100%{opacity:1}50%{opacity:0.3}}


/* ── HEADER ── */
.hdr{background:rgba(7,7,9,0.92);backdrop-filter:blur(24px);border-bottom:1px solid var(--brd);position:sticky;top:0;z-index:100}
.hdr .c{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--fp);font-size:1.50rem;letter-spacing:2px;color:var(--tx)}
.logo b{color:var(--mag);text-shadow:var(--mag-g)}
.nav-toggle{display:none}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-family:var(--fm);font-size:1rem;color:var(--txm);transition:color 0.25s}
.nav a:hover,.nav a.on{color:var(--mag)}
.nav a.on{text-shadow:var(--mag-g)}


/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;font-family:var(--fb);font-size:0.84rem;font-weight:600;border:none;border-radius:4px;cursor:pointer;transition:all 0.3s;letter-spacing:0.01em}
.btn-m{background:var(--mag);color:var(--bg);box-shadow:var(--mag-g)}
.btn-m:hover{box-shadow:0 0 30px rgba(255,45,120,0.5),0 0 80px rgba(255,45,120,0.15)}
.btn-ob{background: var(--mag);border:1.5px solid var(--mag);color:#fff !important }
.btn-ob:hover{background:var(--mag);color:#fff !important;box-shadow:0 0 30px rgba(255,45,120,0.5),0 0 80px rgba(255,45,120,0.15)}
.btn-gh{background:transparent;border:1.5px solid var(--brd2);color:var(--txd)}
.btn-gh:hover{border-color:var(--cy);color:var(--cy)}
.btn-lg{padding:14px 32px;font-size:0.92rem}


/* ── SECTIONS ── */
.sec{padding:90px 0;position:relative;z-index:1}
.sep{border-top:1px solid var(--brd)}
.sh{text-align:center;margin-bottom:56px}
.sh-tag{font-family:var(--fm);font-size:0.7rem;color:var(--mag);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:10px}
.sh-tag::before,.sh-tag::after{content:'';width:24px;height:1px;background:var(--brd2)}
.sh-t{font-size:2.4rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:14px;color:#8e8e9e}
.sh-s{font-size:0.98rem;color:var(--txd);max-width:500px;margin:0 auto;line-height:1.7}


/* ── PAGE HERO (inner pages) ── */
.pg-hero{padding:60px 0 50px;border-bottom:1px solid var(--brd);position:relative;overflow:hidden}
.pg-hero .hero-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.pg-hero h1{font-size:2.6rem;font-weight:800;color:#8e8e9e;margin-bottom:12px;letter-spacing:-0.02em}
.pg-hero h1 .mg{color:var(--mag);text-shadow:var(--mag-g)}
.pg-hero h1 .cy{color:var(--cy);text-shadow:var(--cy-g)}
.pg-hero p{font-size:1rem;color:var(--txd);max-width:560px;line-height:1.7}
.breadcrumb{font-family:var(--fm);font-size:0.7rem;color:var(--txm);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.breadcrumb a{color:var(--txm);transition:color 0.2s}
.breadcrumb a:hover{color:var(--mag)}
.breadcrumb span{color:var(--mag)}


/* ── HOMEPAGE HERO ── */
.hero{padding:90px 0 100px;position:relative;overflow:hidden;  background-image: url("./img/hero-bg.jpeg");background-size:cover;background-position:center}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.gl-a{width:500px;height:500px;top:-180px;right:5%;background:radial-gradient(circle,rgba(255,45,120,0.06),transparent 70%)}
.gl-b{width:400px;height:400px;bottom:-120px;left:0;background:radial-gradient(circle,rgba(0,212,255,0.05),transparent 70%)}
.hero .c{display:grid;grid-template-columns:1.15fr 0.85fr;gap:50px;align-items:center;position:relative;z-index:1}
.hero-lab{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:0.72rem;color:var(--mag);background:var(--mag-d);border:1px solid var(--mag-b);padding:5px 14px;border-radius:3px;margin-bottom:22px;letter-spacing:0.06em}
.hero-lab::before{content:'▸';opacity:0.5}
.hero h1{font-size:3.4rem;font-weight:800;line-height:1.08;letter-spacing:-0.02em;margin-bottom:22px;color:#8e8e9e}
.hero h1 .mg{color:var(--mag);text-shadow:var(--mag-g)}
.hero h1 .cy{color:var(--cy);text-shadow:var(--cy-g)}
.hero-p{font-size:1.05rem;line-height:1.75;color:var(--txd);margin-bottom:34px;max-width:480px}
.hero-p strong{color:var(--tx)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.hero-nums{display:flex;gap:34px}
.hero-num{padding-left:14px;border-left:2px solid var(--mag);box-shadow:-2px 0 8px rgba(255,45,120,0.12)}
.hero-num b{display:block;font-family:var(--fp);font-size:1.35rem;color:var(--mag);text-shadow:var(--mag-g)}
.hero-num span{font-family:var(--fm);font-size:0.72rem;color:var(--txm);margin-top:3px;display:block}

/* Terminal */
.term{background:var(--bg1);border:1px solid var(--brd);border-radius:10px;overflow:hidden;position:relative}
.term-bar{background:var(--bg2);border-bottom:1px solid var(--brd);padding:10px 14px;display:flex;align-items:center;gap:8px}
.term-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.term-t{font-family:var(--fm);font-size:0.65rem;color:var(--txm);margin-left:8px}
.term-body{padding:24px;font-family:var(--fm);font-size:0.72rem;line-height:2;color:var(--txd)}
.term-body .mg{color:var(--mag)}.term-body .cy{color:var(--cy)}.term-body .dm{color:var(--txm)}.term-body .wh{color:var(--tx)}
.cur{display:inline-block;width:7px;height:14px;background:var(--mag);animation:blk 1s step-end infinite;vertical-align:middle;margin-left:2px}
@keyframes blk{50%{opacity:0}}
.term-prog{margin-top:14px;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.term-prog-bar{height:100%;width:73%;border-radius:3px;background:linear-gradient(90deg,var(--mag),var(--cy));box-shadow:var(--mag-g);animation:pp 3s ease-in-out infinite}
@keyframes pp{0%,100%{opacity:1}50%{opacity:0.55}}

/* Floating tags */
.ft{position:absolute;background:var(--bg2);border:1px solid var(--brd);border-radius:6px;padding:10px 14px;display:flex;align-items:center;gap:10px;z-index:2;animation:flo 5s ease-in-out infinite}
.ft1{top:0;right:-24px}.ft2{bottom:70px;left:-30px;animation-delay:1.5s}.ft3{bottom:-8px;right:30px;animation-delay:.7s}
@keyframes flo{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ft-d{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ft-d.mg{background:var(--mag);box-shadow:var(--mag-g)}.ft-d.cy{background:var(--cy);box-shadow:var(--cy-g)}
.ft-tx{font-family:var(--fm);font-size:0.7rem;color:var(--txd)}
.ft-sub{font-size:0.62rem;color:var(--txm);margin-top:1px}

/* Marquee */
.mrq{border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);background:var(--bg1);padding:14px 0;overflow:hidden}
.mrq-tk{display:flex;gap:50px;animation:msc 28s linear infinite;white-space:nowrap}
@keyframes msc{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.mrq-i{font-family:var(--fp);font-size:0.7rem;color:var(--txm);letter-spacing:2px;display:flex;align-items:center;gap:16px;flex-shrink:0}
.mrq-i .d{width:3px;height:3px;background:var(--mag);border-radius:50%;box-shadow:0 0 6px rgba(255,45,120,0.4)}


/* ── SLIDER (grid desktop, scroll mobile) ── */
.sl-wrap{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sl-wrap::-webkit-scrollbar{display:none}
.sl-track{display:flex;gap:16px;max-width:1200px;margin:0 auto;padding:0 24px;flex-wrap:wrap}
.sl-nav{margin-top:24px;display:none;justify-content:center;align-items:center;gap:8px}
.sl-btn{width:38px;height:38px;border-radius:6px;background:var(--bg1);border:1px solid var(--brd);color:var(--txd);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.25s;font-family:var(--fm)}
.sl-btn:hover{border-color:var(--mag);color:var(--mag)}
.sl-dots{display:flex;align-items:center;gap:6px;padding:0 8px}
.sl-dot{width:8px;height:8px;border-radius:50%;background:var(--brd);transition:all 0.3s;cursor:pointer}
.sl-dot.on{background:var(--mag);box-shadow:var(--mag-g);width:24px;border-radius:4px}


/* ── CARDS (no translateY on hover) ── */
.sv{flex:1 1 calc(33.333% - 12px);min-width:280px;scroll-snap-align:start;background:var(--bg1);border:1px solid var(--brd);border-radius:8px;padding:32px 24px;transition:border-color 0.35s;position:relative;overflow:hidden}
.sv::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;transform:scaleX(0);transition:transform 0.35s;transform-origin:left}
.sv:nth-child(odd)::after{background:var(--mag)}.sv:nth-child(even)::after{background:var(--cy)}
.sv:hover{border-color:var(--brd2)}.sv:hover::after{transform:scaleX(1)}
.sv-ico{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:18px}
.sv-ico.mg{background:var(--mag-d);border:1px solid var(--mag-b)}
.sv-ico.cy{background:var(--cy-d);border:1px solid var(--cy-b)}
.sv h3{font-size:1.02rem;font-weight:700;margin-bottom:8px;color:#888898}
.sv p{font-size:0.84rem;line-height:1.7;color:var(--txd)}
.sv-tag{display:inline-block;font-family:var(--fm);font-size:0.66rem;padding:3px 10px;border-radius:3px;margin-top:12px;letter-spacing:0.03em}
.sv-tag.mg{background:var(--mag-d);color:var(--mag)}
.sv-tag.cy{background:var(--cy-d);color:var(--cy)}

.mt{flex:1 1 calc(25% - 12px);min-width:180px;scroll-snap-align:start;background:var(--bg1);border:1px solid var(--brd);border-radius:8px;padding:24px 18px;text-align:center;transition:border-color 0.3s}
.mt:hover{border-color:var(--brd2)}
.mt-sw{width:50px;height:50px;border-radius:50%;margin:0 auto 14px;position:relative}
.mt-sw::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px dashed var(--brd2)}
.mt h4{font-size:0.9rem;font-weight:600;margin-bottom:3px;color:#888898}
.mt p{font-size:0.7rem;color:var(--txm);font-family:var(--fm)}

.pc-card{flex:1 1 calc(25% - 12px);min-width:250px;scroll-snap-align:start;background:var(--bg1);border:1px solid var(--brd);border-radius:10px;padding:32px 28px;transition:border-color 0.35s}
.pc-card:hover{border-color:var(--brd2)}
.pc-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pc-n{font-family:var(--fp);font-size:1.6rem}
.pc-n.mg{color:var(--mag);text-shadow:var(--mag-g)}
.pc-n.cy{color:var(--cy);text-shadow:var(--cy-g)}
.pc-line{flex:1;height:2px;border-radius:1px;opacity:0.3}
.pc-line.mg{background:linear-gradient(90deg,var(--mag),transparent)}
.pc-line.cy{background:linear-gradient(90deg,var(--cy),transparent)}
.pc-ico{font-size:2rem;margin-bottom:14px}
.pc-card h4{font-size:1rem;font-weight:700;color:#888898;margin-bottom:8px}
.pc-card p{font-size:0.84rem;color:var(--txd);line-height:1.7}
.pc-ft{margin-top:16px}

.pt{flex:1 1 calc(33.333% - 12px);min-width:280px;scroll-snap-align:start;background:var(--bg1);border:1px solid var(--brd);border-radius:8px;overflow:hidden;transition:border-color 0.35s;position:relative}
.pt:hover{border-color:var(--brd2)}
.pt-img{width:100%;height:200px;display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative}
.pt-ov{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;background:linear-gradient(to top,var(--bg1),transparent)}
.pt-ov h4{font-size:0.88rem;font-weight:600;color:#888898}
.pt-ov p{font-size:0.68rem;color:var(--txm);font-family:var(--fm)}
.pt-b{position:absolute;top:10px;right:10px;font-family:var(--fp);font-size:0.58rem;padding:3px 9px;border-radius:3px;letter-spacing:1px}
.pt-b.mg{background:var(--mag-d);color:var(--mag);border:1px solid var(--mag-b)}
.pt-b.cy{background:var(--cy-d);color:var(--cy);border:1px solid var(--cy-b)}


/* ── STATS ── */
.stats{border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);padding:50px 0;background:var(--bg1)}
.stats-g{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.st-v{font-family:var(--fp);font-size:2.2rem;margin-bottom:5px}
.st-v.mg{color:var(--mag);text-shadow:var(--mag-g)}
.st-v.cy{color:var(--cy);text-shadow:var(--cy-g)}
.st-l{font-family:var(--fm);font-size:0.72rem;color:var(--txm);letter-spacing:0.04em}


/* ── CTA ── */
.cta{padding:100px 0;position:relative;overflow:hidden}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(255,45,120,0.04),transparent 65%);filter:blur(60px);pointer-events:none}
.cta-box{max-width:100%;margin:0 auto;text-align:center;position:relative;z-index:1;background:var(--bg1);border:1px solid var(--brd);border-radius:10px;padding:56px 44px}
.cta-box::before{content:'';position:absolute;top:-1px;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,var(--mag),transparent);box-shadow:var(--mag-g)}
.cta-box h2{font-size:2rem;font-weight:800;margin-bottom:12px;color:#8e8e9e}
.cta-box h2 .mg{color:var(--mag);text-shadow:var(--mag-g)}
.cta-box p{font-size:0.95rem;color:var(--txd);margin-bottom:30px;line-height:1.7}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-note{font-family:var(--fm);font-size:0.68rem;color:var(--txm);margin-top:18px}


/* ── FOOTER ── */
.ftr{background:var(--bg1);border-top:1px solid var(--brd);padding:56px 0 0}
.ftr-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.ftr-brand p{font-size:0.84rem;color:var(--txd);line-height:1.7;margin-top:12px}
.ftr h4{font-family:var(--fp);font-size:0.68rem;color:var(--mag);letter-spacing:2px;margin-bottom:16px;text-transform:uppercase}
.ftr ul{list-style:none}.ftr li{margin-bottom:9px;font-size:0.84rem;color:var(--txm);display:flex;align-items:center;gap:8px}
.ftr a{font-size:0.84rem;color:var(--txm);transition:color 0.2s}.ftr a:hover{color:var(--mag)}
.ftr-bot{margin-top:36px;padding:16px 0;border-top:1px solid var(--brd);display:flex;justify-content:space-between;align-items:center;font-family:var(--fm);font-size:0.7rem;color:var(--txm)}


/* ── CONTENT BLOCKS ── */
.content-block{background:var(--bg1);border:1px solid var(--brd);border-radius:10px;padding:40px 36px}
.content-block h2{font-size:1.5rem;font-weight:700;color:#888898;margin-bottom:16px}
.content-block h3{font-size:1.1rem;font-weight:600;color:#888898;margin:24px 0 10px}
.content-block p{font-size:0.92rem;line-height:1.8;color:var(--txd);margin-bottom:14px}
.content-block ul{list-style:none;margin-bottom:14px}
.content-block li{font-size:0.88rem;color:var(--txd);padding:6px 0 6px 20px;position:relative}
.content-block li::before{content:'▸';position:absolute;left:0;color:var(--mag)}
.quick-answers a{color:var(--mag);border-bottom:1px solid rgba(255,45,120,0.35);transition:all 0.2s}
.quick-answers a:hover{border-bottom-color:var(--mag);text-shadow:var(--mag-g)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}


/* ── TEAM ── */
.team-card{background:var(--bg1);border:1px solid var(--brd);border-radius:8px;padding:28px;text-align:center;transition:border-color 0.3s}
.team-card:hover{border-color:var(--brd2)}
.team-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:2rem;border:2px solid var(--brd)}
.team-card h4{font-size:0.95rem;font-weight:700;color:#888898;margin-bottom:4px}
.team-card .role{font-family:var(--fm);font-size:0.7rem;color:var(--mag);margin-bottom:10px}
.team-card p{font-size:0.82rem;color:var(--txd);line-height:1.6}


/* ── CONTACT FORM ── */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-family:var(--fm);font-size:0.72rem;color:var(--txd);margin-bottom:6px;letter-spacing:0.04em}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 16px;border-radius:6px;font-size:0.88rem;background:var(--bg2);border:1px solid var(--brd);color:var(--tx);transition:border-color 0.25s;outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--mag)}
.form-group textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.file-drop{border:2px dashed var(--brd);border-radius:8px;padding:30px;text-align:center;cursor:pointer;transition:border-color 0.25s}
.file-drop:hover{border-color:var(--mag)}


/* ── BLOG ── */
.blog-card{background:var(--bg1);border:1px solid var(--brd);border-radius:8px;overflow:hidden;transition:border-color 0.35s}
.blog-card:hover{border-color:var(--brd2)}
.blog-thumb{width:100%;height:180px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative}
.blog-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.blog-body{padding:24px}
.blog-meta{font-family:var(--fm);font-size:0.66rem;color:var(--txm);margin-bottom:10px;display:flex;gap:16px}
.blog-card h3{font-size:1rem;font-weight:700;color:#888898;margin-bottom:8px}
.blog-card h3 a{transition:color 0.2s}.blog-card h3 a:hover{color:var(--mag)}
.blog-card p{font-size:0.84rem;color:var(--txd);line-height:1.7;margin-bottom:14px}
.blog-link{font-family:var(--fm);font-size:0.72rem;color:var(--mag);transition:all 0.2s}
.blog-link:hover{text-shadow:var(--mag-g)}
.blog-featured{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:center}
.blog-featured-media{height:260px;border-radius:8px;overflow:hidden;border:1px solid var(--brd)}
.blog-featured-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px}
.blog-featured-meta{font-family:var(--fm);font-size:0.68rem;color:var(--txm)}

/* Blog single - prose */
.article{max-width:760px;margin:0 auto}
.article-meta{display:flex;align-items:center;gap:20px;font-family:var(--fm);font-size:0.7rem;color:var(--txm);margin-bottom:20px;flex-wrap:wrap}
.article-meta .author{display:flex;align-items:center;gap:8px}
.article-meta .author-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,rgba(255,45,120,0.15),rgba(0,212,255,0.15));display:flex;align-items:center;justify-content:center;font-size:0.75rem}
.article-meta .divider{width:1px;height:14px;background:var(--brd)}
.prose h2{font-size:1.5rem;font-weight:700;color:#8e8e9e;margin:40px 0 16px;letter-spacing:-0.01em}
.prose h3{font-size:1.15rem;font-weight:600;color:#888898;margin:28px 0 12px}
.prose p{font-size:0.95rem;line-height:1.85;color:var(--txd);margin-bottom:18px}
.prose strong{color:var(--tx)}
.prose a{color:var(--mag);border-bottom:1px solid rgba(255,45,120,0.3);transition:all 0.2s}
.prose a:hover{border-bottom-color:var(--mag)}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{font-size:0.92rem;color:var(--txd);line-height:1.7;margin-bottom:8px}
.prose blockquote{border-left:3px solid var(--mag);padding:16px 24px;margin:24px 0;background:var(--bg1);border-radius:0 8px 8px 0}
.prose blockquote p{color:var(--txd);font-style:italic;margin-bottom:0}
.prose .img-placeholder{width:100%;height:300px;background:var(--bg1);border:1px solid var(--brd);border-radius:8px;margin:24px 0;display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.prose .article-hero-img{width:100%;height:auto;display:block;border:1px solid var(--brd);border-radius:8px;margin:24px 0}
.prose .caption{font-family:var(--fm);font-size:0.7rem;color:var(--txm);text-align:center;margin-top:-16px;margin-bottom:24px}
.cmp-table{width:100%;border-collapse:collapse;margin:24px 0;border:1px solid var(--brd);border-radius:8px;overflow:hidden}
.cmp-table th{background:var(--bg2);font-family:var(--fm);font-size:0.72rem;color:var(--mag);letter-spacing:0.06em;padding:12px 16px;text-align:left;border-bottom:1px solid var(--brd)}
.cmp-table td{padding:12px 16px;font-size:0.85rem;color:var(--txd);border-bottom:1px solid var(--brd)}
.cmp-table tr:nth-child(even) td{background:var(--bg1)}
.cmp-table tr:last-child td{border-bottom:none}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll .cmp-table{min-width:560px}
.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--brd)}
.share-bar{display:flex;align-items:center;gap:12px;margin-top:20px;padding:20px 0;border-top:1px solid var(--brd)}
.share-bar span{font-family:var(--fm);font-size:0.7rem;color:var(--txm)}
.share-btn{width:36px;height:36px;border-radius:6px;background:var(--bg1);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;font-size:0.9rem;cursor:pointer;transition:all 0.25s;color:var(--txd)}
.share-btn:hover{border-color:var(--mag);color:var(--mag)}
.author-box{background:var(--bg1);border:1px solid var(--brd);border-radius:10px;padding:28px;display:flex;gap:20px;margin-top:40px}
.author-box-av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(255,45,120,0.1),rgba(0,212,255,0.1));display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.author-box h4{font-size:0.95rem;font-weight:700;color:#888898;margin-bottom:2px}
.author-box .role{font-family:var(--fm);font-size:0.68rem;color:var(--mag);margin-bottom:8px}
.author-box p{font-size:0.84rem;color:var(--txd);line-height:1.6}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;padding-top:30px;border-top:1px solid var(--brd)}
.post-nav-item{background:var(--bg1);border:1px solid var(--brd);border-radius:8px;padding:20px;transition:border-color 0.3s;color:inherit}
.post-nav-item:hover{border-color:var(--brd2)}
.post-nav-label{font-family:var(--fm);font-size:0.65rem;color:var(--txm);margin-bottom:6px}
.post-nav-title{font-size:0.9rem;font-weight:600;color:#888898}
.post-nav-item.next{text-align:right}


/* ── INFO CARDS ── */
.info-card{background:var(--bg1);border:1px solid var(--brd);border-radius:8px;padding:28px;transition:border-color 0.3s}
.info-card:hover{border-color:var(--brd2)}
.info-card .ico{font-size:1.5rem;margin-bottom:14px}
.info-card h4{font-size:0.95rem;font-weight:700;color:#888898;margin-bottom:6px}
.info-card p{font-size:0.84rem;color:var(--txd);line-height:1.6}

.map-box{width:100%;height:300px;background:var(--bg2);border:1px solid var(--brd);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:0.8rem;color:var(--txm)}
.map-embed{position:relative;width:100%;height:300px;border:1px solid var(--brd);border-radius:8px;overflow:hidden;background:var(--bg2)}
.map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) invert(0.92) hue-rotate(180deg) saturate(0.8) contrast(1.08) brightness(0.9)}
.map-embed::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 10% 0%, rgba(255,45,120,0.12), transparent 42%),
  radial-gradient(circle at 95% 95%, rgba(0,212,255,0.12), transparent 40%)}


/* ── PORTFOLIO ARCHIVE ── */
.filter-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.filter-btn{font-family:var(--fm);font-size:0.72rem;padding:7px 18px;border-radius:4px;background:var(--bg1);border:1px solid var(--brd);color:var(--txd);cursor:pointer;transition:all 0.25s;letter-spacing:0.03em}
.filter-btn:hover{border-color:var(--mag);color:var(--mag)}
.filter-btn.on{background:var(--mag);color:var(--bg);border-color:var(--mag);box-shadow:var(--mag-g)}
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.port-card{background:var(--bg1);border:1px solid var(--brd);border-radius:8px;overflow:hidden;transition:border-color 0.35s;position:relative}
.port-card:hover{border-color:var(--brd2)}
.port-card-img{width:100%;height:220px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;position:relative}
.port-card-ov{position:absolute;inset:0;background:rgba(7,7,9,0.7);opacity:0;transition:opacity 0.3s;display:flex;align-items:center;justify-content:center}
.port-card:hover .port-card-ov{opacity:1}
.port-card-body{padding:20px}
.port-card-meta{display:flex;gap:8px;margin-bottom:10px}
.port-card h3{font-size:1rem;font-weight:700;color:#888898;margin-bottom:6px}
.port-card h3 a{transition:color 0.2s}.port-card h3 a:hover{color:var(--mag)}
.port-card p{font-size:0.82rem;color:var(--txd);line-height:1.6}
.port-card-footer{padding:0 20px 16px;display:flex;justify-content:space-between;align-items:center}
.port-card-tech{font-family:var(--fm);font-size:0.65rem;color:var(--txm)}
.port-card-link{font-family:var(--fm);font-size:0.7rem;color:var(--mag);transition:all 0.2s}
.port-card-link:hover{text-shadow:var(--mag-g)}
.port-stats{display:flex;gap:24px;font-family:var(--fm);font-size:0.68rem;color:var(--txm);margin-top:10px}


/* ── PORTFOLIO SINGLE ── */
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:40px}
.gallery-main{height:380px;background:var(--bg1);border:1px solid var(--brd);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:5rem;overflow:hidden}
.gallery-side{display:flex;flex-direction:column;gap:12px}
.gallery-thumb{flex:1;background:var(--bg1);border:1px solid var(--brd);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:2rem;cursor:pointer;transition:border-color 0.25s}
.gallery-thumb:hover{border-color:var(--mag)}
.spec-row{display:flex;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--brd)}
.spec-row:nth-child(odd){background:var(--bg1)}.spec-row:nth-child(even){background:var(--bg2)}
.spec-label{font-family:var(--fm);font-size:0.72rem;color:var(--txm);letter-spacing:0.04em}
.spec-val{font-size:0.88rem;color:#888898;font-weight:600}
.timeline{position:relative;padding-left:28px}
.timeline::before{content:'';position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--brd)}
.tl-step{position:relative;margin-bottom:24px}.tl-step:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-24px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--mag);background:var(--bg)}
.tl-step:nth-child(even) .tl-dot{border-color:var(--cy)}
.tl-step h4{font-size:0.9rem;font-weight:700;color:#888898;margin-bottom:4px}
.tl-step p{font-size:0.82rem;color:var(--txd);line-height:1.6}
.tl-time{font-family:var(--fm);font-size:0.65rem;color:var(--txm);margin-bottom:4px}
.testimonial{background:var(--bg1);border:1px solid var(--brd);border-radius:10px;padding:32px;position:relative}
.testimonial::before{content:'"';position:absolute;top:16px;left:24px;font-family:var(--fp);font-size:3rem;color:var(--mag);opacity:0.3}
.testimonial blockquote{font-size:0.95rem;color:var(--txd);line-height:1.8;font-style:italic;margin-bottom:16px;padding-left:8px}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,rgba(255,45,120,0.1),rgba(0,212,255,0.1));display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.testimonial-name{font-size:0.85rem;font-weight:600;color:#888898}
.testimonial-role{font-family:var(--fm);font-size:0.65rem;color:var(--txm)}
.proj-nav{display:flex;justify-content:space-between;padding:30px 0;border-top:1px solid var(--brd);margin-top:60px}
.proj-nav a{font-family:var(--fm);font-size:0.78rem;color:var(--txd);transition:color 0.2s}
.proj-nav a:hover{color:var(--mag)}


/* ── BROWSER FRAME (preview only) ── */
.bw{border-radius:12px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,0.7);border:1px solid #222;margin:30px auto;max-width:1440px}
.bw-bar{background:#111;padding:11px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #222}
.bw-dots{display:flex;gap:6px}.bw-dots span{width:10px;height:10px;border-radius:50%}
.bw-dots .r{background:#FF5F57}.bw-dots .y{background:#FEBC2E}.bw-dots .g{background:#28C840}
.bw-url{flex:1;background:#0a0a0a;border-radius:4px;padding:5px 12px;font-family:var(--fm);font-size:0.7rem;color:#444;border:1px solid #222}
.wm{position:fixed;bottom:16px;right:16px;z-index:9996;background:var(--bg1);border:1px solid var(--mag);color:var(--mag);font-family:var(--fp);font-size:0.6rem;letter-spacing:1px;padding:8px 16px;border-radius:4px;box-shadow:var(--mag-g)}


/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(prefers-color-scheme:light){
  :root{color-scheme:dark}
  html,body{background:var(--bg)!important;color:var(--tx)!important}
}

@media(max-width:1024px){
  .hero .c{grid-template-columns:1fr}
  .hero-vis{display:none}
  .stats-g{grid-template-columns:repeat(2,1fr)}
  .ftr-g{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .port-grid{grid-template-columns:repeat(2,1fr)}
  /* Slider: activate horizontal scroll */
  .sl-track{flex-wrap:nowrap;max-width:none;width:max-content;padding:0 24px}
  .sl-nav{display:flex}
  .sv{flex:none;width:300px;min-width:300px}
  .mt{flex:none;width:220px;min-width:220px}
  .pc-card{flex:none;width:300px;min-width:300px}
  .pt{flex:none;width:300px;min-width:300px}
  .gallery{grid-template-columns:1fr}
  .gallery-main{height:240px}
  .gallery-side{flex-direction:row}
  .gallery-thumb{height:80px}
}

@media(max-width:768px){
  .hero h1{font-size:2.3rem}
  .pg-hero h1{font-size:1.8rem}
  .sh-t{font-size:1.7rem}
  .hdr .c{position:relative}
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;border-radius:6px;border:1px solid var(--brd);
    background:var(--bg1);padding:10px;cursor:pointer
  }
  .nav-toggle span{
    display:block;width:100%;height:2px;background:var(--txd);border-radius:2px;
    transition:transform .2s ease,opacity .2s ease
  }
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{
    display:none;position:absolute;top:calc(100% + 1px);left:24px;right:24px;
    flex-direction:column;align-items:flex-start;gap:10px;
    background:var(--bg1);border:1px solid var(--brd);border-radius:8px;
    padding:14px;z-index:120
  }
  .nav.is-open{display:flex}
  .nav a{width:100%}
  .nav .btn{width:100%;justify-content:center}
  .stats-g{grid-template-columns:1fr}
  .ftr-g{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .port-grid{grid-template-columns:1fr}
  .cta-box{padding:36px 20px}
  .sl-track{gap:14px}
  .topbar{padding:8px 0}
  .topbar .c{flex-direction:column;align-items:center;gap:6px}
  .tl,.tr{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px}
  .topbar span,.topbar a{font-size:0.66rem;line-height:1.3}
  .tl span{display:inline-flex;align-items:center;gap:6px}
  .tr a{display:inline-flex;align-items:center;gap:6px}
  .tr a[href^="mailto:"]{word-break:break-word}
  .hero{padding:60px 0 70px}
  .hero-nums{flex-wrap:wrap;gap:20px}
  .sec{padding:60px 0}
  .stats{padding:36px 0}
  .cta{padding:60px 0}
  .ftr{padding:40px 0 0}
  .form-row{grid-template-columns:1fr}
  .content-block{padding:28px 20px}
  .blog-featured{grid-template-columns:1fr;gap:18px}
  .blog-featured-media{height:220px}
  .blog-featured-footer{flex-direction:column;align-items:flex-start}
  .table-scroll .cmp-table{min-width:520px}
  .post-nav{grid-template-columns:1fr}
  .author-box{flex-direction:column;align-items:center;text-align:center}
  .bw{margin:0;border-radius:0;border:none}
  .bw-bar{display:none}
  .wm{font-size:0.5rem;padding:6px 10px;bottom:10px;right:10px}
}

@media(max-width:480px){
  .topbar .c{align-items:flex-start}
  .tl,.tr{justify-content:flex-start}
  .topbar span,.topbar a{font-size:0.62rem}
}


/* ── ANIMATIONS ── */
.fu{opacity:0;transform:translateY(24px);transition:all 0.6s cubic-bezier(0.4,0,0.2,1)}
.fu.v{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.3s}