/* Taqwa — système de design « régie/tech » glow-up. Charte conservée, traitement moderne. */
:root{
  --ink:#160a2b; --bg:#200E3A; --bg2:#18132E; --card:#241544; --card2:#2A1750;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
  --purple:#7c6cf0; --purple-d:#705CDA; --blue:#6ea6da; --blue-br:#7db8e8; --cyan:#5ee0ff;
  --text:#fff; --muted:rgba(255,255,255,.56); --faint:rgba(255,255,255,.32);
  --correct:#4ade80; --wrong:#f87171; --amber:#efb045;
  --r-sm:10px; --r:14px; --r-lg:22px;
  --glow:0 0 28px rgba(110,166,218,.40);
  --glow-cyan:0 0 30px rgba(94,224,255,.45);
  --shadow:0 16px 44px rgba(0,0,0,.45);
  --font:'Inter',system-ui,sans-serif;
  --display:'Montserrat',var(--font);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --c0:#7c6cf0; --c1:#6ea6da; --c2:#efb045; --c3:#e0689f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--text); background-color:var(--ink);
  background-image:
    radial-gradient(ellipse 80% 60% at 78% -8%, rgba(124,108,240,.22), transparent 62%),
    radial-gradient(ellipse 72% 55% at 2% 106%, rgba(110,166,218,.16), transparent 60%),
    url('girih.svg');
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
body::after{ /* grain */
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Utilitaires */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.display{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.grad{background:linear-gradient(90deg,var(--purple),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.chip{display:inline-flex;align-items:center;gap:.55em;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:.45em 1em}
.hr-geo{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0}
button,input{font-family:var(--font)}
/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 rgba(94,224,255,0)}50%{box-shadow:var(--glow-cyan)}}
@keyframes drawIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .5s cubic-bezier(.2,.7,.3,1) both}