:root{
 /* Peace Life – Calm Luxury (Warm + Brighter) */
 --bg:#0E2430; /* Deep Ocean Navy (warm base) */
 --bg-2:#0B1B24; /* Deep shadow */
 --surface:#17394A; /* Midnight Blue (cards/sections) */
 --surface-2:#102C3A; /* Inputs / subtle panels */
 --muted:#9FB2BE; /* Warm Slate Gray */
 --gold:#E1C98A; /* Warm Gold */
 --champagne:#F1DEB0; /* Highlight */
 --ink:#F7F4EE; /* Soft Bone White */
 --ink-dim:rgba(247,244,238,.88);
 --focus:#BFE6D2;

 --radius:20px;
 --shadow:0 16px 44px rgba(0,0,0,.40);
 --shadow-soft:0 12px 28px rgba(0,0,0,.28);
 --border:1px solid rgba(255,255,255,.10);
 --border-soft:1px solid rgba(255,255,255,.07);
}

*{box-sizing:border-box}
html,body{
 margin:0;padding:0;
 background:
 radial-gradient(1200px 800px at 20% -10%, rgba(241,222,176,.10), transparent 55%),
 radial-gradient(1100px 760px at 95% 10%, rgba(225,201,138,.12), transparent 52%),
 radial-gradient(900px 620px at 70% 110%, rgba(191,230,210,.12), transparent 55%),
 linear-gradient(180deg, var(--bg), var(--bg-2) 70%, #07131a);
 color:var(--ink);
 font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
 line-height:1.6
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{width:min(1120px, 92%);margin:0 auto}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:10px 12px;border-radius:10px;z-index:1000}


/* Logo  -  soft glow, no hard background */
.logo{
 width:56px;
 height:56px;
 background:transparent;
 border:none;
 padding:0;
 object-fit:contain;
 display:block;
 filter:
 drop-shadow(0 0 14px rgba(225,201,138,.28))
 drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
@media (min-width:980px){
 .logo{width:64px;height:64px}
}

/* Topbar */
.topbar{
 position:sticky;top:0;z-index:50;
 background:linear-gradient(180deg, rgba(14,36,48,.86), rgba(14,36,48,.62));
 backdrop-filter:blur(12px);
 border-bottom:1px solid rgba(255,255,255,.10);
 box-shadow:0 12px 26px rgba(0,0,0,.24);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{font-weight:900;letter-spacing:.2px}
.nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:flex-end}
.nav a{color:var(--ink-dim);font-weight:750;font-size:.95rem}
.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px}



@media (min-width:980px){
 
}

/* Buttons */
.btn{
 display:inline-flex;align-items:center;gap:.55rem;justify-content:center;
 border:none;border-radius:999px;padding:.9rem 1.15rem;
 font-weight:900;letter-spacing:.18px;cursor:pointer;
 transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
 text-decoration:none
}
.btn:focus{outline:3px solid var(--focus);outline-offset:3px}
.btn-primary{
 background:linear-gradient(180deg, var(--champagne), var(--gold));
 color:#2b230a;
 box-shadow:0 16px 30px rgba(225,201,138,.22), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.btn-primary:hover{transform:translateY(-1px);filter:saturate(1.05);text-decoration:none}
.btn-secondary{
 background:linear-gradient(180deg, rgba(23,57,74,.70), rgba(16,44,58,.60));
 color:var(--ink);
 border:1px solid rgba(225,201,138,.28);
 box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.btn-secondary:hover{transform:translateY(-1px);text-decoration:none}

/* Hero */
.hero{
 position:relative;min-height:74vh;display:grid;place-items:center;text-align:center;isolation:isolate;overflow:hidden;
 border-bottom:1px solid rgba(255,255,255,.08);
}
.hero .hero-img{
 position:absolute;inset:0;
 background-image:url('https://images.unsplash.com/photo-1473448912268-2022ce9509d8?q=80&w=2400&auto=format&fit=crop');
 background-position:center;background-size:cover;background-repeat:no-repeat;
 z-index:-3;transform:scale(1.05);
 filter:saturate(.95) contrast(1.08);
}
.hero::before{
 content:"";position:absolute;inset:-1px;
 background:
 radial-gradient(980px 520px at 18% 22%, rgba(241,222,176,.20), transparent 62%),
 radial-gradient(980px 520px at 82% 30%, rgba(225,201,138,.18), transparent 58%),
 radial-gradient(980px 520px at 50% 95%, rgba(191,230,210,.16), transparent 62%);
 z-index:-2;
}
.hero::after{
 content:"";position:absolute;inset:0;
 background:linear-gradient(to bottom, rgba(7,19,26,.62), rgba(7,19,26,.28) 44%, rgba(7,19,26,.92) 92%);
 z-index:-1
}
.badge{
 display:inline-block;font-size:.92rem;
 background:linear-gradient(180deg, rgba(241,222,176,.16), rgba(225,201,138,.10));
 color:rgba(247,244,238,.92);
 padding:.28rem .66rem;border-radius:999px;
 border:1px solid rgba(255,255,255,.14);
 box-shadow:0 10px 22px rgba(0,0,0,.18);
}
h1{
 font-family:"Playfair Display",serif;font-weight:700;letter-spacing:.2px;
 font-size:clamp(2.2rem, 3.6vw + 1rem, 3.9rem);
 margin:0 0 .6rem;text-shadow:0 10px 30px rgba(0,0,0,.42);
}
.lead{
 font-size:clamp(1.05rem, .6vw + .9rem, 1.26rem);
 color:rgba(247,244,238,.88);
 margin:0 auto 1.2rem;max-width:64ch
}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

section{
 padding:66px 0;
 border-top:1px solid rgba(255,255,255,.06);
 background:
 radial-gradient(900px 520px at 10% 10%, rgba(241,222,176,.06), transparent 55%),
 radial-gradient(900px 520px at 95% 15%, rgba(225,201,138,.06), transparent 55%),
 radial-gradient(900px 520px at 60% 120%, rgba(191,230,210,.06), transparent 55%);
}
h2{font-family:"Playfair Display",serif;font-size:clamp(1.65rem, .9vw + 1.2rem, 2.25rem);margin:0 0 .6rem}
h3{margin:.1rem 0 .4rem}
p{margin:0 0 1rem}
.grid{display:grid;gap:24px}
@media (min-width:920px){.grid.two{grid-template-columns:1.15fr 1fr}}
@media (min-width:920px){.grid.three{grid-template-columns:repeat(3,1fr)}}

/* Cards */
.card{
 position:relative;
 background:
 radial-gradient(640px 280px at 18% 0%, rgba(241,222,176,.09), transparent 62%),
 radial-gradient(560px 260px at 90% 10%, rgba(225,201,138,.07), transparent 62%),
 linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
 border:1px solid rgba(255,255,255,.11);
 border-radius:var(--radius);
 padding:24px;
 box-shadow:var(--shadow);
 overflow:hidden;
}
.card::before{
 content:"";
 position:absolute;left:0;top:0;right:0;height:3px;
 background:linear-gradient(90deg, rgba(241,222,176,.92), rgba(225,201,138,.92), rgba(191,230,210,.80));
 opacity:.95;
}
.card::after{
 content:"";
 position:absolute;inset:0;
 background:linear-gradient(90deg, rgba(241,222,176,.10), transparent 30%, rgba(191,230,210,.10));
 opacity:.16;pointer-events:none;
}
.card > *{position:relative;z-index:1}

.list{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.quote{font-style:italic;border-left:3px solid rgba(225,201,138,.70);padding-left:14px;color:rgba(247,244,238,.90)}
.kicker{color:rgba(159,178,190,.96);font-weight:850;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}

/* Feature boxes */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:10px}
.feature{
 background:
 radial-gradient(320px 160px at 20% 20%, rgba(241,222,176,.11), transparent 60%),
 radial-gradient(320px 160px at 80% 10%, rgba(191,230,210,.10), transparent 60%),
 linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
 border:1px solid rgba(255,255,255,.10);
 border-radius:16px;padding:16px;
 box-shadow:var(--shadow-soft);
}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;justify-content:center}
.pill{
 display:inline-flex;align-items:center;gap:.45rem;
 padding:.38rem .7rem;border-radius:999px;
 border:1px solid rgba(255,255,255,.14);
 background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
 color:rgba(247,244,238,.88);
 font-weight:780;font-size:.9rem
}

hr.sep{border:none;border-top:1px solid rgba(255,255,255,.12);margin:18px 0}

/* App screenshots */
.screens{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:14px}
.screen{
 border-radius:18px;overflow:hidden;
 border:1px solid rgba(255,255,255,.12);
 background:rgba(16,44,58,.45);
 box-shadow:var(--shadow-soft);
}
.screen img{width:100%;height:auto;display:block}
.screen .cap{padding:12px 12px 14px;color:rgba(247,244,238,.86);font-weight:700;font-size:.92rem}

/* Forms */
.form{
 background:
 radial-gradient(520px 240px at 20% 0%, rgba(241,222,176,.12), transparent 62%),
 radial-gradient(520px 240px at 90% 10%, rgba(225,201,138,.10), transparent 62%),
 linear-gradient(180deg, rgba(23,57,74,.62), rgba(16,44,58,.40));
 border:1px solid rgba(255,255,255,.12);
 border-radius:var(--radius);
 padding:24px;
 box-shadow:var(--shadow);
}
.row{display:grid;gap:16px}
@media (min-width:720px){.row.two{grid-template-columns:1fr 1fr}}
label{display:block;font-weight:850;margin:6px 0 6px}
input,textarea,select{
 width:100%;padding:12px 14px;
 background:rgba(10,27,36,.78);
 color:var(--ink);
 border:1px solid rgba(255,255,255,.16);
 border-radius:14px;
 outline:none;
 transition:border-color .15s ease, box-shadow .15s ease
}
input::placeholder,textarea::placeholder{color:rgba(247,244,238,.62)}
input:focus,textarea:focus,select:focus{border-color:var(--champagne);box-shadow:0 0 0 3px rgba(241,222,176,.22)}
.help{color:rgba(247,244,238,.70);font-size:.9rem;margin-top:2px}

/* Footer */
.footer{
 padding:52px 0 66px;
 color:rgba(247,244,238,.78);
 text-align:center;
 border-top:1px solid rgba(255,255,255,.10);
 background:
 radial-gradient(900px 500px at 10% 40%, rgba(241,222,176,.08), transparent 60%),
 radial-gradient(900px 500px at 90% 30%, rgba(191,230,210,.06), transparent 60%),
 linear-gradient(180deg, rgba(7,19,26,.18), rgba(7,19,26,.80));
}
.footer a{color:var(--gold)}
.footer-grid{display:grid;gap:18px;justify-items:center}
@media (min-width:920px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr;align-items:start;justify-items:start;text-align:left}}
.small{font-size:.92rem;color:rgba(247,244,238,.78)}

/* Hero visual (app screenshot) */
.hero-inner{padding:60px 0 74px}
.hero-grid{display:grid;gap:28px;align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:1.1fr .9fr;text-align:left}}
.hero-copy{text-align:center}
@media (min-width:980px){.hero-copy{text-align:left}}
.hero-visual{
 width:min(360px, 82vw);
 margin:0 auto;
 border-radius:26px;
 border:1px solid rgba(255,255,255,.14);
 background:rgba(16,44,58,.25);
 box-shadow:0 26px 70px rgba(0,0,0,.55);
 overflow:hidden;
 position:relative;
}
.hero-visual::after{
 content:"";
 position:absolute;inset:-40px;
 background:radial-gradient(320px 220px at 30% 20%, rgba(241,222,176,.26), transparent 65%),
 radial-gradient(320px 220px at 70% 60%, rgba(191,230,210,.18), transparent 65%);
 pointer-events:none;
 opacity:.55;
}
.hero-visual img{width:100%;height:auto;display:block;position:relative;z-index:1}


/* Homepage hero video */
.hero-video{
 width:100%;
 height:auto;
 display:block;
 object-fit:cover;
 background:rgba(0,0,0,.20);
}

/* Entrance animation on page load (respects reduced motion) */
.hero-visual{
 opacity:0;
 transform:translateY(14px) scale(.985);
 filter:blur(2px);
 transition:opacity .9s ease, transform .9s ease, filter .9s ease;
 will-change:opacity, transform, filter;
}
body.is-ready .hero-visual{
 opacity:1;
 transform:translateY(0) scale(1);
 filter:blur(0);
}

/* Subtle interactive float */
@keyframes gentleFloat{
 0%{transform:translateY(0)}
 50%{transform:translateY(-6px)}
 100%{transform:translateY(0)}
}
body.is-ready .hero-visual{
 animation:gentleFloat 6.5s ease-in-out 1.0s infinite;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
 .hero-visual, body.is-ready .hero-visual{
 transition:none;
 animation:none;
 opacity:1;
 transform:none;
 filter:none
 }
}


/* Premium hover tilt (desktop only) */
@media (hover:hover) and (pointer:fine){
 .hero-visual{cursor:pointer}
 .hero-visual.is-tilting{
 transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
 }
}

/* Modal */
.modal{
 position:fixed;inset:0;
 display:none;
 align-items:center;justify-content:center;
 padding:18px;
 z-index:1000;
}
.modal.is-open{display:flex}
.modal-backdrop{
 position:absolute;inset:0;
 background:rgba(7,19,26,.72);
 backdrop-filter:blur(10px);
}
.modal-card{
 position:relative;
 width:min(980px, 94vw);
 border-radius:24px;
 border:1px solid rgba(255,255,255,.14);
 background:linear-gradient(180deg, rgba(23,57,74,.92), rgba(16,44,58,.82));
 box-shadow:0 40px 110px rgba(0,0,0,.65);
 overflow:hidden;
 transform:translateY(14px) scale(.985);
 opacity:0;
 transition:transform .25s ease, opacity .25s ease;
}
.modal.is-open .modal-card{
 transform:translateY(0) scale(1);
 opacity:1;
}
.modal-close{
 position:absolute;right:12px;top:10px;
 width:44px;height:44px;border-radius:999px;
 border:1px solid rgba(255,255,255,.14);
 background:rgba(10,27,36,.55);
 color:var(--ink);
 font-size:28px;line-height:42px;
 cursor:pointer;
}
.modal-close:hover{filter:brightness(1.06)}
.modal-video{
 width:100%;
 height:auto;
 display:block;
 background:#000;
}


/* Homepage YouTube Upsell */
.video-section{padding-top:24px}
.video-wrap{
 position:relative;
 width:100%;
 padding-top:56.25%; /* 16:9 */
 border-radius:18px;
 overflow:hidden;
 box-shadow:0 22px 60px rgba(0,0,0,.55);
 border:1px solid rgba(255,255,255,.14);
 background:#000;
}
.video-wrap iframe{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
}


/* Video section layout refinement */
.video-grid{
 display:grid;
 gap:28px;
}

.video-copy{
 align-self:center;
}

@media (min-width: 980px){
 .video-grid{
 grid-template-columns: 1.1fr 0.9fr; /* make video slightly smaller */
 align-items:center;
 }
 .video-wrap{
 padding-top:52%; /* slightly shorter than 16:9 to reduce vertical bulk */
 }
}

.video-section{
 padding-top:28px;
 padding-bottom:28px;
}


/* HERO VIDEO  -  desktop size refinement */
@media (min-width: 980px){
 .hero-grid{
 grid-template-columns: 1.15fr 0.85fr; /* text heavier, video slightly smaller */
 align-items:center;
 }

 .hero-visual{
 max-width:320px; /* reduce visual dominance */
 margin-left:auto;
 }

 .hero-video{
 border-radius:22px;
 }
}


/* Hero brand emphasis */
.brand-gold{
 color: var(--gold);
 text-shadow: 0 2px 12px rgba(225,201,138,.35);
}

/* Hero subtitle refinement */
.hero-subtitle{
 display:inline-block;
 font-size: 0.78em;
 font-weight: 600;
 color: rgba(247,244,238,.92);
}


/* Larger YouTube upsell section */
@media (min-width: 980px){
 .video-grid{
 grid-template-columns: 0.9fr 1.1fr; /* video now larger than text */
 gap:36px;
 }

 .video-wrap{
 padding-top:60%; /* taller video for more presence */
 }
}

.video-section{
 padding-top:48px;
 padding-bottom:48px;
}


/* Fix gold-on-gold CTA visibility */
.video-section .btn-primary{
 color:#2b230a; /* dark readable text */
 text-shadow:none;
}

.video-section .btn-primary:hover{
 filter:brightness(1.05);
}

.video-section h2,
.video-section .kicker{
 color:var(--ink);
}


/* Mobile header cleanup */
@media (max-width: 760px){
 .topbar-inner{
 flex-direction:column;
 align-items:flex-start;
 justify-content:flex-start;
 gap:10px;
 padding:12px 0;
 }
 .brand-name{
 font-size:1.02rem;
 line-height:1.15;
 }
 .brand .kicker{
 font-size:.78rem;
 line-height:1.2;
 margin-top:2px;
 }
 .nav{
 width:100%;
 justify-content:flex-start;
 gap:10px;
 }
 .nav a{
 font-size:.92rem;
 }
 .nav .btn{
 width:100%;
 justify-content:center;
 padding:12px 14px;
 margin-top:4px;
 }
}

/* Lighten hero background image on mobile */
@media (max-width: 760px){
 .hero-img{
 filter:saturate(.98) contrast(1.02) brightness(1.14);
 background-position: center top;
 }
 .hero::after{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 background:
 linear-gradient(180deg, rgba(241,222,176,.34), rgba(14,36,48,.00) 42%),
 linear-gradient(0deg, rgba(14,36,48,.22), rgba(14,36,48,.00) 40%);
 pointer-events:none;
 }
}


/* Mobile CTA wrap */
@media (max-width: 520px){
 .cta-row{
 flex-direction:column;
 align-items:stretch;
 }
 .cta-row .btn{
 width:100%;
 text-align:center;
 }
}


/* Mobile hero text contrast fix */
@media (max-width: 760px){
 .hero h1,
 .hero .lead{
 color:#0e2430; /* deep blue for contrast on light sky */
 text-shadow: 0 2px 8px rgba(255,255,255,.55);
 }

 .hero .brand-gold{
 color:#b88b2e; /* warmer gold that contrasts on light background */
 text-shadow: 0 2px 10px rgba(255,255,255,.6);
 }
}


/* Mobile hero subtitle + kicker contrast */
@media (max-width: 760px){
 .hero-subtitle{
 color:#0e2430;
 text-shadow: 0 2px 8px rgba(255,255,255,.55);
 }
 .hero .kicker{
 color:#0e2430;
 background:rgba(255,255,255,.72);
 border:1px solid rgba(14,36,48,.14);
 box-shadow:0 10px 26px rgba(0,0,0,.08);
 }
 .hero .kicker span{
 color:#0e2430;
 }
}


/* Mobile pills contrast */
@media (max-width: 760px){
 .pills{gap:10px}
 .pill{
 color:#0e2430;
 background:rgba(255,255,255,.78);
 border:1px solid rgba(14,36,48,.14);
 box-shadow:0 10px 22px rgba(0,0,0,.08);
 }
}


/* Hide hero kicker on mobile */
@media (max-width: 760px){
 .hero .kicker{
 display:none;
 }
}


/* Hide header kicker on mobile */
@media (max-width: 760px){
 .topbar .brand .kicker{
 display:none !important;
 }
}


/* Mobile: keep header kicker, remove duplicate hero badge */
@media (max-width: 760px){
 .topbar .brand .kicker{display:block !important;}
 .hero .badge{display:none !important;}
}


/* --- App launch countdown + free trial hook --- */
.launch-card{
 margin:18px 0 0;
 padding:16px 16px 14px;
 border-radius:16px;
 border:1px solid rgba(255,255,255,.10);
 background:linear-gradient(180deg, rgba(217,194,122,.10), rgba(138,198,163,.06));
 box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.launch-card-wide{background:linear-gradient(180deg, rgba(217,194,122,.09), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10)}
.launch-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.badge.badge-gold{background:rgba(217,194,122,.16);border:1px solid rgba(217,194,122,.34);color:#f3e8c3}
.launch-date{font-size:.92rem;color:var(--ink-dim)}
.launch-hook{margin:10px 0 12px;color:var(--ink)}
.launch-note{margin-top:10px}
.launch-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.launch-deadline{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.launch-deadline-copy{color:var(--ink-dim);font-size:.95rem}

.countdown{
 display:grid;
 grid-template-columns:repeat(4, minmax(0,1fr));
 gap:10px;
}
.countdown-xl{margin-top:14px;gap:12px}
.cd-item{
 text-align:center;
 padding:12px 10px;
 border-radius:14px;
 background:rgba(0,0,0,.22);
 border:1px solid rgba(255,255,255,.10);
}
.cd-num{
 display:block;
 font-size:1.55rem;
 font-weight:900;
 letter-spacing:.5px;
 line-height:1.05;
 font-variant-numeric: tabular-nums;
}
.cd-label{
 display:block;
 font-size:.78rem;
 color:var(--muted);
 margin-top:4px;
 text-transform:uppercase;
 letter-spacing:.12em;
}

.countdown-mini{
 display:flex;
 gap:6px;
 align-items:baseline;
 padding:8px 10px;
 border-radius:999px;
 background:rgba(0,0,0,.18);
 border:1px solid rgba(255,255,255,.10);
}
.cd-mini-num{
 font-weight:900;
 font-variant-numeric: tabular-nums;
}
.cd-mini-label{color:var(--muted);font-size:.9rem;margin-right:6px}
.launch-deadline-xl{margin-top:16px}

@media (max-width: 520px){
 .countdown{grid-template-columns:repeat(2, minmax(0,1fr))}
 .launch-top{justify-content:flex-start}
}



/* QINTY PARTNERSHIP SECTION */
.qinty-section{
 padding: 72px 20px;
 background: linear-gradient(135deg, rgba(9,28,24,0.92), rgba(9,28,24,0.82));
 border-top: 1px solid rgba(255,255,255,0.08);
 border-bottom: 1px solid rgba(255,255,255,0.08);
}
.qinty-inner{
 max-width: 980px;
 margin: 0 auto;
 text-align: center;
}
.qinty-inner h2{
 font-size: clamp(1.6rem, 2.6vw, 2.2rem);
 margin: 0 0 14px;
}
.qinty-inner p{
 max-width: 860px;
 margin: 0 auto 14px;
 line-height: 1.75;
 opacity: 0.96;
}
.qinty-link{
 display: inline-block;
 margin-top: 18px;
 padding: 12px 22px;
 border-radius: 999px;
 background: rgba(242,214,140,1);
 color: #0b1220;
 font-weight: 700;
 text-decoration: none;
 box-shadow: 0 12px 26px rgba(0,0,0,0.28);
 transform: translateY(0);
 transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.qinty-link:hover{
 transform: translateY(-2px);
 box-shadow: 0 18px 34px rgba(0,0,0,0.34);
 opacity: 0.98;
}



/* MOBILE FIX: launch section text color */
@media (max-width: 768px) {
  .launch-section,
  .launch-section * {
    color: #0b1220 !important;
  }
}



/* MOBILE LEGIBILITY FIX: Launch / Countdown section */
@media (max-width: 768px) {
  .launch-section {
    background: #ffffff !important;
  }

  .launch-section h1,
  .launch-section h2,
  .launch-section h3,
  .launch-section p,
  .launch-section span,
  .launch-section div,
  .launch-section li,
  .launch-section small {
    color: #0b1220 !important;
  }

  .launch-section .cd-num,
  .launch-section .cd-label,
  .launch-section .cd-mini-num {
    color: #0b1220 !important;
  }

  .launch-section .btn {
    color: #0b1220 !important;
  }
}


/* MOBILE LEGIBILITY FIX: Launch card (homepage) */
@media (max-width: 768px) {
  .launch-card {
    background: #ffffff !important;
  }
  .launch-card,
  .launch-card * {
    color: #0b1220 !important;
  }
}


/* MOBILE FIX: center checkbox label text in forms */
@media (max-width: 768px) {
  .form-checkbox,
  .checkbox,
  .form-consent,
  .form-consent label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
  }

  .form-consent input[type="checkbox"] {
    margin: 0 !important;
  }

  .form-consent label span,
  .form-consent label {
    max-width: 90%;
  }
}


/* MOBILE TWEAK: translucent launch containers while keeping dark text */
@media (max-width: 768px) {
  .launch-card,
  .launch-section {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: saturate(1.05) blur(2px);
  }
}


/* MOBILE FIX: keep consent checkbox text centered and not pushed off-screen */
@media (max-width: 768px) {
  /* targets the consent label on the free trial form */
  form[name="app-free-trial"] label.small[style*="display:flex"]{
    width: 100%;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 10px;
  }
  form[name="app-free-trial"] label.small[style*="display:flex"] span{
    display: inline-block;
    max-width: 88%;
  }
}


/* LAUNCH MODAL */
.launch-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.launch-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 32, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}
.launch-modal-card{
  position: relative;
  width: min(92vw, 760px);
  max-height: 90vh;
  overflow: auto;
  background: rgba(255,255,255,0.86);
  border-radius: 18px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.45);
  transform: translateY(28px) scale(0.98);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.launch-modal.open{
  pointer-events: auto;
}
.launch-modal.open .launch-modal-backdrop{
  opacity: 1;
}
.launch-modal.open .launch-modal-card{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.launch-modal-close{
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
  color: #0b1220;
}
@media (max-width: 768px){
  .launch-modal-card{
    width: 94vw;
    border-radius: 16px;
  }
}


/* MOBILE FIX: hero copy text should be dark and spacing should prevent overlap */
@media (max-width: 768px) {
  .hero-copy,
  .hero-copy * {
    color: #0b1220 !important;
  }

  .hero-copy .pill,
  .hero-copy .pill-row .pill {
    background: rgba(255,255,255,0.75) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    color: #0b1220 !important;
  }

  .hero-copy .pill-row {
    justify-content: center !important;
    margin-bottom: 16px !important;
  }

  .hero-visual {
    margin-top: 14px !important;
  }
}


/* Premium launch modal content */
.launch-title{
  margin: 14px 0 10px;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  color: #0b1220;
}
.launch-hook{
  margin: 0 0 14px;
  line-height: 1.6;
}
.launch-news{
  display: grid;
  gap: 14px;
  margin: 10px 0 14px;
}
@media (min-width: 820px){
  .launch-news{ grid-template-columns: 1.1fr .9fr; align-items: start; }
}
.launch-bullets{
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.55;
}
.launch-bullets li{ margin: 6px 0; }


/* Launch modal legibility */
.launch-modal-card,
.launch-modal-card *{
  color: #0b1220 !important;
}
.launch-modal-card a.btn.btn-primary,
.launch-modal-card a.btn.btn-secondary{
  color: inherit !important;
}


/* Launch modal close button visibility */
.launch-modal-close{
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.launch-modal-close:hover{
  transform: translateY(-1px);
}


/* After closing launch modal, optionally dismiss the homepage hero video */
body.dismiss-hero-video .hero-visual,
body.dismiss-hero-video video.hero-video{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Decorative background video (mobile only) */
.mobile-bg-vid{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(1.02);
  filter: contrast(1.02) saturate(1.05);
}

@media (max-width: 768px){
  .mobile-bg-vid{
    opacity: 0.22;
    animation: plBgFade .9s ease forwards;
  }

  @keyframes plBgFade{
    from{ opacity: 0; }
    to{ opacity: 0.22; }
  }

  /* keep content above the background video */
  header, main, footer, .launch-modal{
    position: relative;
    z-index: 2;
  }
}
@media (min-width: 769px){
  .mobile-bg-vid{ display:none; }
}
}


/* Mobile hero legibility (dark text on light backgrounds) */
@media (max-width: 768px){
  .hero-copy, .hero-copy *{
    color:#0b1220 !important;
  }
  .hero-copy .pill, .hero-copy .pill-row .pill{
    color:#0b1220 !important;
  }
}


/* Mobile spacing: prevent hero video from crowding content above */
@media (max-width: 768px){
  .hero-visual{ margin-top: 18px !important; }
  .hero-inner{ padding: 44px 0 58px !important; }
}


/* Desktop hero visual sizing: keep it small and tucked under the pills */
@media (min-width: 980px){
  .hero-visual{
    width: min(320px, 30vw) !important;
    margin-top: 18px !important;
    justify-self: end;
  }
}


/* Extra safety: popup text contrast */
.launch-modal .launch-card .small,
.launch-modal .launch-card .launch-note,
.launch-modal .launch-card .cd-label{
  color:#0b1220 !important;
  opacity: 1 !important;
}


.launch-modal-card{ position: relative; }
.launch-modal-close{ z-index: 99999 !important; }


/* Desktop: dark glass container behind launch details */
@media (min-width: 769px){
  .launch-modal-card .launch-card{
    background: rgba(10, 18, 32, 0.58) !important;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 30px 90px rgba(0,0,0,0.45);
    border-radius: 16px;
    padding: 18px 18px 16px;
  }
  .launch-modal-card .launch-card,
  .launch-modal-card .launch-card *{
    color: rgba(255,255,255,0.94) !important;
  }
  .launch-modal-card .launch-card .badge,
  .launch-modal-card .launch-card .badge-gold{
    color: #0b1220 !important;
    background: rgba(255,255,255,0.92) !important;
  }
  .launch-modal-card .launch-card .btn{
    background: rgba(255,255,255,0.92) !important;
    color: #0b1220 !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
  }
}


/* Mobile: readable translucent panel behind hero copy + bubbles */
@media (max-width: 768px){
  .hero-copy{
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 14px 14px 12px;
    backdrop-filter: blur(6px) saturate(1.05);
  }
}


/* Desktop: small decorative video tucked to the right of Structured Integration section */
.si-media{ display:none; }
@media (min-width: 980px){
  .si-media{
    display:block;
    position:absolute;
    top: 32px;
    right: 18px;
    width: 300px;
    height: 190px;
    border-radius: 16px;
    overflow:hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.10);
  }
  .si-media-vid{
    width:100%;
    height:100%;
    object-fit: cover;
    opacity: 0.92;
  }
  /* ensure the section can host absolute content */
  section{ position: relative; }
}
@media (max-width: 979px){
  .si-media{ display:none; }
}


/* Desktop-only small looping video to the right of hero copy */
.hero-visual{ position: relative; overflow: hidden; }
.hero-visual-vid{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
@media (min-width: 980px){
  .hero-visual-vid{ display:block; }
}
@media (max-width: 979px){
  .hero-visual-vid{ display:none; }
}


/* FIX: force hero to be 2-column on desktop so video stays to the right */
@media (min-width: 980px){
  .hero-grid{
    display: grid !important;
    grid-template-columns: 1.25fr 0.75fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
  .hero-copy{
    grid-column: 1 / 2 !important;
  }
  .hero-visual{
    grid-column: 2 / 3 !important;
    align-self: start !important;
    justify-self: end !important;
    width: min(340px, 32vw) !important;
    margin-top: 8px !important;
  }
}


/* Desktop: keep achievement pills on the right above the hero video */
@media (min-width: 980px){
  .hero-visual{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 14px !important;
  }
  .hero-visual .pills{
    justify-content: flex-end !important;
    width: 100%;
  }
  .hero-visual .pill{
    white-space: nowrap;
  }
}
@media (max-width: 979px){
  .hero-visual .pills{
    justify-content: center !important;
  }
}


/* Desktop: keep hero copy left and achievement+video stack right (side-by-side) */
@media (min-width: 980px){
  .hero-grid{
    display: grid !important;
    grid-template-columns: 1.35fr 0.65fr !important;
    gap: 34px !important;
    align-items: start !important;
  }
  .hero-copy{ 
    grid-column: 1 / 2 !important; 
    min-width: 0;
  }
  .hero-visual{ 
    grid-column: 2 / 3 !important; 
    align-self: start !important;
    justify-self: end !important;
    margin-top: 0 !important;
  }
}


@media (min-width: 980px){
  .hero-visual{
    width: min(360px, 34vw) !important;
  }
}


@media (min-width: 980px){
  .hero-inner{
    display: block !important;
  }
}


/* FIX: treat typical laptops as desktop too (keep right column visible sooner) */
@media (min-width: 860px){
  .hero-grid{
    display: grid !important;
    grid-template-columns: 1.35fr 0.65fr !important;
    gap: 34px !important;
    align-items: start !important;
    text-align: left !important;
  }
  .hero-copy{
    text-align: left !important;
    grid-column: 1 / 2 !important;
  }
  .hero-visual{
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
    width: min(360px, 34vw) !important;
  }
}


/* HARD FIX: keep right stack truly side-by-side with left copy (no wrapping) */
@media (min-width: 860px){
  .hero-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    column-gap: 32px !important;
    row-gap: 0 !important;
    align-items: start !important;
  }
  .hero-copy{
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  .hero-visual{
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 340px !important;
    justify-self: end !important;
    align-self: start !important;
  }

  /* if any child is forcing full-row spans, override */
  .hero-grid > *{
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .hero-grid > .hero-copy{ grid-column: 1 / 2 !important; grid-row: 1 !important; }
  .hero-grid > .hero-visual{ grid-column: 2 / 3 !important; grid-row: 1 !important; }

  /* video sizing inside right column */
  .hero-visual .hero-visual-vid{
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }
}
@media (min-width: 1100px){
  .hero-grid{ grid-template-columns: minmax(0,1fr) 380px !important; }
  .hero-visual{ width: 380px !important; }
  .hero-visual .hero-visual-vid{ height: 220px !important; }
}