/* ECHO — shared site styles. Brand: Deep Signal Purple #440A67, Resonant Purple #93329E,
   Warm Frequency Yellow #FFDB8F, Soft Noise White #FBF2FB. Font: Readex Pro (web stand-in for Stem). */
:root {
  --deep:#440A67; --purple:#93329E; --yellow:#FFDB8F; --white:#FBF2FB;
  --night:#120718; --ink:#2a0d3d; --muted:#7a6585; --line:#eadcef;
  --radius:20px; --max:1120px;
}
* { box-sizing:border-box; }
html, body { margin:0; overflow-x:hidden; }
body { background:var(--white); color:var(--ink); font-family:"Readex Pro", "Segoe UI", Tahoma, sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:var(--max); margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-9999px; top:0; background:var(--yellow); color:var(--deep); padding:8px 14px; z-index:100; }
.skip:focus { left:16px; top:12px; }

/* ---------- Header / nav ---------- */
.site-header { position:absolute; inset:0 0 auto 0; z-index:20; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; }
.brand img { height:40px; width:auto; }
.menu { display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.menu a { color:rgba(255,255,255,.82); text-decoration:none; font-size:15px; font-weight:400; transition:color .15s; }
.menu a:hover, .menu a[aria-current="page"] { color:#fff; }
.menu a[aria-current="page"] { box-shadow:inset 0 -2px 0 var(--yellow); }
.lang { color:var(--yellow) !important; border:1px solid rgba(255,219,143,.45); padding:5px 12px; border-radius:999px; font-size:14px !important; }
.lang:hover { background:rgba(255,219,143,.12); }
.burger { display:none; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:10px; width:42px; height:40px; cursor:pointer; font-size:20px; line-height:1; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; color:#fff; background:var(--night); isolation:isolate; padding:150px 0 110px; }
.hero.small { padding:140px 0 70px; }
.hero::before { content:""; position:absolute; inset:-20%; z-index:-2;
  background:
    radial-gradient(42% 55% at 18% 30%, rgba(147,50,158,.95), transparent 70%),
    radial-gradient(38% 45% at 8% 95%, rgba(255,170,110,.85), transparent 70%),
    radial-gradient(30% 35% at 30% 75%, rgba(255,219,143,.55), transparent 70%),
    radial-gradient(55% 60% at 85% 10%, rgba(68,10,103,.9), transparent 70%),
    var(--night);
  filter:blur(10px); }
[dir="rtl"] .hero::before { transform:scaleX(-1); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hero .mark { position:absolute; right:-70px; bottom:30px; width:420px; opacity:.08; z-index:-1; transform:rotate(-4deg); }
[dir="rtl"] .hero .mark { right:auto; left:-70px; }
.eyebrow { font-weight:300; font-size:15px; letter-spacing:.5px; color:var(--yellow); margin:0 0 16px; text-transform:uppercase; }
.hero h1 { font-size:clamp(34px, 6vw, 64px); line-height:1.12; font-weight:600; margin:0 0 20px; max-width:820px; letter-spacing:-.5px; }
.hero h1 span { color:var(--yellow); }
.hero .lead { color:rgba(255,255,255,.82); font-weight:300; font-size:18px; max-width:620px; margin:0; }
.cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:14px; font:inherit; font-weight:600; font-size:15.5px; text-decoration:none; border:0; cursor:pointer; transition:transform .1s, box-shadow .2s, background .2s; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--yellow); color:var(--deep); }
.btn-primary:hover { box-shadow:0 12px 28px -12px rgba(255,219,143,.9); }
.btn-ghost { color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); }
.btn-ghost:hover { background:rgba(255,255,255,.16); }

/* ---------- Sections ---------- */
section.block { padding:80px 0; }
.section-head { max-width:640px; margin:0 0 36px; }
.section-head h2 { font-size:clamp(26px, 4vw, 38px); line-height:1.2; margin:0 0 10px; color:var(--deep); font-weight:600; }
.section-head p { margin:0; color:var(--muted); font-weight:300; font-size:17px; }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.card { background:#fff; border-radius:var(--radius); padding:28px; box-shadow:0 18px 50px -28px rgba(68,10,103,.35), 0 1px 3px rgba(68,10,103,.06); }
.card .k { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--white); color:var(--purple); font-weight:600; font-size:14px; margin-bottom:14px; }
.card h3 { margin:0 0 6px; font-size:19px; color:var(--deep); font-weight:600; }
.card p { margin:0; color:var(--muted); font-weight:300; }

/* Coming soon */
.soon { text-align:center; padding:64px 28px; }
.soon .badge { display:inline-block; background:var(--white); color:var(--purple); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:500; margin-bottom:16px; }
.soon h2 { margin:0 0 10px; font-size:clamp(24px, 4vw, 34px); color:var(--deep); font-weight:600; }
.soon p { margin:0 auto; max-width:520px; color:var(--muted); font-weight:300; font-size:17px; }
.soon .btn { margin-top:24px; background:linear-gradient(135deg, var(--deep), var(--purple)); color:#fff; }
.wave-pattern { height:64px; margin:28px auto 0; max-width:280px; opacity:.9;
  background:repeating-linear-gradient(90deg, transparent 0 8px, rgba(147,50,158,.18) 8px 10px); border-radius:8px; }

/* Band */
.band { background:var(--deep); color:#fff; border-radius:28px; padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
.band::before { content:""; position:absolute; inset:0; background:radial-gradient(50% 120% at 0% 0%, rgba(147,50,158,.9), transparent 70%), radial-gradient(40% 90% at 100% 100%, rgba(255,170,110,.35), transparent 70%); }
.band > * { position:relative; }
.band h2 { margin:0 0 6px; font-size:clamp(22px, 3.4vw, 30px); font-weight:600; }
.band p { margin:0; color:rgba(255,255,255,.8); font-weight:300; }

/* ---------- Footer ---------- */
.site-footer { background:var(--night); color:rgba(255,255,255,.62); padding:56px 0 30px; margin-top:40px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.footer-top img { height:36px; width:auto; margin-bottom:14px; }
.slogan { color:#fff; font-weight:300; font-size:17px; margin:0; direction:ltr; }
.footer-links { display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.footer-links a { color:rgba(255,255,255,.72); text-decoration:none; font-size:15px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:20px; font-size:13.5px; font-weight:300; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width:860px) {
  .cards { grid-template-columns:1fr; }
  .burger { display:block; }
  .menu { display:none; position:absolute; top:76px; inset-inline:16px; flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(18,7,24,.96); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:12px; backdrop-filter:blur(8px); }
  .menu.open { display:flex; }
  .menu a { display:block; padding:12px 14px; border-radius:12px; }
  .menu a[aria-current="page"] { box-shadow:none; background:rgba(255,255,255,.08); }
  .lang { text-align:center; margin-top:6px; }
  .hero { padding:130px 0 80px; }
  .hero .mark { width:260px; bottom:10px; }
  section.block { padding:56px 0; }
  .band { padding:30px; }
}