/* FooF layer over the engine's web/assets/site.css (loaded right after it).
   Colours, type, radii and shadows come from the design's tokens (docs/design/TOKENS-FOOF.md,
   docs/design/foof/source/Temeller.dc.html, light theme): ground #F6F6F9, surface #FFF,
   hairline #E6E6EE, ink #14151F, secondary #5E6275, one indigo accent #4F46E5 (light fill
   #EAE9FC = accent mixed 88 % into white), online green #16A34A, flat / floating / hero
   shadows, radii 14 · 22 · 24 · 32 · pill. The logo is the delivery's neon wordmark on its
   dark ground (brands/foof/tools/foof_mark.py); the app icon is not approved yet, so the
   site uses the wordmark only. Motion: transform/opacity only, the design's curves.
   No inline styles: style-src 'self'. */

@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-500.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-700.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-800.ttf) format("truetype");font-weight:800;font-display:swap}

:root{
  color-scheme:light;
  --bg-deep:#F6F6F9;--bg:#F6F6F9;--surface:#FFFFFF;--surface-2:#F1F1F6;--surface-3:#EAE9FC;--aura:#ECECF2;
  --primary:#4F46E5;--primary-soft:#4338CA;--mint:#15803D;--gold:#B45309;--danger:#B91C1C;--info:#1D4ED8;--lavender:#4F46E5;--pink:#FF4D7A;
  --online:#16A34A;
  --ink:#FFFFFF;
  --text:#14151F;--text-2:rgba(20,21,31,.84);--text-3:#5E6275;--text-4:#5E6275;
  --hairline:#E6E6EE;--glass:rgba(20,21,31,.05);
  --shadow-k:0 1px 3px rgba(20,21,31,.10);
  --shadow:0 8px 20px rgba(20,21,31,.14);
  --shadow-hero:0 18px 40px rgba(20,21,31,.18);
  --logo-ground:#0F202C;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.42,.5,1);
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;--body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
}

body{font-size:16px}
h1,h2,h3{letter-spacing:-.02em}
.section h2,.doc-hero h1,.lost h1{font-weight:800}
.section h2 em{color:var(--primary)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* ---------- header, footer and the wordmark ---------- */
.site-head.scrolled{background:rgba(246,246,249,.96);box-shadow:0 1px 0 var(--hairline)}
.logo{padding:4px 0;border-radius:14px}
.logo .wm-tile,.wm-tile{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:14px;
  background:radial-gradient(70% 90% at 50% 50%,rgba(79,70,229,.38),rgba(79,70,229,0) 75%),linear-gradient(180deg,#0F202C,#07101A);box-shadow:var(--shadow-k)}
.wm{display:block;width:auto;height:21px;aspect-ratio:276/100}
.site-foot .wm-tile{height:44px}
.site-foot .wm{height:23px}
.legal-line{box-shadow:0 -1px 0 var(--hairline)}
.site-foot{background:var(--bg)}
.foot-grid li a:hover,.aside-links a:hover{color:var(--primary)}

/* ---------- buttons and shared cards ---------- */
.btn{min-height:52px;font-weight:700}
.btn-small{min-height:44px}
.btn-primary{color:#fff;box-shadow:0 14px 30px -10px rgba(79,70,229,.55)}
.btn-primary:hover{box-shadow:0 18px 38px -10px rgba(79,70,229,.65)}
.btn-ghost{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-k)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--danger);color:#fff}
.step,.safe,.faq details,.aside-card,.form,.state{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-k)}
.step,.safe{border-radius:24px}
.faq details,.aside-card{border-radius:22px}
.ficon,.badge18{background:var(--surface-3);color:var(--primary);border-radius:14px}
.badge18{font-weight:800}
.glowcard::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(79,70,229,.08),rgba(79,70,229,0) 70%)}
.cursor-glow{display:none}
.safety{background:linear-gradient(180deg,var(--bg-deep),var(--surface-2) 40%,var(--bg-deep))}
.safety .lead a{color:var(--primary);font-weight:700}
.step .num{color:var(--primary);font-weight:800}
.step h3{font-weight:800}

/* ---------- landing: hero ---------- */
.f-hero{position:relative;padding:132px 0 72px;overflow:hidden;
  background:radial-gradient(55% 60% at 78% 40%,rgba(234,233,252,.95),rgba(234,233,252,0) 70%),linear-gradient(180deg,var(--aura) 0%,var(--bg-deep) 80%)}
.f-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.f-hero h1{font-size:clamp(36px,5.4vw,62px);line-height:1.05;font-weight:800;letter-spacing:-.03em;max-width:640px}
.f-hero h1 em{font-style:normal;color:var(--primary)}
.f-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-k);font-size:14px;font-weight:700;color:var(--text-2)}
.f-tag b{display:inline-grid;place-items:center;min-width:34px;height:28px;padding:0 8px;border-radius:14px;background:var(--surface-3);color:var(--primary-soft);font-size:12px;font-weight:800}
.f-art{position:relative;display:grid;place-items:center;min-height:420px}
.f-stage{position:relative;display:grid;place-items:center;width:340px;height:230px;border-radius:32px;overflow:hidden;
  background:linear-gradient(180deg,#0F202C,#07101A);box-shadow:var(--shadow-hero)}
.f-glow{position:absolute;inset:-20%;background:radial-gradient(45% 45% at 50% 50%,rgba(79,70,229,.55),rgba(79,70,229,0) 70%);opacity:.7;animation:fGlow 3.6s ease-in-out infinite}
.f-wordmark{position:relative;width:250px;height:auto;aspect-ratio:276/100}
.f-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow);font-size:14px;font-weight:700;color:var(--text);animation:fFloat 6s ease-in-out infinite}
.f-chip svg{width:18px;height:18px;flex:none;color:var(--primary)}
.f-dot{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.f-c1{top:6%;left:2%}
.f-c2{top:30%;right:-2%;animation-delay:-2s}
.f-c3{bottom:26%;left:-2%;animation-delay:-4s}
/* the app's floating menu bar, drawn as a quiet signature (Sentez glass bar) */
.f-bar{position:absolute;bottom:2%;left:50%;display:flex;align-items:center;gap:8px;transform:translateX(-50%)}
.f-pill,.f-bubble{background:rgba(255,255,255,.88);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 0 0 1px var(--hairline),var(--shadow)}
.f-pill{display:flex;gap:2px;padding:4px;border-radius:31px}
.f-tab{display:grid;place-items:center;align-content:center;gap:3px;width:64px;height:54px;border-radius:27px;color:var(--text-2)}
.f-tab.on{background:var(--surface-3);color:var(--primary)}
.f-bar svg{width:22px;height:22px}
.f-tab small{font-size:11px;font-weight:800;line-height:1}
.f-bubble{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;color:var(--primary)}
@keyframes fFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fGlow{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- landing: sections ---------- */
.f-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:56px 0 0;padding:0;list-style:none}
.f-card{padding:26px;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-k)}
.f-card .ficon{margin-bottom:18px}
.f-card h3{font-size:20px;font-weight:800}
.f-card p{margin:8px 0 0;font-size:15px;font-weight:500;line-height:1.55;color:var(--text-3)}
.f-card-dark{background:var(--text);box-shadow:var(--shadow)}
.f-card-dark h3{color:#fff}
.f-card-dark p{color:rgba(255,255,255,.78)}
.f-card-dark .ficon{background:rgba(255,255,255,.12);color:#fff}
.f-how{padding-top:0}

.f-cta{padding:0 0 clamp(80px,12vw,120px)}
.f-cta .box{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:clamp(24px,4vw,44px);border-radius:32px;color:#fff;
  background:radial-gradient(60% 120% at 12% 50%,rgba(79,70,229,.45),rgba(79,70,229,0) 70%),linear-gradient(180deg,#0F202C,#07101A);box-shadow:var(--shadow-hero)}
.f-cta-mark .f-wordmark{width:150px}
.f-cta h2{font-size:clamp(24px,3.2vw,36px);font-weight:800}
.f-cta p{margin:8px 0 0;color:rgba(255,255,255,.78);font-weight:600}
.f-cta .btn-primary{box-shadow:none}

/* ---------- document pages (the app's legal layout, F01–F04) ---------- */
.doc-hero{background:radial-gradient(50% 80% at 82% 0%,rgba(234,233,252,.9),rgba(234,233,252,0) 70%),linear-gradient(180deg,var(--aura),var(--bg-deep))}
.doc-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 0 18px;border-radius:18px;background:var(--surface-3);color:var(--primary)}
.doc-icon svg{width:30px;height:30px}
.doc-hero .lead a,.meta-line a{color:var(--primary);font-weight:700}
.langs button{background:var(--surface)}
.langs button[aria-pressed=true]{color:#fff}
.prose{font-size:16px;line-height:1.65}
.prose a{color:var(--primary)}
.prose li::marker{color:var(--primary)}
.toc,.part{margin:0 0 16px;padding:24px;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-k)}
.prose .toc-title{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--text-3);letter-spacing:0}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.toc li{margin:0}
.toc a{display:flex;align-items:center;gap:14px;min-height:44px;color:var(--text);font-weight:700;text-decoration:none}
.toc a:hover{color:var(--primary)}
.toc .n{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--surface-2);color:var(--text-3);font-size:13px;font-weight:800}
.part{scroll-margin-top:96px}
.prose .part h2{margin:0;font-size:22px;font-weight:800}
.part h2 .n{color:var(--primary)}
.prose .part .sub{margin:4px 0 16px;font-size:15px;font-weight:600;color:var(--text-3)}
.prose .part > :last-child{margin-bottom:0}
.part-en{margin-top:32px}
.prose .todo{padding:14px 16px;border-radius:14px;background:var(--surface-2);border:1.5px dashed #C9CBD8;color:var(--text-3);font-weight:600}
.callout{background:rgba(79,70,229,.07);box-shadow:inset 0 0 0 1px rgba(79,70,229,.25);border-radius:22px}
.f-steps{margin:0 0 14px;padding:0;list-style:none;counter-reset:fs;display:grid;gap:10px}
.prose .f-steps li{position:relative;margin:0;padding:10px 14px 10px 54px;min-height:44px;border-radius:14px;background:var(--surface-2);counter-increment:fs}
.f-steps li::before{content:counter(fs);position:absolute;left:12px;top:50%;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--primary);color:#fff;font-size:14px;font-weight:800}
.skeleton i{background-image:linear-gradient(90deg,var(--surface-2) 0%,#E2E3EA 50%,var(--surface-2) 100%)}
.form input[type=tel],.form input[type=email],.form input[type=password]{background:var(--bg)}
.form .seg span{background:var(--surface)}

/* 404 */
.f-stage-sm{width:220px;height:150px;margin:0 auto 28px;border-radius:24px}
.f-stage-sm .f-wordmark{width:160px}

/* ---------- small screens ---------- */
@media (max-width:980px){
  .f-hero{padding-top:104px}
  .f-hero .wrap{grid-template-columns:1fr;gap:16px}
  .f-art{min-height:360px;margin-top:12px}
  .f-stage{width:280px;height:190px}
  .f-wordmark{width:200px}
  .f-tabs{grid-template-columns:repeat(2,1fr)}
  .f-cta .box{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:640px){
  .f-tabs{grid-template-columns:1fr}
  .toc,.part{padding:20px}
}
@media (max-width:420px){
  .f-art{min-height:330px}
  .f-stage{width:240px;height:166px;border-radius:26px}
  .f-wordmark{width:172px}
  .f-chip{font-size:13px;min-height:36px;padding:0 12px}
  .f-c2{right:0}
  .f-c3{left:0}
  .f-bar{gap:6px}
  .f-tab{width:52px;height:50px}
  .f-bubble{width:56px;height:56px}
  .f-tab small{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .f-chip,.f-glow{animation:none}
}