:root,[data-theme="dark"]{--sky1:#0b1018;--sky2:#2b2332;--sun:#ff8a57;--r1:#1d2433;--r2:#141b28;--r3:#0b1018;--fg:#f4efe8;--mut:#b4aeb4;--glass:rgba(12,16,24,.55);--edge:rgba(255,255,255,.16);--acc:#ff8a57}
[data-theme="light"]{--sky1:#f6ebdf;--sky2:#f8c9a6;--sun:#ff6a3d;--r1:#dcb9a5;--r2:#c09a8a;--r3:#9d7a73;--fg:#241a1a;--mut:#5e4c4a;--glass:rgba(255,248,240,.62);--edge:rgba(36,26,26,.2);--acc:#c2410c}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;color:var(--fg);background:linear-gradient(var(--sky1) 30%,var(--sky2));font-family:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden;transition:background .4s,color .4s}
.scene{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.sun{fill:var(--sun);opacity:.9;animation:rise 14s ease-in-out infinite alternate}
@keyframes rise{to{transform:translateY(-36px)}}
.ridge.r1{fill:var(--r1)}.ridge.r2{fill:var(--r2)}.ridge.r3{fill:var(--r3)}
.top,main,.foot{position:relative;z-index:1}
.top{display:flex;justify-content:space-between;align-items:center;padding:1.25rem clamp(1rem,4vw,3rem)}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--fg);text-decoration:none;font-weight:800;letter-spacing:.1em}
.tools{display:flex;gap:.6rem}
.tools button{font:inherit;font-weight:600;color:var(--fg);background:var(--glass);border:1px solid var(--edge);border-radius:999px;min-width:2.5rem;height:2.5rem;padding:0 1rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:border-color .2s}
.tools button:hover,.tools button:focus-visible{border-color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
#theme{padding:0}
[data-theme="dark"] .i-sun,[data-theme="light"] .i-moon{display:none}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem clamp(1rem,4vw,3rem) 2rem}
.wrap{max-width:46rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.badge{font-weight:700;font-size:.9rem;color:var(--acc);border:1px solid var(--acc);border-radius:999px;padding:.35rem 1rem}
h1{font-family:"Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;font-weight:900;font-size:clamp(2.6rem,9vw,5.6rem);line-height:1;letter-spacing:-.04em}
[lang="ar"] h1{letter-spacing:0;line-height:1.3}
.lead{max-width:34rem;line-height:1.7;color:var(--mut);font-size:clamp(1rem,2vw,1.2rem)}
.clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;width:100%;max-width:36rem;direction:ltr}
.cell{background:var(--glass);border:1px solid var(--edge);border-radius:1rem;padding:1rem .4rem;backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:.35rem;min-width:0}
.cell b{font-size:clamp(1.5rem,7vw,3rem);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.cell span{font-size:.78rem;color:var(--mut)}
.note{display:inline-flex;align-items:center;gap:.6rem;color:var(--mut)}
.contact{margin-top:.6rem;color:var(--mut);line-height:1.8}
.contact a{color:var(--fg);font-weight:700;text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:.3em;white-space:nowrap;transition:color .2s}
.contact a:hover,.contact a:focus-visible{color:var(--acc)}
.inf{font-size:1.8rem;line-height:1;color:var(--acc)}
.foot{padding:1rem clamp(1rem,4vw,3rem) 1.5rem;text-align:center;font-size:.8rem;color:var(--mut)}
@media (prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}}