/* FeraEye — brand site · exact app design system (black #0D0D0D + gold; pitch stays green) */
:root{
  --black:#0D0D0D; --ink:#0A0805;
  --white:#F7F4EC; --muted:#B0A78F; --dim:#8C8268;
  --gold:#FFC531; --gold-soft:#FFD879; --gold-deep:#D4AF37; --bronze:#B08A2E;
  --line:rgba(232,193,90,.14); --line2:rgba(232,193,90,.30);
  --card:rgba(255,255,255,.045); --card2:rgba(255,255,255,.09);
  --green:#22E58A; --green-brt:#8CFFCB; --hr:#FF5E4D;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--black)}
body{
  color:var(--white); min-height:100vh; line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 0%,rgba(212,175,55,.18),rgba(42,32,8,.38) 42%,transparent 72%);
  background-repeat:no-repeat;background-size:130% 640px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.wrap{max-width:980px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* header */
header{padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--white)}
.brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 0 18px rgba(255,255,255,.14)}
.brand b{font-size:20px;font-weight:800;letter-spacing:-.3px}
.langs{display:flex;gap:6px;flex-wrap:wrap}
.langs button,.langs a{background:var(--card);border:1px solid var(--line);color:var(--muted);
  border-radius:9px;padding:6px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.langs button:hover{border-color:var(--line2)}
.langs .on{color:var(--gold);border-color:var(--line2);background:rgba(255,197,49,.06)}

/* hero */
.hero{text-align:center;padding:56px 0 20px}
.hero>img{width:118px;height:118px;border-radius:50%;
  box-shadow:0 0 46px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.06) inset;
  animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(255,255,255,.18)}
  50%{transform:scale(1.035);box-shadow:0 0 56px rgba(255,255,255,.30)}}
h1{font-size:clamp(32px,7vw,56px);font-weight:800;letter-spacing:-1px;line-height:1.12;margin:20px 0 0;text-wrap:balance}
h1 .g{color:var(--gold)}
.sub{color:var(--muted);font-size:clamp(15px,2.6vw,19px);max-width:600px;margin:16px auto 0}
.cta{display:inline-block;margin:30px auto 0;color:var(--ink);font-weight:800;font-size:16px;
  padding:15px 34px;border-radius:16px;text-decoration:none;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep) 55%,var(--bronze));
  box-shadow:0 16px 40px rgba(212,175,55,.28)}
.trust{color:var(--dim);font-size:13px;margin-top:14px}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px auto 0;max-width:600px}
.chip{background:rgba(255,197,49,.07);border:1px solid var(--line2);border-radius:999px;
  padding:10px 18px;font-size:13px;font-weight:700;color:var(--white)}

/* ---- product showcase (device mockups matching the app) ---- */
.showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
  margin:56px 0 8px;align-items:start}
.show-cap{grid-column:1/-1;text-align:center;color:var(--dim);font-size:12px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase;margin-bottom:2px}
.device{direction:rtl;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:24px;padding:22px 20px;box-shadow:0 26px 70px rgba(0,0,0,.5)}
.device .dlabel{text-align:center;color:var(--muted);font-size:12px;font-weight:600;margin-top:14px}
.device .dlabel b{color:var(--gold)}

/* summary: gold ring + metrics */
.cap{text-align:center;font-size:12px;color:var(--dim);font-weight:600}
.cap b{color:var(--gold)}
.ring{position:relative;width:150px;height:150px;margin:12px auto 4px}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .score{font-size:54px;font-weight:800;color:var(--white);line-height:1}
.ring .of{font-size:9px;color:var(--dim);margin-top:3px}
.mgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px}
.m{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 5px;text-align:center}
.m .v{font-size:17px;font-weight:700;color:var(--white)}
.m .v span{font-size:10px;color:var(--muted)}
.m .k{font-size:9px;color:var(--dim);margin-top:2px}

/* watch live */
.watch{max-width:210px;margin:6px auto 0;aspect-ratio:.86;border-radius:38px;
  background:radial-gradient(closest-side at 50% 0,#2A2008,#0D0D0D 96%);
  border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:16px 14px}
.wbadge{font-size:10px;font-weight:700;letter-spacing:1.4px;color:var(--gold)}
.wtime{font-size:38px;font-weight:800;color:var(--white);line-height:1}
.wsub{font-size:9px;color:var(--dim)}
.wrow{display:flex;gap:14px;margin-top:2px}
.wrow div{font-size:12px;color:var(--muted);font-weight:600}
.wrow b{color:var(--white)}
.wrow .hr{color:var(--hr)}
.wbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:8px}
.wbtn{border-radius:14px;padding:11px 4px;text-align:center;font-size:14px;font-weight:800}
.wbtn.win{color:#052015;background:linear-gradient(135deg,var(--green-brt),var(--green))}
.wbtn.loss{color:#fff;background:linear-gradient(135deg,#FF7A72,#E23A33)}

/* minigame heatmap (iPhone) — faithful to the app's MinigameView */
.mghead{display:flex;align-items:baseline;justify-content:space-between}
.mghead .t{font-size:17px;font-weight:800;color:var(--white)}
.mghead .t .s{color:var(--gold)}
.mghead .dir{font-size:10px;font-weight:700;color:var(--gold);font-family:monospace}
.mgnote{font-size:10px;color:var(--dim);font-family:monospace;margin:6px 0}
.gate{font-size:10px;font-weight:700;font-family:monospace;text-align:center;margin:6px 0}
.gate.up{color:var(--gold)} .gate.dn{color:var(--dim)}
.pitch{width:100%;max-width:196px;margin:0 auto;display:block}
.leg{display:flex;align-items:center;gap:8px;justify-content:center;font-size:9px;color:var(--dim);margin-top:10px;font-family:monospace}
.leg .bar{width:112px;height:7px;border-radius:5px;
  background:linear-gradient(to left,#EC1C18,#FF6012,#FFB01A,#FFE956)} /* red=מעט (right) → yellow=הרבה (left), as in-app */
.mgm{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}

/* ---- mini-tutorial: one evening with FeraEye (6-step interactive stepper) ---- */
.tut{margin:64px 0 8px}
.tut h2{text-align:center;font-size:clamp(24px,4.6vw,34px);font-weight:800;letter-spacing:-.5px;text-wrap:balance}
.tut h2 .g{color:var(--gold)}
.tut-sub{text-align:center;color:var(--muted);font-size:15px;margin-top:8px}
.tut-stage{max-width:560px;margin:26px auto 0;min-height:392px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:24px;padding:26px 22px;box-shadow:0 26px 70px rgba(0,0,0,.5)}
.tut-step{display:none}
.tut-step.on{display:flex;flex-direction:column;align-items:center;gap:6px;animation:tfade .35s ease}
@keyframes tfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tut-step h3{color:var(--gold);font-size:18px;font-weight:800;margin-top:16px;text-align:center;text-wrap:balance}
.tut-step p{color:var(--muted);font-size:14px;text-align:center;max-width:380px}

/* tutorial watch frame (compact variant of .watch) */
.twatch{width:184px;aspect-ratio:.86;border-radius:34px;direction:rtl;
  background:radial-gradient(closest-side at 50% 0,#2A2008,#0D0D0D 96%);
  border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:14px 12px}
.twatch .wtime{font-size:32px}
.twatch.small{width:158px;aspect-ratio:auto;gap:9px;border-radius:26px;padding:16px 12px}
.tfmt{font-size:11px;color:var(--muted);font-weight:600}
.tgo{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;color:var(--ink);margin-top:6px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep) 55%,var(--bronze))}
.tq{font-size:15px;font-weight:800;color:var(--white)}
.dimt{color:var(--muted)}
.tback{width:100%;text-align:center;border-radius:14px;padding:10px 4px;font-size:13px;font-weight:800;color:var(--ink);margin-top:4px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep) 55%,var(--bronze))}
.tend{width:100%;text-align:center;border-radius:14px;padding:10px 4px;font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#FF7A72,#E23A33)}

/* transfer step: watch → notification */
.ttransfer{display:flex;flex-direction:column;align-items:center;gap:10px}
.tarrow{color:var(--gold);font-size:20px;line-height:1}
.tnotif{display:flex;gap:10px;align-items:center;direction:rtl;max-width:300px;
  background:var(--card2);border:1px solid var(--line2);border-radius:16px;padding:12px 16px}
.tnotif img{width:34px;height:34px;border-radius:50%}
.tnotif b{display:block;font-size:13px;color:var(--white)}
.tnotif span{font-size:12px;color:var(--muted)}

/* analysis step: compact ring + metrics */
.tsummary{display:flex;flex-direction:column;align-items:center;gap:12px}
.ring.small{width:120px;height:120px;margin:0 auto}
.ring.small .score{font-size:42px}
.tmets{display:grid;grid-template-columns:repeat(3,92px);gap:8px;direction:rtl}

/* stepper nav */
.tut-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.tnav{background:var(--card);border:1px solid var(--line2);color:var(--white);border-radius:12px;
  padding:9px 18px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tnav:hover:not(:disabled){border-color:var(--gold-deep);color:var(--gold)}
.tnav:disabled{opacity:.35;cursor:default}
.tdots{display:flex;gap:8px}
.tdot{width:10px;height:10px;border-radius:50%;border:1px solid var(--line2);background:transparent;cursor:pointer;padding:0}
.tdot.on{background:var(--gold);border-color:var(--gold)}
@media(max-width:600px){.tut-stage{min-height:430px}.tmets{grid-template-columns:repeat(3,minmax(72px,92px))}}
@media (prefers-reduced-motion:reduce){.tut-step.on{animation:none}}

/* accessibility: skip link + visible keyboard focus (IS 5568 / WCAG) */
.skip{position:absolute;top:-80px;inset-inline-start:12px;z-index:9;background:var(--gold);color:var(--ink);
  font-weight:800;padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:8px}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

/* features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:56px 0}
.f{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.f h3{color:var(--gold);font-size:17px;font-weight:800;margin-bottom:6px}
.f p{color:var(--muted);font-size:14px}

/* doc pages (privacy/terms/support/accessibility) */
.doc{max-width:760px;margin:0 auto;padding:20px 0 70px}
.doc h1{font-size:31px;font-weight:800;margin:14px 0 6px;text-wrap:balance}
.doc h2{color:var(--gold);font-size:19px;font-weight:800;margin:28px 0 8px}
.doc p,.doc li{color:var(--muted);font-size:16px;margin:8px 0}
.doc strong{color:var(--white)}
.doc ul{padding-inline-start:22px}
.doc a{color:var(--gold-deep)}
.doc .sep{border:0;border-top:1px solid var(--line);margin:34px 0}
.doc .meta{color:var(--dim);font-size:14px}

/* footer */
footer{border-top:1px solid var(--line);margin-top:44px;padding:26px 0 50px;text-align:center;color:var(--dim);font-size:14px}
footer a{color:var(--muted);text-decoration:none;margin:0 8px}
footer a:hover{color:var(--gold)}

@media(max-width:600px){.hero{padding-top:34px}.hero>img{width:104px;height:104px}}
@media (prefers-reduced-motion:reduce){.hero>img{animation:none}}

/* language select (13 languages) */
.langsel{background:var(--card);border:1px solid var(--line2);color:var(--white);border-radius:10px;
  padding:8px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-width:130px}
.langsel:hover{border-color:var(--gold-deep)}
.langsel option{background:#141414;color:var(--white)}

/* device mockups follow the page direction */
[dir="ltr"] .device,[dir="ltr"] .twatch,[dir="ltr"] .tnotif,[dir="ltr"] .tmets{direction:ltr}

/* ---- accessibility widget (IS 5568 / WCAG 2.1 AA) ---- */
.azbtn{position:fixed;bottom:18px;inset-inline-start:18px;z-index:60;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:#1257D5;color:#fff;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 8px 26px rgba(0,0,0,.55)}
.azbtn:hover{background:#0E47AF}
.azpanel{position:fixed;bottom:80px;inset-inline-start:18px;z-index:60;min-width:230px;
  background:#141414;border:1px solid var(--line2);border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:7px;box-shadow:0 22px 60px rgba(0,0,0,.6)}
.azpanel[hidden]{display:none}
.azhead{font-weight:800;color:var(--gold);font-size:15px;margin-bottom:2px}
.azpanel button{background:var(--card);border:1px solid var(--line);color:var(--white);border-radius:10px;
  padding:9px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:start}
.azpanel button:hover{border-color:var(--gold-deep)}
.azpanel button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(255,197,49,.08)}
.azpanel .azreset{border-color:rgba(255,110,100,.5)}
.azpanel a{color:var(--muted);font-size:13px;text-align:center;margin-top:3px}

/* accessibility modes */
html.az-f1{zoom:1.1}html.az-f2{zoom:1.22}html.az-f3{zoom:1.35}
html.az-hc{--black:#000;--ink:#000;--white:#fff;--muted:#e8e8e8;--dim:#d2d2d2;
  --gold:#FFD60A;--gold-soft:#FFE04D;--gold-deep:#FFC400;--bronze:#E0A800;
  --line:rgba(255,255,255,.5);--line2:rgba(255,255,255,.7);--card:#111;--card2:#1c1c1c}
html.az-hc body::before{display:none}
html.az-hc .cta{color:#000}
html.az-gray body{filter:grayscale(1)}
html.az-links a,html.az-links button{text-decoration:underline !important}
html.az-read body,html.az-read button,html.az-read select{font-family:Arial,Helvetica,sans-serif !important;letter-spacing:.02em}
html.az-anim *{animation:none !important;transition:none !important}