/* ============ FROTON — shared styles ============ */
:root{
  --bg:#fcfcfa; --bg-2:#f4f5f3;
  --ink:#0a0c0f; --ink-2:#3a4048; --muted:#7c828c;
  --blue:#5b9dff; --blue-soft:#dbe9ff; --blue-deep:#2d6fe0;
  --line:rgba(10,12,15,.1); --line-2:rgba(10,12,15,.06);
  --card:#fff; --nav-bg:rgba(252,252,250,.72);
  --ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"]{
  --bg:#080a0f; --bg-2:#0e1118;
  --ink:#f3f5f9; --ink-2:#aeb4c2; --muted:#727a8a;
  --blue:#5b9dff; --blue-soft:#16233f; --blue-deep:#7fb3ff;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.06);
  --card:#0e1118; --nav-bg:rgba(8,10,15,.72);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter Tight',sans-serif;font-weight:400;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease),color .5s var(--ease);
}
::selection{background:var(--blue);color:#fff}
a{color:inherit}

/* RTL */
html[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','Inter Tight',sans-serif}
html[dir="rtl"] .logo,html[dir="rtl"] .num,html[dir="rtl"] .sec-tag{font-family:'Space Mono',monospace}
html[dir="rtl"] .lang-toggle .lang-label{font-family:'IBM Plex Sans Arabic',sans-serif}
html[dir="rtl"] .nav-links a::after{left:auto;right:0}
html[dir="rtl"] .tick,html[dir="rtl"] .plan li,html[dir="rtl"] .step{direction:rtl}

/* ---------- Background atmosphere ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(48rem 36rem at 82% -8%,rgba(91,157,255,.16),transparent 62%),radial-gradient(40rem 32rem at 0% 28%,rgba(91,157,255,.08),transparent 60%);
  animation:drift 24s var(--ease) infinite alternate;will-change:transform}
@keyframes drift{to{transform:translate3d(0,-2.5%,0) scale(1.06)}}
.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(circle at 50% 24%,#000 0%,transparent 72%);mask-image:radial-gradient(circle at 50% 24%,#000 0%,transparent 72%)}

.wrap{max-width:1240px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
section{position:relative;z-index:2}

/* ---------- Nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:22px 34px;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease)}
nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);padding:14px 34px}
.logo{font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;letter-spacing:-.01em;display:flex;align-items:center;gap:11px;cursor:pointer;text-decoration:none}
.logo .mark{width:26px;height:26px;border-radius:8px;background:conic-gradient(from 200deg,var(--blue),var(--blue-deep),#9cc2ff,var(--blue));box-shadow:0 4px 14px rgba(91,157,255,.4);animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a.navlink{color:var(--ink-2);text-decoration:none;font-size:.94rem;font-weight:500;position:relative;transition:color .3s var(--ease)}
.nav-links a.navlink::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--blue);transition:width .35s var(--ease)}
.nav-links a.navlink:hover,.nav-links a.navlink.active{color:var(--ink)}
.nav-links a.navlink:hover::after,.nav-links a.navlink.active::after{width:100%}

.btn{font-family:'Inter Tight',sans-serif;font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:none;
  padding:11px 22px;border-radius:11px;border:1px solid var(--ink);color:var(--bg);background:var(--ink);display:inline-block;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(10,12,15,.16)}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.blue:hover{box-shadow:0 10px 28px rgba(91,157,255,.45)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:none;transform:translateY(-2px)}

/* icon controls (theme + lang) */
.ctrl{background:transparent;border:1px solid var(--line);border-radius:10px;height:40px;cursor:pointer;color:var(--ink);
  display:grid;place-items:center;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.ctrl:hover{border-color:var(--blue);transform:translateY(-2px)}
.theme-toggle{width:40px;position:relative;overflow:hidden}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;position:absolute;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.theme-toggle .moon{opacity:0;transform:rotate(-40deg) scale(.6)}
.theme-toggle .sun{opacity:1}
html[data-theme="dark"] .theme-toggle .sun{opacity:0;transform:rotate(40deg) scale(.6)}
html[data-theme="dark"] .theme-toggle .moon{opacity:1;transform:rotate(0) scale(1)}
.lang-toggle{padding:0 14px;font-family:'Space Mono',monospace;font-size:.8rem;font-weight:700;letter-spacing:.04em;gap:6px;min-width:54px}

.nav-controls{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;font-size:1.7rem;line-height:1}

/* ---------- Page hero ---------- */
.phero{padding:170px 0 70px;position:relative}
.phero .eyebrow{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);
  background:var(--blue-soft);padding:7px 15px;border-radius:999px;width:fit-content;display:inline-flex;align-items:center;gap:10px;margin-bottom:26px}
.phero .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(91,157,255,.25);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.phero h1{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.03em;line-height:1;font-size:clamp(2.6rem,7vw,5.4rem)}
.phero h1 em{font-style:italic;color:var(--blue-deep)}
.phero p.lead{max-width:600px;color:var(--ink-2);font-size:1.2rem;margin:26px 0 0}

/* home hero with atom */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:60px;position:relative;overflow:hidden}
.hero-inner{position:relative;z-index:3}
.atom-canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(900px,95%);height:min(900px,95%);max-height:100%;
  z-index:0;pointer-events:none;opacity:.5;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 36%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 36%,transparent 70%)}
.hero .eyebrow,.hero h1,.hero p.lead,.hero-cta,.hero-stats{position:relative;z-index:3}
.hero .eyebrow{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);
  background:var(--blue-soft);padding:7px 15px;border-radius:999px;width:fit-content;display:inline-flex;align-items:center;gap:10px;margin-bottom:30px}
.hero .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(91,157,255,.25);animation:pulse 2s infinite}
.hero h1{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.03em;line-height:.96;font-size:clamp(3rem,8.5vw,7rem)}
.hero h1 em{font-style:italic;color:var(--blue-deep)}
.hero p.lead{max-width:600px;color:var(--ink-2);font-size:1.22rem;margin:34px 0 40px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-stats{display:flex;gap:48px;margin-top:64px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:34px}
.stat .num{font-family:'Fraunces',serif;font-weight:600;font-size:2.4rem;letter-spacing:-.02em}
.stat .lbl{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translate3d(0,38px,0);transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:transform,opacity}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* ---------- Section headers ---------- */
.sec-head{margin-bottom:56px;max-width:680px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-tag{font-family:'Space Mono',monospace;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:18px;display:block}
.sec-head h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2rem,5vw,3.3rem);letter-spacing:-.02em;line-height:1.04}
.sec-head h2 em{font-style:italic;color:var(--blue-deep)}
.sec-head p{color:var(--ink-2);margin-top:18px;font-size:1.06rem}
.pad{padding:120px 0}
.pad-sm{padding:80px 0}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--line);border-radius:20px;padding:32px;background:var(--card);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(10,12,15,.08);border-color:rgba(91,157,255,.5)}
.card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;background:var(--blue-soft)}
.card .ic svg{width:25px;height:25px;stroke:var(--blue-deep);fill:none;stroke-width:1.6}
.card h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;margin-bottom:10px;letter-spacing:-.01em}
.card p{color:var(--ink-2);font-size:.97rem}
.card .big{grid-column:span 2}
.card.big{grid-column:span 2}
.card ul{list-style:none;margin-top:16px}
.card ul li{color:var(--ink-2);font-size:.95rem;padding:7px 0;display:flex;gap:10px;border-bottom:1px solid var(--line-2)}
.card ul li::before{content:'→';color:var(--blue-deep);flex:0 0 auto}
.tag-pop{position:absolute;top:18px;right:18px;font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--blue);color:#fff;padding:5px 11px;border-radius:999px}
html[dir="rtl"] .tag-pop{right:auto;left:18px}

/* ---------- Steps ---------- */
.steps{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
.step{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--card);display:flex;gap:20px;align-items:flex-start;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.step:hover{transform:translateY(-4px);border-color:rgba(91,157,255,.5)}
.step .n{flex:0 0 auto;font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;width:48px;height:48px;border-radius:12px;
  background:var(--blue-soft);color:var(--blue-deep);display:grid;place-items:center}
.step h4{font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;margin-bottom:6px}
.step p{color:var(--ink-2);font-size:.95rem}

/* ---------- Pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;white-space:nowrap;background:var(--bg-2);position:relative;z-index:2;margin-top:20px}
.marquee-track{display:inline-flex;gap:56px;animation:scroll 30s linear infinite;will-change:transform}
.marquee-track span{font-family:'Fraunces',serif;font-weight:500;font-style:italic;font-size:1.5rem;color:var(--muted);display:inline-flex;align-items:center;gap:56px}
.marquee-track span::after{content:'✦';color:var(--blue);font-size:.82rem;font-style:normal}
@keyframes scroll{to{transform:translate3d(-50%,0,0)}}

/* ---------- CTA ---------- */
.cta-box{border:1px solid var(--line);border-radius:30px;padding:80px 40px;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(46rem 26rem at 50% 0%,var(--blue-soft),var(--card) 72%)}
.cta-box h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.2rem,5.5vw,4rem);letter-spacing:-.03em;line-height:1.02}
.cta-box h2 em{font-style:italic;color:var(--blue-deep)}
.cta-box p{color:var(--ink-2);max-width:480px;margin:22px auto 34px;font-size:1.1rem}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.member{border:1px solid var(--line);border-radius:20px;padding:30px;background:var(--card);text-align:center;transition:transform .5s var(--ease),border-color .5s var(--ease)}
.member:hover{transform:translateY(-6px);border-color:rgba(91,157,255,.5)}
.member .av{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  font-family:'Fraunces',serif;font-weight:600;font-size:1.8rem;color:#fff;
  background:conic-gradient(from 200deg,var(--blue),var(--blue-deep),#9cc2ff,var(--blue))}
.member h4{font-family:'Fraunces',serif;font-weight:600;font-size:1.18rem}
.member .role{color:var(--blue-deep);font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}

/* ---------- Values ---------- */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.cinfo a{display:flex;gap:14px;align-items:center;text-decoration:none;padding:18px 0;border-bottom:1px solid var(--line-2);transition:transform .3s var(--ease)}
.cinfo a:hover{transform:translateX(4px)}
html[dir="rtl"] .cinfo a:hover{transform:translateX(-4px)}
.cinfo .ci{width:44px;height:44px;border-radius:12px;background:var(--blue-soft);display:grid;place-items:center;flex:0 0 auto}
.cinfo .ci svg{width:20px;height:20px;stroke:var(--blue-deep);fill:none;stroke-width:1.7}
.cinfo .lbl{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cinfo .val{font-size:1.02rem;color:var(--ink);font-weight:500}
form{border:1px solid var(--line);border-radius:22px;padding:34px;background:var(--card)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:500;margin-bottom:8px;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font-family:inherit;font-size:.96rem;transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(91,157,255,.18)}
.field textarea{resize:vertical;min-height:120px}
.field .err{color:#e2476a;font-size:.8rem;margin-top:6px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e2476a}
.field.invalid .err{display:block}
.form-note{margin-top:14px;font-size:.92rem;color:var(--blue-deep);display:none}
.form-note.show{display:block}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:60px 0 40px;margin-top:60px}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-bottom:48px}
.foot-col h4{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.foot-col a{display:block;color:var(--ink);text-decoration:none;opacity:.72;font-size:.94rem;margin-bottom:12px;transition:opacity .3s,transform .3s var(--ease),color .3s}
.foot-col a:hover{opacity:1;transform:translateX(4px);color:var(--blue-deep)}
html[dir="rtl"] .foot-col a:hover{transform:translateX(-4px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:30px;border-top:1px solid var(--line);color:var(--muted);font-family:'Space Mono',monospace;font-size:.8rem}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .g4,.team{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  nav{padding:16px 20px}
  nav.scrolled{padding:12px 20px}
  .nav-links{position:fixed;inset:0 0 auto;top:0;flex-direction:column;align-items:flex-start;
    background:var(--nav-bg);backdrop-filter:blur(22px) saturate(1.4);
    padding:96px 28px 36px;gap:8px;border-bottom:1px solid var(--line);
    transform:translateY(-110%);transition:transform .5s var(--ease)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a.navlink{font-size:1.15rem;padding:10px 0;width:100%}
  .nav-links .btn{width:100%;text-align:center;margin-top:10px}
  .nav-links .nav-controls{display:none} /* controls live in the bar on mobile */
  .nav-toggle{display:block;z-index:60;order:3}
  /* keep language + theme visible in the bar on mobile */
  .bar-controls{display:flex !important}
  .g3,.g2,.pillars,.steps,.values,.contact-grid{grid-template-columns:1fr}
  .card.big,.card .big{grid-column:span 1}
  .hero-stats{gap:30px}
  .pad{padding:80px 0}
  .phero{padding:140px 0 50px}
}
@media(min-width:881px){
  .bar-controls{display:none} /* on desktop, controls live inside nav-links */
}
@media(max-width:520px){
  .team{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}