:root{--maxw:720px;--pad:16px;--radius:12px;--bg:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;--accent:#38bdf8}
*{box-sizing:border-box}html,body{height:100%} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,'Apple Color Emoji','Segoe UI Emoji';background:radial-gradient(1200px 800px at 50% -10%,#1f2937 0%,var(--bg) 20%);color:var(--text);line-height:1.5}
/*Reduced var(bg) from 50 to 20*/
.site-header{text-align:center;padding:48px 20px 16px}h1{margin:0 0 8px;font-size:clamp(28px,5vw,44px)}.tagline{margin:0;color:var(--muted)}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:24px}
.hero{background:linear-gradient(180deg,#0b1220,#0b0f1a);border:1px solid #1f2937;border-radius:var(--radius);padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lead{color:var(--muted);margin-top:4px}
#notifyForm{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
input[type=email],input[type=text],input[type=password],input[type=tel],input[type=url]{width:100%;padding:14px 16px;border-radius:10px;border:1px solid #334155;background:#0b1220;color:var(--text);font-size:16px;min-height:48px}
.help{color:var(--muted);font-size:13px}
.consent-row{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0}
.btn{appearance:none;border:1px solid #075985;background:#0ea5e9;color:#081018;padding:12px 18px;font-weight:700;border-radius:999px;cursor:pointer;transition:transform .04s ease;min-height:44px}
.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.7;cursor:not-allowed}
.btn-secondary{background:#0b1220;color:var(--text);border-color:#334155}
.msg{min-height:20px;font-size:14px;color:var(--muted)}
/*25-10-06 Changed Margin-top from 28 to 14*/
.contact{margin-top:14px;color:var(--muted)}
dialog{border:1px solid #334155;border-radius:12px;padding:20px;background:#0b1220;color:var(--text);max-width:min(420px,92vw)}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1px,1px);white-space:nowrap;border:0}
@media (min-width:640px){#notifyForm{grid-template-columns:1fr auto;grid-template-areas:"email button" "help help" "consent consent" "msg msg"}#email{grid-area:email}.help{grid-area:help}.consent-row{grid-area:consent}#submitBtn{grid-area:button}.msg{grid-area:msg}}

/* Scoped styles: only affect elements inside .cards and .hero img block*/
  .hero img{width:100%;border:1px solid var(--border);border-radius:12px}
	
	.msg{min-height:22px;margin-top:8px;color:var(--muted)}
  .cards{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin-top:20px}
  .card{border:1px solid var(--border);border-radius:12px;padding:14px;background:#121826}
  footer{border-top:1px solid var(--border);margin-top:28px;padding:18px 0;color:var(--muted);font-size:14px}
  .hp{position:absolute !important;left:-9999px !important;height:0 !important;width:0 !important;overflow:hidden !important}

  @media (max-width:860px){ .hero{grid-template-columns:1fr} .cards{grid-template-columns:1fr} }
  @media (max-width:520px){
    .signup{grid-template-columns:1fr;}
    .row{grid-template-columns:1fr;}
    .qtext{white-space:normal;}
    .row input[type="text"]{width:100%;}
  }
	
/* Scoped styles: only affect elements inside .cards and .hero img block*/	
	.stats { display: flex; gap: 26px; margin-top: 18px; }
  .stat { background: var(--panel); border: 1px solid var(--border); padding: 12px 16px; border-radius: 12px; min-width: 120px; text-align: center; }
  .stat-num { font-size: 24px; font-weight: 800; display: block; }
  .stat-label { color: var(--muted); font-size: 13px; }
/* --- Responsive --- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: inline-block; }
  .drawer { display: flex; }
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .features-grid, .pricing-grid { grid-template-columns: 1fr; }
  .stats { flex-wrap: wrap; }
}
/* --- Sections --- */
/* ---Original section. ive reduced 54px to 0 .section { padding: 54px 0 32px; } --- */
.section { padding: 0px 0 32px; }
.section-title { font-size: clamp(24px, 3vw, 34px); margin: 0 0 20px; }
.grid { display: grid; gap: 16px; }
.features-grid { grid-template-columns: repeat(3, 1fr); }
.pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }

.card { background: var(--card); border: 1px solid var(--border); padding: 18px; border-radius: 14px; box-shadow: var(--shadow); }
.card.highlight { outline: 2px solid color-mix(in oklab, var(--primary), #fff 10%); }

.steps { display: grid; gap: 10px; padding-left: 18px; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq[open] { border-left: 3px solid var(--accent); padding-left: 12px; }
/* --- Footer --- */
/*
.site-footer { border-top: 1px solid var(--border); padding: 22px 0; margin-top: 24px; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.footer-grid nav { display: flex; gap: 14px; }

/* --- Footer AI--- */
.site-footer {
  /* keep your border-top if you want */
  color: var(--text-2, #c7c7c7);         /* muted text tone to match site */
  font-size: 0.95rem;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;                        /* wraps nicely on small screens */
}

.footer-grid p { margin: 0; }

/* Links: inherit color from footer text and remove default underline */
.site-footer a,
.site-footer a:visited {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  opacity: 0.95;
}

/* Hover/active: add underline (or swap to your accent color if desired) */
.site-footer a:hover,
.site-footer a:active {
  text-decoration: underline;
  opacity: 1;
}

/* Keyboard focus: visible, accessible outline */
.site-footer a:focus-visible {
  outline: 2px solid var(--accent, #7aa2ff);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Footer nav layout */
.footer-grid nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* Small screens: stack and left-align */
@media (max-width: 640px) {
  .footer-grid { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-grid nav { gap: 12px; }
}
/* Apply styles only to links inside the footer nav */
.site-footer nav a,
.site-footer nav a:visited {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  opacity: 0.95;
}

.site-footer nav a:hover,
.site-footer nav a:active {
  text-decoration: underline;
  opacity: 1;
}

.site-footer nav a:focus-visible {
  outline: 2px solid var(--accent, #7aa2ff);
  outline-offset: 2px;
  border-radius: 3px;
}

/*Adding Global White Links*/
a {
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  opacity: 0.9;
}

/*Header 25-10-06*/
/* Reset-ish */
  .site-header, .site-header * { box-sizing: border-box; }

  .site-header{
    position: sticky; top:0; z-index:10;
    background:
      radial-gradient(1400px 400px at 10% 0%, rgba(59,245,140,0.08), transparent 60%),
      radial-gradient(1200px 300px at 90% 0%, rgba(57,214,255,0.07), transparent 60%),
      linear-gradient(180deg, #0c0d12 0%, var(--bg) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .header-wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
  }

  /* Brand mark */
  .brand{
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
  }

  .brand-text{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    font-size: clamp(22px, 3.5vw, 28px);
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.1;
    color: transparent;

    /* Metallic/embossed gradient fill */
    background-image:
      linear-gradient(180deg, #f7f8fb 0%, #cfd5e6 35%, #8ea0c2 50%, #e7ebf6 65%, #b9c3d9 100%);
    -webkit-background-clip: text;
    background-clip: text;

    /* Raised/emboss illusion via layered shadows */
    text-shadow:
      0 1px 0 rgba(255,255,255,0.5),
      0 2px 2px rgba(0,0,0,0.35),
      0 8px 24px rgba(59,245,140,0.25),   /* slime glow */
      0 12px 28px rgba(57,214,255,0.15);  /* cool blue glow */

    /* Subtle sheen animation */
    background-size: 200% 200%;
    background-position: 50% 0%;
    transition: background-position 600ms ease, transform 200ms ease;
  }

  .brand:hover .brand-text{
    transform: translateY(-1px);
    background-position: 50% 40%;
  }

  /* Nav */
  .nav{
    display: none; gap: 18px; align-items: center;
  }
  .nav a{
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
  }
  .nav a:hover{ color: var(--ink); background: rgba(255,255,255,0.04); }

  .nav .cta{
    color: #0b1113;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    box-shadow: 0 6px 18px rgba(59,245,140,0.25), 0 8px 22px rgba(57,214,255,0.15);
  }
  .nav .cta:hover{ filter: brightness(1.06); }

  /* Mobile menu button */
  .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0e1016;
    color: var(--ink);
    cursor: pointer;
  }

  /* Layout: show nav on >=768px */
  @media (min-width: 768px){
    .nav{ display: inline-flex; }
    .menu-toggle{ display: none; }
  }

  /* Accessibility: reduced motion */
  @media (prefers-reduced-motion: reduce){
    .brand-text{ transition: none; background-position: 50% 0% !important; }
    .nav a, .nav .cta{ transition: none; }
  }

  /* Utility: screen-reader-only */
  .sr-only{
    position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

/**/	
:root { --header-h: 125px; }

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  transition: transform .25s ease;
  /* keep your gradients/backdrop-filter, etc. */
}

.hide-header .site-header{ transform: translateY(-100%); }

/* keep page content below the fixed header */
body{ padding-top: var(--header-h); }