/* ==============================================
   BETTERDAY — Global Stylesheet v2
   Clean · Minimal · Modern · Cross-browser
   ============================================== */

/* --- RESET --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;background:#fff;color:#0a0a0a;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* --- TOKENS --- */
:root{
  --blue-50:#eff6ff;
  --blue-100:#dbeafe;
  --blue-200:#bfdbfe;
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --blue-700:#1d4ed8;
  --blue-900:#1e3a8a;
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-400:#9ca3af;
  --gray-500:#6b7280;
  --gray-700:#374151;
  --gray-900:#111827;
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;
  --sh-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 4px 16px rgba(0,0,0,.07);
  --sh-lg:0 12px 40px rgba(0,0,0,.10);
  --sh-xl:0 24px 64px rgba(0,0,0,.12);
  --nav-hover-bg:rgba(37,99,235,.07);
  --nav-hover-text:var(--blue-600);
}

/* --- UTILITY --- */
.container{max-width:1140px;margin:0 auto;padding:0 24px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}

/* --- GRADIENT TEXT --- */
.grad{
  background:-webkit-linear-gradient(135deg,#2563eb,#0ea5e9);
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ==============================================
   NAV
   ============================================== */
/* --- Apple Liquid Glass Nav --- */
.nav{
  position:fixed;top:16px;left:16px;right:16px;z-index:200;
  width:calc(100% - 32px);max-width:1100px;margin:0 auto;
  /* Liquid glass: translucent + blurred + saturated like iOS/macOS */
  background:rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(24px) saturate(190%) brightness(1.02);
  backdrop-filter:blur(24px) saturate(190%) brightness(1.02);
  /* Thin specular border around floating pill */
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 8px 32px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
  border-radius:100px;
  overflow:hidden;
  -webkit-transition:background .3s, border-radius .3s, box-shadow .3s, top .3s;
  transition:background .3s, border-radius .3s, box-shadow .3s, top .3s;
}
.nav.scrolled{
  background:rgba(255,255,255,.65);
  box-shadow:0 12px 36px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.nav:has(.nav-burger.open){
  border-radius:24px;
  background:rgba(255,255,255,.9);
  box-shadow:0 20px 48px rgba(0,0,0,.15);
}
.nav-inner{
  max-width:1140px;margin:0 auto;padding:0 24px;
  height:64px;display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;gap:8px;
}
/* Logo image (replaces text B mark) */
.nav-logo-img{
  width:32px;height:32px;border-radius:9px;
  object-fit:contain;-webkit-flex-shrink:0;flex-shrink:0;
  display:block;
}
.nav-logo{
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  gap:9px;font-weight:800;font-size:1rem;color:#0a0a0a;
  letter-spacing:-.3px;margin-right:16px;
  -webkit-flex-shrink:0;flex-shrink:0;
}
/* Fallback B mark (kept for sub-pages that override) */
.logo-mark{
  width:32px;height:32px;border-radius:9px;
  background:-webkit-linear-gradient(135deg,#2563eb,#1d4ed8);
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  -webkit-justify-content:center;justify-content:center;
  color:#fff;font-weight:900;font-size:.85rem;
  -webkit-flex-shrink:0;flex-shrink:0;
}
.nav-links{
  display:-webkit-flex;display:flex;gap:2px;
  -webkit-flex:1;flex:1;
}
.nav-links a{
  padding:6px 13px;border-radius:100px;
  font-size:.85rem;font-weight:500;color:var(--gray-500);
  -webkit-transition:background .2s,color .2s;
  transition:background .2s,color .2s;
}
.nav-links a:hover{background:var(--nav-hover-bg);color:var(--nav-hover-text);}
.nav-links a.active{color:var(--nav-hover-text);font-weight:700;}
/* CTA — also has a soft glass tint */
.nav-cta{
  margin-left:auto;padding:8px 20px;border-radius:100px;
  background:var(--blue-600);color:#fff;
  font-size:.85rem;font-weight:600;
  -webkit-flex-shrink:0;flex-shrink:0;
  box-shadow:0 2px 10px rgba(37,99,235,.3);
  -webkit-transition:background .2s,-webkit-transform .15s,box-shadow .2s;
  transition:background .2s,transform .15s,box-shadow .2s;
}
.nav-cta:hover{background:var(--blue-700);-webkit-transform:translateY(-1px);transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,.4);}
.nav-burger{
  display:none;-webkit-flex-direction:column;flex-direction:column;
  gap:5px;padding:6px;margin-left:auto;
}
.nav-burger span{display:block;width:22px;height:2px;background:#222;border-radius:2px;-webkit-transition:.3s;transition:.3s;}
/* Mobile drawer also glass */
.nav-drawer{
  display:none;-webkit-flex-direction:column;flex-direction:column;
  padding:8px 24px 20px;
  border-top:1px solid rgba(0,0,0,.06);
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.nav-drawer a{
  padding:13px 0;font-size:.95rem;font-weight:500;
  color:var(--gray-700);border-bottom:1px solid rgba(0,0,0,.05);
}
.nav-drawer a:last-child{border:none;}
.nav-drawer .drawer-cta{
  margin-top:12px;padding:12px 20px;border-radius:100px;
  background:var(--blue-600);color:#fff;text-align:center;
  font-weight:600;border:none !important;display:block;
}
.nav-burger.open span:nth-child(1){-webkit-transform:translateY(7px) rotate(45deg);transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){-webkit-transform:translateY(-7px) rotate(-45deg);transform:translateY(-7px) rotate(-45deg);}
.nav-drawer.open{display:-webkit-flex;display:flex;}

/* ==============================================
   HERO
   ============================================== */
.hero{
  padding:120px 24px 80px;
  background:-webkit-linear-gradient(170deg,#fff8f0 0%,#fff 55%);
  background:linear-gradient(170deg,#fff8f0 0%,#fff 55%);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-blob{
  position:absolute;border-radius:50%;
  -webkit-filter:blur(80px);filter:blur(80px);
  pointer-events:none;opacity:.45;
}
.blob-a{width:600px;height:600px;top:-200px;left:-150px;background:radial-gradient(circle,#fed7aa,transparent);-webkit-animation:bfloat 14s ease-in-out infinite;animation:bfloat 14s ease-in-out infinite;}
.blob-b{width:500px;height:500px;top:50px;right:-150px;background:radial-gradient(circle,#fde68a,transparent);-webkit-animation:bfloat 11s ease-in-out infinite reverse;animation:bfloat 11s ease-in-out infinite reverse;}
@-webkit-keyframes bfloat{0%,100%{-webkit-transform:translate(0,0);transform:translate(0,0);}50%{-webkit-transform:translate(20px,-20px);transform:translate(20px,-20px);}}
@keyframes bfloat{0%,100%{transform:translate(0,0);}50%{transform:translate(20px,-20px);}}

/* pill removed from design — keep animation for other uses */
@-webkit-keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

.hero h1{
  font-size:clamp(2.8rem,5.5vw,5rem);
  font-weight:900;letter-spacing:-2.5px;line-height:1.06;
  margin-bottom:20px;position:relative;
}
.hero-sub{
  font-size:clamp(1rem,1.5vw,1.15rem);
  color:var(--gray-500);max-width:520px;
  margin:0 auto 36px;line-height:1.7;position:relative;
}
.hero-btns{
  display:-webkit-flex;display:flex;
  gap:12px;-webkit-justify-content:center;justify-content:center;
  -webkit-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:64px;position:relative;
}
.btn-blue{
  display:-webkit-inline-flex;display:inline-flex;
  -webkit-align-items:center;align-items:center;gap:8px;
  padding:13px 26px;border-radius:100px;
  background:-webkit-linear-gradient(135deg,#2563eb,#1d4ed8);
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;font-weight:700;font-size:.9rem;
  box-shadow:0 4px 18px rgba(37,99,235,.35);
  -webkit-transition:-webkit-transform .2s,box-shadow .2s;
  transition:transform .2s,box-shadow .2s;
}
.btn-blue:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,99,235,.45);}
.btn-outline{
  display:-webkit-inline-flex;display:inline-flex;
  -webkit-align-items:center;align-items:center;gap:8px;
  padding:13px 26px;border-radius:100px;
  background:#fff;color:var(--gray-700);font-weight:600;font-size:.9rem;
  border:1.5px solid var(--gray-200);
  -webkit-transition:border-color .2s,color .2s,-webkit-transform .2s;
  transition:border-color .2s,color .2s,transform .2s;
}
.btn-outline:hover{border-color:var(--blue-400,#60a5fa);color:var(--blue-600);-webkit-transform:translateY(-2px);transform:translateY(-2px);}

/* ==============================================
   HERO — 4 PHONE MARQUEE CAROUSEL
   Desktop: static centered row inside phones-track
   Mobile: CSS marquee that loops 4→4 seamlessly
   ============================================== */
.hero-phones{
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  width:100%;
}
/* phones-track: the moving inner strip */
.phones-track{
  display:-webkit-inline-flex;
  display:inline-flex;
  -webkit-align-items:flex-end;
  align-items:flex-end;
  gap:14px;
  /* Desktop: no animation, no wrap, just centered */
  -webkit-flex-wrap:nowrap;
  flex-wrap:nowrap;
}
/* Hide duplicate set on desktop */
.hp-dup{display:none!important;}

.hp{-webkit-flex-shrink:0;flex-shrink:0;}
.hp img{
  width:166px;
  -webkit-filter:drop-shadow(0 12px 32px rgba(0,0,0,.14));
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.14));
  display:block;
}

/* Marquee animation (used on mobile only) */
@-webkit-keyframes scrollPhones{
  0%{-webkit-transform:translateX(0);transform:translateX(0);}
  100%{-webkit-transform:translateX(-50%);transform:translateX(-50%);}
}
@keyframes scrollPhones{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* Bottom fade into white */
.hero::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:80px;
  background:-webkit-linear-gradient(to top,#fff,transparent);
  background:linear-gradient(to top,#fff,transparent);
  pointer-events:none;
  z-index:4;
}

/* ==============================================
   APPS BENTO GRID
   ============================================== */
.apps-section{padding:100px 0;background:#fff;}

.section-label{
  text-align:center;
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--blue-600);margin-bottom:12px;
}
.section-h2{
  text-align:center;
  font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:900;
  letter-spacing:-1.2px;line-height:1.15;margin-bottom:60px;
}

/* Bento grid */
.bento{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:20px;
}

.bento-card{
  background:var(--gray-50);
  border:1px solid var(--gray-200);
  border-radius:var(--r-xl);
  overflow:hidden;position:relative;
  -webkit-transition:-webkit-transform .3s ease,box-shadow .3s ease;
  transition:transform .3s ease,box-shadow .3s ease;
  display:-webkit-flex;display:flex;
  -webkit-flex-direction:column;flex-direction:column;
  min-height:420px;
}
.bento-card:hover{
  -webkit-transform:translateY(-4px);transform:translateY(-4px);
  box-shadow:var(--sh-xl);
}

.bento-top{padding:32px 32px 0;}
.bento-app-row{
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  gap:14px;margin-bottom:16px;
}
.bento-icon{
  width:52px;height:52px;border-radius:14px;
  overflow:hidden;-webkit-flex-shrink:0;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.bento-icon img{width:100%;height:100%;object-fit:contain;}
.bento-app-info{}
.bento-tag{
  font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--blue-600);margin-bottom:2px;
}
.bento-name{font-size:1.2rem;font-weight:800;letter-spacing:-.4px;}
.bento-desc{font-size:.9rem;color:var(--gray-500);line-height:1.55;margin-bottom:20px;}

.bento-actions{
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;gap:10px;
  -webkit-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:24px;
}
.store-pill{
  display:-webkit-inline-flex;display:inline-flex;
  -webkit-align-items:center;align-items:center;gap:7px;
  padding:8px 16px;border-radius:100px;
  font-size:.78rem;font-weight:600;
  background:#111;color:#fff;
  -webkit-transition:-webkit-transform .2s;transition:transform .2s;
}
.store-pill:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);}
.ios-pill{
  font-size:.72rem;font-weight:600;color:var(--gray-400);
  background:var(--gray-100);padding:6px 12px;border-radius:100px;
}
.bento-link{
  font-size:.8rem;font-weight:700;color:var(--blue-600);
  -webkit-transition:opacity .2s;transition:opacity .2s;
  display:-webkit-inline-flex;display:inline-flex;
  -webkit-align-items:center;align-items:center;gap:4px;
}
.bento-link:hover{opacity:.7;}

.bento-mockup{
  margin-top:auto;
  display:-webkit-flex;display:flex;
  -webkit-justify-content:center;justify-content:center;
  padding:0 20px;overflow:hidden;
}
.bento-mockup img{
  max-height:340px;width:auto;
  -webkit-filter:drop-shadow(0 16px 40px rgba(0,0,0,.13));
  filter:drop-shadow(0 16px 40px rgba(0,0,0,.13));
  -webkit-transition:-webkit-transform .4s ease;
  transition:transform .4s ease;
  display:block;
}
.bento-card:hover .bento-mockup img{
  -webkit-transform:translateY(-8px) scale(1.02);
  transform:translateY(-8px) scale(1.02);
}

/* Card accent backgrounds */
.card-hw{background:-webkit-linear-gradient(160deg,#eff6ff,#f8faff);background:linear-gradient(160deg,#eff6ff,#f8faff);}
.card-cx{background:-webkit-linear-gradient(160deg,#f0f9ff,#f8faff);background:linear-gradient(160deg,#f0f9ff,#f8faff);}
.card-sf{background:-webkit-linear-gradient(160deg,#fff7ed,#fffbeb);background:linear-gradient(160deg,#fff7ed,#fffbeb);}
.card-gf{background:-webkit-linear-gradient(160deg,#fffbeb,#fff9f5);background:linear-gradient(160deg,#fffbeb,#fff9f5);}

/* ==============================================
   SOCIAL + STORE BAR
   ============================================== */
.bar-section{
  padding:48px 0;
  border-top:1px solid var(--gray-100);
  border-bottom:1px solid var(--gray-100);
}
.bar-inner{
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  -webkit-justify-content:center;justify-content:center;
  -webkit-flex-wrap:wrap;flex-wrap:wrap;gap:12px;
}
.bar-label{
  font-size:.78rem;font-weight:700;color:var(--gray-400);
  text-transform:uppercase;letter-spacing:1px;
  margin-right:8px;
}
.bar-link{
  display:-webkit-inline-flex;display:inline-flex;
  -webkit-align-items:center;align-items:center;gap:7px;
  padding:9px 18px;border-radius:100px;
  border:1.5px solid var(--gray-200);
  font-size:.82rem;font-weight:600;color:var(--gray-700);
  -webkit-transition:border-color .2s,color .2s,-webkit-transform .2s;
  transition:border-color .2s,color .2s,transform .2s;
}
.bar-link:hover{border-color:var(--blue-400,#60a5fa);color:var(--blue-600);-webkit-transform:translateY(-2px);transform:translateY(-2px);}
.bar-link svg{-webkit-flex-shrink:0;flex-shrink:0;}

/* ==============================================
   CTA BAND
   ============================================== */
.cta-section{padding:80px 0;}
.cta-band{
  background:-webkit-linear-gradient(135deg,#1d4ed8,#2563eb,#0ea5e9);
  background:linear-gradient(135deg,#1d4ed8,#2563eb,#0ea5e9);
  border-radius:var(--r-xl);padding:64px 48px;text-align:center;
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;
  width:500px;height:500px;border-radius:50%;
  background:rgba(255,255,255,.07);top:-150px;left:-100px;pointer-events:none;
}
.cta-band::after{
  content:'';position:absolute;
  width:350px;height:350px;border-radius:50%;
  background:rgba(255,255,255,.05);bottom:-100px;right:-50px;pointer-events:none;
}
.cta-band h2{
  font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;
  letter-spacing:-1.5px;color:#fff;margin-bottom:12px;position:relative;z-index:1;
}
.cta-band p{font-size:1rem;color:rgba(255,255,255,.75);margin-bottom:36px;position:relative;z-index:1;}
.cta-apps{
  display:-webkit-flex;display:flex;
  -webkit-justify-content:center;justify-content:center;
  -webkit-flex-wrap:wrap;flex-wrap:wrap;
  gap:14px;margin-bottom:32px;position:relative;z-index:1;
}
.cta-app{
  display:-webkit-flex;display:flex;
  -webkit-flex-direction:column;flex-direction:column;
  -webkit-align-items:center;align-items:center;
  gap:8px;padding:16px 20px;border-radius:16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:.8rem;font-weight:600;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-transition:background .2s,-webkit-transform .2s;
  transition:background .2s,transform .2s;
}
.cta-app:hover{background:rgba(255,255,255,.22);-webkit-transform:translateY(-4px);transform:translateY(-4px);}
.cta-app img{width:44px;height:44px;border-radius:12px;object-fit:contain;}
.btn-white{
  display:-webkit-inline-block;display:inline-block;
  padding:13px 28px;border-radius:100px;
  background:#fff;color:var(--blue-700);
  font-weight:700;font-size:.9rem;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  position:relative;z-index:1;
  -webkit-transition:-webkit-transform .2s,box-shadow .2s;
  transition:transform .2s,box-shadow .2s;
}
.btn-white:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18);}

/* ==============================================
   FOOTER
   ============================================== */
.footer{background:var(--gray-900);color:rgba(255,255,255,.6);padding:64px 0 28px;}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;margin-bottom:48px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-brand .nav-logo{color:#fff;margin-bottom:10px;}
.footer-brand p{font-size:.85rem;line-height:1.6;margin-bottom:10px;}
.footer-email{color:var(--blue-400,#60a5fa);font-size:.85rem;font-weight:600;}
.footer-email:hover{color:#93c5fd;}
.footer-col h5{
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;color:rgba(255,255,255,.9);margin-bottom:14px;
}
.footer-col a{display:block;font-size:.85rem;margin-bottom:8px;-webkit-transition:color .2s;transition:color .2s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  display:-webkit-flex;display:flex;
  -webkit-justify-content:space-between;justify-content:space-between;
  -webkit-align-items:center;align-items:center;
  -webkit-flex-wrap:wrap;flex-wrap:wrap;gap:12px;
}
.footer-bottom p{font-size:.78rem;}
.f-socials{display:-webkit-flex;display:flex;gap:10px;}
.f-socials a{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.07);
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  -webkit-justify-content:center;justify-content:center;
  color:rgba(255,255,255,.5);
  -webkit-transition:background .2s,color .2s;transition:background .2s,color .2s;
}
.f-socials a:hover{background:var(--blue-600);color:#fff;}

/* ==============================================
   APP SUB-PAGES
   ============================================== */
.sub-hero{
  padding:100px 24px 0;
  background:-webkit-linear-gradient(160deg,#f0f7ff,#fff 60%);
  background:linear-gradient(160deg,#f0f7ff,#fff 60%);
  overflow:hidden;position:relative;
}
.sub-hero .container{
  display:-webkit-flex;display:flex;
  gap:0;position:relative;z-index:2;
}
.sub-hero-left{
  -webkit-flex:1;flex:1;
  padding:40px 40px 80px 0;
  min-width:0;
}
.sub-hero-right{
  width:360px;-webkit-flex-shrink:0;flex-shrink:0;
  display:-webkit-flex;display:flex;
  -webkit-align-items:flex-end;align-items:flex-end;
  -webkit-justify-content:center;justify-content:center;
  padding-top:20px;
}
.sub-hero-right img{
  max-height:580px;width:auto;
  -webkit-filter:drop-shadow(0 24px 56px rgba(0,0,0,.15));
  filter:drop-shadow(0 24px 56px rgba(0,0,0,.15));
  -webkit-animation:phoneFloat 7s ease-in-out infinite;
  animation:phoneFloat 7s ease-in-out infinite;
  display:block;
}
.sub-badge{
  display:-webkit-inline-flex;display:inline-flex;
  -webkit-align-items:center;align-items:center;gap:10px;
  padding:5px 14px;border-radius:100px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;margin-bottom:20px;
}
.sub-badge img{width:22px;height:22px;border-radius:6px;object-fit:contain;}
.sub-hero h1{
  font-size:clamp(2.4rem,4.5vw,3.8rem);
  font-weight:900;letter-spacing:-2px;line-height:1.08;
  margin-bottom:18px;
}
.sub-hero-desc{
  font-size:1rem;color:var(--gray-500);line-height:1.7;
  max-width:460px;margin-bottom:32px;
}
.sub-hero-btns{
  display:-webkit-flex;display:flex;
  gap:12px;-webkit-flex-wrap:wrap;flex-wrap:wrap;
  margin-bottom:32px;
}
.platform-note{font-size:.82rem;color:var(--gray-400);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:6px;}
.platform-note .stars{color:#f59e0b;letter-spacing:1px;font-size:.9rem;}

/* Sub-page features */
.feats{padding:80px 0;background:var(--gray-50);}
.feats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.feat-card{
  background:#fff;border-radius:var(--r-lg);
  padding:36px 32px;border:1px solid var(--gray-100);
  -webkit-transition:-webkit-transform .25s,box-shadow .25s,border-color .25s;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.feat-card:hover{
  -webkit-transform:translateY(-4px);transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.09);
  border-color:var(--gray-200);
}
.feat-emoji{font-size:2.2rem;margin-bottom:16px;}
.feat-card h4{font-size:1rem;font-weight:800;margin-bottom:8px;letter-spacing:-.3px;color:#0a0a0a;}
.feat-card p{font-size:.84rem;color:var(--gray-500);line-height:1.65;}

/* Highlight strip — quick feature scan */
.sub-highlights{
  display:-webkit-flex;display:flex;
  -webkit-justify-content:center;justify-content:center;
  -webkit-align-items:center;align-items:center;
  -webkit-flex-wrap:wrap;flex-wrap:wrap;
  gap:10px 32px;padding:28px 24px;
  background:var(--gray-50);
  border-top:1px solid var(--gray-100);
  border-bottom:1px solid var(--gray-100);
}
.sub-hl{
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  gap:8px;font-size:.84rem;font-weight:600;color:var(--gray-700);
}
.sub-hl-sep{color:var(--gray-300);font-size:.7rem;}

/* App showcase visual section */
.app-showcase{
  padding:72px 24px;text-align:center;
}
.showcase-heading{
  font-size:clamp(1.4rem,3vw,2rem);font-weight:900;
  letter-spacing:-1px;margin-bottom:40px;
}
.showcase-phone-wrap{
  display:-webkit-flex;display:flex;
  -webkit-justify-content:center;justify-content:center;
  margin-bottom:32px;
}
.showcase-phone{
  max-width:260px;width:100%;
  border-radius:28px;
  box-shadow:0 32px 72px rgba(0,0,0,.16);
  -webkit-filter:drop-shadow(0 0 0 transparent);
  filter:drop-shadow(0 0 0 transparent);
  display:block;
}
.showcase-chips{
  display:-webkit-flex;display:flex;
  -webkit-justify-content:center;justify-content:center;
  -webkit-flex-wrap:wrap;flex-wrap:wrap;
  gap:10px;
}
.schip{
  padding:8px 20px;border-radius:100px;
  border:1.5px solid var(--gray-200);
  background:#fff;font-size:.8rem;font-weight:700;
  color:var(--gray-700);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

/* Sub-page DL CTA */
.sub-dl{padding:80px 0;text-align:center;}
.sub-dl h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;letter-spacing:-1px;margin-bottom:12px;}
.sub-dl p{font-size:.95rem;color:var(--gray-500);margin-bottom:28px;}
.dl-btns{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:12px;}

/* More apps row */
.more-apps{padding:64px 0;background:var(--gray-50);border-top:1px solid var(--gray-200);}
.more-apps .section-h2{font-size:1.5rem;text-align:left;margin-bottom:28px;}
.more-apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.more-card{
  background:#fff;border-radius:var(--r-md);
  padding:22px 20px;border:1px solid var(--gray-200);
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;gap:14px;
  -webkit-transition:-webkit-transform .2s,box-shadow .2s;
  transition:transform .2s,box-shadow .2s;
}
.more-card:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:var(--sh-md);}
.more-card-icon{width:48px;height:48px;border-radius:12px;object-fit:contain;-webkit-flex-shrink:0;flex-shrink:0;}
.more-info h5{font-size:.92rem;font-weight:800;margin-bottom:3px;}
.more-info p{font-size:.75rem;color:var(--gray-500);margin-bottom:5px;}
.more-link{font-size:.75rem;font-weight:700;color:var(--blue-600);}

/* ==============================================
   ANIMATIONS — fade up on scroll
   ============================================== */
.reveal{opacity:0;-webkit-transform:translateY(24px);transform:translateY(24px);-webkit-transition:opacity .6s ease,-webkit-transform .6s ease;transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;-webkit-transform:none;transform:none;}
.reveal-d1{-webkit-transition-delay:.1s;transition-delay:.1s;}
.reveal-d2{-webkit-transition-delay:.2s;transition-delay:.2s;}
.reveal-d3{-webkit-transition-delay:.3s;transition-delay:.3s;}
.reveal-d4{-webkit-transition-delay:.4s;transition-delay:.4s;}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media(max-width:1024px){
  .bento{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .more-apps-grid{grid-template-columns:1fr 1fr;}
  .sub-hero .container{-webkit-flex-direction:column;flex-direction:column;}
  .sub-hero-left{padding:40px 0 32px;}
  .sub-hero-right{width:100%;-webkit-justify-content:center;justify-content:center;padding-bottom:0;}
  .sub-hero-right img{max-height:480px;}
}

@media(max-width:768px){
  .nav{
    top:12px;
    left:12px;
    right:12px;
    width:calc(100% - 24px);
  }
  .nav-links,.nav-cta{display:none;}
  .nav-burger{display:-webkit-flex;display:flex;}
  .hero{padding:100px 20px 40px;}
  .hero h1{letter-spacing:-1.5px;}

  /* Mobile marquee: show duplicates, animate the track */
  .hp-dup{display:block!important;}
  .phones-track{
    /* Animate: scrolls one full set (50% of track = 4 phones) then loops */
    -webkit-animation:scrollPhones 9s linear infinite;
    animation:scrollPhones 9s linear infinite;
    gap:12px;
  }
  /* Pause on hover/touch (respects user) */
  .hero-phones:hover .phones-track,
  .hero-phones:active .phones-track{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
  }
  .hp img{
    width:148px;
    -webkit-filter:drop-shadow(0 8px 24px rgba(0,0,0,.14));
    filter:drop-shadow(0 8px 24px rgba(0,0,0,.14));
  }
  .feats-grid{grid-template-columns:1fr;}
  .more-apps-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-band{padding:48px 28px;}
  .sub-hero{padding:108px 20px 0;}
  .sub-hero h1{letter-spacing:-1px;}
  .sub-hero-right img{max-width:100%;height:auto;}
  .sub-highlights{gap:8px 20px;}
  .showcase-phone{max-width:200px;}
}

@media(max-width:480px){
  .feats-grid{grid-template-columns:1fr;}
  .section-h2{letter-spacing:-.8px;}
  .bento-top{padding:24px 24px 0;}
  .hp img{width:130px;}
}

/* Safari-specific flex fix */
@supports(-webkit-touch-callout:none){
  .bento-card{-webkit-flex-direction:column;}
}

/* ==============================================
   PREMIUM MICRO-INTERACTIONS & STYLING
   ============================================== */
/* Dynamic Greeting Badge */
.hero-greeting{
  display:-webkit-inline-flex;display:inline-flex;
  -webkit-align-items:center;align-items:center;
  padding:6px 14px;border-radius:100px;
  font-size:.78rem;font-weight:600;
  background:#FFF7ED;color:#C2410C;
  border:1px solid #FDBA74;
  margin-bottom:20px;
  -webkit-animation:greetFloat 4s ease-in-out infinite;
  animation:greetFloat 4s ease-in-out infinite;
}
@-webkit-keyframes greetFloat{
  0%{-webkit-transform:translateY(0);transform:translateY(0);}
  50%{-webkit-transform:translateY(-2px);transform:translateY(-2px);}
  100%{-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes greetFloat{
  0%{transform:translateY(0);}
  50%{transform:translateY(-2px);}
  100%{transform:translateY(0);}
}

/* Nav Logo Micro-interaction */
.nav-logo{
  -webkit-transition:color .2s;transition:color .2s;
}
.nav-logo:hover .nav-logo-img{
  -webkit-transform:scale(1.06) rotate(-3deg);
  transform:scale(1.06) rotate(-3deg);
}
.nav-logo-img{
  -webkit-transition:-webkit-transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bento Card Icon Micro-interaction */
.bento-icon{
  -webkit-transition:-webkit-transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card:hover .bento-icon{
  -webkit-transform:scale(1.06) rotate(3deg);
  transform:scale(1.06) rotate(3deg);
}

/* Moving Headline Gradient Animation */
.grad{
  background-size:200% auto !important;
  -webkit-animation:gradFlow 8s linear infinite;
  animation:gradFlow 8s linear infinite;
}
@-webkit-keyframes gradFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@keyframes gradFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Click-to-copy tooltip styling */
.copy-tooltip{
  position:absolute;bottom:125%;left:50%;
  -webkit-transform:translateX(-50%);transform:translateX(-50%);
  background:#111;color:#fff;padding:6px 12px;
  border-radius:6px;font-size:.72rem;font-weight:600;
  white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.15);
  -webkit-animation:tooltipFade .2s ease-out;animation:tooltipFade .2s ease-out;
  pointer-events:none;z-index:100;
}
.copy-tooltip::after{
  content:'';position:absolute;top:100%;left:50%;
  -webkit-transform:translateX(-50%);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#111;
}
@-webkit-keyframes tooltipFade{
  from{opacity:0;-webkit-transform:translate(-50%,4px);transform:translate(-50%,4px);}
  to{opacity:1;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);}
}
@keyframes tooltipFade{
  from{opacity:0;transform:translate(-50%,4px);}
  to{opacity:1;transform:translate(-50%,0);}
}

/* New Tag & Release Styles */
.beta-tag{
  background:#FFF7ED;
  color:#C2410C;
  border:1px solid #FDBA74;
  padding:2px 8px;
  border-radius:100px;
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
  display:inline-block;
  line-height:1;
  margin-left:4px;
}
.new-tag{
  background:#ECFDF5;
  color:#059669;
  border:1px solid #A7F3D0;
  padding:2px 8px;
  border-radius:100px;
  font-size:.64rem;
  font-weight:700;
  text-transform:uppercase;
  display:inline-block;
  line-height:1;
  margin-left:4px;
}
.beta-section{
  padding:80px 24px;
  background:#FFF7ED;
  border-top:1px solid #FED7AA;
  border-bottom:1px solid #FED7AA;
  text-align:center;
}
.beta-card-wrapper{
  max-width:840px;margin:0 auto;
}
.beta-h2{
  font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;
  margin-bottom:16px;letter-spacing:-.8px;
}
.beta-intro{
  color:var(--gray-700);font-size:1rem;
  line-height:1.65;margin:0 auto 40px;max-width:680px;
}
.beta-steps{
  display:-webkit-flex;display:flex;
  gap:30px;-webkit-flex-wrap:wrap;flex-wrap:wrap;
  text-align:left;-webkit-justify-content:center;justify-content:center;
}
.beta-step{
  background:#fff;padding:36px 32px 32px;
  border-radius:var(--r-md);
  border:1px solid #FED7AA;
  box-shadow:0 8px 30px rgba(0,0,0,.03);
  position:relative;display:-webkit-flex;display:flex;
  -webkit-flex-direction:column;flex-direction:column;
  -webkit-flex:1;flex:1;min-width:300px;
}
.step-num{
  position:absolute;top:-18px;left:32px;
  width:36px;height:36px;background:#FF9933;
  color:#fff;border-radius:50%;
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  -webkit-justify-content:center;justify-content:center;
  font-weight:800;font-size:1rem;
  box-shadow:0 4px 12px rgba(255,153,51,.3);
}
.step-content h4{
  font-size:1.15rem;font-weight:700;margin:8px 0 12px;color:var(--gray-900);
}
.step-content p{
  font-size:.9rem;color:var(--gray-600);line-height:1.6;margin-bottom:24px;
}
.beta-btn{
  display:-webkit-inline-flex;display:inline-flex;
  -webkit-align-items:center;align-items:center;
  -webkit-justify-content:center;justify-content:center;
  padding:12px 24px;border-radius:100px;
  font-size:.84rem;font-weight:600;text-align:center;
  -webkit-transition:-webkit-transform .2s,box-shadow .2s;
  transition:transform .2s,box-shadow .2s;
  margin-top:auto;
}
.btn-group{
  background:#FF9933;color:#fff;
}
.btn-group:hover{
  background:#E07B00;
  -webkit-transform:translateY(-1.5px);transform:translateY(-1.5px);
  box-shadow:0 4px 16px rgba(255,153,51,.35);
}
.btn-play{
  background:var(--gray-900);color:#fff;
}
.btn-play:hover{
  background:#000;
  -webkit-transform:translateY(-1.5px);transform:translateY(-1.5px);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}