/* ==========================================================================
   Flo — shared site styles (nav, footer, buttons, palette, responsive)
   ========================================================================== */

/* ---- palette (Discord dark theme greys + blurple accent, gold for Premium only) ---- */
:root{
  --bg-0:#1e1f22;   /* nav, footer, deepest */
  --bg-1:#232428;   /* trust band */
  --bg-2:#2b2d31;   /* hero, body */
  --bg-3:#313338;   /* cards, strip, image slots */
  --bg-4:#383a40;   /* hover surfaces */
  --line:#3f4147;   /* dividers */
  --text:#f2f3f5;
  --muted:#b5bac1;
  --dim:#949ba4;
  --accent:#5865f2;
  --accent-hover:#4752c4;
  --accent-text:#7983f5;
  --gold:#e4ae24;
  --gold-hover:#f0bc33;
  --gold-text:#1f1600;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-2);font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:#949cf7}
img{max-width:100%}
[hidden]{display:none!important}

@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ---- logo (white mark on black square; screen blend drops the black out on dark surfaces) ---- */
.flo-logo{display:block;flex:none;mix-blend-mode:screen;pointer-events:none;user-select:none}

/* ---- official Discord mark inside buttons (images/Discord_idk1kDTKQj_1.png — white on transparent) ---- */
.btn-discord{width:20px;height:auto;flex:none;display:block;pointer-events:none;user-select:none}
.flo-btn-login .btn-discord{width:18px}
.btn-gold .btn-discord,.btn-white .btn-discord,.flo-btn-premium .btn-discord{filter:brightness(0)} /* same file, tinted dark to match gold-button text */

/* ---- buttons: flat, matte, reactive ---- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;border:0;font-family:inherit;transition:background .15s,color .15s,border-color .15s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-gold{background:var(--gold);color:var(--gold-text)}
.btn-gold:hover{background:var(--gold-hover);color:var(--gold-text)}
.btn-white{background:#fff;color:#1e1f22}
.btn-white:hover{background:#f2f3f5;color:#1e1f22}
.btn-lg{padding:17px 26px;font-size:16.5px}
.btn-md{padding:15px 24px;font-size:16px}
.btn-ghost{padding:17px 26px;font-size:16.5px;background:transparent;border:1.5px solid var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--bg-3);border-color:#4e5058;color:#fff}

/* ---- nav ---- */
.flo-nav-link{color:var(--muted);text-decoration:none;transition:color .15s}
.flo-nav-link:hover{color:var(--text)}
.flo-nav-link.is-active{color:var(--text)}
.flo-btn-premium{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;color:var(--gold-text);background:var(--gold);padding:11px 18px;border-radius:8px;white-space:nowrap;text-decoration:none;transition:background .15s,transform .08s}
.flo-btn-premium:hover{background:var(--gold-hover);color:var(--gold-text)}
.flo-btn-premium:active{transform:translateY(1px)}
.flo-btn-login{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;background:var(--accent);color:#fff;padding:11px 18px;border-radius:8px;white-space:nowrap;text-decoration:none;transition:background .15s,transform .08s}
.flo-btn-login:hover{background:var(--accent-hover);color:#fff}
.flo-btn-login:active{transform:translateY(1px)}
.flo-mobile-link{color:var(--muted);text-decoration:none;font-weight:700;font-size:16px;padding:12px 8px;border-radius:8px;transition:background .15s,color .15s}
.flo-mobile-link:hover{background:var(--bg-3);color:var(--text)}

/* ---- footer ---- */
.flo-foot-link{color:var(--muted);text-decoration:none;transition:color .15s}
.flo-foot-link:hover{color:var(--text)}

/* ---- image slots (flat placeholder; swaps to the real <img> automatically once the file exists) ---- */
.img-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;font-size:13px;line-height:1.5;color:var(--dim);background:var(--bg-3);border:1px dashed var(--line)}
.img-slot code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--muted);background:var(--bg-0);padding:3px 8px;border-radius:6px}
.flo-art{position:relative;width:100%}
.flo-art>img{display:block;width:100%;height:100%;object-fit:contain}

/* ---- feature rows ---- */
.flo-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:56px 0}
.flo-row .flo-row-art{width:100%;aspect-ratio:4/3}
.flo-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-text);margin-bottom:16px}
.flo-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.flo-row h2{margin:0 0 18px;font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-1.2px;text-wrap:balance}
.flo-row p{margin:0 0 30px;font-size:16.5px;line-height:1.65;color:var(--muted);text-wrap:pretty}

/* ---- responsive ---- */
@media (max-width:1020px){.flo-nav-links{display:none!important}.flo-nav-burger{display:flex!important}}
@media (max-width:640px){.flo-nav-actions{display:none!important}}
@media (max-width:900px){
  .flo-hero{min-height:0!important;padding:56px 24px 72px!important;flex-direction:column;justify-content:center!important;text-align:center;gap:40px}
  .flo-hero-art{max-width:440px!important;margin:0 auto!important}
  .flo-strip-wrap{position:static!important;padding-bottom:28px!important}
  .flo-hero-copy{max-width:560px}
  .flo-hero-ctas{justify-content:center}
  .flo-strip{grid-template-columns:repeat(2,1fr)!important}
  .flo-strip>div{border-right:none!important}
  .flo-strip>div:nth-child(5){grid-column:1/-1}
  .flo-row{grid-template-columns:1fr!important;gap:28px!important;padding:48px 0!important}
  .flo-row .flo-row-art{order:-1}
  .flo-wrap{padding-left:20px!important;padding-right:20px!important}
}
@media (max-width:560px){
  .flo-hero h1{font-size:40px!important;letter-spacing:-1.2px!important}
  .flo-strip{grid-template-columns:1fr!important}
  .flo-strip>div:nth-child(5){grid-column:auto}
  .flo-hero-ctas{flex-direction:column;align-items:stretch}
  .flo-hero-ctas>*{justify-content:center}
  .flo-row h2{font-size:30px!important}
  .flo-row .flo-btn{width:100%;justify-content:center}
}
@media (max-width:640px){.flo-foot{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}}