:root{
    --bg:#3b3b6e;
    --bg-2:#2d2a50;
    --panel:rgba(255,255,255,.05);
    --panel-strong:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.1);
    --text:rgba(255,255,255,.92);
    --text-dim:rgba(255,255,255,.7);
    --text-faint:rgba(255,255,255,.55);
    --violet:#a082ff;
    --violet-strong:#8b5fe8;
    --violet-soft:#9b7fe8;
    --blue:#4f9fe8;
    --ice:#aac8ff;
    --pink:#e84fa8;
    --pink-soft:#f0b0e8;
    --rose:#e87fa8;
    --teal:#7fe8cc;
    --peach:#e8b87f;
    --mint:#a0f0d8;
    --lavender:#ddd0ff;
    --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --container:1180px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
  body{
    background:var(--bg); color:var(--text);
    font-family:var(--font); font-weight:300;
    font-size:16px; line-height:1.55;
    overflow-x:hidden; width:100%; -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; }
  :focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:4px; }

  .bg-orbs{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
  .blob{ position:absolute; border-radius:50%; filter:blur(90px); }
  .blob-1{ width:520px; height:520px; background:var(--violet-strong); opacity:.35; top:-14%; left:-10%; animation:drift 46s ease-in-out infinite alternate; }
  .blob-2{ width:500px; height:500px; background:var(--blue); opacity:.42; top:26%; right:-16%; animation:drift 58s ease-in-out infinite alternate; animation-delay:-10s; }
  .blob-3{ width:600px; height:600px; background:var(--pink); opacity:.40; bottom:-14%; left:24%; animation:drift 64s ease-in-out infinite alternate; animation-delay:-22s; }

  @keyframes drift{
    0%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(36px,-26px) scale(1.06); }
    100%{ transform:translate(-26px,18px) scale(.96); }
  }

  .grain{
    position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:140px 140px;
  }

  .nav{
    position:fixed; top:18px; left:50%; transform:translateX(-50%);
    width:min(94%, 980px); max-width:100vw; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:12px 14px 12px 22px;
    background:var(--panel); border:1px solid var(--border);
    border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .logo{ font-size:1.3rem; font-weight:100; letter-spacing:.01em; white-space:nowrap; }
  .logo .dot{ color:var(--violet); font-weight:300; }
  .nav-links{ display:flex; gap:30px; font-size:.85rem; color:var(--text); }
  .nav-links a{ text-decoration:none; transition:color .2s; }
  .nav-links a:hover{ color:var(--text); }
  .nav-right{ display:flex; align-items:center; gap:10px; }

  .lang-switch{ position:relative; }
  .lang-btn{
    font-family:var(--font); font-size:.78rem; font-weight:500; letter-spacing:.04em;
    color:var(--text); background:var(--panel-strong); border:1px solid var(--border);
    border-radius:999px; padding:8px 14px; cursor:pointer; display:flex; align-items:center; gap:6px;
  }
  .lang-btn svg{ width:9px; height:7px; transition:transform .2s; }
  .lang-switch.open .lang-btn svg{ transform:rotate(180deg); }
  .lang-menu{
    position:absolute; top:calc(100% + 10px); right:0; min-width:150px;
    background:var(--bg-2); border:1px solid var(--border); border-radius:14px;
    padding:6px; display:flex; flex-direction:column; gap:2px;
    box-shadow:0 18px 50px rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s;
  }
  .lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .lang-menu a{
    all:unset; cursor:pointer; padding:9px 12px; border-radius:9px; font-size:.85rem;
    font-family:var(--font); font-weight:300; color:var(--text-dim);
    display:flex; justify-content:space-between; align-items:center;
  }
  .lang-menu a:hover{ background:var(--panel-strong); color:var(--text); }
  .lang-menu a.active{ color:var(--text); font-weight:500; }
  .lang-menu a.active::after{ content:'\25CF'; font-size:.5rem; color:var(--teal); }

  .btn-pill{
    font-family:var(--font); font-size:.82rem; font-weight:500;
    color:var(--bg); background:var(--text); border:none; border-radius:999px;
    padding:10px 22px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
    transition:opacity .2s; white-space:nowrap;
  }
  .btn-pill:hover{ opacity:.85; }

  .menu-btn{
    display:none; width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--panel-strong); border:1px solid var(--border); cursor:pointer; padding:0;
    align-items:center; justify-content:center; color:var(--text);
  }
  .menu-btn svg{ width:16px; height:16px; }
  .nav-mobile-menu{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    background:var(--bg-2); border:1px solid var(--border); border-radius:20px;
    padding:8px; display:flex; flex-direction:column; gap:2px;
    box-shadow:0 18px 50px rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s, transform .18s, visibility .18s;
  }
  .nav.menu-open .nav-mobile-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav-mobile-menu a{
    text-decoration:none; color:var(--text-dim); font-size:.95rem; font-weight:300;
    padding:13px 16px; border-radius:13px;
  }
  .nav-mobile-menu a:hover{ background:var(--panel-strong); color:var(--text); }

  .section{ padding:clamp(70px,10vw,130px) 24px; position:relative; }
  .container{ max-width:var(--container); margin:0 auto; }
  .eyebrow{
    font-size:.75rem; font-weight:500; letter-spacing:.22em;
    color:var(--text-dim); margin-bottom:18px; text-shadow:0 2px 16px rgba(0,0,0,.5);
  }

  /* ---------- hero ---------- */
  .hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding:140px 24px 80px; }
  @supports (height:100dvh){ .hero{ min-height:100dvh; } }
  .hero-inner{
    max-width:var(--container); margin:0 auto; width:100%;
    display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;
  }
  .hero-title{
    font-weight:100; font-size:clamp(1.9rem,3.4vw,2.9rem);
    line-height:1.25; letter-spacing:-.01em; margin-bottom:22px;
  }
  .hero-sub{ font-size:1.05rem; font-weight:300; color:var(--text-dim); max-width:480px; margin-bottom:34px; line-height:1.75; }
  .badges{ display:flex; gap:14px; flex-wrap:wrap; }
  .store-badge{
    display:flex; align-items:center; gap:10px; padding:13px 22px;
    background:var(--panel-strong); border:1px solid var(--border); border-radius:14px;
    text-decoration:none; font-size:.85rem; font-weight:500;
    transition:transform .2s, background .2s;
  }
  .store-badge:hover{ background:var(--panel); transform:translateY(-2px); }
  .store-badge{ color:var(--text); }
  .store-badge svg{ width:20px; height:20px; flex-shrink:0; }

  /* orb */
  .orb-stage{ position:relative; aspect-ratio:1/1; max-width:420px; margin:0 auto; width:100%; }
  .orb-halo{
    position:absolute; inset:-16%; border-radius:50%;
    background:radial-gradient(circle at 42% 38%, rgba(221,208,255,.9) 0%, rgba(170,200,255,.6) 25%, rgba(240,176,232,.42) 45%, rgba(160,240,216,0) 62%);
    filter:blur(26px);
    animation:breathe 7s ease-in-out infinite;
  }
  .orb-ring{
    position:absolute; inset:8%; border-radius:50%;
    border:1px solid rgba(180,150,255,.45);
    animation:ripple 6s ease-out infinite;
  }
  .orb-ring.r2{ animation-delay:3s; }
  @keyframes ripple{
    0%{ transform:scale(1); opacity:0; }
    12%{ opacity:.18; }
    100%{ transform:scale(2.4); opacity:0; }
  }

  .orb{
    position:absolute; inset:8%; border-radius:50%;
    background:
      radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.05) 82%, rgba(0,0,0,.18) 100%),
      radial-gradient(circle at 25% 20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.2) 21%, rgba(255,255,255,0) 42%),
      radial-gradient(circle at 30% 70%, rgba(127,232,204,.4) 0%, rgba(232,184,127,.3) 25%, rgba(127,184,232,0) 50%),
      radial-gradient(circle at 65% 68%, rgba(232,127,168,.5) 0%, rgba(155,127,232,.35) 25%, rgba(127,184,232,0) 55%),
      radial-gradient(circle at 38% 32%, rgba(255,255,255,.95) 0%, rgba(221,208,255,.82) 13.6%, rgba(170,200,255,.68) 32.2%, rgba(160,240,216,.58) 47.1%, rgba(240,176,232,.62) 100%);
    box-shadow:0 30px 90px rgba(155,127,232,.35);
    animation:breathe 7s ease-in-out infinite;
  }
  @keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

  /* ---------- section headers ---------- */
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
    margin-bottom:56px; flex-wrap:wrap;
  }
  .section-head h2{ font-weight:100; font-size:clamp(2rem,4vw,3rem); max-width:560px; letter-spacing:-.01em; }
  .section-head p{ color:var(--text-dim); max-width:340px; font-size:.95rem; font-weight:300; line-height:1.75; }

  /* ---------- modes grid ---------- */
  .modes-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .mode-card{
    background:var(--panel); border:1px solid var(--border); border-radius:20px;
    padding:30px 24px; display:flex; flex-direction:column; gap:18px;
    backdrop-filter:blur(10px); transition:transform .25s ease, background .25s ease;
  }
  .mode-card:hover{ transform:translateY(-4px); background:var(--panel-strong); }
  .mode-orb{ width:42px; height:42px; border-radius:50%; }
  .mode-card h3{ font-size:1.15rem; font-weight:500; }
  .mode-card p{ color:rgba(255,255,255,.78); font-size:.88rem; font-weight:300; line-height:1.65; }

  .m1{ background:radial-gradient(circle at 32% 28%, #fff, var(--lavender) 50%, var(--ice) 100%); box-shadow:0 0 22px rgba(170,200,255,.4); }
  .m2{ background:radial-gradient(circle at 32% 28%, var(--lavender), var(--violet-soft) 55%, var(--violet-strong) 100%); box-shadow:0 0 22px rgba(155,127,232,.4); }
  .m3{ background:radial-gradient(circle at 32% 28%, #fff, var(--ice) 50%, var(--blue) 100%); box-shadow:0 0 22px rgba(79,159,232,.4); }
  .m4{ background:radial-gradient(circle at 32% 28%, var(--pink-soft), var(--peach) 55%, var(--pink) 100%); box-shadow:0 0 22px rgba(232,79,168,.4); }
  .m5{ background:radial-gradient(circle at 32% 28%, var(--pink-soft), var(--rose) 50%, var(--violet-soft) 100%); box-shadow:0 0 22px rgba(232,127,168,.4); }
  .m6{ background:radial-gradient(circle at 32% 28%, var(--ice), var(--violet-soft) 55%, var(--pink) 100%); box-shadow:0 0 22px rgba(232,79,168,.35); }
  .m7{ background:radial-gradient(circle at 32% 28%, var(--teal), var(--peach) 60%, var(--violet-strong) 100%); box-shadow:0 0 22px rgba(127,232,204,.4); }
  .m8{ background:radial-gradient(circle at 32% 28%, var(--mint), var(--violet-soft) 55%, var(--bg-2) 100%); box-shadow:0 0 22px rgba(155,127,232,.35); }

  /* ---------- how it works ---------- */
  .how-inner{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
  .how-body{ color:var(--text-dim); margin-top:18px; line-height:1.8; font-size:1rem; font-weight:300; }
  .how-tip{
    display:inline-flex; align-items:center; gap:10px; margin-top:26px;
    padding:12px 18px; background:var(--panel); border:1px solid var(--border);
    border-radius:999px; font-size:.85rem; font-weight:300; color:var(--text-dim);
  }
  .how-tip svg{ width:16px; height:16px; color:var(--violet); flex-shrink:0; }

  /* phone mockup */
  .phone{
    width:100%; max-width:300px; margin:0 auto; aspect-ratio:9/18.2;
    border:1px solid var(--border); border-radius:38px;
    background:linear-gradient(165deg, var(--bg-2), var(--bg));
    position:relative; overflow:hidden;
    -webkit-clip-path:inset(0 round 38px); clip-path:inset(0 round 38px);
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    display:flex; flex-direction:column; align-items:center;
  }
  .phone-blob{ position:absolute; border-radius:50%; filter:blur(34px); }
  .pb1{ width:170px; height:170px; background:var(--violet-strong); opacity:.5; top:-50px; left:-55px; }
  .pb2{ width:170px; height:170px; background:var(--blue); opacity:.42; top:28%; right:-65px; }
  .pb3{ width:170px; height:170px; background:var(--pink); opacity:.4; bottom:-50px; left:18%; }

  .phone-pill{
    position:relative; z-index:2; margin-top:32px; display:flex; align-items:center; gap:8px;
    background:var(--panel-strong); border:1px solid var(--border); border-radius:20px;
    padding:8px 18px; font-size:.78rem; font-weight:300; color:var(--text-dim);
    backdrop-filter:blur(10px);
  }
  .phone-pill-dot{ width:5px; height:5px; border-radius:50%; background:var(--violet); }
  .phone-pill-chevron{ font-size:.7rem; opacity:.5; transform:rotate(90deg); display:inline-block; }

  .phone-content{
    flex:1; width:100%; min-height:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }

  .phone-question{ position:relative; z-index:2; font-size:.92rem; font-weight:300; color:var(--text); text-align:center; line-height:1.5; padding:0 12%; }
  .phone-orb-wrap{ position:relative; z-index:2; margin-top:18px; width:42%; aspect-ratio:1/1; }
  .phone-orb{
    position:absolute; inset:0; border-radius:50%;
    background:
      radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.05) 82%, rgba(0,0,0,.18) 100%),
      radial-gradient(circle at 25% 20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.2) 21%, rgba(255,255,255,0) 42%),
      radial-gradient(circle at 30% 70%, rgba(127,232,204,.4) 0%, rgba(232,184,127,.3) 25%, rgba(127,184,232,0) 50%),
      radial-gradient(circle at 65% 68%, rgba(232,127,168,.5) 0%, rgba(155,127,232,.35) 25%, rgba(127,184,232,0) 55%),
      radial-gradient(circle at 38% 32%, rgba(255,255,255,.95) 0%, rgba(221,208,255,.82) 13.6%, rgba(170,200,255,.68) 32.2%, rgba(160,240,216,.58) 47.1%, rgba(240,176,232,.62) 100%);
    box-shadow:0 0 40px rgba(155,127,232,.4);
    animation:breathe 7s ease-in-out infinite;
  }

  .phone-chips{ position:relative; z-index:2; margin-top:18px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:0 8%; }
  .phone-chip{ font-size:.68rem; font-weight:300; color:var(--text); background:var(--panel-strong); border:1px solid var(--border); border-radius:14px; padding:6px 12px; }

  .phone-controls{ position:relative; z-index:2; margin-top:20px; display:flex; align-items:center; gap:10px; justify-content:center; }
  .phone-play-btn{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:var(--panel-strong); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
  }
  .phone-play-btn svg{ width:14px; height:14px; }
  .phone-mode-btn{
    font-size:.7rem; font-weight:300; color:var(--text-dim);
    background:var(--panel-strong); border:1px solid var(--border);
    border-radius:999px; padding:11px 18px; white-space:nowrap;
  }

  .phone-nav{
    position:absolute; bottom:14px; left:14px; right:14px; height:50px;
    background:rgba(48,42,90,.82); border:1px solid var(--border); border-radius:26px;
    display:flex; align-items:center; z-index:2;
  }
  .phone-nav-indicator{
    position:absolute; left:6px; top:6px; width:calc(25% - 8px); height:calc(100% - 12px);
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:18px;
  }
  .phone-tab{ flex:1; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; color:rgba(255,255,255,.32); }
  .phone-tab.active{ color:rgba(255,255,255,.92); }
  .phone-tab svg{ width:18px; height:18px; }

  /* ---------- pricing ---------- */
  .pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .plan{
    border:1px solid var(--border); border-radius:24px; padding:38px;
    background:var(--panel); display:flex; flex-direction:column; gap:22px;
  }
  .plan.premium{
    border-color:rgba(160,130,255,.4);
    background:linear-gradient(160deg, rgba(160,130,255,.12), rgba(127,232,204,.06));
    box-shadow:0 0 60px rgba(160,130,255,.15);
  }
  .plan h3{ font-size:1.6rem; font-weight:500; }
  .plan .desc{ color:var(--text-dim); font-size:.92rem; font-weight:300; }
  .plan ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:6px; }
  .plan li{ display:flex; gap:12px; align-items:center; font-size:.92rem; font-weight:300; }
  .plan li svg{ width:16px; height:16px; color:var(--teal); flex-shrink:0; }

  .faq-list{ display:flex; flex-direction:column; gap:14px; max-width:760px; }
  .faq-item{
    border:1px solid var(--border); border-radius:16px; padding:22px 26px;
    background:var(--panel);
  }
  .faq-item summary{
    cursor:pointer; font-weight:500; font-size:1.02rem; list-style:none;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:"+"; color:var(--text-dim); font-weight:300; font-size:1.3rem; flex-shrink:0; }
  .faq-item[open] summary::after{ content:"–"; }
  .faq-item p{ color:var(--text-dim); font-size:.92rem; font-weight:300; line-height:1.7; margin-top:14px; }

  .mood-orb{
    display:inline-block; border-radius:50%;
    background:
      radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.05) 82%, rgba(0,0,0,.18) 100%),
      radial-gradient(circle at 25% 20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.2) 21%, rgba(255,255,255,0) 42%),
      radial-gradient(circle at 30% 70%, rgba(127,232,204,.4) 0%, rgba(232,184,127,.3) 25%, rgba(127,184,232,0) 50%),
      radial-gradient(circle at 65% 68%, rgba(232,127,168,.5) 0%, rgba(155,127,232,.35) 25%, rgba(127,184,232,0) 55%),
      radial-gradient(circle at 38% 32%, rgba(255,255,255,.95) 0%, rgba(221,208,255,.82) 13.6%, rgba(170,200,255,.68) 32.2%, rgba(160,240,216,.58) 47.1%, rgba(240,176,232,.62) 100%);
    box-shadow:0 10px 30px rgba(155,127,232,.35);
    animation:moodOrbBreathe 3s ease-in-out infinite;
  }
  @keyframes moodOrbBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
  @media (prefers-reduced-motion: reduce){ .mood-orb{ animation:none; } }
  .page-loader{
    position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
    background:var(--bg); opacity:1; transition:opacity .4s ease;
  }
  .page-loader.loaded{ opacity:0; pointer-events:none; }
  .page-loader-orb{ width:56px; height:56px; }
  .reveal-wrap img{ filter:blur(22px); transform:scale(1.04); transition:filter .7s ease, transform .7s ease; }
  .reveal-wrap.loaded img{ filter:blur(0); transform:scale(1); }
  .reveal-shimmer{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; transition:opacity .4s ease; }
  .reveal-shimmer::after{
    content:''; position:absolute; top:0; bottom:0; left:-60%; width:60%;
    background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
    animation:shimmerMove 1.3s ease-in-out infinite; will-change:transform;
  }
  .reveal-wrap.loaded .reveal-shimmer{ opacity:0; }
  @keyframes shimmerMove{ 0%{ transform:translateX(0); } 100%{ transform:translateX(266%); } }
  @media (prefers-reduced-motion: reduce){ .reveal-wrap img{ transition:none; filter:none; transform:none; } .reveal-shimmer{ display:none; } }
  .blog-carousel-track{
    display:flex; gap:20px; overflow-x:auto; padding:6px 6px 22px; margin:0 -6px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:rgba(160,130,255,.3) transparent;
  }
  .blog-carousel-track.autoplay{ scroll-snap-type:none; }
  .blog-carousel-card{
    position:relative; flex:0 0 320px; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
    background:var(--panel-strong); text-decoration:none; color:var(--text);
    border:1px solid var(--border); scroll-snap-align:start;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  }
  .blog-carousel-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 10px 26px rgba(160,130,255,.22), 0 0 0 1px rgba(160,130,255,.5) inset; text-decoration:none; }
  .blog-carousel-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .blog-carousel-card .grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,40,0) 38%, rgba(20,18,40,.94) 100%); z-index:1; }
  .blog-carousel-card .tag{ position:absolute; top:12px; left:12px; z-index:2; font-size:.62rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text); background:rgba(20,18,40,.55); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 10px; }
  .blog-carousel-card .title{
    position:absolute; left:16px; right:16px; bottom:14px; z-index:2; font-size:.95rem; font-weight:500; line-height:1.3;
    transition:transform .3s ease; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .blog-carousel-card .read{
    position:absolute; right:14px; bottom:14px; z-index:2; font-size:.72rem; font-weight:500;
    background:var(--text); color:var(--bg); border-radius:999px; padding:7px 14px;
    opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease; white-space:nowrap;
  }
  @media (hover:hover) and (pointer:fine){
    .blog-carousel-card:hover .read{ opacity:1; transform:translateY(0); }
    .blog-carousel-card:hover .title{ transform:translateY(-38px); }
  }
  @media (max-width:640px){ .blog-carousel-card{ flex-basis:240px; } }
  .section-head .btn-outline{ width:auto; padding:11px 22px; }
  .plan .cta{ margin-top:auto; padding-top:8px; }
  .btn-outline, .btn-solid{
    display:inline-flex; align-items:center; justify-content:center; width:100%;
    padding:13px 0; border-radius:999px; font-weight:500; font-size:.9rem;
    text-decoration:none; transition:opacity .2s; font-family:var(--font);
  }
  .btn-outline{ border:1px solid var(--border); color:var(--text); background:transparent; }
  .btn-solid{ border:none; color:var(--bg); background:var(--text); }
  .btn-outline:hover, .btn-solid:hover{ opacity:.8; }

  /* ---------- footer ---------- */
  .footer{ border-top:1px solid var(--border); padding:60px 24px 40px; }
  .footer-inner{ max-width:var(--container); margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
  .footer-quote{ font-style:italic; font-weight:300; font-size:1.1rem; color:var(--text-dim); max-width:480px; line-height:1.6; }
  .footer-badges{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .footer-links{ display:flex; gap:26px; font-size:.85rem; font-weight:300; color:var(--text-dim); flex-wrap:wrap; justify-content:center; }
  .footer-links a{ text-decoration:none; transition:color .2s; }
  .footer-links a:hover{ color:var(--text); }
  .footer-social{ display:flex; gap:18px; justify-content:center; }
  .footer-social a{ color:var(--text-dim); transition:color .2s; display:flex; }
  .footer-social a:hover{ color:var(--text); }
  .footer-social svg{ width:20px; height:20px; }
  .footer-languages{ font-size:.82rem; font-weight:300; color:var(--text-dim); max-width:480px; }
  .footer-bottom{ font-size:.78rem; font-weight:300; color:var(--text-dim); }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .hero-inner{ grid-template-columns:1fr; text-align:center; gap:50px; }
    .hero-sub{ margin-left:auto; margin-right:auto; }
    .badges{ justify-content:center; }
    .orb-stage{ order:-1; max-width:300px; }
    .how-inner{ grid-template-columns:1fr; }
    .how-inner .phone{ order:-1; margin-bottom:10px; }
    .pricing-grid{ grid-template-columns:1fr; }
    .nav-links{ display:none; }
    .menu-btn{ display:flex; }
  }
  @media (max-width:760px){
    .modes-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:520px){
    .modes-grid{ grid-template-columns:1fr; }
    .section-head{ flex-direction:column; align-items:flex-start; }
    .logo{ font-size:1.1rem; }
    .nav{ padding:10px 10px 10px 18px; gap:8px; }
    .nav-right{ gap:6px; }
    .lang-btn{ padding:7px 10px; font-size:.72rem; gap:4px; }
    .btn-pill{ padding:9px 14px; font-size:.74rem; }
    .menu-btn{ width:34px; height:34px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }
#blog-carousel{ padding-bottom:0; }
#blog-carousel.is-hidden{ display:none; }