/* ============================================================
   VIEW TEKNIK — v3 · DARK-FIRST design system
   Deep navy · glass surfaces · cyan glow · kinetic motion
   "Intelligence that works for you" — the site itself feels alive
   ============================================================ */
:root{
  /* surfaces */
  --bg:#060d18; --bg-2:#0a1626; --bg-3:#0e1f35;
  --glass:rgba(255,255,255,.028); --glass-2:rgba(255,255,255,.05); --glass-3:rgba(255,255,255,.075);
  --border:rgba(123,176,222,.13); --border-2:rgba(123,176,222,.24); --border-3:rgba(123,176,222,.4);
  /* brand */
  --navy:#0a1a2f; --navy-2:#13314e; --navy-3:#1d4063;
  --cyan:#22d3ee; --cyan-soft:#67e8f9; --cyan-deep:#0891b2; --cyan-ink:#0a3a44;
  /* semantic (AI demo states) */
  --amber:#f5a524; --rose:#fb5d6b; --green:#34d399;
  /* text */
  --text:#eaf3fc; --dim:#a6bdd6; --mute:#647a9b; --faint:#3f5371; --head:#ffffff;
  --nav-bg:rgba(8,16,28,.72);
  /* glow */
  --glow:rgba(34,211,238,.5); --glow-soft:rgba(34,211,238,.12); --glow-mid:rgba(34,211,238,.26);
  /* type */
  --f-d:"Space Grotesk",system-ui,sans-serif; --f-ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  /* layout */
  --maxw:1240px; --gutter:clamp(20px,5vw,68px); --nav-h:74px;
  --r:14px; --r-lg:22px; --r-xl:28px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{font-family:var(--f-d);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body[data-lang="ar"]{font-family:var(--f-ar);line-height:1.85}
body[data-lang="ar"] .display{font-family:var(--f-ar)}
::selection{background:var(--cyan);color:var(--navy)}
img{max-width:100%}
a{color:inherit}

/* ambient living background — fixed glows that drift */
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--bg)}
.ambient::before,.ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.ambient::before{width:60vw;height:60vw;left:-10vw;top:-10vw;background:radial-gradient(circle,rgba(34,211,238,.12),transparent 65%);animation:drift1 26s var(--ease) infinite alternate}
.ambient::after{width:55vw;height:55vw;right:-12vw;bottom:-5vw;background:radial-gradient(circle,rgba(29,64,99,.5),transparent 65%);animation:drift2 32s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(14vw,18vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-12vw,-12vh) scale(1.1)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(123,176,222,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(123,176,222,.035) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 80%);mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 80%)}
@media(prefers-reduced-motion:reduce){.ambient::before,.ambient::after{animation:none}}

/* i18n */
.i18n>.ar{display:none}.i18n>.en{display:inline}
body[data-lang="ar"] .i18n>.en{display:none}
body[data-lang="ar"] .i18n>.ar{display:inline}

/* ---------- structure ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative}
section{position:relative;padding-block:clamp(72px,10vw,140px)}
.display{font-family:var(--f-d);font-weight:600;line-height:1.06;letter-spacing:-.025em}
.eng{direction:ltr;unicode-bidi:isolate;font-family:var(--f-d)}

.eyebrow{font-family:var(--f-d);font-size:.76rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:13px}
body[data-lang="ar"] .eyebrow{letter-spacing:.06em;font-family:var(--f-ar)}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--glow)}
.section-head{max-width:820px;margin-bottom:clamp(44px,6vw,72px)}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-block:20px 18px;color:var(--head)}
.section-head p{color:var(--dim);font-size:clamp(1rem,1.5vw,1.14rem);max-width:62ch}

/* section index tag (futuristic) */
.sec-no{position:absolute;inset-inline-end:var(--gutter);inset-block-start:clamp(40px,5vw,72px);font-family:var(--f-d);font-size:.72rem;letter-spacing:.3em;color:var(--faint);font-weight:600}
body[data-lang="ar"] .sec-no{letter-spacing:.1em}

/* ---------- kinetic reveal (animation-based — settles reliably) ---------- */
.reveal{opacity:0;transform:translateY(30px)}
.reveal.in{animation:revIn .9s var(--ease-out) forwards}
@keyframes revIn{to{opacity:1;transform:none}}
.d1.in{animation-delay:.08s}.d2.in{animation-delay:.16s}.d3.in{animation-delay:.24s}.d4.in{animation-delay:.32s}.d5.in{animation-delay:.4s}
/* kinetic headline: word-by-word rise */
.kin{display:inline-block}
.kin .w{display:inline-block;overflow:hidden;vertical-align:top}
.kin .w>span{display:inline-block;transform:translateY(110%)}
.kin.in .w>span{animation:wordRise .85s var(--ease-out) forwards}
@keyframes wordRise{to{transform:none}}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.in,.kin .w>span,.kin.in .w>span{animation:none!important;opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-d);font-weight:600;font-size:.9rem;text-decoration:none;cursor:pointer;border:0;padding:14px 26px;border-radius:999px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s,border-color .35s;white-space:nowrap;position:relative}
.btn-primary{color:var(--navy);background:linear-gradient(120deg,var(--cyan-soft),var(--cyan) 60%,var(--cyan-deep));box-shadow:0 10px 30px -10px var(--glow),inset 0 0 0 1px rgba(255,255,255,.2)}
.btn-primary:hover{box-shadow:0 16px 44px -10px var(--glow),inset 0 0 0 1px rgba(255,255,255,.3)}
.btn-ghost{color:var(--text);border:1px solid var(--border-2);background:var(--glass)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);background:var(--glow-soft)}
.btn .arr{transition:transform .35s var(--ease)}
body[data-lang="ar"] .btn .arr{transform:scaleX(-1)}
.btn:hover .arr{transform:translateX(5px)}
body[data-lang="ar"] .btn:hover .arr{transform:scaleX(-1) translateX(5px)}

/* ---------- NAV ---------- */
#nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:200;height:var(--nav-h);display:flex;align-items:center;transition:background .45s var(--ease),border-color .45s,backdrop-filter .45s;border-bottom:1px solid transparent}
#nav .wrap{display:flex;align-items:center;gap:26px;width:100%}
#nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--border)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand .mark{width:36px;height:36px;flex-shrink:0;color:var(--cyan);filter:drop-shadow(0 0 8px var(--glow-mid));transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.08)}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand .bt b{font-family:var(--f-d);font-size:1.06rem;font-weight:700;letter-spacing:.05em;color:var(--head)}
.brand .bt small{font-size:.58rem;letter-spacing:.18em;margin-top:3px;color:var(--mute)}
body[data-lang="ar"] .brand .bt small{letter-spacing:.04em}
.nav-links{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav-links a{text-decoration:none;font-size:.84rem;font-weight:500;color:var(--dim);padding:9px 13px;border-radius:9px;white-space:nowrap;transition:color .25s,background .25s;position:relative}
.nav-links a:hover{color:var(--head)}
.nav-links a.active{color:var(--cyan)}
.nav-links a.active::after{content:"";position:absolute;inset-inline:13px;inset-block-end:3px;height:1.5px;background:var(--cyan);box-shadow:0 0 8px var(--glow);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:11px;flex-shrink:0}
.lang-toggle{font-family:var(--f-d);font-weight:600;font-size:.8rem;color:var(--text);background:var(--glass);border:1px solid var(--border-2);border-radius:999px;padding:9px 17px;cursor:pointer;transition:all .25s var(--ease)}
.lang-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle{display:none;background:none;border:0;color:var(--head);cursor:pointer;padding:6px}
@media(max-width:1080px){
  .nav-links{position:fixed;inset-block-start:var(--nav-h);inset-inline:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(8,16,28,.97);backdrop-filter:blur(20px);padding:12px var(--gutter) 28px;border-bottom:1px solid var(--border);transform:translateY(-130%);transition:transform .45s var(--ease);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav-links.open{transform:none}
  .nav-links a{padding:14px 8px;font-size:.98rem;border-bottom:1px solid var(--border)}
  .nav-toggle{display:inline-flex;margin-inline-start:auto}
  .nav-cta .btn{display:none}
}

/* ---------- HERO ---------- */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-block:calc(var(--nav-h) + 52px) 96px;overflow:hidden;background:radial-gradient(120% 90% at 70% 20%,#0d2138,#060d18 70%)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 72% 30%,transparent 30%,rgba(6,13,24,.6) 100%)}
#hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:52px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero-copy .eyebrow{color:var(--cyan-soft)}
.hero-copy h1{font-size:clamp(2.7rem,6.6vw,5rem);margin-block:24px 26px;color:var(--head);font-weight:600;letter-spacing:-.03em;line-height:1.02}
.hero-copy h1 .grad{background:linear-gradient(110deg,var(--cyan-soft),var(--cyan) 50%,var(--navy-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--dim);max-width:54ch;margin-bottom:24px}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px 10px;margin-bottom:38px}
.hero-tags span{font-size:.74rem;font-family:var(--f-d);font-weight:500;color:var(--dim);border:1px solid var(--border);border-radius:999px;padding:7px 14px;background:var(--glass);transition:all .3s var(--ease)}
.hero-tags span:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* hero orbit visual */
.hero-visual{position:relative;aspect-ratio:1;display:grid;place-items:center}
@media(max-width:940px){.hero-visual{max-width:440px;margin-inline:auto}}
.orbit{position:absolute;border-radius:50%;border:1px solid var(--border-2)}
.orbit.o1{width:100%;height:100%;border-style:dashed;animation:spin 46s linear infinite}
.orbit.o2{width:71%;height:71%;animation:spin 30s linear infinite reverse}
.orbit.o3{width:44%;height:44%;border-color:var(--glow-mid);box-shadow:0 0 50px -10px var(--glow) inset}
.orbit .nodelet{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px 2px var(--glow);inset-block-start:-5px;inset-inline-start:calc(50% - 4px)}
.orbit.o2 .nodelet{background:var(--cyan-soft)}
.hero-mark{position:relative;z-index:2;width:33%;height:33%;color:var(--cyan);filter:drop-shadow(0 0 30px var(--glow))}
@keyframes spin{to{transform:rotate(360deg)}}

.scroll-hint{position:absolute;inset-block-end:26px;inset-inline-start:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--mute);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase}
.scroll-hint .line{width:1px;height:38px;background:linear-gradient(var(--cyan),transparent);animation:drop 2s var(--ease) infinite}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- TICKER ---------- */
.ticker{border-block:1px solid var(--border);background:var(--glass);overflow:hidden;padding-block:0}
.ticker-track{display:flex;gap:0;white-space:nowrap;animation:ticker 38s linear infinite;will-change:transform}
body[data-lang="ar"] .ticker-track{animation-direction:reverse}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:16px;padding:22px 34px;font-family:var(--f-d);font-weight:600;font-size:1.05rem;color:var(--dim);letter-spacing:.02em}
.ticker-item .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--glow);flex-shrink:0}
@keyframes ticker{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- shared glass card ---------- */
.glass{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--glass);overflow:hidden;transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s}
.glass:hover{border-color:var(--border-2);background:var(--glass-2)}
/* spotlight follows cursor (set via JS --mx/--my) */
.spot::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow-soft),transparent 60%);pointer-events:none}
.spot:hover::before{opacity:1}

/* ---------- SPLIT (about/who/vision) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,76px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:44px}}
.split h2{font-size:clamp(2rem,3.8vw,2.9rem);margin-block:18px 22px;color:var(--head)}
.split p{color:var(--dim);margin-bottom:16px}
.motto{color:var(--cyan-soft);font-family:var(--f-d);font-style:italic;font-size:1.06rem;border-inline-start:2px solid var(--cyan);padding-inline-start:18px}
body[data-lang="ar"] .motto{font-family:var(--f-ar);font-style:normal}

/* mini stat strip under about */
.ministats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.ministats .ms{border:1px solid var(--border);border-radius:var(--r);padding:20px;background:var(--glass)}
.ministats .num{font-family:var(--f-d);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--cyan);line-height:1}
.ministats .lbl{color:var(--mute);font-size:.8rem;margin-top:8px}

/* ---------- VISION/MISSION cards ---------- */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:760px){.vm-grid{grid-template-columns:1fr}}
.vm-card{padding:42px}
.vm-card .big-ico{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;background:var(--glow-soft);border:1px solid var(--border-2);color:var(--cyan);margin-bottom:26px;transition:transform .5s var(--ease)}
.vm-card:hover .big-ico{transform:translateY(-4px) rotate(-6deg)}
.vm-card .big-ico svg{width:30px;height:30px}
.vm-card h3{font-family:var(--f-d);font-size:1.6rem;margin-bottom:16px;color:var(--head)}
.vm-card p{color:var(--dim);font-size:1.02rem}
.vm-card .watermark{position:absolute;inset-block-end:-34px;inset-inline-end:-6px;font-family:var(--f-d);font-size:9.5rem;font-weight:700;color:rgba(34,211,238,.05);line-height:1;pointer-events:none}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-info .info-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.contact-info .info-item .ico{width:46px;height:46px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:var(--glow-soft);border:1px solid var(--border-2);color:var(--cyan)}
.contact-info .info-item .ico svg{width:22px;height:22px}
.contact-info .info-item .lbl{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.contact-info .info-item .val{color:var(--text);font-size:1.02rem;margin-top:4px}
.contact-form{display:flex;flex-direction:column;gap:16px;border:1px solid var(--border);border-radius:var(--r-lg);padding:32px;background:var(--glass)}
.field label{display:block;font-size:.8rem;color:var(--dim);margin-bottom:8px}
.field input,.field textarea{width:100%;background:rgba(6,13,24,.5);border:1px solid var(--border-2);border-radius:11px;padding:14px 16px;color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--glow-soft)}
.field textarea{resize:vertical;min-height:120px}
.btn-dark{color:var(--navy);background:linear-gradient(120deg,var(--cyan-soft),var(--cyan));justify-content:center}
.form-note{font-size:.8rem;color:var(--mute)}
.form-ok{color:var(--green);font-size:.9rem;display:none;font-weight:600}
.form-ok.show{display:block}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border);padding-block:60px 38px;background:linear-gradient(180deg,transparent,rgba(10,22,38,.5))}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;margin-bottom:42px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:30px}}
.foot-grid p{color:var(--dim);font-size:.92rem;max-width:40ch;margin-top:16px}
.foot-col h5{font-family:var(--f-d);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.foot-col a{display:block;color:var(--dim);text-decoration:none;font-size:.92rem;padding:5px 0;transition:color .25s,padding-inline-start .25s}
.foot-col a:hover{color:var(--cyan);padding-inline-start:5px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--border);color:var(--mute);font-size:.82rem}
.subline{font-family:var(--f-d);font-size:.8rem;letter-spacing:.04em;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.subline .sep{color:var(--cyan);opacity:.6}
body[data-lang="ar"] .subline{letter-spacing:0}

/* custom cursor halo (desktop pointer only) */
.cursor-halo{position:fixed;top:0;left:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--border-3);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s,background .25s;mix-blend-mode:screen}
.cursor-halo.hot{width:54px;height:54px;border-color:var(--cyan);background:var(--glow-soft)}
@media(hover:none),(pointer:coarse){.cursor-halo{display:none}}

/* ============================================================
   THEME · LIGHT  (deep navy ink on a soft cool paper)
   Toggle sets body[data-theme]. Default = dark.
   ============================================================ */
body[data-theme="light"]{
  --bg:#eef4fb; --bg-2:#e4eef7; --bg-3:#d7e6f3;
  --glass:rgba(13,38,71,.035); --glass-2:rgba(13,38,71,.06); --glass-3:rgba(13,38,71,.09);
  --border:rgba(13,52,99,.14); --border-2:rgba(13,52,99,.24); --border-3:rgba(8,145,178,.55);
  --text:#102941; --dim:#3e5772; --mute:#6a7f99; --faint:#9bafc6; --head:#0a1a2f;
  --cyan-soft:#0a93ad;
  --glow:rgba(8,145,178,.32); --glow-soft:rgba(8,145,178,.08); --glow-mid:rgba(8,145,178,.16);
  --nav-bg:rgba(238,244,251,.82);
}
/* on light pages the ambient glows go subtle/cool */
body[data-theme="light"] .ambient::before{background:radial-gradient(circle,rgba(8,145,178,.1),transparent 65%)}
body[data-theme="light"] .ambient::after{background:radial-gradient(circle,rgba(13,52,99,.12),transparent 65%)}
body[data-theme="light"] .grain{opacity:.7}
body[data-theme="light"] .btn-primary{color:#fff;background:linear-gradient(120deg,#0aa5c0,#0891b2 60%,#0e7490);box-shadow:0 10px 30px -12px rgba(8,145,178,.5)}
body[data-theme="light"] .btn-dark{color:#fff;background:linear-gradient(120deg,#0aa5c0,#0891b2)}
body[data-theme="light"] .hero-tags span:hover,body[data-theme="light"] .logo-chip:hover{color:var(--cyan-deep)}
body[data-theme="light"] .field input,body[data-theme="light"] .field textarea{background:#fff}
body[data-theme="light"] ::selection{background:var(--cyan-deep);color:#fff}

/* ---------- ALWAYS-DARK immersive panels (work in BOTH themes) ----------
   The signature "cinematic" surfaces stay dark even on the light page —
   a deliberately non-traditional light mode: airy page, dark feature panels. */
.dark-panel{
  --bg:#060d18; --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.07); --glass-3:rgba(255,255,255,.1);
  --border:rgba(123,176,222,.16); --border-2:rgba(123,176,222,.3); --border-3:rgba(123,176,222,.45);
  --text:#eaf3fc; --dim:#a6bdd6; --mute:#7892ad; --faint:#54708f; --head:#ffffff;
  --cyan-soft:#67e8f9; --glow:rgba(34,211,238,.5); --glow-soft:rgba(34,211,238,.12); --glow-mid:rgba(34,211,238,.26);
}

/* ---------- NAV: light text over the dark hero, theme text once scrolled ---------- */
#nav:not(.scrolled) .brand .bt b{color:#fff}
#nav:not(.scrolled) .brand .bt small{color:rgba(234,243,252,.6)}
#nav:not(.scrolled) .nav-links a{color:rgba(234,243,252,.82)}
#nav:not(.scrolled) .nav-links a:hover{color:#fff}
#nav:not(.scrolled) .lang-toggle,#nav:not(.scrolled) .theme-toggle{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
#nav:not(.scrolled) .nav-toggle{color:#fff}
#nav.scrolled .nav-toggle{color:var(--text)}
@media(max-width:1080px){body[data-theme="light"] .nav-links{background:rgba(238,244,251,.98)}}

/* ---------- THEME TOGGLE (non-traditional: morphing orb) ---------- */
.theme-toggle{position:relative;width:42px;height:42px;flex-shrink:0;border-radius:50%;border:1px solid var(--border-2);background:var(--glass);color:var(--text);cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:all .35s var(--ease)}
.theme-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.theme-toggle .orb{position:relative;width:17px;height:17px;border-radius:50%;background:currentColor;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
body[data-theme="light"] .theme-toggle .orb{transform:scale(.7);box-shadow:0 0 10px -1px currentColor}
body[data-theme="light"] .theme-toggle .ray{opacity:1}
.theme-toggle .ray{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.theme-toggle .ray i{position:absolute;top:50%;left:50%;width:2px;height:5px;border-radius:2px;background:currentColor;transform-origin:1px 14px}
.theme-toggle .ray i:nth-child(1){transform:translate(-50%,-14px) rotate(0deg)}
.theme-toggle .ray i:nth-child(2){transform:translate(-50%,-14px) rotate(45deg)}
.theme-toggle .ray i:nth-child(3){transform:translate(-50%,-14px) rotate(90deg)}
.theme-toggle .ray i:nth-child(4){transform:translate(-50%,-14px) rotate(135deg)}
.theme-toggle .ray i:nth-child(5){transform:translate(-50%,-14px) rotate(180deg)}
.theme-toggle .ray i:nth-child(6){transform:translate(-50%,-14px) rotate(225deg)}
.theme-toggle .ray i:nth-child(7){transform:translate(-50%,-14px) rotate(270deg)}
.theme-toggle .ray i:nth-child(8){transform:translate(-50%,-14px) rotate(315deg)}