:root{
    --bg:#07070c;
    --text:#eef0f6;
    --border:rgba(255,255,255,0.09);
    --muted:#9aa0b4;
    --blue:#2f7bf6;
    --violet:#8b5cf6;
    --green:#22c583;
    --amber:#f5a623;
    --coral:#ff5d5d;
    --surface:rgba(255,255,255,0.04);
    --surface2:rgba(255,255,255,0.05);
    --btn-fg:#000;
  }
  html.light{
    --bg:#f5f6fb;
    --text:#0e0f16;
    --border:rgba(10,10,25,0.09);
    --muted:#5b5f74;
    --surface:rgba(10,10,25,0.035);
    --surface2:rgba(10,10,25,0.03);
    --btn-fg:#fff;
  }
  *{ scroll-behavior:smooth; }
  html, body{ background:var(--bg); }
  body{ color:var(--text); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; transition:background .4s ease, color .4s ease; }
  ::selection{ background:var(--violet); color:#fff; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:6px; }

  .glass{ background:var(--surface); border:1px solid var(--border); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); transition:background .4s ease, border-color .4s ease; }
  .glass-panel{ background:linear-gradient(180deg, var(--surface2), rgba(255,255,255,0.015)); border:1px solid var(--border); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); transition:background .4s ease, border-color .4s ease; }
  html.light .glass-panel{ background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4)); }
  html.light .glass{ background:rgba(255,255,255,0.55); }

  /* light-mode overrides for tinted cards / phone frames */
  html.light .fcard--blue{ background:radial-gradient(120% 140% at 0% 0%, rgba(47,123,246,0.12), transparent 62%), #eef4ff; }
  html.light .fcard--violet{ background:radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,0.12), transparent 62%), #f4f0ff; }
  html.light .fcard--green{ background:radial-gradient(120% 140% at 0% 0%, rgba(34,197,131,0.12), transparent 62%), #eefdf5; }
  html.light .fcard h3{ color:#0e0f16; }
  html.light .arrow-btn{ color:#0e0f16; }
  html.light .phone-frame .rounded-\[34px\], html.light .phone-frame .rounded-\[30px\]{ background:linear-gradient(180deg,#12131f,#08080f) !important; }
  html.light .btn-primary.bg-white{ background:#0e0f16; color:#fff; }
  html.light ::-webkit-scrollbar-thumb{ background:linear-gradient(#8B5CF6,#2E7CF6); }

  .fcard{
    position:relative; overflow:hidden; border-radius:26px; padding:34px 30px;
    border:1px solid var(--border);
    transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .5s ease;
  }
  .fcard::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.10) 42%, transparent 58%);
    transform:translateX(-130%);
    transition:transform .9s cubic-bezier(.2,.8,.2,1);
  }
  .fcard:hover::before{ transform:translateX(130%); }
  .fcard > *{ position:relative; z-index:1; }

  .fcard--blue{ background:radial-gradient(120% 140% at 0% 0%, rgba(47,123,246,0.20), transparent 62%), #0c1526; }
  .fcard--blue:hover{ transform:translateY(-10px); border-color:rgba(96,150,255,0.45); box-shadow:0 28px 60px -18px rgba(47,123,246,0.4); }

  .fcard--violet{ background:radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,0.20), transparent 62%), #140f24; }
  .fcard--violet:hover{ transform:translateY(-10px); border-color:rgba(167,139,250,0.45); box-shadow:0 28px 60px -18px rgba(139,92,246,0.4); }

  .fcard--green{ background:radial-gradient(120% 140% at 0% 0%, rgba(34,197,131,0.20), transparent 62%), #0a1a16; }
  .fcard--green:hover{ transform:translateY(-10px); border-color:rgba(52,211,153,0.45); box-shadow:0 28px 60px -18px rgba(34,197,131,0.4); }

  .fcard .icon-box{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:24px;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease; }
  .fcard:hover .icon-box{ transform:scale(1.1) rotate(-5deg); }
  .icon-box svg{ width:26px; height:26px; }

  .fcard h3{ font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:4px; letter-spacing:-.01em; }
  .fcard .tag{ font-size:.92rem; font-weight:600; margin-bottom:14px; }
  .fcard p.desc{ font-size:.875rem; line-height:1.65; color:var(--muted); margin-bottom:30px; max-width:240px; }

  .arrow-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:#e8ecf5;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), background .4s ease, border-color .4s ease, color .4s ease; }
  .arrow-btn svg{ width:16px; height:16px; }
  .fcard:hover .arrow-btn{ transform:translateX(5px); }
  .fcard--blue:hover .arrow-btn{ background:var(--blue); border-color:var(--blue); }
  .fcard--violet:hover .arrow-btn{ background:var(--violet); border-color:var(--violet); }
  .fcard--green:hover .arrow-btn{ background:var(--green); border-color:var(--green); }

  .why-card{ transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease; }
  .why-card:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.045); }
  .why-card .w-icon{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
  .why-card:hover .w-icon{ transform:scale(1.12); }

  .btn-primary{ position:relative; overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
  .btn-primary:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 14px 32px -10px rgba(139,92,246,0.5); }
  .btn-primary:active{ transform:translateY(0) scale(.98); }
  .btn-ghost{ transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, border-color .3s ease; }
  .btn-ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.25); }
  .store-btn{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .store-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(0,0,0,0.5); border-color:rgba(255,255,255,0.3); }

  .nav-link{ position:relative; }
  .nav-link::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0%; background:linear-gradient(90deg,#8B5CF6,#2E7CF6); transition:width .35s cubic-bezier(.2,.8,.2,1); }
  .nav-link:hover::after, .nav-link.active::after{ width:100%; }

  .phone-frame{ border-radius:46px; box-shadow:0 40px 100px -30px rgba(0,0,0,0.7), inset 0 0 0 2px rgba(255,255,255,0.06); }
  .app-icon-tile{ transition:transform .4s cubic-bezier(.2,.8,.2,1); }
  .app-icon-tile:hover{ transform:translateY(-6px) scale(1.05); }

  .grad-text{ background:linear-gradient(90deg,#8B5CF6,#2E7CF6 50%,#22c583); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% auto; animation:shimmer 8s linear infinite; }
  @keyframes shimmer{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
  @keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
  @keyframes drift{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(14px,-20px);} }
  @keyframes pulseDot{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .animate-floaty{ animation:floaty 6s ease-in-out infinite; }
  .animate-drift{ animation:drift 10s ease-in-out infinite; }
  .blob{ filter:blur(80px); }

  .shadow-glow{ box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 20px 50px -14px rgba(139,92,246,0.45); }
  .footer-link{ transition:color .25s ease, transform .25s ease; display:inline-block; }
  .footer-link:hover{ color:#fff; transform:translateX(4px); }
  html.light .footer-link:hover{ color:#0e0f16; }

  .toggle-track{ transition:background .35s ease, border-color .35s ease; }
  .toggle-thumb{ transition:transform .35s cubic-bezier(.2,.8,.2,1); }
  html.light .toggle-thumb{ transform:translateX(20px); }


.home{
  margin-top: 120px;
}
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(#8B5CF6,#2E7CF6); border-radius:10px; }