/* =====================================================
   VERION ONE — Landing Page Styles
   verionone.com
   ===================================================== */

/* ============ TOKENS ============ */
:root{
  --ink: #0A0D16;
  --ink-2: #0E1220;
  --panel: #121724;
  --panel-2: #171D2E;
  --line: rgba(242,193,78,.16);
  --line-soft: rgba(236,233,225,.10);
  --text: #ECE9E1;
  --muted: #8A90A6;
  --gold: #F2C14E;
  --gold-deep: #D9A43B;
  --azure: #5EC8D8;
  --azure-deep: #37A9BB;
  --glow-gold: rgba(242,193,78,.55);
  --glow-azure: rgba(94,200,216,.45);
  --shadow: 0 30px 80px -30px rgba(0,0,0,.75);
  --maxw: 1180px;
  --font-display: 'Cairo', 'Segoe UI', Tahoma, 'Arial', sans-serif;
  --font-body: 'Cairo', 'Segoe UI', Tahoma, 'Arial', sans-serif;
}
html[lang="en"]{
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}
:root[data-theme="light"], html[lang][data-theme="light"]{
  --ink: #F4F1E9;
  --ink-2: #EFEBE1;
  --panel: #FBF9F3;
  --panel-2: #F3EFE4;
  --line: rgba(176,132,32,.28);
  --line-soft: rgba(20,24,36,.10);
  --text: #171B26;
  --muted: #5C6274;
  --gold: #B8860B;
  --gold-deep: #9A6F08;
  --azure: #1E8493;
  --azure-deep: #156B78;
  --glow-gold: rgba(184,134,11,.30);
  --glow-azure: rgba(30,132,147,.22);
  --shadow: 0 30px 80px -40px rgba(60,48,20,.35);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink: #F4F1E9; --ink-2: #EFEBE1; --panel: #FBF9F3; --panel-2: #F3EFE4;
    --line: rgba(176,132,32,.28); --line-soft: rgba(20,24,36,.10);
    --text: #171B26; --muted: #5C6274; --gold: #B8860B; --gold-deep: #9A6F08;
    --azure: #1E8493; --azure-deep: #156B78;
    --glow-gold: rgba(184,134,11,.30); --glow-azure: rgba(30,132,147,.22);
    --shadow: 0 30px 80px -40px rgba(60,48,20,.35);
  }
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--font-body), system-ui, "Segoe UI", Tahoma, sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-weight:400;
}
h1,h2,h3{font-family:var(--font-display), var(--font-body), sans-serif; line-height:1.15; text-wrap:balance; margin:0; font-weight:700}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%}
::selection{background:var(--gold); color:#0A0D16}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}

/* i18n visibility */
.i18n{display:none}
html[lang="ar"] .i18n[data-lang="ar"]{display:revert}
html[lang="en"] .i18n[data-lang="en"]{display:revert}

/* ============ ATMOSPHERE ============ */
#net{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.aura{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; mix-blend-mode:screen; animation:drift 26s ease-in-out infinite}
:root[data-theme="light"] .blob, html[data-theme="light"] .blob{mix-blend-mode:multiply; opacity:.3}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .blob{mix-blend-mode:multiply; opacity:.3}}
.blob.g1{width:520px; height:520px; background:radial-gradient(circle,var(--glow-gold),transparent 70%); top:-140px; inset-inline-start:-80px}
.blob.g2{width:600px; height:600px; background:radial-gradient(circle,var(--glow-azure),transparent 70%); bottom:-200px; inset-inline-end:-120px; animation-delay:-8s}
.blob.g3{width:420px; height:420px; background:radial-gradient(circle,var(--glow-gold),transparent 70%); top:38%; inset-inline-start:44%; opacity:.25; animation-delay:-15s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative; z-index:2}

/* ============ HEADER ============ */
header{position:fixed; top:0; inset-inline:0; z-index:50; transition:.4s}
header .bar{display:flex; align-items:center; justify-content:space-between; padding:18px 26px; max-width:1320px; margin:0 auto}
header.scrolled{background:color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; letter-spacing:.5px}
.brand .mark{width:34px; height:34px; flex:none}
.brand .name{font-size:1.28rem}
.brand .one{color:var(--gold)}
.controls{display:flex; align-items:center; gap:9px}
.pill{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px; border-radius:999px;
  border:1px solid var(--line); background:color-mix(in srgb, var(--panel) 60%, transparent);
  color:var(--text); font-family:var(--font-body); font-size:.86rem; font-weight:600; cursor:pointer;
  transition:.25s; backdrop-filter:blur(8px)}
.pill:hover{border-color:var(--gold); transform:translateY(-1px)}
.pill svg{width:17px; height:17px}
.pill.icon-only{width:40px; padding:0; justify-content:center}

/* ============ HERO ============ */
.hero{min-height:100svh; display:flex; align-items:center; padding:120px 0 70px; position:relative}
.hero .wrap{text-align:center; display:flex; flex-direction:column; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line); background:color-mix(in srgb, var(--panel) 55%, transparent);
  font-size:.82rem; letter-spacing:.6px; font-weight:600; color:var(--text); backdrop-filter:blur(8px);
  margin-bottom:30px; animation:rise .9s .1s both}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 var(--glow-gold); animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--glow-gold)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(2.5rem, 7vw, 5.3rem); font-weight:700; letter-spacing:-.5px; margin-bottom:8px; animation:rise .9s .2s both}
.hero h1 .grad{background:linear-gradient(120deg,var(--gold),var(--azure)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{max-width:720px; font-size:clamp(1.05rem,2.2vw,1.35rem); color:var(--muted); font-weight:400; margin:22px auto 0; animation:rise .9s .35s both}
.wordmark{font-family:var(--font-display); font-weight:800; font-size:clamp(1rem,2vw,1.15rem); letter-spacing:.42em; color:var(--muted); margin-bottom:34px; animation:rise .9s both; padding-inline-start:.42em}
html[lang="ar"] .wordmark{letter-spacing:.2em; padding-inline-start:0}

/* hero logo lockup (bilingual) */
.hero-logo{display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:34px; animation:rise .9s both}
.hero-emblem{width:clamp(84px,13vw,122px); height:auto; filter:drop-shadow(0 14px 36px var(--glow-gold)); animation:floaty 6s ease-in-out infinite}
.hero-emblem .hx{stroke-dasharray:240; stroke-dashoffset:240; animation:draw 1.9s .15s cubic-bezier(.6,0,.2,1) forwards}
.hero-emblem .vv{stroke-dasharray:64; stroke-dashoffset:64; animation:draw 1.1s .55s ease forwards}
.hero-emblem .nd{opacity:0; transform-box:fill-box; transform-origin:center; animation:pop .5s ease forwards}
.hero-emblem .nd.a{animation-delay:1.15s}
.hero-emblem .nd.b{animation-delay:1.3s}
.hero-emblem .nd.c{animation-delay:1.45s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0; transform:scale(0)}70%{transform:scale(1.28)}100%{opacity:1; transform:scale(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hl-names{display:flex; flex-direction:column; align-items:center; gap:5px; line-height:1}
.hl-ar{font-family:'Cairo','Segoe UI',Tahoma,sans-serif; font-weight:700; font-size:clamp(2rem,5.4vw,3rem); letter-spacing:.01em;
  background:linear-gradient(120deg,var(--gold),var(--azure)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hl-en{font-family:'Sora','IBM Plex Sans',sans-serif; font-weight:700; font-size:clamp(.78rem,1.7vw,1rem); letter-spacing:.5em; padding-inline-start:.5em; color:var(--muted)}
.hl-en b{color:var(--gold); font-weight:700}
.hl-domain{font-family:'Sora','IBM Plex Sans',sans-serif; font-size:.7rem; letter-spacing:.26em; color:var(--muted); opacity:.7; text-transform:uppercase}

/* trust chips */
.hero-trust{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:30px; animation:rise .9s .6s both}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px; border:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--panel) 42%, transparent); font-size:.83rem; color:var(--muted); font-weight:500; backdrop-filter:blur(6px)}
.chip svg{width:15px; height:15px; stroke:var(--gold); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:40px; animation:rise .9s .5s both}
.btn{display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 30px; border-radius:14px;
  font-family:var(--font-body); font-weight:600; font-size:1rem; cursor:pointer; border:1px solid transparent; transition:.28s}
.btn-primary{background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:#14100A;
  box-shadow:0 14px 40px -12px var(--glow-gold)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 52px -12px var(--glow-gold)}
html[dir="rtl"] .btn-primary svg{transform:scaleX(-1)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--gold); transform:translateY(-2px)}
.btn svg{width:19px; height:19px}
.scroll-cue{margin-top:60px; color:var(--muted); font-size:.78rem; letter-spacing:.3em; display:flex; flex-direction:column; align-items:center; gap:10px; animation:rise .9s .7s both}
.scroll-cue .mouse{width:24px; height:38px; border:1.5px solid var(--line); border-radius:14px; position:relative}
.scroll-cue .mouse::before{content:""; position:absolute; top:7px; inset-inline-start:50%; transform:translateX(-50%); width:4px; height:8px; border-radius:2px; background:var(--gold); animation:wheel 1.7s infinite}
@keyframes wheel{0%{opacity:0; transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0; transform:translate(-50%,10px)}}
@keyframes rise{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:translateY(0)}}

/* ============ TICKER ============ */
.ticker{border-block:1px solid var(--line-soft); background:color-mix(in srgb,var(--panel) 40%, transparent); overflow:hidden; padding:16px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:flex; gap:0; width:max-content; animation:scroll-x 34s linear infinite}
html[dir="rtl"] .ticker .track{animation-direction:reverse}
.ticker .track:hover{animation-play-state:paused}
.ticker span{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--muted); padding:0 30px; display:inline-flex; align-items:center; gap:30px; white-space:nowrap}
.ticker span::after{content:"✦"; color:var(--gold); font-size:.7rem}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
section.blk{padding:110px 0}
.kicker{display:inline-flex; align-items:center; gap:9px; font-size:.8rem; font-weight:700; letter-spacing:.28em; color:var(--gold); text-transform:uppercase; margin-bottom:18px}
.kicker::before{content:""; width:26px; height:1.5px; background:var(--gold)}
h2.title{font-size:clamp(1.9rem,4vw,3rem); font-weight:700; letter-spacing:-.4px}
.section-lead{color:var(--muted); font-size:clamp(1rem,1.8vw,1.18rem); max-width:640px; margin-top:20px}

/* positioning */
.positioning .inner{max-width:900px; margin:0 auto; text-align:center}
.positioning .big{font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,3.2vw,2.3rem); line-height:1.5; letter-spacing:-.3px}
.positioning .big b{color:var(--gold); font-weight:700}
.positioning .big .az{color:var(--azure)}

/* features */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px}
.card{position:relative; padding:34px 30px; border-radius:20px; border:1px solid var(--line-soft);
  background:linear-gradient(160deg, color-mix(in srgb,var(--panel) 92%, transparent), color-mix(in srgb,var(--panel-2) 60%, transparent));
  overflow:hidden; transition:.35s; backdrop-filter:blur(6px)}
.card::before{content:""; position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(160deg,var(--line),transparent 55%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.35s; pointer-events:none}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.card:hover::before{opacity:1}
.card .ic{width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin-bottom:22px;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--gold) 22%, transparent), color-mix(in srgb,var(--panel-2) 80%, transparent));
  border:1px solid var(--line)}
.card .ic svg{width:28px; height:28px; stroke:var(--gold); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.card.az .ic{background:radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--azure) 22%, transparent), color-mix(in srgb,var(--panel-2) 80%, transparent))}
.card.az .ic svg{stroke:var(--azure)}
.card h3{font-size:1.28rem; font-weight:700; margin-bottom:10px}
.card p{color:var(--muted); font-size:.98rem}
.card .idx{position:absolute; top:26px; inset-inline-end:28px; font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--line); letter-spacing:1px}

/* vision / mission */
.vm{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:56px}
.vm-card{padding:44px 40px; border-radius:24px; border:1px solid var(--line-soft); position:relative; overflow:hidden;
  background:linear-gradient(150deg, color-mix(in srgb,var(--panel) 90%, transparent), color-mix(in srgb,var(--ink-2) 70%, transparent))}
.vm-card .halo{position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(70px); top:-90px; inset-inline-end:-70px; opacity:.5}
.vm-card.vision .halo{background:radial-gradient(circle,var(--glow-gold),transparent 70%)}
.vm-card.mission .halo{background:radial-gradient(circle,var(--glow-azure),transparent 70%)}
.vm-card .tag{font-family:var(--font-display); font-weight:700; letter-spacing:.2em; font-size:.82rem; text-transform:uppercase; color:var(--gold)}
.vm-card.mission .tag{color:var(--azure)}
.vm-card h3{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:700; margin:16px 0 16px}
.vm-card p{color:var(--muted); font-size:1.05rem; position:relative}

/* countdown / follow */
.launch{text-align:center}
.launch .panel{max-width:860px; margin:0 auto; padding:64px 40px; border-radius:28px; position:relative; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(160deg, color-mix(in srgb,var(--panel) 94%, transparent), color-mix(in srgb,var(--ink-2) 80%, transparent)); box-shadow:var(--shadow)}
.launch .panel .halo{position:absolute; inset:0; background:
  radial-gradient(500px 240px at 20% 0%, var(--glow-gold), transparent 60%),
  radial-gradient(500px 240px at 80% 100%, var(--glow-azure), transparent 60%); opacity:.4; pointer-events:none}
.countdown{display:flex; justify-content:center; gap:14px; margin:40px 0 8px; flex-wrap:wrap}
.cd{min-width:96px; padding:20px 10px; border-radius:16px; border:1px solid var(--line-soft); background:color-mix(in srgb,var(--ink) 55%, transparent)}
.cd .num{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5vw,2.9rem); color:var(--text); font-variant-numeric:tabular-nums; line-height:1}
.cd .lbl{font-size:.78rem; letter-spacing:.15em; color:var(--muted); margin-top:8px; text-transform:uppercase}
.follow-cta{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:38px}
.follow-label{font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600}
.social.lg{display:flex; gap:14px}
.social.lg a{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:var(--muted);
  border:1px solid var(--line); background:color-mix(in srgb,var(--ink) 55%, transparent); transition:.28s}
.social.lg a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-3px); box-shadow:0 14px 32px -12px var(--glow-gold)}
.social.lg svg{width:24px; height:24px; fill:currentColor}

/* footer */
footer{border-top:1px solid var(--line-soft); padding:48px 0 40px; margin-top:20px}
footer .row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
footer .social{display:flex; gap:10px}
footer .social a{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line-soft); transition:.25s; color:var(--muted)}
footer .social a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}
footer .social svg{width:19px; height:19px; fill:currentColor}
footer .copy{color:var(--muted); font-size:.86rem}
footer .dom{font-family:var(--font-display); font-weight:700; letter-spacing:.1em; color:var(--text)}
footer .dom b{color:var(--gold)}

/* reveal */
.reveal{opacity:0; transform:translateY(34px); transition:.85s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1; transform:none}

@media (max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .vm{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  section.blk{padding:80px 0}
  .brand .name{font-size:1.1rem}
  .launch .panel{padding:44px 22px}
  .vm-card{padding:34px 26px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  #net{display:none}
}