/* ============================================================================
   proyeet — design system  (single control file for the whole site)
   ----------------------------------------------------------------------------
   HOW TO USE THIS FILE
   - Everything visual is driven by the CSS variables (tokens) in :root below.
     Change a token once and it updates everywhere across every page.
   - Sections are numbered so you can jump around:
        1. TOKENS          — colors, spacing, radius, shadows, fonts
        2. RESET & BASE    — box-sizing, body background, typography
        3. LAYOUT          — .wrap, .appbar, safe-area handling
        4. CARDS
        5. TYPOGRAPHY HELPERS — .overline, .muted, .display, headings
        6. BUTTONS
        7. FORMS
        8. PROGRESS & STATS
        9. AVATARS
       10. CHIPS, ROWS, BANNERS
       11. HERO
       12. KPIs, TABLES, BARS
       13. FOOTER & DOCKS
       14. COMPONENTS  — handle input, proof video, transparency badge
       15. RESPONSIVE & MOTION
   - New pages automatically inherit all of this. Use the existing class names
     (.card, .btn, .hero, .tbl, etc.) and they'll just work.
   ----------------------------------------------------------------------------
   THEME: deep-space navy field, electric-cyan signature accent (the logo's
   brushstroke Y), solid-blue primary actions. Dark-first fintech confidence.
   ============================================================================ */

/* ========================= 1. TOKENS ===================================== */
:root{
  /* ---- Brand core (sampled from the proyeet logo) ---- */
  --ink:#0a1128;            /* deepest background */
  --navy:#0d1834;           /* base surface */
  --navy-1:#111d3f;         /* raised card */
  --navy-2:#16244d;         /* higher card / inputs */
  --navy-3:#1c2c5c;         /* hover / borders on dark */
  --cyan:#1ff0f6;           /* signature accent — the brushstroke */
  --cyan-soft:#7ff5f9;
  --blue:#2f6bff;           /* the solid "pro" blue — primary actions */
  --blue-hover:#4a80ff;
  --blue-deep:#1b4fd6;

  /* ---- Semantic role tokens (change these to re-skin components) ---- */
  --md-primary:var(--blue);
  --md-primary-hover:var(--blue-hover);
  --md-on-primary:#ffffff;
  --md-primary-container:#13275f;
  --md-on-primary-container:#cfe0ff;
  --md-secondary:var(--cyan);
  --md-secondary-container:#0c3550;
  --md-on-secondary-container:#a6f2ff;
  --md-tertiary:#8ea2ff;
  --md-tertiary-container:#20306a;

  --md-surface:var(--navy);
  --md-surface-1:var(--navy-1);
  --md-surface-2:var(--navy-2);
  --md-surface-3:var(--navy-3);
  --md-surface-variant:#20305e;
  --md-on-surface:#eaf0ff;
  --md-on-surface-variant:#9fb0da;
  --md-outline:#2c3f74;
  --md-outline-variant:#20305e;

  --md-success:#2ee6a6;
  --md-success-container:#0c3d33;
  --md-error:#ff5c6c;
  --md-error-container:#3d0f16;

  /* ---- Elevation (glow-in-the-dark shadows) ---- */
  --e1:0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
  --e2:0 2px 6px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --e3:0 10px 30px rgba(3,8,24,.6), 0 2px 8px rgba(0,0,0,.45);
  --glow-cyan:0 0 24px rgba(31,240,246,.35);
  --glow-blue:0 6px 24px rgba(47,107,255,.4);

  /* ---- Shape & type ---- */
  --radius-xl:28px;--radius-lg:20px;--radius-md:16px;--radius-sm:12px;--radius-full:999px;
  --sans:"Google Sans","Product Sans",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ---- Layout widths (one place to control the column) ---- */
  --wrap-max:560px;
  --wrap-wide-max:1000px;

  /* ---- iOS notch / status-bar safe areas ---- */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

/* ========================= 2. RESET & BASE ============================== */
*{box-sizing:border-box}
/* Nothing may force horizontal scroll on mobile. */
html,body{max-width:100%;overflow-x:hidden}
img,video,svg,canvas{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);color:var(--md-on-surface);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(47,107,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(31,240,246,.10), transparent 55%),
    var(--ink);
  background-attachment:fixed;
  min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5;
}
.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;line-height:1;user-select:none}
.msf{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* ========================= 3. LAYOUT =================================== */
/* Every page reserves space for the iOS status bar at the top of the content
   column. Pages WITH an app bar have the bar extend up to fill it; pages
   WITHOUT one (fund page, celebration screen) get clear space so their content
   never hides under the status bar in standalone/home-screen mode. */
.wrap{width:100%;max-width:var(--wrap-max);margin:0 auto;
  padding:calc(16px + var(--safe-top)) 16px calc(96px + var(--safe-bottom))}
.wrap-wide{max-width:var(--wrap-wide-max)}

/* App bar: full-bleed, sits under the status bar cleanly. The negative top
   margin cancels the wrap's safe-area top padding, so the bar's blurred
   background reaches the very top while its padding keeps content below the
   notch. Same in browser (safe-top ≈ 0) and home-screen (safe-top = bar). */
.appbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  padding-top:calc(12px + var(--safe-top));
  margin:calc(-16px - var(--safe-top)) -16px 16px;
  background:rgba(10,17,40,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--md-outline-variant);
}
/* Wordmark: "pro" in the logo's solid blue, "yeet" in the electric cyan. */
.appbar .brand{display:flex;align-items:center;gap:0;font-family:var(--sans);font-weight:800;font-size:1.35rem;text-decoration:none;letter-spacing:-.02em;color:var(--blue)}
.appbar .brand:hover{text-decoration:none}
.appbar .brand b{color:var(--cyan);font-weight:800}
.appbar .spacer{margin-left:auto}

/* ========================= 4. CARDS =================================== */
.card{background:var(--md-surface-1);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--e2);border:1px solid rgba(255,255,255,.04)}
.card + .card{margin-top:16px}
.card-outlined{background:transparent;border:1px solid var(--md-outline);box-shadow:none}
.card-primary{
  background:linear-gradient(150deg,var(--blue-deep),#0a1c52 70%);
  color:#fff;border:1px solid rgba(47,107,255,.4);box-shadow:var(--glow-blue)
}
.card-primary h1,.card-primary h2{color:#fff}

/* ========================= 5. TYPOGRAPHY HELPERS ====================== */
h1,h2,h3{font-family:var(--sans);letter-spacing:-.02em;color:#fff;margin:0 0 .5em;line-height:1.15}
h1{font-size:1.9rem;font-weight:700}
h2{font-size:1.35rem;font-weight:600}
h3{font-size:1.1rem;font-weight:600}
p{margin:0 0 1em}
.muted{color:var(--md-on-surface-variant)}
.overline{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:6px;margin-bottom:10px}
.overline .material-symbols-rounded{color:var(--cyan)}
.display{font-family:var(--sans);font-weight:700;letter-spacing:-.03em}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

/* ========================= 6. BUTTONS ================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:0 24px;border:0;border-radius:var(--radius-full);cursor:pointer;font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.01em;background:var(--blue);color:#fff;box-shadow:var(--glow-blue);transition:box-shadow .2s,background .2s,transform .05s;text-decoration:none}
.btn:hover{background:var(--blue-hover);color:#fff;box-shadow:0 8px 30px rgba(47,107,255,.55);text-decoration:none}
.btn:active{transform:scale(.99);background:var(--blue-deep);color:#fff}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.btn[disabled],.btn:disabled{opacity:.6;cursor:default;box-shadow:none}
.btn .material-symbols-rounded{font-size:20px;color:inherit}

/* Cyan "signature" action — used sparingly for the single hero CTA */
.btn-cyan{background:var(--cyan);color:#052a2c;box-shadow:var(--glow-cyan)}
.btn-cyan:hover{background:var(--cyan-soft);color:#052a2c;box-shadow:0 0 30px rgba(31,240,246,.5)}
.btn-cyan:active{background:#16c9ce;color:#052a2c}
.btn-cyan .material-symbols-rounded{color:#052a2c}

.btn-tonal{background:var(--md-primary-container);color:var(--md-on-primary-container);box-shadow:none;border:1px solid var(--md-outline)}
.btn-tonal:hover{background:#183072;color:#fff;box-shadow:none}
.btn-tonal:active{background:#13275f}
.btn-secondary{background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none}
.btn-secondary:hover{background:#124a6b;color:#fff;box-shadow:none}
.btn-outlined{background:transparent;color:var(--cyan);border:1px solid var(--md-outline);box-shadow:none}
.btn-outlined:hover{background:rgba(31,240,246,.08);box-shadow:none}
.btn-text{background:transparent;color:var(--cyan);box-shadow:none;min-height:44px;padding:0 14px;width:auto}
.btn-text:hover{background:rgba(31,240,246,.10);box-shadow:none}
.btn-white{background:#fff;color:var(--blue-deep);box-shadow:var(--e2)}
.btn-white:hover{background:#eaf1ff;color:var(--blue-deep)}
.btn-white:active{background:#dbe7ff;color:var(--blue-deep)}
.btn-white .material-symbols-rounded{color:var(--blue-deep)}
.btn-danger{background:var(--md-error);color:#fff;box-shadow:none}
.btn-danger:hover{background:#e04455;color:#fff}
.btn-danger:active{background:#c23342;color:#fff}
.btn-danger .material-symbols-rounded{color:#fff}
.btn-on-dark{background:transparent;color:#fff}
.btn-on-dark:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-on-dark:active{background:rgba(255,255,255,.22);color:#fff}
.btn-on-dark .material-symbols-rounded{color:#fff}
.btn-sm{min-height:40px;width:auto;padding:0 18px;font-size:.9rem}
.btn-icon-only{width:44px;min-height:44px;padding:0;border-radius:var(--radius-full)}

/* ========================= 7. FORMS ================================== */
.field{position:relative;margin:18px 0}
.field label{display:block;font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--md-on-surface-variant);margin-bottom:6px}
input,textarea,select{width:100%;padding:14px 16px;font-size:16px;font-family:var(--body);color:var(--md-on-surface);background:var(--md-surface-2);border:1px solid var(--md-outline);border-radius:var(--radius-sm);transition:border-color .15s, box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--md-on-surface-variant);opacity:.6}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 2px rgba(31,240,246,.3)}
textarea{min-height:120px;resize:vertical}
input[type=file]{padding:12px 14px;background:var(--md-surface-3);cursor:pointer}
input[type=file]::file-selector-button{font-family:var(--sans);font-weight:600;font-size:.85rem;margin-right:12px;padding:8px 16px;border:0;border-radius:var(--radius-full);background:var(--blue);color:#fff;cursor:pointer}
.help{font-size:.78rem;color:var(--md-on-surface-variant);margin:6px 0 0}
.field-row{display:flex;gap:12px}
.field-row > *{flex:1}

/* ========================= 8. PROGRESS & STATS ======================= */
.progress{height:12px;background:var(--md-surface-3);border-radius:var(--radius-full);overflow:hidden;margin:12px 0}
.progress > span{display:block;height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 12px rgba(31,240,246,.5);transition:width .6s ease}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.stat-big{font-family:var(--sans);font-size:1.75rem;font-weight:700;color:#fff;letter-spacing:-.02em}

/* ========================= 9. AVATARS ================================ */
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:var(--e2);border:2px solid rgba(31,240,246,.4)}
.avatar-sm{width:44px;height:44px;border-radius:50%;object-fit:cover}
.avatar-ph{display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;background:var(--md-primary-container);color:var(--cyan)}

/* ========================= 10. CHIPS, ROWS, BANNERS ================== */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);background:var(--md-surface-2);border:1px solid var(--md-outline-variant);font-family:var(--sans);font-weight:500;font-size:.88rem;color:var(--md-on-surface)}
.chip .material-symbols-rounded{font-size:18px;color:var(--cyan)}

.row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--md-outline-variant)}
.row:last-child{border-bottom:0}
.row .amt{margin-left:auto;font-family:var(--sans);font-weight:700;color:var(--cyan)}
.row .title{font-weight:600;color:#fff}
.row .sub{font-size:.85rem;color:var(--md-on-surface-variant)}

.banner{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--radius-md);margin-bottom:16px;font-size:.95rem}
.banner .material-symbols-rounded{flex:0 0 auto;font-size:22px;margin-top:1px}
.banner-info{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.banner-info .material-symbols-rounded{color:var(--cyan)}
.banner-success{background:var(--md-success-container);color:#a6ffe0}
.banner-success .material-symbols-rounded{color:var(--md-success)}
.banner-error{background:var(--md-error-container);color:#ffc9cf}
.banner-error .material-symbols-rounded{color:var(--md-error)}

/* ========================= 11. HERO ================================= */
.hero{padding:32px 0 12px}
.hero .overline{justify-content:flex-start}
.hero h1{font-size:2.5rem;line-height:1.08;color:#fff}
.hero .lead{font-size:1.1rem;color:var(--md-on-surface-variant);max-width:36ch}

/* ========================= 12. KPIs, TABLES, BARS =================== */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kpi{background:var(--md-surface-2);border:1px solid var(--md-outline-variant);border-radius:var(--radius-md);padding:18px}
.kpi .material-symbols-rounded{color:var(--cyan);font-size:24px}
.kpi .n{font-family:var(--sans);font-size:1.6rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin-top:8px;line-height:1.1}
.kpi .l{font-size:.8rem;color:var(--md-on-surface-variant);margin-top:2px}
.kpi.accent{background:linear-gradient(150deg,var(--blue-deep),#0a1c52);border-color:transparent;box-shadow:var(--glow-blue)}
.kpi.accent .n,.kpi.accent .l{color:#fff}
.kpi.accent .material-symbols-rounded{color:var(--cyan)}

.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--md-outline-variant);vertical-align:top;color:var(--md-on-surface)}
.tbl th{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--md-on-surface-variant);font-weight:600}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tbl tfoot td{border-top:2px solid var(--md-outline);border-bottom:0;font-family:var(--sans);font-weight:700;color:#fff}
.badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:var(--radius-full)}
.badge.on{background:var(--md-success-container);color:#a6ffe0}
.badge.off{background:var(--md-surface-3);color:var(--md-on-surface-variant)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bars{display:flex;align-items:flex-end;gap:8px;height:96px;margin:12px 0 4px}
.bars .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.bars .bar{width:100%;background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:6px 6px 2px 2px;min-height:4px}
.bars .lbl{font-size:.65rem;color:var(--md-on-surface-variant);text-align:center}

/* ========================= 13. FOOTER & DOCKS ======================= */
.foot{text-align:center;margin-top:28px;padding-top:16px;font-size:.85rem;color:var(--md-on-surface-variant)}
.foot a{color:var(--md-on-surface-variant);margin:0 8px}
.cta-dock{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:12px 16px calc(12px + var(--safe-bottom));background:linear-gradient(180deg,rgba(10,17,40,0),var(--ink) 45%)}
.cta-dock .inner{max-width:var(--wrap-max);margin:0 auto}
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--md-outline-variant);font-size:.95rem;color:var(--md-on-surface)}
.kv:last-child{border-bottom:0}
.kv b{font-family:var(--sans);font-weight:600;color:#fff}

/* ========================= 14. COMPONENTS =========================== */
/* Social-handle input (@ prefix) */
.handle-input{display:flex;align-items:stretch;background:var(--md-surface-2);border:1px solid var(--md-outline);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.handle-input:focus-within{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(31,240,246,.3)}
.handle-input .handle-at{display:flex;align-items:center;padding:0 4px 0 16px;font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--cyan);user-select:none}
.handle-input input{border:0;background:transparent;box-shadow:none!important;padding-left:4px}
.handle-input input:focus{outline:none}

/* Landing social-proof video */
.proof-card{text-align:center}
.proof-video-wrap{position:relative;width:100%;max-width:300px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--e3),0 0 40px rgba(31,240,246,.18);border:1px solid rgba(31,240,246,.25)}
.proof-video{display:block;width:100%;max-width:100%;height:auto;background:var(--ink)}

/* Transparency badge of honor (clickable card → /fees.php) */
.badge-honor{display:flex;gap:16px;align-items:flex-start;text-decoration:none;
  background:linear-gradient(150deg,var(--navy-2),var(--navy-1));
  border:1px solid rgba(31,240,246,.35);border-radius:var(--radius-lg);
  padding:20px;margin-top:16px;box-shadow:var(--e2),0 0 30px rgba(31,240,246,.10);
  transition:box-shadow .2s,border-color .2s,transform .05s}
.badge-honor:hover{text-decoration:none;border-color:rgba(31,240,246,.6);box-shadow:var(--e3),0 0 40px rgba(31,240,246,.22)}
.badge-honor:active{transform:scale(.995)}
.badge-honor-seal{flex:0 0 auto;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,var(--navy-3),var(--ink));
  border:2px solid var(--cyan);color:var(--cyan);box-shadow:var(--glow-cyan)}
.badge-honor-seal .material-symbols-rounded{font-size:30px}
.badge-honor-body{display:flex;flex-direction:column;gap:5px}
.badge-honor-title{font-family:var(--sans);font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:-.01em}
.badge-honor-sub{font-size:.9rem;color:var(--md-on-surface-variant);line-height:1.45}
.badge-honor-link{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--cyan);margin-top:2px}
.badge-honor-link .material-symbols-rounded{font-size:18px;transition:transform .2s}
.badge-honor:hover .badge-honor-link .material-symbols-rounded{transform:translateX(3px)}

/* ========================= 15. RESPONSIVE & MOTION ================== */
@media (min-width:768px){
  .hero h1{font-size:3.2rem}
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}