:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#111111;
  --muted:#666666;
  --border:rgba(0,0,0,0.08);
  --btn:#111111;
  --btnText:#ffffff;
  --lx: 0px;
  --ly: 0px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:0.9}

.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 28px;
  background:transparent;
  border-bottom:none;
  z-index:5;
}

.brand{
  font-weight:600;
  letter-spacing:0.8px;
  opacity:0.85;
}

.links a{
  margin-left:22px;
  color:var(--text);
  opacity:0.6;
  transition:opacity .25s ease, transform .25s ease;
}

.links a:hover{
  opacity:1;
  transform:translateY(-1px);
}
.links a.active{color:var(--text)}

.container{
  max-width:900px;
  margin:0 auto;
  padding:42px 22px 80px;
}

/* Apps page cinematic width */
.appsPage .container{
  max-width:1200px;
  padding-left:0;
  padding-right:0;
}

.center{
  min-height: calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 36px 22px 60px;
}


h1{margin:0 0 10px; font-size:40px}
h2{margin:0; font-size:22px}

.tagline{
  margin:26px 0 14px;     /* optical center tuning */
  color:var(--muted);
  font-size:16px;
  letter-spacing:0.4px;
  opacity:.78;
  max-width:520px;
  line-height:1.55;       /* subtle cinematic breathing room */
}

.subtle{color:var(--muted)}
.micro{font-size:13px}

.card{
  margin-top:18px;
  padding:18px 0;
  border:1px solid var(--border);
  border-radius:16px;
  background:#ffffff;
  overflow:hidden;

  transition: transform .35s ease, box-shadow .35s ease;
}

/* Privacy page cinematic alignment */
.privacyCard{
  text-align:center;
}

.privacyCard h2{
  margin-bottom:12px;
}

/* =========================================
   FEATURED APP HERO (Studio Flagship Style)
========================================= */

.featuredApp{
  padding:40px 0 48px;
  background:#ffffff;
  border:1px solid var(--border);
}

.featuredApp .appLogo.large{
  height:420px;
}

.featuredApp .cardHeader{
  gap:18px;
}

.featuredApp .card p{
  margin-top:18px;
}

.card p{
  text-align:center;
  max-width:700px;      /* keeps lines cinematic */
  margin-left:auto;
  margin-right:auto;
  margin-top:14px;
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.card:hover .appLogo{
  transform: scale(1.04);
  filter:
    drop-shadow(0 0 12px rgba(120,160,255,0.35));
  transition: transform .35s ease, filter .35s ease;
}

.cardHeader{
  display:flex;
  flex-direction:column;     /* ← STACK instead of left/right split */
  align-items:center;        /* ← CENTER EVERYTHING */
  justify-content:center;
  gap:10px;
}

.appTitle{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

.appLogo{
  height:48px;
  width:auto;
  opacity:1;
  filter:none;
  mix-blend-mode:normal;
  transition: transform .35s ease;
}

.appLogo.large{
  height:320px;
  margin-top:8px;
}

.pill{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  margin-top:6px;
}

.ctaRow{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:18px;
  flex-wrap:wrap;
}

.button{
  background:#111;
  color:#fff;
}

.button.ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}

.email a{
  font-size:18px;
  font-weight:700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 80px); 
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

body::before{
  display:none;
}

/* Logo scaling — THIS makes it feel edge-to-edge */
.logo{
  width:min(85vw, 1600px);
  max-height:60vh;
  height:auto;
  display:block;

  /* --- Ultra smooth GPU layer --- */
  transform:translate3d(0,0,0) scale(1);
  backface-visibility:hidden;
  will-change:transform;

  /* --- Motion polish --- */
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}

.logoWrap{
  position:relative;
  display:inline-block;
}

/* --- Cinematic idle shimmer --- */

/* --- Depth shadow (under logo) --- */
/*
.logoWrap::before{
  display:none;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-2;

  background:
    radial-gradient(
      60% 40% at calc(50% - var(--lx,0px)*1.4)
      calc(65% - var(--ly,0px)*1.2),
      rgba(0,0,0,0.25)
      transparent 70%
    );

  filter: blur(50px);
  opacity:.55;
}
  */

/* --- Cinematic lens bloom lighting --- */
/*
.logoWrap::after{
  display:none;
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  z-index:-1;

  background:
    radial-gradient(
      380px 220px at
      calc(50% + var(--lx,0px)*2)
      calc(42% + var(--ly,0px)*1.6),
      rgba(255,255,255,0.18),
      rgba(120,160,255,0.12) 35%,
      transparent 70%
    );

  filter: blur(50px);
  opacity:.55;
  mix-blend-mode: screen;
}
*/

@keyframes glowPulse{
  from{
    filter: brightness(1) blur(0px);
  }
  to{
    filter: brightness(1.15) blur(6px);
  }
}

@keyframes logoEnter{
  to{
    opacity:1;
    transform:      
      scale(1);
  }
}

@keyframes logoPulse{
  from{ filter:brightness(1) contrast(1.15); }
  to{ filter:brightness(1.08) contrast(1.18); }
}

.logo:hover{
  transform:translate3d(0,-1px,0) scale(1.015);
}

/* --- Cinematic nav entrance (index page only) --- */

.intro .nav{
  opacity:0;
  transform: translateY(-12px);
  animation: navEnter 0.9s ease-out 1.1s forwards;
}

@keyframes navEnter{
  to{
    opacity:1;
    transform: translateY(0);
  }
}

@keyframes logoShimmer{
  0%{
    transform: translateX(-120%) rotate(6deg);
  }
  100%{
    transform: translateX(120%) rotate(6deg);
  }
}

/* --- PARTICLE CANVAS LAYER FIX --- */
#particles{
  display:none;
}

/* --- Cinematic bottom copyright --- */

.siteFooter{
  position:fixed;
  bottom:18px;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  opacity:0.7;
  pointer-events:none; /* keeps clicks clean */
}

/*

.hero::after{
  display:none;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:
    radial-gradient(
  360px 200px at calc(50% + var(--lx,0px)) calc(42% + var(--ly,0px)),
rgba(120,160,255,0.22),
rgba(120,160,255,0.12) 32%,
rgba(10,14,20,0.55)
transparent 80%
),
    radial-gradient(
      700px 380px at 50% 40%,
      rgba(120,160,255,0.10),
      transparent 70%
    );

  filter: blur(22px);
  opacity:.9;
}

*/

/*
.hero::before{
  display:none;
  content:"";
  position:absolute;
  left:50%;
  top:38%;
  transform:translate(-50%,-50%);
  width:min(90vw,1400px);
  height:360px;
  pointer-events:none;
  z-index:-1;

  background:
    radial-gradient(600px 260px at center,
      rgba(120,160,255,0.28),
      transparent 70%);

  filter:blur(60px);
  opacity:.75;
}
*/  

/* --- Desktop cinematic glow boost --- */
@media (min-width:1200px){
  body::before{
    filter: brightness(1.12) blur(1.5px);
  }
}

/* --- Mobile Hero Logo Boost --- */
@media (max-width:700px){
  .logo{
    max-height:84vh;
    width:92vw;
  }
}

/*
@media (min-width:1000px){

  .hero::before{
    filter: blur(35px);
    opacity:.55;
  }

  .hero::after{
    filter: blur(14px);
  }

}
*/