/* ===== Mainbot Automation — shared styles (themed) ===== */

/* Theme tokens as RGB channels so Tailwind `color/opacity` keeps working.
   Tailwind config maps each token to rgb(var(--c-x) / <alpha-value>). */
:root {
  --expo: cubic-bezier(0.16,1,0.3,1);
  --c-bg: 4 6 14;          /* #04060E */
  --c-bg2: 10 19 38;       /* #0A1326 */
  --c-bg3: 14 26 51;       /* #0E1A33 */
  --c-ink: 234 241 251;    /* #EAF1FB */
  --c-muted: 147 164 190;  /* #93A4BE */
  --c-blue: 14 155 255;    /* #0E9BFF */
  --c-blueL: 91 184 255;   /* #5BB8FF */
  --c-orange: 255 138 0;   /* #FF8A00 */
  --c-orangeL: 255 166 61; /* #FFA63D */
  --c-line: 255 255 255;   /* hairlines via low alpha */
  --c-card1: 10 19 38;
  --c-card2: 7 14 29;
}
:root.light {
  --c-bg: 244 247 251;     /* soft near-white */
  --c-bg2: 255 255 255;
  --c-bg3: 237 242 248;
  --c-ink: 17 28 46;       /* deep navy text */
  --c-muted: 88 102 126;
  --c-blue: 13 120 212;    /* deeper for contrast on light */
  --c-blueL: 31 96 162;
  --c-orange: 224 116 0;
  --c-orangeL: 193 96 0;
  --c-line: 17 28 46;
  --c-card1: 255 255 255;
  --c-card2: 248 250 253;
}

html { transition: background-color .45s var(--expo), color .45s var(--expo); }
html, body { background:rgb(var(--c-bg)); color:rgb(var(--c-ink)); font-family:'General Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body { overflow-x:hidden; }
::selection { background:rgb(var(--c-blue) / .32); color:#fff; }
.font-display { font-family:'Clash Display',sans-serif; letter-spacing:-0.02em; }

::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background:rgb(var(--c-bg)); }
::-webkit-scrollbar-thumb { background:rgb(var(--c-blue) / .55); border-radius:9px; }
::-webkit-scrollbar-thumb:hover { background:rgb(var(--c-blue)); }

p, li { line-height:1.7; }

/* ===== animated aurora background (replaces inline bg field) ===== */
.bg-field { position:fixed; inset:0; z-index:-10; pointer-events:none; overflow:hidden; background:rgb(var(--c-bg)); }
.bg-field::before {
  content:''; position:absolute; inset:-25%;
  background:
    radial-gradient(38% 38% at 20% 24%, rgb(var(--c-blue) / .20), transparent 70%),
    radial-gradient(34% 34% at 82% 18%, rgb(var(--c-blueL) / .16), transparent 70%),
    radial-gradient(44% 44% at 72% 82%, rgb(var(--c-orange) / .12), transparent 70%),
    radial-gradient(40% 40% at 12% 88%, rgb(var(--c-blue) / .10), transparent 70%);
  filter:blur(36px); animation:aurora 26s ease-in-out infinite alternate;
}
.bg-field::after {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgb(var(--c-blueL) / .06) 1px, transparent 1px);
  background-size:46px 46px;
}
:root.light .bg-field::before { opacity:.7; }
@keyframes aurora {
  0%   { transform:translate3d(-3%,-2%,0) scale(1); }
  50%  { transform:translate3d(3%,2%,0) scale(1.12); }
  100% { transform:translate3d(-2%,3%,0) scale(1.06); }
}

/* ===== buttons ===== */
.btn-orange { background:rgb(var(--c-orange)); color:#231300; transition:transform .4s var(--expo), box-shadow .4s var(--expo), background .25s; box-shadow:0 10px 30px -8px rgb(var(--c-orange) / .5); }
.btn-orange:hover { background:rgb(var(--c-orangeL)); transform:translateY(-2px); box-shadow:0 16px 40px -8px rgb(var(--c-orange) / .65); }
.btn-ghost { border:1px solid rgb(var(--c-blue) / .28); color:rgb(var(--c-ink)); transition:border-color .3s, background .3s, transform .4s var(--expo); }
.btn-ghost:hover { border-color:rgb(var(--c-blue)); background:rgb(var(--c-blue) / .08); transform:translateY(-2px); }
.btn-magnetic { will-change:transform; }

/* ===== cards ===== */
.card { background:linear-gradient(180deg, rgb(var(--c-card1)), rgb(var(--c-card2))); border:1px solid rgb(var(--c-blueL) / .12); transition:border-color .45s var(--expo), transform .35s var(--expo), box-shadow .35s var(--expo); }
.card:hover { border-color:rgb(var(--c-blue) / .55); }
.card-flagship { background:linear-gradient(180deg, rgb(var(--c-blue) / .12), rgb(var(--c-card2))); border:1px solid rgb(var(--c-orange) / .3); }
.card-flagship:hover { border-color:rgb(var(--c-orange) / .7); }
:root.light .card, :root.light .sec { box-shadow:0 1px 2px rgb(15 27 45 / .05), 0 14px 34px -20px rgb(15 27 45 / .16); }

/* 3D tilt (transform applied by JS) */
.tilt { transform-style:preserve-3d; transition:transform .35s var(--expo); }

/* ===== mascot ===== */
.mascot { mix-blend-mode:screen; -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 63%, transparent 80%); mask-image:radial-gradient(circle at 50% 50%, #000 63%, transparent 80%); will-change:transform; animation:floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(-1deg);} 50%{transform:translateY(-20px) rotate(1deg);} }
.mascot-sm { mix-blend-mode:screen; -webkit-mask-image:radial-gradient(circle,#000 58%,transparent 78%); mask-image:radial-gradient(circle,#000 58%,transparent 78%); }
.mascot-glow { background:radial-gradient(circle, rgb(var(--c-blue) / .45) 0%, rgb(var(--c-blue) / .12) 38%, transparent 66%); animation:breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%,100%{opacity:.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.07);} }
/* Light mode: screen blend turns white-on-white invisible — use normal blend so the
   mascot's own dark halo shows as a glowing orb, masked to a circle. */
:root.light .mascot, :root.light .mascot-sm { mix-blend-mode:normal; }
:root.light .mascot-glow { background:radial-gradient(circle, rgb(var(--c-blue) / .30) 0%, rgb(var(--c-blue) / .10) 42%, transparent 68%); }

.reveal { opacity:0; transform:translateY(30px); }

/* ===== nav ===== */
.nav-link { position:relative; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:rgb(var(--c-blue)); transition:width .35s var(--expo); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color:rgb(var(--c-ink)); }

/* theme toggle button */
.theme-btn { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; border:1px solid rgb(var(--c-line) / .12); background:rgb(var(--c-bg2) / .5); color:rgb(var(--c-ink)); cursor:pointer; transition:border-color .25s, background .25s, transform .25s var(--expo); }
.theme-btn:hover { border-color:rgb(var(--c-blue) / .5); transform:translateY(-1px); }

/* ===== dropdown ===== */
.dropdown { position:relative; }
.dropdown > .dd-trigger { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.dropdown-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); min-width:260px; margin-top:10px; padding:8px; border-radius:18px; background:rgb(var(--c-bg2) / .98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgb(var(--c-blueL) / .16); box-shadow:0 30px 60px -20px rgb(2 4 10 / .6); opacity:0; visibility:hidden; transition:opacity .25s var(--expo), transform .25s var(--expo), visibility .25s; z-index:60; }
.dropdown::after { content:''; position:absolute; top:100%; left:0; right:0; height:16px; }
.dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown-menu a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; font-size:14px; color:rgb(var(--c-muted)); transition:background .2s, color .2s; }
.dropdown-menu a:hover { background:rgb(var(--c-blue) / .10); color:rgb(var(--c-ink)); }
.dropdown-menu a .ico { color:rgb(var(--c-blue)); }
.dropdown-menu .dd-all { color:rgb(var(--c-orangeL)); border-top:1px solid rgb(var(--c-line) / .07); margin-top:4px; padding-top:12px; }

#progress { position:fixed; top:0; left:0; height:2px; width:0%; z-index:70; background:rgb(var(--c-blue)); box-shadow:0 0 12px rgb(var(--c-blue)); }

.hairline { height:1px; background:linear-gradient(90deg,transparent,rgb(var(--c-blueL) / .22),transparent); }

details summary::-webkit-details-marker { display:none; }
details[open] .faq-sign { transform:rotate(45deg); }

.dot { animation:blink 1.4s infinite both; }
.dot:nth-child(2){ animation-delay:.2s; } .dot:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }

.grid-faint { background-image:radial-gradient(rgb(var(--c-blueL) / .07) 1px, transparent 1px); background-size:46px 46px; }

/* page hero band (inner pages) */
.page-hero { position:relative; background:radial-gradient(900px 480px at 50% -20%, rgb(var(--c-blue) / .18), transparent 60%); }

/* ===== form inputs ===== */
.inp { width:100%; border-radius:12px; background:rgb(var(--c-bg3)); border:1px solid rgb(var(--c-line) / .12); padding:11px 14px; font-size:14px; color:rgb(var(--c-ink)); transition:border-color .25s, box-shadow .25s; }
.inp::placeholder { color:rgb(var(--c-muted) / .55); }
.inp:focus { outline:none; border-color:rgb(var(--c-blue)); box-shadow:0 0 0 3px rgb(var(--c-blue) / .18); }
.fld > span { display:block; font-size:13px; color:rgb(var(--c-muted)); margin-bottom:6px; }
.req { color:rgb(var(--c-orangeL)); }
.chk { display:flex; gap:10px; align-items:center; font-size:14px; color:rgb(var(--c-ink)); padding:8px 12px; border:1px solid rgb(var(--c-line) / .12); border-radius:10px; cursor:pointer; transition:border-color .2s, background .2s; }
.chk:hover { border-color:rgb(var(--c-blue) / .5); }
.sec { background:linear-gradient(180deg, rgb(var(--c-card1)), rgb(var(--c-card2))); border:1px solid rgb(var(--c-blueL) / .12); border-radius:20px; }
.drop { border:1.5px dashed rgb(var(--c-blue) / .35); border-radius:14px; background:rgb(var(--c-blue) / .05); padding:18px; text-align:center; cursor:pointer; transition:border-color .25s, background .25s; }
.drop:hover { border-color:rgb(var(--c-blue)); background:rgb(var(--c-blue) / .09); }

/* choice tiles (build-request chooser) */
.choice { display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:18px; cursor:pointer; background:linear-gradient(180deg, rgb(var(--c-card1)), rgb(var(--c-card2))); border:1px solid rgb(var(--c-blueL) / .14); transition:border-color .3s var(--expo), transform .3s var(--expo); }
.choice:hover { border-color:rgb(var(--c-blue) / .6); transform:translateY(-4px); }
.choice.sel { border-color:rgb(var(--c-orange)); box-shadow:0 0 0 1px rgb(var(--c-orange) / .5), 0 20px 50px -24px rgb(var(--c-orange) / .5); }

/* ===== waitlist / generic modal ===== */
.modal-backdrop { position:fixed; inset:0; z-index:90; background:rgb(2 4 10 / .7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.open { display:flex; }
.modal-card { width:100%; max-width:440px; border-radius:24px; background:linear-gradient(180deg, rgb(var(--c-card1)), rgb(var(--c-card2))); border:1px solid rgb(var(--c-blueL) / .16); padding:28px; box-shadow:0 40px 80px -30px rgb(2 4 10 / .7); animation:modalIn .4s var(--expo); }
@keyframes modalIn { from{opacity:0; transform:translateY(16px) scale(.97);} to{opacity:1; transform:none;} }

/* multi-step forms */
@keyframes stepIn { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.stepper-head { position:sticky; top:88px; z-index:20; background:rgb(var(--c-bg) / .82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:10px 0; border-radius:12px; }

/* light-mode fixes for Tailwind's translucent white utilities */
:root.light [class*="border-white/"] { border-color:rgb(17 28 46 / .10) !important; }
:root.light [class*="divide-white/"] > * + * { border-color:rgb(17 28 46 / .08) !important; }
:root.light [class*="bg-white/"] { background-color:rgb(17 28 46 / .04) !important; }

@media (prefers-reduced-motion: reduce){
  .mascot, .mascot-glow, .dot, .bg-field::before { animation:none; }
  .reveal { opacity:1; transform:none; }
  html { transition:none; }
}