:root{--font:'Geist',system-ui,sans-serif;--font-ar:'Cairo','Geist',sans-serif;
--bg:#eef0f4;--ink:#1D1D1F;--muted:#6E6E73;--brand:#1D1D1F;--brand2:#3a3a40;--accent:#F26A21;--accent2:#C9500F;--accent-glow:rgba(242,106,33,.5);--accent-soft:rgba(242,106,33,.14);
--glass:rgba(255,255,255,.55);--glass-b:rgba(255,255,255,.75);--shine:rgba(255,255,255,.9);--field:rgba(255,255,255,.55);--panel:rgba(246,250,255,.9);--scrim:rgba(29,29,31,.35);--ring:rgba(242,106,33,.3);
--blur:22px;--shadow:0 10px 40px -12px rgba(29,29,31,.28);--r-hdr:999px;--r-lg:32px;--r-md:22px;--r-btn:16px;--crane:#1D1D1F;
--page-bg:radial-gradient(900px 600px at 10% 0%,#dfe6f2 0,transparent 60%),radial-gradient(800px 600px at 100% 30%,#ffe6d6 0,transparent 60%),linear-gradient(#eef0f4,#f7f7f9);
--pro-bg:linear-gradient(120deg,#1D1D1F,#3a3a40 55%,#F26A21 130%)}
.hero{background:linear-gradient(#dfe6f2 0%,#f1f3f8 55%,#f7f7f9 100%)}
.l-sun{width:520px;height:520px;border-radius:50%;top:6%;inset-inline-end:8%;background:radial-gradient(circle,#fff 0,#ffe3c2 35%,transparent 70%);filter:blur(6px)}
.l-peaks1,.l-peaks2{inset-inline:-3%;bottom:-2%;height:48%}
.l-peaks1 path{fill:#c4ccdb}.l-peaks2{height:36%}.l-peaks2 path{fill:#e6eaf3;filter:drop-shadow(0 -6px 20px rgba(255,255,255,.9))}
.l-peaks1 svg,.l-peaks2 svg{filter:drop-shadow(0 -10px 30px rgba(255,255,255,.6))}
.l-crane{width:min(340px,40vw);aspect-ratio:1;bottom:6%;inset-inline-end:4%;opacity:.85}
.l-float{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:18px;font-weight:700;font-size:.85rem}.l-float b{font-size:1.5rem}
.f1{top:22%;inset-inline-end:34%}.f2{top:48%;inset-inline-end:16%}.f3{top:30%;inset-inline-end:6%}
.hdr-in{box-shadow:0 12px 40px -14px rgba(29,29,31,.35),inset 0 1px 0 #fff}
.hdr.scrolled .hdr-in{background:rgba(255,255,255,.8)}
.card{box-shadow:var(--shadow),inset 0 1px 0 #fff}.card:hover{box-shadow:0 24px 50px -16px rgba(29,29,31,.4),inset 0 1px 0 #fff}
.hero-copy{background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.4))}
.hero h1{background:linear-gradient(120deg,#1D1D1F,#6E6E73);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:720px){.l-float{display:none}.l-crane{opacity:.5}}

html{color-scheme:light}
.hdr-in{background:var(--glass)}
.l-sun{transition:background .6s}
/* ---------- DARK ---------- */
:root[data-theme=dark]{color-scheme:dark;
--bg:#0a0b0f;--ink:#f3f4f7;--muted:#9aa1b2;--brand:#F26A21;--brand2:#C9500F;
--glass:rgba(255,255,255,.07);--glass-b:rgba(255,255,255,.14);--shine:rgba(255,255,255,.2);--field:rgba(255,255,255,.08);--panel:rgba(18,19,24,.95);--scrim:rgba(0,0,0,.66);--ring:rgba(242,106,33,.5);
--shadow:0 20px 50px -22px rgba(0,0,0,.9);--crane:#F26A21;
--page-bg:radial-gradient(900px 600px at 12% 0%,rgba(242,106,33,.16),transparent 60%),radial-gradient(800px 600px at 100% 35%,rgba(120,130,170,.14),transparent 60%),linear-gradient(#0a0b0f,#101218);
--pro-bg:linear-gradient(120deg,#16171d,#3a1a0a 60%,#F26A21 140%)}
:root[data-theme=dark] .hero{background:linear-gradient(#07080c 0%,#10131b 60%,#151922 100%)}
:root[data-theme=dark] .l-sun{background:radial-gradient(circle,#fff 0,#cfd8ff 12%,rgba(150,170,255,.22) 38%,transparent 70%);width:420px;height:420px;filter:blur(2px)}
:root[data-theme=dark] .l-peaks1 path{fill:#232a3b}:root[data-theme=dark] .l-peaks2 path{fill:#171c28;filter:none}
:root[data-theme=dark] .l-peaks1 svg,:root[data-theme=dark] .l-peaks2 svg{filter:drop-shadow(0 -8px 24px rgba(242,106,33,.12))}
:root[data-theme=dark] .l-crane{filter:drop-shadow(0 0 14px rgba(242,106,33,.6));opacity:.95}
:root[data-theme=dark] .hero-copy{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:0 30px 80px -30px #000,inset 0 1px 0 rgba(255,255,255,.28)}
:root[data-theme=dark] .hero h1{background:linear-gradient(110deg,#fff,#cdd5ee 55%,#ffb98a);-webkit-background-clip:text;background-clip:text}
:root[data-theme=dark] .hdr-in{box-shadow:0 12px 40px -14px #000,inset 0 1px 0 rgba(255,255,255,.2)}
:root[data-theme=dark] .hdr.scrolled .hdr-in{background:rgba(20,21,27,.82)}
:root[data-theme=dark] .card,:root[data-theme=dark] .card:hover{box-shadow:var(--shadow),inset 0 1px 0 var(--shine)}
:root[data-theme=dark] .card:hover{box-shadow:0 26px 50px -20px rgba(242,106,33,.35),inset 0 1px 0 var(--shine)}
:root[data-theme=dark] .art{background:linear-gradient(145deg,hsl(var(--h) 50% 32%),hsl(var(--h) 55% 12%))}
:root[data-theme=dark] .tabs .on{background:#262830}
:root[data-theme=dark] .modal,:root[data-theme=dark] .drawer{background:var(--panel)}
:root[data-theme=dark] .sel option{background:#15161c;color:#fff}
:root[data-theme=dark] .chip.on{box-shadow:0 0 22px -4px var(--accent-glow)}
:root[data-theme=dark] .hero-scene .l-float{color:var(--ink)}
:root[data-theme=dark] .toast{background:#f3f4f7;color:#0a0b0f}
body,.hero,.glass,.card,.hdr-in{transition:background-color .4s,color .4s,border-color .4s}