/* ==========================================================================
   EVERYDAY AI — "Gravity Fields" Design System
   Deep space-time inspired UI. Cards feel pulled toward focal masses,
   type flows around gravity wells, particles orbit key content.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* -- Cosmic palette -- */
  --void-0:#05060f;
  --void-1:#090b18;
  --void-2:#0d1024;
  --void-3:#12162e;
  --void-4:#191d3a;
  --line: rgba(150,160,230,.14);
  --line-soft: rgba(150,160,230,.07);

  --star-100:#f4f3fb;
  --star-300:#c7cae4;
  --star-500:#8b90b8;
  --star-700:#5c6088;

  --mass-violet:#8f7cff;
  --mass-violet-2:#6a55e0;
  --mass-violet-dim: rgba(143,124,255,.16);
  --event-cyan:#52e8d6;
  --event-cyan-dim: rgba(82,232,214,.14);
  --flare-amber:#ffb15e;
  --flare-rose:#ff7d9c;

  --grad-well: radial-gradient(circle at 50% 30%, rgba(143,124,255,.28), rgba(82,232,214,.06) 45%, transparent 70%);
  --grad-panel: linear-gradient(155deg, rgba(25,29,58,.7), rgba(9,11,24,.55));
  --grad-edge: linear-gradient(120deg, rgba(143,124,255,.5), rgba(82,232,214,.25));

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-well: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --ease-grav: cubic-bezier(.16,.84,.32,1);
  --ease-orbit: cubic-bezier(.37,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void-0);
  color:var(--star-300);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* Starfield + curved grid backdrop, fixed behind all content */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(143,124,255,.16), transparent 60%),
    radial-gradient(ellipse 700px 600px at 100% 10%, rgba(82,232,214,.10), transparent 55%),
    radial-gradient(ellipse 800px 700px at 30% 120%, rgba(255,177,94,.06), transparent 55%),
    var(--void-0);
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 15%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 65%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 60%, rgba(255,255,255,.45) 50%, transparent 51%);
  background-repeat:repeat;
  background-size:600px 600px;
  pointer-events:none;
}
main, header, footer{position:relative; z-index:1;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--star-100);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--event-cyan);
  display:inline-flex;
  align-items:center;
  gap:.55em;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--event-cyan);
  box-shadow:0 0 10px 2px var(--event-cyan);
}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}
.wrap-narrow{max-width:800px; margin:0 auto; padding:0 28px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  padding:.9em 1.7em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .45s var(--ease-grav), box-shadow .45s var(--ease-grav), background .3s;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--mass-violet), var(--mass-violet-2));
  color:#fff;
  box-shadow:0 8px 30px -8px rgba(143,124,255,.65);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 14px 40px -8px rgba(143,124,255,.85);}
.btn-ghost{
  background:rgba(255,255,255,.02);
  border-color:var(--line);
  color:var(--star-100);
}
.btn-ghost:hover{border-color:var(--mass-violet); background:var(--mass-violet-dim); transform:translateY(-2px);}
.btn-sm{padding:.6em 1.2em; font-size:.8rem;}

/* ==========================================================================
   NAV — orbital header: logo is the "mass", links curve around it, a glowing
   indicator arcs beneath the active item like a satellite track.
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(16px);
  background:rgba(5,6,15,.72);
  border-bottom:1px solid var(--line-soft);
}
.nav-orbit{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:1240px; margin:0 auto;
  position:relative;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--star-100);
}
.brand-mark{
  width:34px;height:34px;border-radius:50%;
  position:relative;
  background:radial-gradient(circle at 35% 30%, #fff, var(--mass-violet) 40%, var(--mass-violet-2) 75%);
  box-shadow:0 0 22px rgba(143,124,255,.65);
  flex:none;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:-7px;
  border:1px solid rgba(143,124,255,.5);
  border-radius:50%;
  border-top-color:transparent;
  border-left-color:transparent;
  animation:spin 7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.nav-links{
  display:flex; align-items:center; gap:2px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px;
}
.nav-links a{
  padding:.55em 1.15em;
  border-radius:999px;
  font-size:.88rem;
  font-weight:500;
  color:var(--star-500);
  transition:color .3s, background .3s;
  position:relative;
}
.nav-links a:hover{color:var(--star-100);}
.nav-links a.active{color:var(--void-0); background:var(--event-cyan); font-weight:600;}

.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  color:var(--star-100); cursor:pointer; align-items:center; justify-content:center;
}

@media (max-width:900px){
  .nav-links{
    position:fixed; top:74px; left:16px; right:16px;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--void-2); border-radius:20px; padding:14px;
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:all .35s var(--ease-grav);
    max-height:70vh; overflow:auto;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-links a{text-align:center;}
  .nav-toggle{display:flex;}
  .nav-cta .btn{display:none;}
}

/* ==========================================================================
   AD SLOT SYSTEM — supports every standard IAB size individually,
   center-balanced, clearly labeled, styled as an orbital viewport
   rather than a bolted-on box. Each context (leaderboard row / rail /
   in-content / footer) controls its own alignment.
   ========================================================================== */
.ad-slot{
  position:relative;
  margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--grad-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  isolation:isolate;
}
.ad-slot::before{ /* faint orbiting ring decoration */
  content:"";
  position:absolute; z-index:0;
  width:140%; aspect-ratio:1;
  border:1px dashed rgba(143,124,255,.18);
  border-radius:50%;
  animation:spin 40s linear infinite;
}
.ad-slot::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 50% 0%, rgba(143,124,255,.10), transparent 65%);
}
.ad-slot .ad-tag,
.ad-slot .ad-dims{
  display:none;
}
.ad-slot .ad-body{
  position:relative; z-index:1;
  width:100%; height:100%; box-sizing:border-box;
  padding:0;
}
.ad-slot .ad-body .ad-content{
  width:100%; min-height:100%; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px; text-decoration:none; color:inherit;
}
.ad-slot .ad-body .ad-content.ad-vertical{
  flex-direction:column; align-items:center; justify-content:space-between;
  text-align:center;
}
.ad-slot .ad-body .ad-copy{
  display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; text-align:left;
}
.ad-slot .ad-body .ad-content.ad-vertical .ad-copy{ text-align:center; flex:none; }
.ad-slot .ad-body .ad-copy-title{
  font-weight:700; font-size:1rem; color:#fff;
}
.ad-slot .ad-body .ad-copy-text{
  font-size:.92rem; line-height:1.3; color:#fff;
}
.ad-slot .ad-body .ad-action{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:999px; font-weight:700; white-space:nowrap;
  font-size:.78rem; box-shadow:0 8px 20px rgba(0,0,0,.18); flex:none;
}
.ad-slot .ad-body .ad-img{
  width:100%; max-width:120px; height:auto; border-radius:10px; object-fit:cover; flex:none;
}
/* Compact row variant — used where a vertical/stacked ad needs to become
   an image-left row inside a narrower slot (e.g. in-content float ads). */
.ad-slot .ad-body .ad-content.ad-compact{
  flex-direction:row; align-items:center; justify-content:space-between; text-align:left;
}
.ad-slot .ad-body .ad-content.ad-compact .ad-img{
  width:64px; max-width:64px; flex:none;
}
.ad-slot .ad-body .ad-content.ad-compact .ad-copy{ flex:1 1 auto; min-width:0; }
.ad-slot:hover{border-color:rgba(143,124,255,.45);}

/* Photo-forward ad treatments — image-led creative for a more polished,
   professional look than a small icon-plus-text unit. */
.ad-slot .ad-body .ad-content.ad-photo{
  position:relative; padding:0; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start; text-align:left; gap:0;
}
.ad-slot .ad-body .ad-content.ad-photo .ad-img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  max-width:none; border-radius:0; object-fit:cover;
}
.ad-slot .ad-body .ad-content.ad-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(8,8,14,.88) 0%, rgba(8,8,14,.4) 55%, rgba(8,8,14,.03) 100%);
}
.ad-slot .ad-body .ad-content.ad-photo .ad-copy{
  position:relative; z-index:2; padding:16px 18px 4px; flex:none;
}
.ad-slot .ad-body .ad-content.ad-photo .ad-copy-title{ font-size:1.08rem; }
.ad-slot .ad-body .ad-content.ad-photo .ad-action{
  position:relative; z-index:2; margin:10px 18px 16px;
}

/* Leaderboard photo-row — a real photo fills the left edge at full height,
   copy and the CTA sit in the remaining space to the right. */
.ad-slot .ad-body .ad-content.ad-photo-row{
  padding:0; gap:0; align-items:stretch; height:100%;
}
.ad-slot .ad-body .ad-content.ad-photo-row .ad-img{
  width:150px; max-width:150px; height:100%; border-radius:0;
  object-fit:cover; align-self:stretch; flex:none;
}
.ad-slot .ad-body .ad-content.ad-photo-row .ad-copy{
  padding:0 16px; justify-content:center; display:flex; flex-direction:column;
}
.ad-slot .ad-body .ad-content.ad-photo-row .ad-action{
  margin-right:18px;
}
@media (max-width:640px){
  .ad-slot .ad-body .ad-content.ad-photo-row .ad-img{ width:100px; max-width:100px; }
  .ad-slot .ad-body .ad-content.ad-photo-row .ad-copy-text{ display:none; }
}
.ad-slot[data-size="320x50"] .ad-content.ad-photo-row .ad-img{ width:50px; max-width:50px; }
.ad-slot[data-size="320x50"] .ad-content.ad-photo-row .ad-copy{ padding:0 10px; }
.ad-slot[data-size="320x50"] .ad-content.ad-photo-row .ad-copy-text{ display:none; }
.ad-slot[data-size="320x50"] .ad-content.ad-photo-row .ad-copy-title{ font-size:.8rem; }
.ad-slot[data-size="320x50"] .ad-content.ad-photo-row .ad-action{ padding:5px 10px; font-size:.68rem; margin-right:10px; }

/* Standard IAB sizes — width capped to viewport, height fixed to preserve
   the format so creatives of that exact size render correctly. */
.ad-slot[data-size="728x90"]{ width:728px; max-width:100%; height:90px; }
.ad-slot[data-size="970x250"]{ width:970px; max-width:100%; height:250px; }
.ad-slot[data-size="300x250"]{ width:300px; max-width:100%; height:250px; }
.ad-slot[data-size="336x280"]{ width:336px; max-width:100%; height:280px; }
.ad-slot[data-size="160x600"]{ width:160px; max-width:100%; height:600px; }
.ad-slot[data-size="300x600"]{ width:300px; max-width:100%; height:600px; }
.ad-slot[data-size="320x50"]{ width:320px; max-width:100%; height:50px; }
.ad-slot[data-size="250x250"]{ width:250px; max-width:100%; height:250px; }
.ad-slot[data-size="320x100"]{ width:320px; max-width:100%; height:100px; }

/* Wrapper controls placement/alignment context per-section */
.ad-rail{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.ad-center{ display:flex; justify-content:center; margin:48px 0; }
.ad-inline-break{
  display:flex; justify-content:center; align-items:center;
  margin:40px 0; padding:28px 0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.ad-sticky{ position:sticky; top:96px; }
/* In the homepage feed rail, widen the skyscraper to match the trending
   panel underneath it instead of sitting narrower and off-center. */
.ad-rail .ad-slot[data-size="160x600"]{ width:100%; height:420px; }
.ad-float-left{ float:left; margin:6px 28px 20px 0; }
.ad-float-right{ float:right; margin:6px 0 20px 28px; }

@media (max-width:720px){
  .ad-slot[data-size="728x90"], .ad-slot[data-size="970x250"]{ height:100px; }
  .ad-slot[data-size="970x250"]{ height:200px;}
  .ad-float-left,.ad-float-right{ float:none; margin:24px auto; }
}

/* ==========================================================================
   Cards / panels — gravity-well surfaces
   ========================================================================== */
.panel{
  background:var(--grad-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-well);
  position:relative;
}
.magnetic{ transition:transform .5s var(--ease-grav); will-change:transform; }

.tag-chip{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--event-cyan); background:var(--event-cyan-dim);
  border:1px solid rgba(82,232,214,.3); border-radius:999px; padding:.35em .9em;
  display:inline-block;
}

/* ==========================================================================
   FOOTER — gravitational anchor, everything converges downward
   ========================================================================== */
.site-footer{
  margin-top:120px;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, transparent, rgba(143,124,255,.05));
  padding:70px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid var(--line-soft);
}
.footer-grid h4{font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--star-500); margin-bottom:18px;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a{color:var(--star-300); font-size:.9rem; transition:color .25s;}
.footer-grid a:hover{color:var(--event-cyan);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:26px; font-size:.82rem; color:var(--star-700);
}
@media (max-width:800px){
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:34px;}
}

/* ==========================================================================
   PHOTO TREATMENT — real photography, kept in the Gravity Fields voice via a
   cosmic duotone overlay + curved mask rather than a plain rectangle.
   ========================================================================== */
.photo-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  background:var(--void-3);
  isolation:isolate;
}
.photo-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.05) contrast(1.02);
  transition:transform .6s var(--ease-grav);
}
.photo-frame::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(155deg, rgba(15,10,40,.55), rgba(6,8,20,.15) 55%, rgba(82,232,214,.12));
  mix-blend-mode:multiply;
  pointer-events:none;
}
.photo-frame::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
}
a:hover > .photo-frame img, .magnetic:hover .photo-frame img{ transform:scale(1.05); }

/* Reveal-on-scroll utility */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-grav), transform .8s var(--ease-grav); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Section heading pattern reused but re-composed differently per page */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap; }

::selection{ background:var(--mass-violet); color:#fff; }

/* Back to top */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  background:var(--void-3); border:1px solid var(--line); color:var(--star-100);
  font-size:1.1rem; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .4s var(--ease-grav);
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ background:var(--mass-violet); border-color:var(--mass-violet); }

/* Section spacing utility */
.section-gap{ margin-top:110px; }

/* Newsletter / form note */
.form-note{ min-height:1.2em; font-size:.85rem; color:var(--event-cyan); opacity:0; transition:opacity .4s; }
.form-note.show{ opacity:1; }

/* Centered confirmation for demo forms */
.success-modal[hidden]{ display:none; }
.success-modal{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  padding:24px;
}
.success-modal-backdrop{ position:absolute; inset:0; background:rgba(239,240,242,.92); }
.success-modal-card{
  position:relative; width:min(100%,360px); padding:30px 28px 26px; text-align:center;
  overflow:hidden; background:#fff; color:#222; border-radius:2px;
  box-shadow:0 10px 25px rgba(0,0,0,.2); animation:success-modal-in .35s var(--ease-grav);
}
.success-modal-card::before{
  content:""; position:absolute; top:7px; left:50%; width:125px; height:48px; transform:translateX(-50%);
  opacity:.8; background:
    radial-gradient(circle at 8% 55%, #f2a04b 0 2px, transparent 2.5px),
    radial-gradient(circle at 24% 25%, #e87943 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 75%, #f2a04b 0 1px, transparent 1.5px),
    radial-gradient(circle at 66% 18%, #d86b45 0 1px, transparent 1.5px),
    radial-gradient(circle at 90% 52%, #f2a04b 0 2px, transparent 2.5px);
}
.success-modal-close{
  position:absolute; top:10px; right:14px; border:0; background:none; color:#73758a;
  font-size:1.5rem; line-height:1; cursor:pointer;
}
.success-modal-icon{
  position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; margin:0 auto 16px;
  border-radius:50%; background:#f48645; color:#fff; font-size:1.45rem; font-weight:700;
  box-shadow:0 0 0 6px rgba(244,134,69,.12);
}
.success-modal-card h2{ position:relative; margin:0 0 7px; color:#222; font-size:1rem; }
.success-modal-card p{ margin:0 auto 21px; max-width:270px; color:#aaa; font-size:.65rem; line-height:1.45; }
.success-modal-actions{ display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
.success-modal-actions .btn{ min-width:116px; font-size:.58rem; padding:.65em .8em; border-radius:1px; }
@keyframes success-modal-in{ from{ opacity:0; transform:translateY(12px) scale(.97); } to{ opacity:1; transform:none; } }

/* Accordion / FAQ — shared across Contact and Disclaimer pages */
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{ overflow:hidden; }
.faq-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; color:var(--star-100); font-family:var(--font-display);
  font-size:1rem; padding:20px 24px; cursor:pointer; text-align:left;
}
.faq-icon{ color:var(--event-cyan); font-size:1.2rem; transition:transform .3s; flex:none; margin-left:16px; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-grav); padding:0 24px; }
.faq-panel p{ color:var(--star-500); font-size:.9rem; padding-bottom:20px; margin:0; }

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--void-0);}
::-webkit-scrollbar-thumb{background:var(--void-4); border-radius:10px;}