/* ============================================================
   MATA Abderezak — Portfolio · realistic laptop hero
   Pure HTML/CSS/JS — no build step
   ============================================================ */

:root{
  --bg:#06070d; --bg-soft:#0a0c15; --bg-card:#0e1019;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --txt:#e7e9f0; --txt-dim:#9aa0b4; --txt-mute:#6b7186;
  --indigo:#818cf8; --indigo-d:#6366f1; --cyan:#22d3ee;
  --grad:linear-gradient(120deg,#818cf8 0%,#22d3ee 100%);
  --grad-soft:linear-gradient(120deg,rgba(129,140,248,.18),rgba(34,211,238,.12));
  --r:18px; --r-sm:12px; --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px; --font:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{font-family:var(--font);background:var(--bg);color:var(--txt);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
::selection{background:rgba(34,211,238,.28);color:#fff}
svg.ic{width:18px;height:18px;flex-shrink:0}
svg.lk{width:13px;height:13px;margin-inline-start:5px;flex-shrink:0;opacity:.7;transition:transform .3s var(--ease)}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--indigo),var(--cyan));border-radius:9px;border:2px solid var(--bg)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:9998;box-shadow:0 0 12px rgba(34,211,238,.5)}

/* ── Loader ── */
.loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .6s var(--ease),visibility .6s}
.loader.done{opacity:0;visibility:hidden}
.loader-mark{font-family:var(--mono);font-weight:600;font-size:2rem;letter-spacing:-.02em}
.loader-mark span{color:var(--cyan)}
.loader-bar{width:170px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:var(--grad);animation:load 1.1s var(--ease) forwards}
@keyframes load{to{width:100%}}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem;padding:14px 26px;border-radius:60px;border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-sm{padding:10px 18px;font-size:.86rem}
.btn-primary{background:var(--grad);color:#05060c;box-shadow:0 10px 30px -10px rgba(34,211,238,.5)}
.btn-primary:hover{box-shadow:0 16px 40px -10px rgba(34,211,238,.7),0 0 0 1px rgba(255,255,255,.1) inset}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line-2);color:var(--txt)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:var(--cyan)}

.label{display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.label::before{content:'// '}

/* ── Sections ── */
.section{padding:130px 0;position:relative}
.section-alt{background:radial-gradient(1100px 500px at 80% -10%,rgba(129,140,248,.06),transparent 60%),var(--bg-soft)}
.section-head{max-width:640px;margin:0 auto 64px;text-align:center}
.section-title{font-size:clamp(2rem,5vw,3.3rem);font-weight:800;line-height:1.08;letter-spacing:-.025em}
.section-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-sub{color:var(--txt-dim);margin-top:18px;font-size:1.05rem}
.body-text{color:var(--txt-dim);margin-top:18px;font-size:1.05rem}

/* ════════ NAV ════════ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:900;padding:18px 0;transition:padding .35s var(--ease),background .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.scrolled{padding:11px 0;background:rgba(6,7,13,.72);backdrop-filter:blur(18px) saturate(160%);border-color:var(--line)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{font-family:var(--mono);font-weight:600;font-size:1.35rem;letter-spacing:-.02em}
.nav-logo span{color:var(--cyan)}
.nav-links{display:flex;gap:4px}
.nav-links a{position:relative;font-size:.9rem;font-weight:500;color:var(--txt-dim);padding:8px 13px;border-radius:9px;transition:color .25s}
.nav-links a::after{content:'';position:absolute;left:13px;right:13px;bottom:3px;height:1.5px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:14px}
.lang-switcher{display:flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:60px;padding:3px}
.lang-btn{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--txt-mute);background:none;border:none;padding:5px 10px;border-radius:60px;cursor:pointer;transition:.25s;min-width:30px}
.lang-btn:hover{color:var(--txt)}
.lang-btn.active{background:var(--grad);color:#05060c}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-burger span:nth-child(2){transform:rotate(-45deg)}
.nav-drawer{position:fixed;inset:0;background:rgba(6,7,13,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;z-index:880}
.nav-drawer.open{opacity:1;visibility:visible}
.nav-drawer a{font-size:1.5rem;font-weight:700;color:var(--txt-dim);transition:color .25s}
.nav-drawer a:hover{color:#fff}

/* ════════ HERO ════════ */
.hero{position:relative}
.hero-sticky{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 90px}
/* desktop: pin the hero so scroll drives the lid instead of advancing the page */
@media (min-width:1025px){
  .hero{height:230svh}
  .hero-sticky{position:sticky;top:0;height:100svh;min-height:0}
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-grid{position:absolute;inset:0;background-size:54px 54px;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);mask-image:radial-gradient(ellipse 85% 75% at 60% 45%,#000 30%,transparent 78%)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
.orb-a{width:560px;height:560px;background:radial-gradient(circle,rgba(99,102,241,.5),transparent 65%);top:-160px;right:-100px}
.orb-b{width:480px;height:480px;background:radial-gradient(circle,rgba(34,211,238,.32),transparent 65%);bottom:-180px;left:-120px}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%;display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}

.hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:.85rem;color:var(--txt-dim);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:8px 16px;border-radius:60px;margin-bottom:26px}
.badge-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.hero-name{font-size:clamp(3rem,8vw,6rem);font-weight:800;line-height:.95;letter-spacing:-.04em}
.hero-name .line{display:block}
.hero-name .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-role{font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:500;color:var(--txt);margin-top:22px;min-height:1.6em}
.role-static{color:var(--txt-dim)}
.role-rotator{color:var(--cyan);font-weight:700}
.role-rotator::after{content:'';display:inline-block;width:2px;height:1.05em;background:var(--cyan);margin-left:3px;vertical-align:-.15em;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.hero-socials{display:flex;gap:10px;margin-top:34px}
.hero-socials a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--txt-dim);transition:.3s var(--ease)}
.hero-socials a svg{width:19px;height:19px}
.hero-socials a:hover{color:#fff;border-color:var(--cyan);transform:translateY(-3px)}

/* ── Realistic laptop ── */
.hero-stage{position:relative;min-height:440px;display:flex;align-items:center;justify-content:center;perspective:1700px}
.scene{position:relative;width:100%;max-width:520px;transform-style:preserve-3d;will-change:transform}
.laptop{position:relative;width:100%;transform-style:preserve-3d;transform:rotateX(6deg)}
.lp-glow{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);width:118%;height:120%;background:radial-gradient(circle,rgba(99,102,241,.26),transparent 60%);filter:blur(36px);z-index:-2;pointer-events:none}
.lp-screen{position:relative;z-index:2;border-radius:16px 16px 8px 8px;background:linear-gradient(165deg,#3a3f52,#1a1d28 60%);padding:9px 9px 13px;border:1px solid rgba(255,255,255,.12);box-shadow:0 46px 80px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.12)}
.lp-bezel{position:relative;border-radius:9px;background:#04050a;padding:15px 9px 9px;border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.lp-cam{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#10141f;box-shadow:0 0 0 1px rgba(255,255,255,.06),inset 0 0 2px rgba(34,211,238,.6)}
.lp-display{position:relative;border-radius:5px;overflow:hidden;background:radial-gradient(600px 240px at 72% 0,rgba(34,211,238,.07),transparent 60%),linear-gradient(180deg,#0a0d16,#070910);border:1px solid rgba(255,255,255,.05)}
.lp-display::after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.06),transparent 35%);pointer-events:none}
.lp-bar{position:relative;z-index:1;height:30px;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,#11141d,#0c0f17)}
.lp-bar .d{width:8px;height:8px;border-radius:50%}
.lp-bar .d:nth-child(1){background:#ff5f57}.lp-bar .d:nth-child(2){background:#febc2e}.lp-bar .d:nth-child(3){background:#28c840}
.lp-title{margin-inline-start:8px;font-family:var(--mono);font-size:.72rem;color:var(--txt-mute)}
.lp-body{position:relative;z-index:1;padding:18px 18px 22px;min-height:190px}
.lp-profile{display:flex;align-items:center;gap:13px;padding-bottom:14px;margin-bottom:15px;border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(10px) scale(.96);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.lp-profile.show{opacity:1;transform:none}
.lp-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid rgba(34,211,238,.5);box-shadow:0 0 24px rgba(34,211,238,.35)}
.lp-id b{display:block;font-size:1.02rem;letter-spacing:-.01em}
.lp-id span{font-family:var(--mono);font-size:.74rem;color:var(--cyan)}
.term{font-family:var(--mono);font-size:12.5px;line-height:1.95;direction:ltr;min-height:118px}
.tline{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tline:not(.on){opacity:0}
.tprompt{color:#34d399}
.tcmd{color:#cdd3e8}
.tout{color:var(--cyan);padding-inline-start:16px}
.tline.cur::after{content:'';display:inline-block;width:7px;height:13px;background:var(--cyan);margin-left:2px;vertical-align:-2px;animation:blink 1s step-end infinite;box-shadow:0 0 8px var(--cyan)}
.start-prompt{color:var(--txt-dim)}
.sp-msg{color:var(--txt)}
.sp-cur{display:inline-block;width:8px;height:14px;background:var(--cyan);margin-left:5px;vertical-align:-3px;animation:blink 1s step-end infinite;box-shadow:0 0 9px var(--cyan)}

.lp-hinge{position:relative;z-index:3;width:30%;height:7px;margin:-2px auto 0;background:linear-gradient(180deg,#1a1d28,#0a0b12);border-radius:0 0 8px 8px;box-shadow:0 3px 8px rgba(0,0,0,.55)}
.lp-deck{position:relative;z-index:1;width:108%;left:-4%;height:152px;transform:rotateX(50deg);transform-origin:top center;border-radius:8px 8px 18px 18px;background:linear-gradient(180deg,#2c313f,#171a24);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 2px 6px rgba(255,255,255,.06),inset 0 -10px 18px rgba(0,0,0,.4),0 26px 38px -14px rgba(0,0,0,.75);padding:15px 0 0;display:flex;flex-direction:column;align-items:center;gap:11px}
.keyboard{display:grid;gap:5px}
.kb-row{display:flex;gap:5px;justify-content:center}
.key{position:relative;width:26px;height:23px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:500;color:#9aa1b6;background:linear-gradient(180deg,#3a4159,#20242f);box-shadow:0 2px 0 #090a10,inset 0 1px 0 rgba(255,255,255,.12);transition:transform .09s ease,box-shadow .09s ease,background .09s ease,color .09s}
.key>span{pointer-events:none}
.key.km{width:30px;font-size:7px}
.key.kspace{width:120px}
.key.kent{width:54px;font-size:7px;color:var(--cyan)}
.key.press{transform:translateY(2px);background:linear-gradient(180deg,#2f5483,#1b3358);box-shadow:0 0 15px rgba(34,211,238,.85),inset 0 1px 0 rgba(255,255,255,.18);color:#fff}
.key.kent.glow{animation:entglow 1.25s ease-in-out infinite}
@keyframes entglow{0%,100%{box-shadow:0 2px 0 #090a10;background:linear-gradient(180deg,#1d3a5c,#13243c)}50%{box-shadow:0 0 18px rgba(34,211,238,.85);background:linear-gradient(180deg,#2f5483,#1b3358);color:#fff}}
.trackpad{width:138px;height:50px;border-radius:9px;background:linear-gradient(180deg,#1a1d27,#23262f);box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04)}
.lp-shadow{position:absolute;bottom:-22px;left:8%;width:84%;height:42px;background:radial-gradient(ellipse,rgba(34,211,238,.2),transparent 70%);filter:blur(16px);z-index:-1}

.hero-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute);text-align:center}
.scroll-line{width:1px;height:42px;background:linear-gradient(var(--cyan),transparent);position:relative;overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:0;left:0;width:100%;height:40%;background:var(--cyan);animation:scrolldown 1.8s var(--ease) infinite}
@keyframes scrolldown{0%{transform:translateY(-100%)}100%{transform:translateY(240%)}}

/* ════════ SERVICES ════════ */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;transition:transform .4s var(--ease),border-color .4s,background .4s;overflow:hidden}
.service-card::before{content:'';position:absolute;inset:0;background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.08),transparent 45%);opacity:0;transition:opacity .4s}
.service-card:hover{border-color:var(--line-2);background:#11131f}
.service-card:hover::before{opacity:1}
.service-ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--line);color:var(--cyan);margin-bottom:22px}
.service-ico svg{width:26px;height:26px}
.service-card h3{font-size:1.22rem;font-weight:700;margin-bottom:10px}
.service-card p{color:var(--txt-dim);font-size:.95rem}
.service-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.service-tags li{font-family:var(--mono);font-size:.72rem;color:var(--txt-mute);background:rgba(255,255,255,.03);border:1px solid var(--line);padding:4px 10px;border-radius:60px}
.services-cta{text-align:center;margin-top:46px}

/* ════════ PROJECTS ════════ */
.featured{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;background:var(--bg-card);border:1px solid var(--line);border-radius:26px;overflow:hidden;margin-bottom:54px}
.featured-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.35),transparent 60%);top:-120px;left:-80px;filter:blur(40px);pointer-events:none}
.featured-media{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:44px 30px;background:radial-gradient(600px 400px at 30% 20%,rgba(34,211,238,.1),transparent 60%),linear-gradient(160deg,#12131d,#0b0c14);border-right:1px solid var(--line)}
.phone-mock{position:relative;width:185px;height:370px;border-radius:34px;background:linear-gradient(160deg,#1c1f2e,#0c0d15);border:1px solid var(--line-2);box-shadow:0 40px 90px -30px rgba(34,211,238,.4),0 0 0 7px rgba(255,255,255,.02);padding:12px}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:78px;height:20px;background:#05060c;border-radius:0 0 14px 14px;z-index:3}
.phone-screen{position:relative;width:100%;height:100%;border-radius:24px;background:radial-gradient(circle at 50% 28%,rgba(34,211,238,.18),transparent 55%),linear-gradient(180deg,#0c1622,#0a0b13);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden}
.phone-brand{font-family:var(--mono);font-weight:600;font-size:1.45rem;line-height:1.05;text-align:center;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phone-tag{font-size:.7rem;color:var(--txt-mute);font-family:var(--mono)}
.phone-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.phone-dot.d1{top:24%;left:22%;animation:fl 3s ease-in-out infinite}
.phone-dot.d2{top:60%;right:20%;background:var(--indigo);box-shadow:0 0 12px var(--indigo);animation:fl 3.6s ease-in-out infinite .4s}
.phone-dot.d3{bottom:18%;left:38%;animation:fl 4.2s ease-in-out infinite .8s}
@keyframes fl{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-9px);opacity:1}}
.featured-badges{display:flex;gap:12px}
.fbadge{display:flex;flex-direction:column;align-items:center;font-family:var(--mono);font-weight:600;font-size:1.3rem;color:#fff;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:12px 18px}
.fbadge small{font-size:.62rem;font-weight:500;color:var(--txt-mute);letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.featured-body{padding:44px 42px;display:flex;flex-direction:column}
.featured-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.featured-flag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--cyan);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);padding:5px 12px;border-radius:60px}
.featured-flag .ic{width:13px;height:13px}
.featured-year{font-family:var(--mono);font-size:.74rem;color:var(--txt-mute)}
.featured-title{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.featured-desc{color:var(--txt-dim);margin-top:16px;font-size:1.02rem}
.featured-points{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;margin-top:22px}
.fpoint{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--txt)}
.fpoint .ic{color:var(--cyan)}
.featured-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.featured-stack li{font-family:var(--mono);font-size:.76rem;color:var(--indigo);background:rgba(129,140,248,.1);border:1px solid rgba(129,140,248,.22);padding:5px 12px;border-radius:60px}
.featured-links{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

.filter-bar{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:40px}
.filter-btn{font-family:var(--mono);font-size:.8rem;color:var(--txt-dim);background:rgba(255,255,255,.03);border:1px solid var(--line);padding:9px 16px;border-radius:60px;cursor:pointer;transition:.25s}
.filter-btn:hover{color:#fff;border-color:var(--line-2)}
.filter-btn.active{background:var(--grad);color:#05060c;border-color:transparent}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proj-card{position:relative;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;transition:transform .45s var(--ease),border-color .45s,opacity .35s,scale .35s;overflow:hidden}
.proj-card::before{content:'';position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(129,140,248,.08),transparent 45%);opacity:0;transition:opacity .4s}
.proj-card:hover{border-color:var(--line-2)}
.proj-card:hover::before{opacity:1}
.proj-card.dimmed{opacity:.12;scale:.97;pointer-events:none}
.proj-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.proj-num{font-family:var(--mono);font-size:.78rem;color:var(--cyan)}
.proj-cat{font-family:var(--mono);font-size:.68rem;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.08em}
.proj-name{font-size:1.18rem;font-weight:700;margin-bottom:10px}
.proj-desc{color:var(--txt-dim);font-size:.9rem;flex-grow:1}
.proj-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.proj-stack li{font-family:var(--mono);font-size:.7rem;color:var(--txt-mute);background:rgba(255,255,255,.03);border:1px solid var(--line);padding:3px 9px;border-radius:60px}
.proj-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.proj-type{font-size:.74rem;color:var(--txt-mute)}
.proj-impact{font-family:var(--mono);font-size:.72rem;color:#34d399}
.proj-gh{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.74rem;color:var(--cyan)}
.proj-gh:hover .lk{transform:translate(2px,-2px)}

/* ════════ ECOSYSTEM ════════ */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.eco-card{position:relative;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;overflow:hidden;transition:transform .4s var(--ease),border-color .4s,background .4s}
.eco-card::before{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.09),transparent 45%);opacity:0;transition:opacity .4s}
.eco-card:hover{border-color:var(--line-2);background:#11131f}
.eco-card:hover::before{opacity:1}
.eco-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--line);color:var(--cyan);margin-bottom:20px}
.eco-ico svg{width:25px;height:25px}
.eco-card h3{font-size:1.16rem;font-weight:700;margin-bottom:8px}
.eco-card p{color:var(--txt-dim);font-size:.92rem;flex-grow:1}
.eco-go{display:inline-flex;align-items:center;margin-top:18px;font-family:var(--mono);font-size:.8rem;color:var(--cyan)}
.eco-go .lk{opacity:1}
.eco-card:hover .eco-go .lk{transform:translate(3px,-3px)}
.eco-card-accent{border-color:rgba(34,211,238,.3);background:linear-gradient(160deg,rgba(34,211,238,.07),transparent 70%)}

/* ════════ ABOUT ════════ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-left .section-title{text-align:left;font-size:clamp(1.8rem,3.6vw,2.7rem)}
.about-links{display:flex;gap:14px;margin-top:30px}
.icon-link{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--txt-dim);border:1px solid var(--line);padding:10px 18px;border-radius:60px;transition:.3s var(--ease)}
.icon-link svg{width:18px;height:18px}
.icon-link:hover{color:#fff;border-color:var(--cyan);transform:translateY(-2px)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:30px}
.stat-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);padding:24px 22px;transition:border-color .35s,transform .35s var(--ease)}
.stat-card:hover{border-color:var(--line-2)}
.stat-num{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:baseline}
.stat-num span:last-child{font-size:1.4rem}
.stat-label{color:var(--txt-mute);font-size:.84rem;margin-top:4px}
.about-photo{position:relative;width:230px;height:280px;margin:0 auto;border-radius:20px;overflow:hidden}
.ph-base,.ph-r,.ph-b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-r,.ph-b{mix-blend-mode:screen;opacity:0}
.about-photo.glitch .ph-r{opacity:.55;transform:translateX(-4px);filter:hue-rotate(-40deg) saturate(1.5)}
.about-photo.glitch .ph-b{opacity:.55;transform:translateX(4px);filter:hue-rotate(150deg) saturate(1.5)}
.ph-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.2) 3px 4px);mix-blend-mode:overlay;opacity:.45;pointer-events:none}
.ph-frame{position:absolute;inset:0;border:1px solid rgba(34,211,238,.3);border-radius:20px;pointer-events:none}
.about-right{position:relative}

/* ════════ SKILLS ════════ */
.skills-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.skills-col{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.skills-col-title{font-size:1.05rem;font-weight:700;margin-bottom:22px;color:var(--cyan);font-family:var(--mono)}
.skill-bars li{margin-bottom:18px}
.skill-bars li span{display:block;font-size:.88rem;margin-bottom:8px;color:var(--txt-dim)}
.bar{height:6px;background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:6px;transition:width 1.1s var(--ease)}
.marquee{margin-top:46px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marq 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--mono);font-size:.84rem;color:var(--txt-dim);background:rgba(255,255,255,.03);border:1px solid var(--line);padding:9px 18px;border-radius:60px;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* ════════ CONTACT ════════ */
.contact-inner{text-align:center;max-width:760px}
.contact-title{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.contact-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.contact-email{display:inline-flex;align-items:center;gap:14px;font-size:clamp(1.1rem,3vw,1.7rem);font-weight:600;margin-top:34px;padding-bottom:8px;border-bottom:2px solid var(--line-2);transition:.3s var(--ease)}
.contact-email svg{width:26px;height:26px;color:var(--cyan);transition:transform .3s var(--ease)}
.contact-email:hover{border-color:var(--cyan)}
.contact-email:hover svg{transform:translateX(6px)}
.contact-links{display:flex;gap:26px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.contact-links a{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.86rem;color:var(--txt-dim);transition:color .25s}
.contact-links a:hover{color:var(--cyan)}
.contact-links a:hover .lk{transform:translate(2px,-2px)}

/* ════════ FOOTER ════════ */
.footer{border-top:1px solid var(--line);padding:34px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-mark{font-family:var(--mono);font-weight:600;font-size:1.2rem}
.footer-mark span{color:var(--cyan)}
.footer-copy{color:var(--txt-mute);font-size:.84rem}
.footer-top{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.82rem;color:var(--txt-dim);transition:color .25s}
.footer-top:hover{color:var(--cyan)}

/* ── Reveal ── */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ════════ ARABIC / RTL ════════ */
html[dir="rtl"] body{font-family:'Cairo','Tajawal',sans-serif}
html[dir="rtl"] .hero-name,html[dir="rtl"] .section-title,html[dir="rtl"] .contact-title,html[dir="rtl"] .featured-title{font-family:'Cairo',sans-serif;letter-spacing:0;line-height:1.18}
html[dir="rtl"] .hero-name{line-height:1.05}
html[dir="rtl"] .body-text,html[dir="rtl"] .section-sub,html[dir="rtl"] .service-card p,html[dir="rtl"] .featured-desc,html[dir="rtl"] .eco-card p{line-height:1.95;font-size:1.04rem}
html[dir="rtl"] .label{font-family:'Cairo',sans-serif;letter-spacing:.06em}
html[dir="rtl"] .label::before{content:''}
html[dir="rtl"] .nav-links a,html[dir="rtl"] .service-card h3,html[dir="rtl"] .skills-col-title,html[dir="rtl"] .proj-name,html[dir="rtl"] .eco-card h3{font-family:'Cairo',sans-serif}
html[dir="rtl"] .nav-links a::after{transform-origin:right}
html[dir="rtl"] .about-left .section-title{text-align:right}
html[dir="rtl"] .featured-media{border-right:none;border-left:1px solid var(--line)}
html[dir="rtl"] .term,html[dir="rtl"] .marquee-track,html[dir="rtl"] .lp-title,html[dir="rtl"] .lp-id span{direction:ltr}
html[dir="rtl"] .hero-name,html[dir="rtl"] .hero-text{text-align:right}
html[dir="rtl"] .featured-stack,html[dir="rtl"] .service-tags,html[dir="rtl"] .proj-stack{direction:ltr;justify-content:flex-end}

/* ════════ RESPONSIVE ════════ */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:28px}
  .hero-stage{order:2;min-height:0;padding:6px 0}
  .scene{max-width:440px;margin:0 auto}
  .services-grid,.projects-grid,.skills-cols,.eco-grid{grid-template-columns:repeat(2,1fr)}
  .featured{grid-template-columns:1fr}
  .featured-media{border-right:none;border-bottom:1px solid var(--line)}
  html[dir="rtl"] .featured-media{border-left:none;border-bottom:1px solid var(--line)}
  .about-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  .section{padding:90px 0}
  .nav-links,.nav-right .btn,.nav-right>.lang-switcher{display:none}
  .nav-burger{display:flex}
  .nav-drawer .lang-switcher{display:flex}
  .services-grid,.projects-grid,.skills-cols,.stats-grid,.featured-points,.eco-grid{grid-template-columns:1fr}
  .hero{padding-top:100px}
  .hero-inner{gap:20px}
  .scene{max-width:380px}
  .lp-body{padding:15px 15px 18px;min-height:170px}
  .term{font-size:11px;line-height:1.9;min-height:104px}
  .key{width:24px;height:21px;font-size:8px}
  .key.km{width:26px}.key.kspace{width:108px}.key.kent{width:46px}
  .lp-deck{height:138px}
  .featured-body{padding:32px 26px}
  .footer-inner{justify-content:center;text-align:center}
}
@media (max-width:430px){
  .scene{max-width:330px}
  .lp-avatar{width:48px;height:48px}
  .term{font-size:10px}
  .kb-row{gap:4px}
  .key{width:21px;height:19px;font-size:7px;border-radius:4px}
  .key.km{width:22px}.key.kspace{width:88px}.key.kent{width:40px;font-size:6px}
  .lp-deck{padding-top:12px}
  .trackpad{width:118px;height:42px}
}

/* ════════ ULTRA-REALISTIC LAPTOP (refinements) ════════ */
.laptop{filter:drop-shadow(0 28px 38px rgba(0,0,0,.55))}

/* Lid — brushed aluminium */
.lp-screen{
  border-radius:20px 20px 10px 10px;padding:10px 10px 16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 9%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,.05) 1px 2px),
    linear-gradient(168deg,#525766,#2a2e3b 55%,#1b1e29);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 52px 80px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.20),inset 0 -2px 6px rgba(0,0,0,.5);
}
/* thin dark bezel + MacBook notch */
.lp-bezel{padding:18px 11px 12px;border-radius:12px;background:#040509;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 2px 12px rgba(0,0,0,.85)}
.lp-bezel::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:84px;height:15px;background:#040509;border-radius:0 0 10px 10px;z-index:3}
.lp-cam{top:4px;width:5px;height:5px;background:#0c1018;box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 0 2px rgba(34,211,238,.85);z-index:4}
/* screen glass: glare + vignette */
.lp-display{box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04)}
.lp-display::after{background:linear-gradient(122deg,rgba(255,255,255,.11) 0,rgba(255,255,255,.02) 22%,transparent 44%)}
.term{min-height:190px}

/* hinge */
.lp-hinge{width:26%;height:8px;background:linear-gradient(180deg,#10131c,#05060b);border-radius:0 0 9px 9px;box-shadow:0 4px 10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}

/* base / deck — aluminium with keyboard well + speaker grilles */
.lp-deck{
  height:auto;padding:14px 0 20px;border-radius:9px 9px 22px 22px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.05) 1px 2px),
    linear-gradient(180deg,#3a3f4f,#1c1f2a 70%,#15171f);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 2px 8px rgba(255,255,255,.08),inset 0 -16px 24px rgba(0,0,0,.5),0 30px 42px -16px rgba(0,0,0,.8);
}
.lp-deck::before,.lp-deck::after{content:'';position:absolute;top:18px;height:96px;width:15px;background-image:radial-gradient(circle,rgba(0,0,0,.55) .9px,transparent 1.5px);background-size:4px 4px;opacity:.4;border-radius:3px}
.lp-deck::before{left:16px}.lp-deck::after{right:16px}

/* keyboard well + chiclet keys */
.keyboard{padding:10px 12px;border-radius:8px;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.10));box-shadow:inset 0 2px 9px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.03)}
.kb-row{gap:4px}
.kr-fn{margin-bottom:3px}
.key{
  width:24px;height:22px;border-radius:5px;font-size:8.5px;color:#aeb4c8;
  background:linear-gradient(180deg,#30364a 0%,#1b1e29 92%,#15171f);
  border:1px solid rgba(0,0,0,.55);
  box-shadow:0 1.5px 1.5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 3px rgba(0,0,0,.4);
}
.kfn{height:13px;font-size:6px;color:#7a8098}
.km{width:30px;font-size:6.5px;color:#8a90a6}
.kspace{width:130px}
.kent{width:52px;font-size:6.5px;color:var(--cyan)}
.karr{width:18px;font-size:9px;color:#9aa1b6}
.key.press{transform:translateY(2px);background:linear-gradient(180deg,#2f5996,#16345e);box-shadow:0 0 16px rgba(34,211,238,.9),inset 0 1px 0 rgba(255,255,255,.2);color:#fff;border-color:rgba(34,211,238,.5)}
.trackpad{width:150px;height:54px;border-radius:9px;background:linear-gradient(180deg,#171a23,#21242f);box-shadow:inset 0 1px 4px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.04)}

@media (max-width:760px){
  .lp-deck::before,.lp-deck::after{display:none}
  .keyboard{padding:8px 9px}
  .key{width:21px;height:19px;font-size:7px}
  .kfn{height:11px;font-size:5px}
  .km{width:25px}.kspace{width:104px}.kent{width:44px}.karr{width:16px}
  .trackpad{width:130px;height:46px}
  .term{min-height:176px}
}
@media (max-width:430px){
  .trackpad{width:112px;height:40px}
}

/* ════════ UBUNTU SCREEN + FULL KEYBOARD (numpad) + RTL ════════ */
.scene{max-width:560px}
.lp-display{border-radius:6px}

/* GNOME top bar */
.u-topbar{display:flex;align-items:center;gap:10px;height:22px;padding:0 11px;background:#1c1c1f;color:#d4d4d6;font-size:10px;position:relative;z-index:2}
.u-acts{font-weight:600;opacity:.9}
.u-clock{position:absolute;left:50%;transform:translateX(-50%);font-weight:600;letter-spacing:.02em}
.u-tray{margin-inline-start:auto;display:flex;align-items:center;gap:7px}
.u-tray svg{width:13px;height:13px;opacity:.85}
.u-ava{width:16px;height:16px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.25)}

/* desktop wallpaper */
.u-desk{padding:14px 14px 0;background:radial-gradient(120% 90% at 70% 0,#7a2d57,transparent 60%),linear-gradient(150deg,#2c0a1e,#491f3f 55%,#9c3b1e)}

/* GNOME terminal window */
.u-term{border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 18px 40px -14px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.4);transition:box-shadow .25s}
.u-term.u-focus{box-shadow:0 18px 40px -14px rgba(0,0,0,.7),0 0 0 1px rgba(233,84,32,.6)}
.u-tbar{display:flex;align-items:center;height:26px;padding:0 11px;background:#2b2226;border-bottom:1px solid rgba(0,0,0,.4)}
.u-tt{font-family:var(--mono);font-size:11px;color:#cbb9c4;margin:0 auto}
.u-wc{display:flex;gap:7px;position:absolute;right:18px}
.u-wc i{width:11px;height:11px;border-radius:50%;background:#4a3b44;display:block}
.u-wc i.ux{background:#e95420}

/* terminal body — interactive shell */
.u-body{height:198px;overflow-y:auto;padding:11px 13px;background:rgba(38,9,32,.96);font-family:var(--mono);font-size:12px;line-height:1.55;color:#e9e2e6;direction:ltr;cursor:text;scrollbar-width:thin;scrollbar-color:#7a4b66 transparent}
.u-body::-webkit-scrollbar{width:8px}
.u-body::-webkit-scrollbar-thumb{background:#6e455e;border-radius:8px}
.u-line{display:block;white-space:pre-wrap;word-break:break-word}
.u-usr{color:#8ae234;font-weight:700}
.u-pth{color:#729fcf;font-weight:700}
.u-pp{color:#e9e2e6}
.u-d{color:#9a8090}
.u-k{color:#e95420;font-weight:700}
.u-ok{color:#8ae234}
.u-blue{color:#729fcf;font-weight:700}
.u-err{color:#ef6b63}
.u-dim{color:#9a8a94;font-style:italic}
.u-in{color:#fff}
.u-cur{display:inline-block;width:7px;height:13px;background:#cbd5e1;vertical-align:-2px;margin-left:1px;animation:blink 1.1s step-end infinite}
.u-neo{display:flex;gap:14px;align-items:center;margin:2px 0 4px}
.u-neo-logo{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid rgba(233,84,32,.5);box-shadow:0 0 18px rgba(233,84,32,.3);flex-shrink:0}
.u-neo-info>div{white-space:nowrap}

/* full keyboard: main block + numeric keypad */
.keyboard{display:flex;gap:16px;align-items:flex-start;justify-content:center;padding:12px 12px;border-radius:9px;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.12));box-shadow:inset 0 2px 9px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.03)}
.kb-main,.kb-num{display:grid;gap:4px}
.kb-row,.kn-row{display:flex;gap:4px;justify-content:flex-start}
.kn-row{justify-content:flex-end}
.key{width:26px;height:23px;border-radius:5px;font-size:9px;color:#aeb4c8;
  background:linear-gradient(180deg,#333a50 0%,#1b1e29 92%,#15171f);border:1px solid rgba(0,0,0,.55);
  box-shadow:0 1.5px 1.5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 3px rgba(0,0,0,.4)}
.kfn{width:24px;height:14px;font-size:6.5px;color:#7a8098}
.k-mod{width:30px;font-size:6.5px;color:#8a90a6}
.k-wide{width:40px;font-size:8px}
.k-space{width:150px}
.kent{color:var(--cyan)}
.knum{width:26px;height:23px;color:#9aa1b6}
.key.press{transform:translateY(2px);background:linear-gradient(180deg,#2f5996,#16345e);box-shadow:0 0 16px rgba(34,211,238,.9),inset 0 1px 0 rgba(255,255,255,.2);color:#fff;border-color:rgba(34,211,238,.55)}

/* ── Tacos Locos real screenshots ── */
.tl-shots{position:relative;width:236px;height:384px}
.tl-phone{position:absolute;top:50%;left:50%;width:178px;border-radius:30px;overflow:hidden;border:6px solid #14151d;background:#0a0b12;box-shadow:0 34px 60px -24px rgba(0,0,0,.85)}
.tl-phone img{display:block;width:100%;height:auto}
.tl-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:52px;height:15px;background:#14151d;border-radius:0 0 12px 12px;z-index:2}
.tl-phone-back{transform:translate(-30%,-52%) rotate(7deg) scale(.9);opacity:.9;filter:brightness(.78)}
.tl-phone-front{transform:translate(-66%,-48%) rotate(-4deg);z-index:3}

/* ── Locos Management ── */
.featured-media-alt{background:radial-gradient(600px 400px at 70% 20%,rgba(129,140,248,.12),transparent 60%),linear-gradient(160deg,#14131f,#0b0c14)}
.lm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:280px}
.lm-tile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--cyan);transition:.3s var(--ease)}
.lm-tile svg{width:26px;height:26px}
.lm-tile span{font-family:var(--mono);font-size:.7rem;color:var(--txt-dim);text-align:center}
.lm-tile:hover{border-color:var(--line-2);transform:translateY(-3px)}

/* ── RTL: keep the laptop & terminal LTR ── */
html[dir="rtl"] .hero-stage,html[dir="rtl"] .laptop,html[dir="rtl"] .lp-display,html[dir="rtl"] .u-topbar,html[dir="rtl"] .u-desk,html[dir="rtl"] .u-term,html[dir="rtl"] .u-tbar,html[dir="rtl"] .u-body,html[dir="rtl"] .keyboard,html[dir="rtl"] .kb-row,html[dir="rtl"] .kn-row,html[dir="rtl"] .u-neo,html[dir="rtl"] .tl-shots{direction:ltr}
html[dir="rtl"] .u-tray{margin-inline-start:auto}

/* ── responsive ── */
@media (max-width:1024px){ .scene{max-width:480px} }
@media (max-width:760px){
  .scene{max-width:400px}
  .keyboard{gap:9px;padding:9px 8px}
  .kb-num{display:none}
  .key{width:21px;height:19px;font-size:7px}
  .kfn{width:20px;height:11px;font-size:5px}
  .k-mod{width:25px}.k-wide{width:32px;font-size:6.5px}.k-space{width:120px}.knum{width:21px;height:19px}
  .u-body{height:182px;font-size:11px}
  .u-neo-logo{width:72px;height:72px}
  .tl-shots{width:200px;height:340px}.tl-phone{width:150px}
}
@media (max-width:430px){
  .scene{max-width:340px}
  .key{width:17px;height:16px;font-size:6px}
  .kfn{width:16px;height:9px;font-size:4px}
  .k-mod{width:20px}.k-wide{width:26px;font-size:5.5px}.k-space{width:96px}
  .u-neo{gap:9px}.u-neo-logo{width:58px;height:58px}
  .u-neo-info{font-size:9px}
  .lm-grid{max-width:none}
  .tl-shots{width:180px;height:300px}.tl-phone{width:134px;border-width:5px}
}

/* ════════ NAV — platforms dropdown ════════ */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-toggle{display:inline-flex;align-items:center;gap:5px}
.nav-dd-toggle .dd-ch{width:13px;height:13px;transition:transform .3s var(--ease)}
.nav-dd:hover .nav-dd-toggle .dd-ch,.nav-dd.open .nav-dd-toggle .dd-ch{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);min-width:236px;background:rgba(10,12,21,.94);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 50px -16px rgba(0,0,0,.7);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:50}
.nav-dd-menu::before{content:'';position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--txt-dim);transition:background .2s,color .2s}
.nav-dd-menu a svg{width:18px;height:18px;color:var(--cyan);flex-shrink:0}
.nav-dd-menu a:hover{background:rgba(255,255,255,.05);color:#fff}
[dir="rtl"] .nav-dd-menu a{flex-direction:row-reverse;text-align:right}

/* drawer (mobile menu) — premium full-screen panel */
.nav-drawer{justify-content:flex-start;align-items:stretch;gap:0;
  padding:18px 20px calc(26px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  background:radial-gradient(130% 55% at 50% 0,rgba(34,211,238,.10),transparent 62%),rgba(6,7,13,.985)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.drawer-logo{font-family:var(--mono);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:#fff}
.drawer-logo span{color:var(--cyan)}
.drawer-close{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--txt);cursor:pointer;transition:transform .3s var(--ease),color .25s,border-color .25s,background .25s}
.drawer-close svg{width:20px;height:20px}
.drawer-close:hover,.drawer-close:active{color:#fff;border-color:var(--cyan);background:rgba(34,211,238,.12);transform:rotate(90deg)}

.drawer-nav{display:flex;flex-direction:column;align-items:stretch}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;font-size:1.5rem;font-weight:700;color:var(--txt);
  padding:15px 4px;border-bottom:1px solid var(--line);transition:color .25s,padding .25s}
.drawer-nav a .dn-ar{width:20px;height:20px;color:var(--txt-mute);transition:transform .25s,color .25s}
.drawer-nav a:hover,.drawer-nav a:active{color:var(--cyan);padding-inline-start:12px}
.drawer-nav a:hover .dn-ar,.drawer-nav a:active .dn-ar{color:var(--cyan);transform:translateX(4px)}

.drawer-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mute);text-align:start;margin:22px 4px 12px;width:auto}
.drawer-platforms{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.drawer-platforms a{display:flex;align-items:center;gap:11px;padding:13px 12px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:.9rem;font-weight:600;color:var(--txt-dim);text-align:start;transition:transform .25s var(--ease),color .25s,border-color .25s,background .25s}
.drawer-platforms a:nth-child(1){grid-column:1/-1}
.drawer-platforms a .dp-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--line);color:var(--cyan);flex-shrink:0}
.drawer-platforms a .dp-ic svg{width:18px;height:18px}
.drawer-platforms a:hover,.drawer-platforms a:active{color:#fff;border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.08);transform:translateY(-2px)}

.drawer-cta{width:100%;justify-content:center;margin-top:22px;padding:15px}

.drawer-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.drawer-lang{margin:0}
.drawer-socials{display:flex;gap:10px}
.drawer-socials a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--txt-dim);transition:transform .25s,color .25s,border-color .25s}
.drawer-socials a svg{width:18px;height:18px}
.drawer-socials a:hover,.drawer-socials a:active{color:#fff;border-color:var(--cyan);transform:translateY(-2px)}

/* staggered entrance */
.nav-drawer .drawer-nav a,.nav-drawer .drawer-platforms a,.nav-drawer .drawer-cta,.nav-drawer .drawer-foot{
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.nav-drawer.open .drawer-nav a,.nav-drawer.open .drawer-platforms a,.nav-drawer.open .drawer-cta,.nav-drawer.open .drawer-foot{opacity:1;transform:none}
.nav-drawer.open .drawer-nav a:nth-child(1){transition-delay:.05s}
.nav-drawer.open .drawer-nav a:nth-child(2){transition-delay:.10s}
.nav-drawer.open .drawer-nav a:nth-child(3){transition-delay:.15s}
.nav-drawer.open .drawer-nav a:nth-child(4){transition-delay:.20s}
.nav-drawer.open .drawer-platforms a:nth-child(1){transition-delay:.25s}
.nav-drawer.open .drawer-platforms a:nth-child(2){transition-delay:.29s}
.nav-drawer.open .drawer-platforms a:nth-child(3){transition-delay:.33s}
.nav-drawer.open .drawer-platforms a:nth-child(4){transition-delay:.37s}
.nav-drawer.open .drawer-platforms a:nth-child(5){transition-delay:.41s}
.nav-drawer.open .drawer-cta{transition-delay:.45s}
.nav-drawer.open .drawer-foot{transition-delay:.49s}
@media (prefers-reduced-motion:reduce){
  .nav-drawer .drawer-nav a,.nav-drawer .drawer-platforms a,.nav-drawer .drawer-cta,.nav-drawer .drawer-foot{opacity:1;transform:none;transition:none}
}

/* fluidity hints */
.marquee-track{will-change:transform}
.nav.scrolled{backdrop-filter:blur(13px) saturate(150%)}

/* ════════ INTERACTIVE TERMINAL + REALISTIC LAPTOP RATIO ════════ */
.u-term{position:relative}
.u-body{position:relative;height:244px}              /* taller screen → ~16:10 */
.u-hidden-input{position:absolute;top:26px;left:0;right:0;bottom:0;background:transparent;border:0;outline:none;color:transparent;caret-color:transparent;font:inherit;cursor:text;z-index:6;padding:0;margin:0;pointer-events:none}
.u-body{overscroll-behavior:contain}
.u-cur{opacity:.45}
.u-term.u-focus{box-shadow:0 18px 40px -14px rgba(0,0,0,.7),0 0 0 1px rgba(233,84,32,.7)}
.u-term.u-focus .u-cur{opacity:1}
.key{cursor:pointer;-webkit-user-select:none;user-select:none}
.key:active{transform:translateY(2px)}
/* deeper base + palm-rest for realistic proportions */
.lp-deck{transform:rotateX(47deg);padding:16px 0 54px}
.trackpad{margin-top:8px;width:162px;height:60px}

@media (max-width:760px){
  .u-body{height:222px}
  .lp-deck{padding:14px 0 44px}
}
@media (max-width:430px){
  .u-body{height:196px;font-size:10px}
  .lp-deck{padding:12px 0 34px}
  .trackpad{width:120px;height:46px}
}

/* ════════ KEYBOARD v2 (spacing + numpad) · EXPAND · FULLSCREEN ════════ */
.scene{max-width:600px}
.keyboard{gap:24px;padding:14px 16px 16px;align-items:flex-start}
.kb-main,.kb-num{gap:6px}
.kb-row,.kn-row{gap:6px}
.key{width:24px;height:25px;border-radius:6px;font-size:9px}
.kfn{width:22px;height:15px;font-size:6.5px}
.k-mod{width:29px;font-size:6.5px}
.k-wide{width:38px;font-size:8px}
.k-space{width:116px}
.k-arr{width:17px;font-size:9px}
.knum{width:24px;height:25px}
.kn-row{justify-content:center}

/* expand (maximize) button in the terminal title bar */
.u-tbar{position:relative}
.u-expand{position:absolute;right:54px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:22px;height:22px;border:0;background:transparent;color:#cbb9c4;cursor:pointer;border-radius:5px;transition:.2s}
.u-expand svg{width:14px;height:14px}
.u-expand:hover{color:#fff;background:rgba(255,255,255,.1)}

/* fullscreen terminal overlay */
.term-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);background:radial-gradient(120% 100% at 70% 0,rgba(122,45,87,.45),transparent 60%),rgba(5,6,12,.9);backdrop-filter:blur(10px)}
.term-modal.open{display:flex;animation:modalIn .35s var(--ease)}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.term-modal-inner{width:min(1000px,95vw);height:min(80vh,680px);display:flex;animation:modalPop .4s var(--ease)}
@keyframes modalPop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.term-modal .u-term{width:100%;height:100%;display:flex;flex-direction:column;border-radius:11px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.term-modal .u-body{height:auto;flex:1;font-size:14px;line-height:1.7}
.term-modal .u-hidden-input{top:30px}
.term-modal .u-neo-logo{width:120px;height:120px}
.term-modal-close{position:fixed;top:18px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line-2);color:#fff;font-size:1.05rem;cursor:pointer;z-index:2;transition:.2s}
.term-modal-close:hover{background:#e95420;border-color:#e95420;transform:rotate(90deg)}

/* keep the laptop crisp during scroll-motion */
.scene{backface-visibility:hidden}

@media (max-width:1024px){ .scene{max-width:500px} }
@media (max-width:760px){
  .scene{max-width:400px}
  .keyboard{gap:12px;padding:10px 10px 12px}
  .key{width:21px;height:20px;font-size:7px}
  .kfn{width:19px;height:11px;font-size:5px}
  .k-mod{width:25px}.k-wide{width:32px;font-size:6.5px}.k-space{width:104px}.k-arr{width:15px;font-size:7px}
  .term-modal .u-body{font-size:12px}
}
@media (max-width:430px){
  .scene{max-width:340px}
  .key{width:18px;height:18px;font-size:6px}
  .kfn{width:16px;height:9px;font-size:4px}
  .k-mod{width:21px}.k-wide{width:27px;font-size:5.5px}.k-space{width:86px}.k-arr{width:13px;font-size:6px}
  .u-expand{right:48px}
}

/* ════════ VISIBLE EXPAND BUTTON (below the laptop, never covering it) ════════ */
.hero-stage{position:relative;flex-direction:column;gap:16px}
.stage-expand{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--cyan);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.35);padding:10px 20px;border-radius:60px;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.stage-expand svg{width:16px;height:16px}
.stage-expand:hover{background:rgba(34,211,238,.18);transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(34,211,238,.55)}

/* ════════ PLATFORMS — choose your universe ════════ */
.platforms .section-head{margin-bottom:50px}
.portals{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.portal{position:relative;display:flex;flex-direction:column;gap:8px;min-height:236px;padding:34px 32px;border-radius:22px;background:var(--bg-card);border:1px solid var(--line);overflow:hidden;transition:transform .45s var(--ease),border-color .45s}
.portal::before{content:'';position:absolute;inset:0;opacity:.13;background:var(--p-grad,var(--grad));transition:opacity .45s}
.portal:hover{border-color:var(--line-2)}
.portal:hover::before{opacity:.27}
.portal-num{position:absolute;top:14px;right:24px;font-family:var(--mono);font-size:3.6rem;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.13);z-index:1}
.portal-ico{position:relative;z-index:1;width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;margin-bottom:6px}
.portal-ico svg{width:28px;height:28px}
.portal h3{position:relative;z-index:1;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.portal p{position:relative;z-index:1;color:var(--txt-dim);font-size:.96rem;flex-grow:1}
.portal-go{position:relative;z-index:1;display:inline-flex;align-items:center;font-family:var(--mono);font-size:.84rem;font-weight:600;color:#fff;margin-top:6px}
.portal-go .lk{opacity:1;transition:transform .3s var(--ease)}
.portal:hover .portal-go .lk{transform:translate(3px,-3px)}
.portal-shine{position:absolute;top:0;left:-60%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);z-index:1;pointer-events:none}
.portal:hover .portal-shine{animation:pshine 1.05s var(--ease)}
@keyframes pshine{to{left:130%}}
.p-it{--p-grad:linear-gradient(135deg,#6366f1,#22d3ee)}
.p-ec{--p-grad:linear-gradient(135deg,#10b981,#06b6d4)}
.p-gm{--p-grad:linear-gradient(135deg,#a855f7,#ec4899)}
.p-ap{--p-grad:linear-gradient(135deg,#f59e0b,#ef4444)}
.p-wc{--p-grad:linear-gradient(135deg,#fbbf24,#10b981)}
.p-it .portal-ico{color:#a5b4fc}.p-ec .portal-ico{color:#6ee7b7}.p-gm .portal-ico{color:#f0abfc}.p-ap .portal-ico{color:#fcd34d}.p-wc .portal-ico{color:#fcd34d}

/* Carte WC26 — accent Mondial + badge animé */
.p-wc{position:relative;overflow:hidden}
.p-wc::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(420px 220px at 80% -10%,rgba(251,191,36,.16),transparent 70%)}
.p-wc:hover::after{opacity:1}
.portal-tag{position:absolute;top:18px;right:22px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:.32rem .7rem;border-radius:99px;border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.1);
  font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fcd34d}
.portal-tag i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:wcPulse 2s infinite}
@keyframes wcPulse{70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.p-wc .portal-num{right:auto;left:22px}
.ndm-wc span{background:linear-gradient(120deg,#fbbf24,#34d399);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.platforms-tease{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:46px;font-family:var(--mono);font-size:.92rem;color:var(--txt-dim);text-align:center;transition:color .25s}
.platforms-tease:hover{color:var(--cyan)}
.tease-arrow{width:26px;height:26px;color:var(--cyan);animation:teaseB 1.8s var(--ease) infinite}
@keyframes teaseB{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

/* ════════ AI · 2026 · CLAUDE CODE ════════ */
.ai-sec{position:relative;overflow:hidden}
.ai-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(680px 420px at 82% 28%,rgba(129,140,248,.12),transparent 60%),radial-gradient(560px 400px at 8% 82%,rgba(34,211,238,.09),transparent 60%)}
.ai-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.ai-text .section-title{text-align:left;font-size:clamp(1.9rem,4vw,2.9rem)}
.ai-ide{display:inline-flex;flex-direction:column;gap:5px;margin:26px 0 28px;padding:15px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.ai-ide-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-mute)}
.ai-ide-name{display:inline-flex;align-items:center;gap:9px;font-size:1.5rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ai-dot{width:11px;height:11px;border-radius:50%;background:#e9743a;box-shadow:0 0 14px #e9743a;-webkit-text-fill-color:initial;flex-shrink:0}
.ai-visual{position:relative;height:380px;display:flex;align-items:center;justify-content:center}
.ai-year{position:absolute;font-family:var(--mono);font-weight:800;font-size:clamp(6rem,15vw,11rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);z-index:0;user-select:none;pointer-events:none}
.ai-core{position:relative;width:300px;height:300px;z-index:1}
.ai-orb{position:absolute;top:50%;left:50%;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c7d2fe,#6366f1 46%,#22d3ee);box-shadow:0 0 70px rgba(99,102,241,.6),inset 0 0 32px rgba(255,255,255,.35);animation:aiOrb 3.6s ease-in-out infinite}
@keyframes aiOrb{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.ai-ring{position:absolute;top:50%;left:50%;border-radius:50%}
.ai-ring.r1{width:220px;height:220px;margin:-110px 0 0 -110px;border:1px solid rgba(129,140,248,.32);animation:aiSpin 16s linear infinite}
.ai-ring.r2{width:300px;height:300px;margin:-150px 0 0 -150px;border:1px dashed rgba(34,211,238,.26);animation:aiSpin 28s linear infinite reverse}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-chip{position:absolute;font-family:var(--mono);font-size:.74rem;color:var(--txt);background:rgba(14,16,25,.85);backdrop-filter:blur(6px);border:1px solid var(--line);padding:6px 13px;border-radius:60px;white-space:nowrap;animation:aiFloat 6s ease-in-out infinite}
.ai-chip.ch1{top:0;left:16%;color:var(--indigo)}
.ai-chip.ch2{top:32%;right:-8%;color:var(--cyan);animation-delay:1.2s}
.ai-chip.ch3{bottom:6%;right:16%;animation-delay:2.1s}
.ai-chip.ch4{bottom:26%;left:-8%;color:var(--cyan);animation-delay:.6s}
@keyframes aiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

html[dir="rtl"] .ai-text .section-title{text-align:right}

@media (max-width:1024px){
  .portals{gap:18px}
  .ai-grid{gap:36px}
}
@media (max-width:760px){
  .portals{grid-template-columns:1fr}
  .portal{min-height:0;padding:28px 26px}
  .portal-num{font-size:3rem}
  .ai-grid{grid-template-columns:1fr;gap:24px}
  .ai-visual{height:300px;order:-1}
  .ai-core{width:240px;height:240px}
  .stage-expand{font-size:.7rem;padding:8px 16px}
  .hero-scroll{display:none}
}

/* ════════════════════════════════════════════════════════════
   3D CLAMSHELL LAPTOP — closed · opens · powers on (motion design)
   ════════════════════════════════════════════════════════════ */
:root{
  --lid-closed:-116deg;    /* folded over the keyboard, cover facing up */
  --lid-open:-2deg;        /* upright, leaning back a touch */
  --tilt-closed:26deg;     /* whole laptop tips forward so we see the lid */
  --tilt-open:6deg;        /* tips back up to face the screen */
  --lid-ease:cubic-bezier(.62,.01,.16,1);
}
.hero-stage{perspective:2400px;perspective-origin:50% 40%}
.scene{transform-style:preserve-3d}
.laptop{transform-style:preserve-3d;transform:rotateX(var(--tilt-open));filter:drop-shadow(0 34px 46px rgba(0,0,0,.62));
  transition:transform 1.55s var(--lid-ease)}
.laptop[data-stage="closed"]{transform:rotateX(var(--tilt-closed))}

/* the lid hinges on its bottom edge */
.lp-lid{position:relative;z-index:3;width:108%;left:-4%;transform-style:preserve-3d;transform-origin:50% 100%;
  transform:rotateX(var(--lid-open));transition:transform 1.55s var(--lid-ease);will-change:transform}
.laptop[data-stage="closed"] .lp-lid{transform:rotateX(var(--lid-closed))}
.laptop[data-stage="opening"] .lp-lid{transform:rotateX(var(--lid-open))}
.laptop[data-stage="on"] .lp-lid{transform:rotateX(var(--lid-open))}
/* scroll-scrubbed: JS drives transforms inline every frame, kill the easing */
.laptop.lp-scrub,.laptop.lp-scrub .lp-lid{transition:none}

/* the two faces of the lid share one plane */
.lp-screen{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lp-cover{position:absolute;inset:0;z-index:4;display:grid;place-items:center;overflow:hidden;
  border-radius:20px 20px 10px 10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:rotateY(180deg);
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 10%),
    repeating-linear-gradient(92deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.06) 1px 2px),
    radial-gradient(120% 80% at 50% 0,#565c6e,#2b2f3c 52%,#191c26);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 10px rgba(0,0,0,.55),0 30px 60px -26px rgba(0,0,0,.9)}
.lp-cover-tex{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 42%,rgba(255,255,255,.05),transparent 70%);pointer-events:none}
.lp-cover-glare{position:absolute;top:-40%;left:-30%;width:80%;height:160%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);filter:blur(2px);pointer-events:none}
.lp-logo{transform:scaleX(-1);font-family:var(--mono);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:.02em;
  color:#cfd4e4;text-shadow:0 1px 0 rgba(255,255,255,.25),0 -1px 1px rgba(0,0,0,.6);
  background:linear-gradient(180deg,#eef1fb,#9aa0b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(34,211,238,.0));transition:filter .6s ease}
.lp-logo span{-webkit-text-fill-color:#22d3ee}
.laptop[data-stage="closed"] .lp-logo{filter:drop-shadow(0 0 16px rgba(34,211,238,.55))}

/* power-on overlay on the screen */
.lp-power-layer{position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  background:#04060b;opacity:1;transition:opacity .8s ease;pointer-events:none}
.laptop[data-stage="on"] .lp-power-layer{background:radial-gradient(circle at 50% 44%,#0a1226,#04060b 72%)}
.laptop.lp-booted .lp-power-layer{opacity:0;visibility:hidden}
.lp-boot-logo{font-family:var(--mono);font-weight:700;font-size:1.5rem;letter-spacing:.04em;color:#eef1fb;opacity:0;transform:scale(.92)}
.lp-boot-logo span{color:var(--cyan)}
.laptop.lp-lit .lp-boot-logo{animation:bootLogo 1.05s var(--ease) forwards}
@keyframes bootLogo{0%{opacity:0;transform:scale(.92);filter:blur(4px)}40%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:1}}
.lp-boot-bar{position:absolute;bottom:24%;width:42%;max-width:150px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;opacity:0;transition:opacity .3s ease .25s}
.laptop.lp-lit .lp-boot-bar{opacity:1}
.lp-boot-bar i{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px rgba(34,211,238,.8)}
.laptop.lp-lit .lp-boot-bar i{animation:bootBar 1s var(--ease) .12s forwards}
@keyframes bootBar{to{width:100%}}

/* screen content fades in once booted */
.lp-display .u-topbar,.lp-display .u-desk{opacity:0;transition:opacity .7s ease}
.laptop.lp-booted .u-topbar,.laptop.lp-booted .u-desk{opacity:1}

/* when closed the screen backlight is off */
.laptop[data-stage="closed"] .lp-display{background:#04050a}

/* power LED on the front lip of the deck */
.lp-led{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;
  background:#3a3f4d;box-shadow:inset 0 0 2px rgba(0,0,0,.6);z-index:5;transition:background .5s,box-shadow .5s}
.laptop[data-stage="closed"] .lp-led{background:#f0a23a;box-shadow:0 0 8px rgba(240,162,58,.9);animation:ledBreathe 2.4s ease-in-out infinite}
.laptop.lp-lit .lp-led{background:#3ddc84;box-shadow:0 0 9px rgba(61,220,132,.95);animation:none}
@keyframes ledBreathe{0%,100%{opacity:.45}50%{opacity:1}}

/* "Démarrer" power control — sits below the laptop in free space (visible while closed) */
.lp-start{position:relative;z-index:40;margin:14px auto 0;max-height:220px;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  background:none;border:0;cursor:pointer;color:#eaf2ff;
  transition:opacity .5s var(--ease),transform .5s var(--ease),max-height .5s var(--ease),margin .5s var(--ease);opacity:1}
.lp-start-ring{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,rgba(34,211,238,.22),rgba(10,14,26,.85));
  border:1px solid rgba(34,211,238,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 40px -14px rgba(34,211,238,.6),inset 0 0 20px rgba(34,211,238,.25)}
.lp-start-pulse{position:absolute;top:50%;left:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
  border:1px solid rgba(34,211,238,.5);animation:startPulse 2.1s var(--ease) infinite}
@keyframes startPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.lp-start-ic{position:relative;width:30px;height:30px;color:var(--cyan);filter:drop-shadow(0 0 8px rgba(34,211,238,.7))}
.lp-start-txt{font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#bfe9f3;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}
.lp-start:hover{transform:scale(1.05)}
.lp-start:active{transform:scale(.98)}
.lp-start:hover .lp-start-ring{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 22px 50px -12px rgba(34,211,238,.8),inset 0 0 26px rgba(34,211,238,.4)}
.lp-start.gone{opacity:0;visibility:hidden;transform:translateY(-8px) scale(.9);pointer-events:none;max-height:0;margin:0;overflow:hidden}

/* expand control only meaningful once the machine is on */
.stage-expand{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease),background .3s,box-shadow .3s}
.stage-expand.show{opacity:1;visibility:visible;transform:none}

/* reduced motion: no fold, no boot delay */
@media (prefers-reduced-motion:reduce){
  .lp-lid{transition:none}
  .laptop[data-stage="closed"] .lp-lid{transform:rotateX(var(--lid-open))}
  .lp-power-layer{display:none}
  .lp-display .u-topbar,.lp-display .u-desk{opacity:1}
  .lp-start{display:none}
}

/* responsive laptop tweaks */
@media (max-width:760px){
  .lp-start-ring{width:64px;height:64px}
  .lp-start-pulse{width:64px;height:64px;margin:-32px 0 0 -32px}
  .lp-start-ic{width:26px;height:26px}
}

/* ════════ HERO pin sizing (2-column: text + laptop) ════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:1025px){
  .hero{height:235svh}
  .hero-sticky{padding:74px 0 54px}
  .scene{max-width:560px}
  .u-body{height:198px}                 /* shorter screen → room for the button below */
  .lp-deck{padding:14px 0 34px}
  .trackpad{margin-top:6px;width:150px;height:46px}
}

/* ════════ Laptop realism — screen light bleed, glass glare, hinge ════════ */
/* the ambient glow behind the laptop blooms when the screen turns on */
.lp-glow{transition:opacity .8s ease,background .8s ease;opacity:.55}
.laptop.lp-lit .lp-glow{opacity:1;width:135%;height:135%;
  background:radial-gradient(circle,rgba(99,130,246,.42),rgba(34,211,238,.18) 38%,transparent 64%)}
/* screen emits light: inner backlight + outward bleed onto the scene */
.lp-display{transition:box-shadow .7s ease,filter .7s ease;filter:brightness(.4) saturate(.7)}
.laptop.lp-lit .lp-display{filter:none;
  box-shadow:inset 0 0 70px rgba(10,16,40,.45),0 0 60px -8px rgba(124,150,255,.45),0 0 120px -10px rgba(34,211,238,.25)}
/* glass reflection sweeping across the panel */
.lp-display::after{background:linear-gradient(118deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.04) 16%,transparent 38%);mix-blend-mode:screen}
.lp-screen::after{content:'';position:absolute;inset:0;z-index:25;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,transparent 38%,rgba(255,255,255,.06) 46%,transparent 56%);opacity:0;transition:opacity .6s ease}
.laptop.lp-lit .lp-screen::after{opacity:1}
/* subtle warm/cool light spill on the keyboard deck while on */
.laptop.lp-lit .lp-deck{box-shadow:inset 0 2px 8px rgba(120,140,255,.10),inset 0 -16px 24px rgba(0,0,0,.5),0 30px 42px -16px rgba(0,0,0,.8)}
/* power LED glows green only once the screen content is up */
.laptop.lp-booted .lp-led{background:#3ddc84;box-shadow:0 0 10px rgba(61,220,132,.95)}

/* ════════════════════════════════════════════════════════════
   LAPTOP v3 — ultra-realistic materials & lighting
   ════════════════════════════════════════════════════════════ */
/* layered ground shadow: tight contact + soft ambient */
.laptop{filter:drop-shadow(0 16px 12px rgba(0,0,0,.35)) drop-shadow(0 46px 60px rgba(0,0,0,.5))}
.lp-shadow{bottom:-30px;left:3%;width:94%;height:54px;filter:blur(18px);
  background:radial-gradient(ellipse at 50% 38%,rgba(0,0,0,.55),rgba(34,211,238,.10) 52%,transparent 74%)}

/* lid frame — precision-milled aluminium, lit edges */
.lp-screen{
  border-radius:18px 18px 9px 9px;padding:9px 9px 14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 7%),
    linear-gradient(90deg,rgba(255,255,255,.09),transparent 7% 93%,rgba(255,255,255,.09)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,.045) 1px 2px),
    linear-gradient(170deg,#5b6172 0%,#363b49 38%,#242833 70%,#171a23 100%);
  border:1px solid rgba(255,255,255,.18);border-bottom-color:rgba(0,0,0,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 8px rgba(0,0,0,.55),
    inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(255,255,255,.06),
    0 58px 90px -38px rgba(0,0,0,.95);
}
/* glass bezel — deeper black, faint inner reflection */
.lp-bezel{padding:17px 10px 11px;border-radius:11px;background:linear-gradient(180deg,#05060c,#030408);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 2px 14px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.65)}
/* panel: vignette + top sheen under the glare layers */
.lp-display::before{content:'';position:absolute;inset:0;z-index:24;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 112%,rgba(0,0,0,.30),transparent 52%),
    radial-gradient(150% 100% at 50% -12%,rgba(255,255,255,.045),transparent 42%)}

/* hinge — anodised barrel with shaded end-caps */
.lp-hinge{width:34%;height:9px;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#272c3a,#0c0e15 70%,#05060b);
  box-shadow:0 5px 12px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.10),
    inset 10px 0 9px -7px rgba(0,0,0,.85),inset -10px 0 9px -7px rgba(0,0,0,.85)}

/* back of the lid (visible while closed) — same alloy, soft radial sheen */
.lp-cover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 9%),
    linear-gradient(90deg,rgba(255,255,255,.07),transparent 9% 91%,rgba(255,255,255,.07)),
    repeating-linear-gradient(92deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,.055) 1px 2px),
    radial-gradient(130% 95% at 50% -6%,#5e6476,#2e3240 55%,#191c26);
  border:1px solid rgba(255,255,255,.20);border-bottom-color:rgba(0,0,0,.5);
}

/* base — alloy deck with crisp machined edge */
.lp-deck{
  background:
    linear-gradient(180deg,rgba(255,255,255,.11),transparent 5%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,rgba(0,0,0,.045) 1px 2px),
    linear-gradient(180deg,#464c5d 0%,#282c38 45%,#1a1d26 78%,#10121a 100%);
  border:1px solid rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.22);
}
/* speaker grilles slightly sharper */
.lp-deck::before,.lp-deck::after{opacity:.5;background-image:radial-gradient(circle,rgba(0,0,0,.65) .9px,rgba(255,255,255,.02) 1.2px,transparent 1.6px)}

/* keycaps — deeper travel look + per-key top light */
.key{
  background:linear-gradient(180deg,#3a4158 0%,#232734 60%,#181b25 100%);
  border:1px solid rgba(0,0,0,.6);
  box-shadow:0 2px 2px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 3px rgba(0,0,0,.45);
}
/* keyboard backlight bleeds out of the well once the machine is on */
.laptop.lp-lit .keyboard{box-shadow:inset 0 2px 9px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.03),inset 0 0 34px rgba(80,130,255,.12)}
.laptop.lp-lit .key{color:#d7e3ff;text-shadow:0 0 7px rgba(140,180,255,.55)}
.laptop.lp-lit .kent{color:#7fe7f7;text-shadow:0 0 8px rgba(34,211,238,.7)}

/* glass trackpad with edge catch-light */
.trackpad{background:linear-gradient(168deg,#1e222d,#272b37 55%,#1b1e28);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.05)}

/* ── Pointer-events fix: Chrome hit-tests the backface-hidden cover inside the
   preserve-3d lid and swallows clicks/wheel over the screen. Once the machine
   is on AND booted (fold finished), flatten the lid's 3D context and retire
   the cover so the terminal is fully interactive. Stage leaves "on" when the
   user scrubs the lid closed again, restoring the 3D fold. ── */
.laptop.lp-booted[data-stage="on"] .lp-lid{transform-style:flat}
.laptop.lp-booted[data-stage="on"] .lp-cover{visibility:hidden;pointer-events:none}
/* native touch panning inside the terminal (mobile) */
.u-body{touch-action:pan-y}

/* ════════ HERO — fit every screen height (small laptops 1366×768 etc.) ════════ */
@media (min-width:1025px){
  .hero-stage{--stage-s:1}
  .hero-stage[data-reveal]{transform:translateY(34px) scale(var(--stage-s));transform-origin:50% 42%}
  .hero-stage[data-reveal].in{transform:scale(var(--stage-s))}
}
@media (min-width:1025px) and (max-width:1280px){
  .scene{max-width:500px}
  .hero-inner{gap:30px}
}
@media (min-width:1025px) and (max-height:880px){
  .hero-sticky{padding:64px 0 40px}
  .hero-stage{--stage-s:.92}
  .hero-name{font-size:clamp(2.7rem,6.6vw,5rem)}
}
@media (min-width:1025px) and (max-height:790px){
  .hero-stage{--stage-s:.82}
  .u-body{height:176px}
  .hero-name{font-size:clamp(2.4rem,5.8vw,4.2rem)}
  .hero-badge{margin-bottom:18px}
  .hero-actions{margin-top:26px}
  .hero-socials{margin-top:22px}
  .hero-scroll{bottom:14px}
}
@media (min-width:1025px) and (max-height:700px){
  .hero-sticky{padding:56px 0 28px}
  .hero-stage{--stage-s:.72}
  .u-body{height:160px}
  .hero-name{font-size:clamp(2.2rem,5vw,3.6rem)}
  .hero-scroll{display:none}
}
@media (min-width:1025px) and (max-height:620px){
  .hero-stage{--stage-s:.62}
}

/* ════════ SECTIONS — polish (cards, glows, depth) ════════ */
/* gradient hairline that lights up along the top of cards on hover */
.service-card::after,.portal::after,.stat-card::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.7),rgba(129,140,248,.7),transparent);
  opacity:0;transition:opacity .45s var(--ease)}
.service-card,.stat-card{position:relative;overflow:hidden}
.service-card:hover::after,.portal:hover::after,.stat-card:hover::after{opacity:1}
.service-card:hover{box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.portal:hover{box-shadow:0 30px 60px -26px rgba(0,0,0,.75)}
.stat-card:hover{background:#11131f}

/* featured projects: deeper, softer elevation */
.featured{box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.featured-alt .featured-glow{background:radial-gradient(circle,rgba(34,211,238,.28),transparent 60%)}

/* skill bars: glowing tip */
.bar i{box-shadow:0 0 10px rgba(34,211,238,.45)}
.skills-col{transition:border-color .35s,transform .35s var(--ease)}
.skills-col:hover{border-color:var(--line-2);transform:translateY(-3px)}

/* contact: gradient underline + glow on the email */
.contact-email{background:linear-gradient(90deg,var(--indigo),var(--cyan)) bottom/0% 2px no-repeat,
  linear-gradient(transparent,transparent);border-bottom-color:var(--line-2);transition:.45s var(--ease)}
.contact-email:hover{background-size:100% 2px;border-bottom-color:transparent;text-shadow:0 0 24px rgba(34,211,238,.35)}

/* AI orb: soft halo pulse behind the core */
.ai-core::before{content:'';position:absolute;top:50%;left:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.28),transparent 65%);filter:blur(22px);animation:aiOrb 3.6s ease-in-out infinite}

/* ════════ BLOG portal — featured card designed to pull visitors in ════════ */
.portal-blog{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;gap:0;min-height:0;padding:0;overflow:hidden;
  background:linear-gradient(135deg,#0c1322,#0a0d18);border:1px solid rgba(34,211,238,.20)}
.portal-blog::before{background:linear-gradient(120deg,#22d3ee,#3b82f6 55%,#6366f1);opacity:.10}
.portal-blog:hover{border-color:rgba(34,211,238,.5);
  box-shadow:0 28px 70px -28px rgba(34,211,238,.28),0 30px 60px -26px rgba(0,0,0,.75)}
.portal-blog:hover::before{opacity:.18}
.pb-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding:36px 38px}
.pb-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pb-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;
  color:#7dd3fc;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);padding:5px 12px;border-radius:60px}
.pb-badge svg{width:14px;height:14px}
.pb-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.7rem;color:var(--txt-dim)}
.pb-live i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite}
.portal-blog h3{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em}
.portal-blog .pb-desc{color:var(--txt-dim);font-size:.98rem;max-width:46ch}
.pb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pb-tags li{font-family:var(--mono);font-size:.72rem;color:var(--txt-mute);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:5px 11px;border-radius:60px;transition:color .3s,border-color .3s}
.portal-blog:hover .pb-tags li{color:#9fe8f5;border-color:rgba(34,211,238,.3)}
/* CTA pill — a real "come read" button */
.pb-go{display:inline-flex;align-items:center;gap:9px;margin-top:16px;align-self:flex-start;
  font-weight:700;font-size:.92rem;color:#05060c;background:var(--grad);padding:12px 24px;border-radius:60px;
  box-shadow:0 12px 30px -10px rgba(34,211,238,.55);transition:transform .3s var(--ease),box-shadow .3s}
.pb-go .ic{width:16px;height:16px;transition:transform .3s var(--ease)}
.portal-blog:hover .pb-go{transform:translateY(-2px);box-shadow:0 16px 42px -10px rgba(34,211,238,.75)}
.portal-blog:hover .pb-go .ic{transform:translateX(3px)}
/* floating live terminal mock on the right */
.pb-term{position:relative;z-index:1;margin:22px 30px 22px 0;border-radius:12px;overflow:hidden;align-self:center;width:100%;
  background:#06090f;border:1px solid rgba(255,255,255,.08);box-shadow:0 26px 50px -22px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.02);
  animation:pbFloat 5.5s ease-in-out infinite}
@keyframes pbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pb-term-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#0d1220;border-bottom:1px solid rgba(255,255,255,.06)}
.pb-term-bar i{width:8px;height:8px;border-radius:50%;background:#39405a}
.pb-term-bar i:nth-child(1){background:#ff5f57}.pb-term-bar i:nth-child(2){background:#febc2e}.pb-term-bar i:nth-child(3){background:#28c840}
.pb-term-bar span{margin-inline-start:8px;font-family:var(--mono);font-size:.7rem;color:var(--txt-mute)}
.pb-term-body{padding:14px 16px;font-family:var(--mono);font-size:.78rem;line-height:1.85;color:#cdd6ea;min-height:120px}
.pb-term-body .c{color:#8ae234}.pb-term-body .k{color:#22d3ee}
.pb-term-body .post{color:#e7e9f0;transition:color .3s}
.portal-blog:hover .pb-term-body .post{color:#9fe8f5}
.pb-cursor{display:inline-block;width:7px;height:13px;background:var(--cyan);vertical-align:-2px;margin-left:2px;animation:blink 1.05s step-end infinite;box-shadow:0 0 8px var(--cyan)}
@media (max-width:760px){
  .portal-blog{grid-template-columns:1fr}
  .pb-body{padding:28px 26px}
  .pb-term{margin:0 26px 26px;width:auto;animation:none}
}
html[dir="rtl"] .pb-term{margin:22px 0 22px 30px}
html[dir="rtl"] .pb-term-bar,html[dir="rtl"] .pb-term-body{direction:ltr}

/* ════════ MOBILE — lighter effects, smoother fold, shorter page ════════ */
@media (max-width:1024px){
  /* a single cheap shadow: the dual drop-shadow makes the CSS fold transition stutter */
  .laptop{filter:drop-shadow(0 26px 30px rgba(0,0,0,.5))}
}
@media (max-width:760px){
  .section{padding:74px 0}
  .section-head{margin-bottom:44px}
  .hero-sticky{padding:96px 0 56px}
  .featured{margin-bottom:40px}
  /* giant blurred orbs are the #1 mobile paint cost — shrink & soften them */
  .hero-orb{filter:blur(64px);opacity:.34}
  .orb-a{width:360px;height:360px;top:-120px;right:-90px}
  .orb-b{width:300px;height:300px;bottom:-120px;left:-100px}
  .nav.scrolled{backdrop-filter:blur(9px) saturate(140%)}
  .lp-glow{display:none}
  .laptop.lp-lit .lp-display{box-shadow:inset 0 0 50px rgba(10,16,40,.4),0 0 36px -8px rgba(124,150,255,.4)}
  .featured-glow{filter:blur(26px)}
}