/* Fotile Pakistan — "Engineering" pages (MaxFold + Opal anatomy). Shared styles.
   New file. Dark tech-luxury, matches the rest of the site (Manrope, red + champagne gold). */
@font-face{font-family:"Manrope";font-weight:200 800;font-style:normal;font-display:swap;src:url("../fonts/manrope.woff2") format("woff2")}
:root{
  --bg:#0b0b0d;--bg2:#101013;--panel:#141417;--panel2:#18181c;--steel:#3a3d42;--steel-lt:#9ea2a8;
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);--txt:#f2f2f3;--dim:#8b8d92;--red:#e01e37;
  --gold:#d9bb86;--gold2:#b8955a;--ice:#9fd6ff;--mint:#7be0b0;--violet:#b9a2ff;--amber:#ffb36b;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.16,1,.3,1)
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--txt);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
@supports (overflow-x:clip){body{overflow-x:clip}}
img,svg{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
.wrap{max-width:1320px;margin:0 auto;padding:0 44px}
.pad{padding:clamp(80px,12vh,140px) 0}
section{position:relative}
.kick{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--steel-lt);font-weight:600}
.kick .dot{width:5px;height:5px;background:var(--red);border-radius:50%}
.h2{font-size:clamp(32px,4.6vw,62px);font-weight:200;line-height:1.04;letter-spacing:-2px}
.h2 b{font-weight:600}
.dim{color:var(--dim);font-weight:300}
.lead{font-size:clamp(17px,1.5vw,20px);font-weight:300;color:#c3c5c9;max-width:640px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.gold{color:var(--gold)}.red{color:var(--red)}
.reveal{opacity:0;transform:translateY(44px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.r2{transition-delay:.1s}.r3{transition-delay:.2s}.r4{transition-delay:.3s}
.btn-r{background:var(--red);color:#fff;padding:15px 34px;border-radius:4px;font-weight:600;font-size:14px;transition:.35s;display:inline-flex;align-items:center;gap:9px}
.btn-r:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(224,30,55,.32);background:#c81a30}
.btn-l{border:1px solid rgba(255,255,255,.25);color:#fff;padding:15px 34px;border-radius:4px;font-weight:500;font-size:14px;transition:.35s;display:inline-flex;align-items:center;gap:9px}
.btn-l:hover{background:#fff;color:#000;border-color:#fff}

/* ---------- NAV (same markup/classes as every page; mobile-nav.js rebuilds it) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:22px 44px;transition:.5s var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:rgba(11,11,13,.72);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom-color:var(--line);padding:16px 44px}
.nav .brand img{height:20px;filter:brightness(0) invert(1)}
.nlinks{display:flex;gap:40px;font-size:13.5px;font-weight:500;letter-spacing:.2px}
.nlinks a{position:relative;opacity:.72;transition:.3s;padding:3px 0}.nlinks a:hover,.nlinks a.active{opacity:1}
.nr{display:flex;align-items:center;gap:24px;font-size:14px}
.nr .ic{opacity:.75;cursor:pointer;transition:.3s;font-size:15px}.nr .ic:hover{opacity:1}
.npill{font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.22);padding:10px 22px;border-radius:4px;transition:.35s}
.npill:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- OVERTURE ---------- */
.ov{position:fixed;inset:0;z-index:3000;pointer-events:auto;cursor:pointer}
.ov .half{position:absolute;left:0;right:0;height:50.2%;background:#050506;transition:transform 1.05s var(--ease)}
.ov .top{top:0}.ov .bot{bottom:0}
.ov .seam{position:absolute;left:50%;top:50%;height:2px;width:0;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);box-shadow:0 0 22px 3px rgba(255,236,200,.75),0 0 90px 12px rgba(224,30,55,.25);animation:ovseam 1.15s .25s var(--ease) forwards;z-index:2}
.ov .tag{position:absolute;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font-size:11px;letter-spacing:5px;text-transform:uppercase;color:#9ea2a8;opacity:0;animation:ovtag 1.3s .55s forwards;white-space:nowrap;z-index:2}
@keyframes ovseam{0%{width:0}70%{width:min(76vw,980px);opacity:1}100%{width:min(76vw,980px);opacity:1}}
@keyframes ovtag{0%{opacity:0;letter-spacing:9px}60%{opacity:1}100%{opacity:1;letter-spacing:5px}}
.ov.go .top{transform:translateY(-101%)}.ov.go .bot{transform:translateY(101%)}
.ov.go .seam,.ov.go .tag{opacity:0;transition:opacity .35s}
.ov.gone{display:none}
html.oklock{overflow:hidden}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#050506}
.hero .bg{position:absolute;inset:-3%;background-size:cover;background-position:center;filter:brightness(.62) contrast(1.06) saturate(1.05);animation:kb 28s ease-in-out infinite alternate}
@keyframes kb{0%{transform:scale(1)}100%{transform:scale(1.1) translate3d(-1%,-1%,0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,7,9,.86),rgba(7,7,9,.34) 58%,rgba(7,7,9,.1)),linear-gradient(0deg,var(--bg) 2%,transparent 44%)}
.hero .in{position:relative;z-index:2;width:100%;padding-bottom:clamp(120px,19vh,190px);padding-top:150px}
.ey{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--steel-lt);font-weight:600;margin-bottom:26px}
.ey .dot{width:6px;height:6px;background:var(--red);border-radius:50%}
.hero h1{font-size:clamp(46px,8vw,118px);font-weight:200;line-height:.96;letter-spacing:-4px;margin-bottom:26px}
.hero h1 b{font-weight:600;display:block}
.hero p.sub{max-width:560px;font-size:clamp(16px,1.6vw,20px);font-weight:300;color:#cdd0d4}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero .hud{position:absolute;z-index:3;left:0;right:0;bottom:0;border-top:1px solid var(--line);background:linear-gradient(0deg,rgba(7,7,9,.9),rgba(7,7,9,.4));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hud .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.hud .hs{padding:22px 18px;border-right:1px solid var(--line)}.hud .hs:last-child{border-right:0}
.hud b{display:block;font-size:clamp(24px,3vw,40px);font-weight:200;letter-spacing:-1.5px;line-height:1}
.hud b i{font-style:normal;font-size:.42em;font-weight:500;color:var(--gold);margin-left:4px;letter-spacing:0}
.hud span{display:block;margin-top:7px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)}
.scrollcue{position:absolute;right:44px;bottom:112px;z-index:3;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}
.scrollcue::after{content:"";width:1px;height:54px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- GENERIC LAYOUT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.split.rev>:first-child{order:2}
.sechead{max-width:720px;margin-bottom:56px}
.sechead.center{margin-left:auto;margin-right:auto}
.sechead .h2{margin:18px 0 20px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(217,187,134,.35);padding:6px 12px;border-radius:30px;font-weight:600}
.photo{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#09090b}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .cap{position:absolute;left:16px;bottom:14px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.7);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.note{font-size:12px;color:#6d7076;margin-top:14px;font-weight:300}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{font-size:13px;border:1px solid var(--line2);border-radius:30px;padding:7px 15px;color:#cfd1d5;font-weight:400;transition:.3s}
.chip:hover{border-color:var(--gold);color:#fff}

/* diagram frame */
.dia{position:relative;border:1px solid var(--line);border-radius:12px;background:radial-gradient(120% 90% at 50% 0%,#17171b 0%,#0e0e11 55%,#0a0a0c 100%);overflow:hidden}
.dia::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;opacity:.28;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 50%,#000 30%,transparent 100%);pointer-events:none}
.dia svg{position:relative;width:100%;height:auto}
.dia .tools{position:absolute;right:14px;top:14px;display:flex;gap:8px;z-index:3}
.tbtn{font-size:12px;font-weight:600;letter-spacing:.4px;border:1px solid var(--line2);background:rgba(10,10,12,.7);backdrop-filter:blur(8px);padding:9px 16px;border-radius:30px;transition:.3s}
.tbtn:hover{border-color:var(--gold);color:var(--gold)}
.tbtn.on{background:var(--gold);color:#17120a;border-color:var(--gold)}
.dia .legend{position:absolute;left:16px;bottom:14px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#777a80;z-index:2}
svg .ln{fill:none;stroke:#e9e5dc;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
svg .ln2{fill:none;stroke:#8a8d93;stroke-width:1;stroke-dasharray:4 4}
svg .fl{fill:rgba(255,255,255,.04);stroke:#e9e5dc;stroke-width:1.3;stroke-linejoin:round}
svg .gl{fill:none;stroke:var(--gold);stroke-width:1.4}
svg .dm{fill:none;stroke:var(--red);stroke-width:1.2}
svg text{font-family:var(--font);fill:#c9ccd1;font-size:12.5px;letter-spacing:.3px}
svg text.big{fill:#fff;font-size:20px;font-weight:300;letter-spacing:-.5px}
svg text.g{fill:var(--gold)}svg text.r{fill:#ff6b7f}
svg text.sm{font-size:10.5px;fill:#80838a;letter-spacing:1.4px;text-transform:uppercase}

/* ---------- STAT TILES ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tile{padding:38px 26px;border-right:1px solid var(--line)}.tile:last-child{border-right:0}
.tile b{display:block;font-size:clamp(38px,4.6vw,64px);font-weight:200;letter-spacing:-2.4px;line-height:1}
.tile b i{font-style:normal;font-size:.36em;font-weight:500;color:var(--gold);margin-left:6px;letter-spacing:0}
.tile span{display:block;margin-top:12px;font-size:13.5px;color:var(--dim);font-weight:300;line-height:1.5}

/* ---------- CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 24px 28px;overflow:hidden;transition:border-color .4s,transform .5s var(--ease)}
.card:hover{border-color:var(--line2);transform:translateY(-4px)}
.card h4{font-size:19px;font-weight:500;letter-spacing:-.4px;margin:16px 0 8px}
.card p{font-size:14.5px;color:var(--dim);font-weight:300;line-height:1.6}
.card .no{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:700}
.card svg{width:100%;height:118px}

/* ---------- NOISE LADDER ---------- */
.noise{display:grid;gap:14px;margin-top:6px}
.nrow{display:grid;grid-template-columns:150px 1fr 70px;align-items:center;gap:18px}
.nrow .lb{font-size:13.5px;color:#c9ccd1}.nrow .lb small{display:block;font-size:11px;color:var(--dim);letter-spacing:.4px}
.nrow .tr{position:relative;height:12px;border-radius:12px;background:rgba(255,255,255,.06);overflow:hidden}
.nrow .tr i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:12px;background:linear-gradient(90deg,#6f5a34,var(--gold));transition:width 1.6s var(--ease)}
.nrow.hot .tr i{background:linear-gradient(90deg,#7a1522,var(--red))}
.nrow .v{font-size:18px;font-weight:300;text-align:right}.nrow .v em{font-style:normal;font-size:11px;color:var(--dim);margin-left:2px}
.nrow.ref .lb{color:#7b7e84}.nrow.ref .tr i{background:rgba(255,255,255,.22)}
.noise.on .tr i{width:var(--w)}

/* ---------- SPEC TABLE ---------- */
.spec{width:100%;border-collapse:collapse}
.spec td{padding:18px 8px;border-bottom:1px solid var(--line);font-size:15px;font-weight:300;vertical-align:top}
.spec td:first-child{color:var(--dim);width:46%}.spec td:last-child{color:#fff;text-align:right;font-weight:400}

/* ---------- CTA ---------- */
.cta{overflow:hidden;text-align:center;border-top:1px solid var(--line)}
.cta .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.34) saturate(.9)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(11,11,13,.55),rgba(11,11,13,.92))}
.cta .in{position:relative;z-index:2;max-width:720px;margin:0 auto}

/* ---------- FOOTER (same as site) ---------- */
footer{background:#08080a;padding:84px 0 36px;border-top:1px solid var(--line)}
footer img.fl{height:22px;filter:brightness(0) invert(1);margin-bottom:22px}
footer h5{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:20px;font-weight:700}
footer a.fli{display:block;color:var(--dim);font-size:14px;padding:7px 0;font-weight:300;transition:.3s}footer a.fli:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;margin-bottom:56px}
.fdesc{color:var(--dim);font-size:14px;font-weight:300;max-width:300px}
.fsoc{display:flex;gap:12px}.fsoc a{width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s;font-size:13px}.fsoc a:hover{background:var(--red);border-color:var(--red);color:#fff}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:30px;border-top:1px solid var(--line);color:#57595e;font-size:13px;flex-wrap:wrap;gap:14px}
.wa{position:fixed;right:26px;bottom:26px;width:54px;height:54px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:24px;z-index:900;box-shadow:0 12px 28px rgba(37,211,102,.4)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(2,1fr)}.tiles{grid-template-columns:repeat(2,1fr)}.tile:nth-child(2){border-right:0}.tile:nth-child(-n+2){border-bottom:1px solid var(--line)}.fgrid{grid-template-columns:1fr 1fr}.nlinks{gap:22px}}
@media(max-width:860px){.wrap{padding:0 22px}.split{grid-template-columns:1fr}.split.rev>:first-child{order:0}.nav{padding:16px 22px}.nav.solid{padding:12px 22px}.scrollcue{display:none}.hud .wrap{grid-template-columns:1fr 1fr}.hud .hs:nth-child(2){border-right:0}.hud .hs:nth-child(-n+2){border-bottom:1px solid var(--line)}.hero .in{padding-bottom:230px}.nrow{grid-template-columns:104px 1fr 56px;gap:12px}.hero h1{letter-spacing:-2.5px}}
@media(max-width:600px){.cards,.cards.c3,.cards.c2{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}.tile{padding:26px 16px}}
@media(prefers-reduced-motion:reduce){.hero .bg{animation:none}.reveal{opacity:1;transform:none;transition:none}.ov{display:none}}