:root {
    --brand: #CB30E0;           /* Primary brand */
    --brand-900: #7d148a;       /* Darker for gradient depth */
    --ink: #0f0f12;             /* Text */
    --muted: #6b6b75;          /* Secondary text */
    --bg: #0a0a0d;             /* Page background */
    --card: rgba(255,255,255,0.08);
    --glass: rgba(255,255,255,0.12);
    --radius-xl: 18px;
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.35);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.25);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: #fff;
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
  }

  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  /* Ensure images respect intrinsic aspect ratio even when width is constrained */
  #product-hero, .feature-card img, picture img { height: auto; }
  /* Ensure elements with hidden attribute stay hidden even if component sets display */
  [hidden] { display: none !important; }
  /* Brand-styled inline text links */
  .text-link {
    color: var(--brand);
    /* text-decoration: underline; */
    text-decoration-color: var(--brand);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color .2s ease, text-decoration-color .2s ease;
  }
  .text-link:hover {
    color: #fff;
    text-decoration-color: #fff;
}
  .appStore-button {
    width: 220px;
    /* height: 100%; */
    object-fit: contain;
    object-position: center;
    margin: 5px 0px 20px 0px;
  }
  @media (max-width: 980px){ .appStore-button {width: 180px;} }

  /* ===== NAV ===== */
  .nav {
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: saturate(140%) blur(10px);
    background: linear-gradient(180deg, rgba(10,10,13,0.85), rgba(10,10,13,0.55));
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; }
  .brand { display:flex; gap:10px; align-items:center; font-weight: 800; letter-spacing: -0.02em; }
  .brand-badge {
    width: 34px; height: 34px; border-radius: 10px;
    background: conic-gradient(from 180deg at 50% 50%, var(--brand), #7f52ff, #00dbde, var(--brand));
    box-shadow: 0 10px 20px rgba(203,48,224,0.35), inset 0 0 25px rgba(255,255,255,0.22);
  }
  .nav-links { display: none; gap: 22px; font-weight: 500; }
  .nav-links a {
    position: relative;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #fff;
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }
  .nav-links a:hover::after {
    transform: scaleX(1);
  }
  .nav-cta { display: none; }
  @media (min-width: 880px){ .nav-links, .nav-cta { display: flex; } }

  /* ===== NAV TOGGLE (Hamburger) ===== */
  .nav-toggle {
    appearance: none; border: none; background: transparent; color: #fff; cursor: pointer;
    display: inline-flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 8px;
  }
  .nav-toggle:focus-visible { outline: 2px solid rgba(255,255,255,0.35); outline-offset: 2px; }
  .nav-toggle-bar { width: 22px; height: 2px; background: #fff; border-radius: 2px; display: block; }
  @media (min-width: 880px){ .nav-toggle { display: none; } }

  /* ===== MOBILE MENU ===== */
  .mobile-menu {
    position: fixed; inset: 60px 14px auto 14px; z-index: 50;
    display: grid; gap: 10px; padding: 12px; border-radius: 14px;
    background: rgba(20,20,24,0.96); border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  }
  .mobile-menu a { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); }
  .mobile-menu a:hover { background: rgba(255,255,255,0.08); }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    border-radius: 999px; padding: 12px 18px; font-weight: 600; letter-spacing: 0.01em;
    border: 1px solid rgba(255,255,255,0.2);
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
    box-shadow: var(--shadow-md);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 15px 40px rgba(0,0,0,0.35); }
  .btn-primary {
    background: linear-gradient(135deg, var(--brand) 0%, #9a2ca6 100%);
    border: none; color: #fff;
  }
  .btn-ghost { color: #fff; }
  #logo {max-height:50px}

  /* ===== HERO ===== */
  .hero {
    position: relative; overflow: hidden; isolation: isolate;
    background:
      radial-gradient(1200px 700px at 80% -10%, rgba(203,48,224,0.28), transparent),
      radial-gradient(900px 600px at 10% 20%, rgba(127,82,255,0.25), transparent),
      linear-gradient(180deg, var(--brand), rgba(10,10,13,0) 85%);
  }
  .hero::before{
    content:""; position:absolute; inset:-10% -10% auto -10%; height:70%;
    background: radial-gradient(70% 100% at 45% 10%, var(--brand), var(--brand-900));
    opacity: .55; filter: blur(50px); z-index:-1;
    transform: translateY(-10px);
  }
  .hero-inner { max-width: 1200px; margin: 0 auto; padding: 20px 40px 40px 40px; display: grid; gap: 30px; align-items: center;}
  @media (min-width: 980px){ .hero-inner { grid-template-columns: 1.2fr 1fr; padding: 80px 20px 70px; justify-items: stretch; text-align: left; } }
  @media (max-width: 980px){
    .hero-inner { text-align: center; justify-items: center; }
    .cta-row { justify-content: center; }
    .phone-wrap { justify-self: center; }
  }

  .eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: .9; }
  .title { font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(46px, 5vw, 64px);}
  .subtitle { color: #f1e9f4; opacity: .92; font-size: clamp(20px, 2.1vw, 24px); max-width: 58ch;}
  .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
  .meta { margin-top: 10px; color: #f0d8f6; opacity: .8; font-size: 14px; }

  .phone-wrap { perspective: 1200px; }
  .phone-card {
    border-radius: 32px; overflow: hidden;
    /* removed decorative frame/background/shadow per request */
    background: transparent; border: none; box-shadow: none;
    transform: rotateX(6deg) rotateY(-8deg) rotateZ(-1deg);
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .phone-card:hover { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(-4px); }

  /* Disable angle and tilt interactions on mobile */
  @media (max-width: 980px){
    .phone-wrap { perspective: none; }
    .phone-card { transform: none !important; }
    .phone-card:hover { transform: none !important; }
  }

  /* Subtle sparkle */
  .glow { position: absolute; inset: -40% -20% auto; height: 80%; pointer-events: none; opacity: .35;
    background: radial-gradient(40% 60% at 50% 0%, rgba(255,255,255,0.25), transparent 60%);
    filter: blur(40px);
  }

  /* ===== FEATURES ===== */
  .section { padding: 60px 0; }
  @media (max-width: 980px){ .section { padding: 40px 0; } }
  .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px;}
  .section h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 14px; letter-spacing: -0.02em; text-align: center;}
  .section p.lead { color: #e7d8ec; opacity: .9; max-width: 62ch;}

  .grid { display: grid; gap: 48px; }
  @media (min-width: 780px){ .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 980px){ .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

  .card { border-radius: var(--radius-xl); padding: 22px; background: var(--glass); border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--shadow-lg); backdrop-filter: blur(10px) saturate(120%);
   }

  /* ===== PROSE (typography for content pages) ===== */
  .prose { max-width: 800px; margin: 0 auto; line-height: 1.8; }
  .prose h1 { font-size: clamp(32px, 4.8vw, 52px); margin: 6px 0 18px; letter-spacing: -0.02em; }
  .prose h2 { font-size: clamp(22px, 3vw, 28px); margin: 26px 0 10px; letter-spacing: -0.01em; text-align: left;}
  .prose p { color: #e7d8ec; margin: 0 0 14px; }
  .prose a { text-decoration: none; }
  .prose ul, .prose ol { margin: 0 0 14px 22px; }
  .prose li { margin: 6px 0; }

  /* ===== ABOUT ===== */
  .about-grid {
    display: grid;
    gap: 24px;
    align-items: center;
    max-width: 900px;
    width: 100%;
    margin: 0 auto; /* center within section */
  }
  /* Mobile: single column */
  @media (max-width: 879px){
    .about-grid { grid-template-columns: 1fr; justify-items: center; }
  }
  /* Desktop: two columns */
  @media (min-width: 880px){
    .about-grid { grid-template-columns: 1fr 2fr; }
  }
  .about-photo { width: 100%; max-width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; justify-self: center; }
  .about-photo picture, .about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .about-copy p { margin-bottom: 12px; }


  /* ===== NEW FEATURE GALLERY (image cards) ===== */
  .features-grid { display: grid; gap: 46px; margin-top: 26px; }
  @media (min-width: 660px){ .features-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 980px){ .features-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  /* Keep 3 columns on large screens to make cards wider */
  @media (min-width: 1200px){ .features-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

  .feature-card { background: var(--card); border: 1px solid rgba(255,255,255,0.10); border-radius: 22px; padding: 18px 18px 0px 18px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: stretch; text-align: center;}
  /* .feature-card:hover { transform: translateY(-4px); box-shadow: 0 25px 60px rgba(0,0,0,0.45); } */
  .feature-card h3 { font-size: clamp(24px, 1.9vw, 24px); margin: 4px 0 12px; letter-spacing: -0.01em; }
  /* Anchor media to the bottom of the card so all images align across the row */
  .feature-card picture { display: block; margin-top: auto; }
  .feature-card img { width: 100%; border-radius: 18px; margin: 0; }

  /* Step/info badge for feature cards */
  .feature-badge {
    width: clamp(44px, 6vw, 54px);
    height: clamp(44px, 6vw, 54px);
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin: 6px auto 10px auto;
    font-weight: 400;
    font-size: clamp(16px, 2.2vw, 26px);
    color: #fff;
    background: radial-gradient(120% 120% at 30% 20%, #d85aed, var(--brand-900));
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 12px 30px rgba(0,0,0,0.45), inset 0 0 24px rgba(255,255,255,0.22);
    user-select: none;
    --icon-shift-y: 0; /* tweak per-badge if needed */
  }
  /* .feature-badge > svg, .feature-badge > img {
    width: 56%; height: 56%; display: block; object-fit: contain; object-position: center; transform: translateY(var(--icon-shift-y));
  } */
  .feature-badge.info { padding: 15px; }
  .feature-badge.info > img { filter: brightness(0) invert(1); }

  /* ===== FAQ ===== */
  .faq { max-width: 900px; margin: 0 auto; }
  details { background: var(--card); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-xl); padding: 16px 18px; }
  details + details { margin-top: 12px; }
  summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 22px;}
  @media (max-width: 980px){ summary { font-size: 18px;} }
  summary::-webkit-details-marker { display:none; }
  details[open] { background: rgba(255,255,255,0.14); }

  /* ===== FOOTER ===== */
  footer { padding: 50px 20px; border-top: 1px solid rgba(255,255,255,0.08); color: #bdbdcc; }
  .foot-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 16px; align-items: center; }
  @media (min-width: 880px){ .foot-inner { grid-template-columns: 1fr auto; } }
  @media (max-width: 879px){ .foot-inner { justify-items: center; } }
  /* Ensure footer links are visible on mobile (header nav-links are hidden by default) */
  footer .nav-links { display: flex; gap: 16px; flex-wrap: wrap; }
  @media (max-width: 879px){ footer .nav-links { justify-content: center; } }
  @media (min-width: 880px){ footer .nav-links { justify-content: flex-end; } }
  @media (max-width: 879px){ footer { text-align: center; } }
  .social-links { display: flex; gap: 16px; align-items: center; }
  .social-links a { display: inline-flex; padding: 6px; border-radius: 8px; }
  .social-links img { width: 22px; height: 22px; display: block; filter: invert(1); opacity: .85; }
  .social-links a:hover img { opacity: 1; }
  /* Mobile: center icons on their own row (done by grid stacking) */
  @media (max-width: 879px){
    footer .social-links { justify-content: center; }
  }
  /* Desktop: keep icons in the same line as links, right-aligned */
  @media (min-width: 880px){
    footer .foot-inner { grid-template-columns: 1fr auto auto; }
    footer .nav-links { order: 2; }
    footer .social-links { order: 3; justify-content: flex-end; }
  }

  /* ===== REVEAL ANIMS ===== */
/* JS will remove .no-js to animate; keep content visible when JS disabled */
.no-js .reveal { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(16px) scale(.98); }
.reveal.in { opacity: 1; transform: translateY(0) scale(1); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }

  /* Respect Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .phone-card, .btn, .reveal { transition: none !important; transform: none !important; }
    .glow { display: none; }
  }