/* =========================================================
   GLOBAL.CSS - Advanced Schema Engine Design System
   Single source of truth for shared tokens, layout, and components.
   All pages link to this file; page-specific overrides live inline.
   ========================================================= */

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ===== ROOT TOKENS ===== */
:root{
  /* Colors */
  --bg:#000000;--bg2:#080c09;--bg3:#101810;--bg4:#182018;
  --text:#ffffff;--text2:#ffffff;--text3:#6b7e6f;
  --accent:#88A53A;--accent2:#A4C24A;--accent-glow:rgba(136,165,58,.25);
  --cta:#88A53A;--cta-hover:#6E8A2A;
  --orange:#E08700;--orange-hover:#C47600;
  --green:#88A53A;--green-bg:rgba(136,165,58,.12);
  --yellow:#eab308;--yellow-bg:rgba(234,179,8,.12);
  --red:#ef4444;--red-bg:rgba(239,68,68,.12);
  --blue:#3b82f6;--blue-bg:rgba(59,130,246,.12);
  --border:#1a2e1c;--radius:12px;--radius-sm:8px;
  --shadow:0 4px 24px rgba(0,0,0,.6);

  /* Fonts */
  --font:'Roboto',sans-serif;
  --mono:'SF Mono','Cascadia Code','Fira Code',Consolas,monospace;

  /* Spacing scale */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
  --space-16:64px;

  /* Typography scale (fluid clamp) - body text targets 20px */
  --text-xs:clamp(0.75rem,0.1vw + 0.73rem,0.85rem);
  --text-sm:clamp(0.875rem,0.12vw + 0.85rem,1rem);
  --text-base:clamp(1.125rem,0.15vw + 1.09rem,1.25rem);
  --text-lg:clamp(1.25rem,0.3vw + 1.17rem,1.5rem);
  --text-xl:clamp(1.375rem,0.5vw + 1.2rem,1.75rem);
  --text-2xl:clamp(1.75rem,1.25vw + 1.35rem,2.5rem);
  --text-3xl:clamp(2rem,2.3vw + 1.3rem,3.25rem);
  --text-4xl:clamp(2.5rem,3.5vw + 1.5rem,4.5rem);
}

/* ===== BASE ===== */
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
img,video,svg{max-width:100%;height:auto}

/* ===== FOCUS STYLES ===== */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== TYPOGRAPHY DEFAULTS ===== */
h1{font-size:var(--text-3xl);font-weight:900;line-height:1.1;letter-spacing:-.03em;color:#fff}
h2{font-size:var(--text-2xl);font-weight:700;line-height:1.15;color:#fff}
h3{font-size:var(--text-xl);font-weight:700;line-height:1.2;color:#fff}
h4{font-size:var(--text-lg);font-weight:700;line-height:1.25;color:#fff}
h5{font-size:var(--text-base);font-weight:600;line-height:1.3;color:#fff}
h6{font-size:var(--text-sm);font-weight:600;line-height:1.4;color:#fff}

/* ===== LAYOUT ===== */
.container{max-width:1140px;margin:0 auto;padding:0 var(--space-6);position:relative;z-index:1}

/* ===== HEADER ===== */
header{padding:var(--space-5) 0;border-bottom:1px solid var(--border);position:relative;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1140px;margin:0 auto;padding:0 var(--space-6)}
.logo{display:flex;align-items:center;gap:0.75rem;font-weight:700;font-size:var(--text-lg);color:var(--text);text-decoration:none}
.logo span{font-size:clamp(0.8rem,0.8vw + 0.5rem,1.05rem)}
.logo-icon{width:2rem;height:2rem;object-fit:contain;border-radius:50%}
.header-links{display:flex;align-items:center;gap:var(--space-3)}
.header-links>a,.header-links>.nav-dropdown,.header-links>.user-dropdown-wrap{line-height:1;display:flex;align-items:center;height:36px}
.header-links a{color:var(--text2);text-decoration:none;font-size:var(--text-xs);transition:color .2s}
.header-links a:hover{color:var(--accent2)}
.header-links a.signup-nav-btn:hover{color:#fff}
.menu-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:var(--space-2);min-height:44px;min-width:44px;align-items:center;justify-content:center}
.menu-toggle svg{width:1.75rem;height:1.75rem}

/* ===== MOBILE NAV CLOSE BUTTON ===== */
.nav-close{display:none;position:absolute;top:var(--space-5);right:var(--space-6);background:none;border:none;color:#fff;cursor:pointer;padding:var(--space-2);min-height:44px;min-width:44px;align-items:center;justify-content:center;z-index:10001}
.nav-close svg{width:1.75rem;height:1.75rem}

/* ===== NAV DROPDOWN ===== */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-parent{color:var(--text2);text-decoration:none;font-size:var(--text-xs);cursor:default;display:flex;align-items:center;gap:var(--space-1);transition:color .2s}
.nav-parent:hover{color:var(--accent2)}
.nav-parent svg{width:0.75rem;height:0.75rem;transition:transform .2s}
.nav-dropdown:hover .nav-parent svg{transform:rotate(180deg)}
.dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:11.25rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) 0;margin-top:var(--space-3);z-index:200;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.5)}
.nav-dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:0.625rem var(--space-4);color:var(--text2);text-decoration:none;font-size:var(--text-sm);transition:background .2s,color .2s;white-space:nowrap;min-height:44px;display:flex;align-items:center;cursor:pointer}/* 44px tap target */
.dropdown-menu a:hover{background:var(--bg3);color:var(--accent2)}
.dropdown-menu::before{content:'';position:absolute;top:-0.75rem;left:0;right:0;height:0.75rem}/* hover-bridge */

/* ===== HERO GLOW (shared across pages) ===== */
.hero{text-align:center;padding:var(--space-16) 0;position:relative}
.hero::before{content:'';position:absolute;top:-5rem;left:50%;transform:translateX(-50%);width:43.75rem;height:31.25rem;background:radial-gradient(ellipse at center,rgba(136,165,58,.08) 0%,transparent 70%);pointer-events:none;z-index:0}

/* ===== FAQ COMPONENT ===== */
.faq-section{padding:var(--space-16) 0;border-top:1px solid var(--border)}
.faq-section h2{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-12);text-align:center}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:var(--space-2);overflow:hidden}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);cursor:pointer;background:var(--bg2);font-size:var(--text-base);font-weight:600;color:#fff;transition:background .2s;user-select:none;min-height:44px;gap:var(--space-3)}
.faq-question:hover{background:var(--bg3)}
.faq-question span{color:var(--text3);font-size:var(--text-sm);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-question span{transform:rotate(180deg)}
.faq-answer{display:none;padding:var(--space-4) var(--space-5);font-size:var(--text-base);color:var(--text2);line-height:1.6;background:var(--bg)}
.faq-item.open .faq-answer{display:block}
.faq-answer a{color:var(--accent);text-decoration:none;transition:color .2s}
.faq-answer a:hover{color:var(--accent2)}

/* ===== FOOTER ===== */
footer{padding:var(--space-6) 0;border-top:1px solid var(--border);text-align:center;font-size:var(--text-xs);color:var(--text3)}
footer .container{max-width:1140px}
footer a{color:var(--text3);text-decoration:none;transition:color .2s}
footer a[href="https://www.ubuildlenon.com/"],footer a[href="https://www.mobilegiant.net"]{color:var(--accent)}
footer a:hover{color:#90AE3E}

/* ===== LOGIN BUTTON ===== */
.login-btn{display:inline-flex;align-items:center;gap:0.375rem;background:var(--accent);color:#fff;border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;cursor:pointer;font-family:var(--font);transition:background .2s;min-height:36px;text-decoration:none}
.login-btn:hover{background:#6E8A2A}
.login-btn svg{width:1rem;height:1rem}
.login-btn.logged-in{background:var(--bg2);border:1px solid var(--border);color:var(--text2)}
.login-btn.logged-in:hover{border-color:var(--accent);color:var(--accent)}

/* ===== USER DROPDOWN (logged-in) ===== */
.user-dropdown-wrap{position:relative;display:inline-flex}
.user-dropdown{position:absolute;top:100%;right:0;min-width:10rem;background:var(--bg,#111);border:1px solid var(--border,#333);border-radius:var(--radius-sm,6px);padding:var(--space-2,8px) 0;margin-top:var(--space-2,8px);z-index:200;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.5)}
.user-dropdown a,.user-dropdown button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.625rem var(--space-4,16px);color:var(--text2,#9ca3af);text-decoration:none;font-size:var(--text-sm,14px);font-family:var(--font,inherit);font-weight:500;background:none;border:none;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap;min-height:44px;text-align:left}
.user-dropdown a:hover,.user-dropdown button:hover{background:var(--bg3,#222);color:var(--accent2,#90AE3E)}
.user-dropdown svg{width:1rem;height:1rem;flex-shrink:0}

/* ===== SIGNUP NAV BUTTON (orange) ===== */
.signup-nav-btn{display:inline-flex;align-items:center;background:var(--orange);color:#fff;border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;cursor:pointer;font-family:var(--font);transition:background .2s,color .2s;min-height:36px;text-decoration:none;white-space:nowrap}
.signup-nav-btn:hover{background:var(--orange-hover);color:#fff!important}

/* ===== MODALS ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.active{display:flex}
.modal-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);max-width:480px;width:90%;padding:var(--space-8);position:relative;box-shadow:0 24px 48px rgba(0,0,0,.5)}
.modal-close{position:absolute;top:var(--space-3);right:var(--space-4);background:none;border:none;color:var(--text3);font-size:1.4rem;cursor:pointer;transition:color .2s;line-height:1}
.modal-close:hover{color:#fff}
.modal-card h3{font-size:var(--text-xl);font-weight:700;margin-bottom:0.375rem;color:#fff}
.modal-card p{font-size:var(--text-base);color:var(--text2);margin-bottom:var(--space-5);line-height:1.5}
.modal-card .form-group{margin-bottom:0.875rem}
.modal-card label{display:block;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-bottom:var(--space-1)}
.modal-card input[type="text"],.modal-card input[type="email"],.modal-card input[type="password"]{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) 0.875rem;font-size:var(--text-base);color:#fff;outline:none;font-family:var(--font);transition:border-color .2s;min-height:44px}
.modal-card input:focus{border-color:var(--accent)}
.modal-card .modal-btn{width:100%;background:var(--accent);color:#fff;border:none;padding:0.875rem;border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:700;cursor:pointer;font-family:var(--font);transition:background .2s;margin-top:0.375rem;min-height:44px}
.modal-card .modal-btn:hover{background:#6E8A2A}
.modal-card .modal-btn:disabled{opacity:.6;cursor:not-allowed}
.modal-card .modal-fine{font-size:var(--text-xs);color:var(--text3);text-align:center;margin-top:var(--space-3)}
.modal-card .modal-success{text-align:center;padding:var(--space-5) 0}
.modal-card .modal-success svg{width:3rem;height:3rem;color:var(--accent);margin-bottom:var(--space-3)}
.modal-card .modal-success h3{color:var(--accent)}

/* ===== DASHBOARD PANEL ===== */
.dashboard-panel{display:none;max-width:640px;margin:var(--space-4) auto 0;padding:var(--space-5);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)}
.dashboard-panel.active{display:block}
.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.dashboard-header h3{font-size:var(--text-lg);font-weight:700}
.dashboard-logout{background:none;border:1px solid var(--border);color:var(--text3);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:pointer;font-family:var(--font);transition:all .2s}
.dashboard-logout:hover{border-color:var(--red);color:var(--red)}
.dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-bottom:var(--space-4)}
.dashboard-stat{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);text-align:center}
.dashboard-stat-value{font-size:var(--text-xl);font-weight:900;color:var(--accent)}
.dashboard-stat-label{font-size:var(--text-xs);color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.dashboard-history{margin-top:var(--space-3)}
.dashboard-history h4{font-size:var(--text-sm);font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}
.history-list{max-height:200px;overflow-y:auto}
.history-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);font-size:var(--text-sm)}
.history-item:last-child{border-bottom:none}
.history-domain{color:var(--accent);font-weight:600}
.history-meta{color:var(--text3);font-size:var(--text-xs)}

/* ===== RESPONSIVE ===== */

/* --- Mobile (max-width: 639px) --- */
@media(max-width:639px){
  .hero{padding:var(--space-10) 0}
  .faq-question{padding:var(--space-3) var(--space-4)}
  .faq-answer{padding:var(--space-3) var(--space-4)}
}

/* --- Tablet + Mobile nav (max-width: 768px) --- */
@media(max-width:768px){
  .menu-toggle{display:flex}
  header{position:relative;z-index:10000;background:var(--bg)}
  .header-links{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000;flex-direction:column;padding:5rem var(--space-6) var(--space-6);gap:0;z-index:9999;overflow-y:auto}
  .header-links.open{display:flex}
  .header-links.open .nav-close{display:flex}
  .header-links>a{padding:0.875rem 0;border-bottom:1px solid var(--border);font-size:var(--text-base);color:#fff;min-height:44px;display:flex;align-items:center}
  .header-links .signup-nav-btn{width:100%;text-align:center;justify-content:center;margin-top:var(--space-3);padding:0.875rem var(--space-4);font-size:var(--text-base)}
  .header-links .login-btn{margin-top:var(--space-2);align-self:flex-start}
  .nav-dropdown{padding:0.875rem 0;border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start}
  .nav-parent{font-size:var(--text-base);color:#fff;min-height:44px;display:flex;align-items:center}
  .dropdown-menu{display:flex;flex-direction:column;position:static;transform:none;min-width:0;background:#000;border:none;border-radius:0;padding:var(--space-1) 0 0 var(--space-4);margin-top:0;box-shadow:none}
  .dropdown-menu a{padding:var(--space-2) 0;font-size:var(--text-base);color:#fff;min-height:44px;display:flex;align-items:center}
  .dropdown-menu a:hover{background:transparent;color:var(--accent2)}
  .nav-close{display:none}/* hidden by default, shown via .header-links.open */
  .dashboard-stats{grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
  .dashboard-stat{padding:var(--space-2)}
}