:root {
      --bg:#F5F4F1; --bg-alt:#EDECEA; --surface:rgba(255,255,255,0.80);
      --border:rgba(123,44,191,0.18); --purple:#7B2CBF; --purple-soft:#9D4EDD;
      --purple-pale:#E8D5F7; --ink:#0F0B18; --muted:#6B6573; --white:#FFFFFF;
      --footer-bg:#0C0A13; --radius:16px;
      --font-display:'Bebas Neue',sans-serif; --font-body:'DM Sans',sans-serif;
      --glow:0 0 24px rgba(123,44,191,0.45),0 0 64px rgba(123,44,191,0.18);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    /* OPTIMIZED: Removed scroll-behavior: smooth (blocks main thread on mobile) */
    body
    {font-family:var(--font-body);background:var(--bg);color:var(--ink);overflow-x:hidden;}
    ::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-track{background:var(--bg);}
    ::-webkit-scrollbar-thumb{background:var(--purple);border-radius:10px;}

    /* WELCOME BANNER — seamless marquee UPGRADED */
    .welcome-banner{
      background:linear-gradient(90deg,#0C0A13 0%,#1a0a2e 50%,#0C0A13 100%);
      color:var(--white);overflow:hidden;white-space:nowrap;
      padding:13px 0;font-size:14px;font-weight:400;letter-spacing:0.09em;
      position:relative;z-index:200;
      border-bottom:1px solid rgba(180,80,255,.25);
    }
    .welcome-banner::after{
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse at 50% 0%,rgba(123,44,191,.2) 0%,transparent 70%);
      pointer-events:none;
    }
    .welcome-banner-track{
      display:inline-flex;gap:0;
      animation:bannerScroll 32s linear infinite;
      will-change:transform;
    }
    .welcome-banner-track span{color:#C77DFF;font-weight:600;}
    .banner-item{
      display:inline-block;padding:0 72px;white-space:nowrap;flex-shrink:0;
    }
    @keyframes bannerScroll{
      0%{transform:translateX(0);}
      100%{transform:translateX(-50%);}
    }

    /* CONTAINER */
    .container{width:92%;max-width:1180px;margin:0 auto;}

    /* NAVBAR */
    nav{
      position:fixed;top:36px;left:0;right:0;z-index:100;
      padding:20px 0;transition:background .35s,box-shadow .35s,top .4s;
    }
    nav.scrolled{
      top:0;background:rgba(245,244,241,0.97);
      box-shadow:0 1px 0 rgba(123,44,191,0.12);
    }
    nav .container{display:flex;align-items:center;justify-content:space-between;gap:0;}
    nav .container .nav-links-wrap{flex:1;display:flex;justify-content:center;padding-left:80px;}

    /* LOGO */
    .nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
    .logo-img-wrap{
      width:42px;height:42px;border-radius:12px;
      background:linear-gradient(135deg,#1a0a2e,#2d0f5e);
      display:grid;place-items:center;overflow:hidden;flex-shrink:0;
      border-top:1px solid rgba(255,255,255,.12);box-shadow:0 0 16px rgba(180,80,255,.35);
      border:1px solid rgba(180,80,255,.35);
      transition:box-shadow .3s,transform .3s;
    }
    .nav-logo:hover .logo-img-wrap{
      box-shadow:0 0 20px rgba(180,80,255,.70),inset 0 1px 0 rgba(255,255,255,.18);
      transform:scale(1.06);
    }
    .logo-img-wrap img{width:38px;height:38px;object-fit:contain;}
    .logo-text{
      font-family:var(--font-display);font-weight:400;font-size:20px;
      color:var(--ink);letter-spacing:0.08em;
      text-shadow:none;transition:text-shadow .3s;
    }
    .nav-logo:hover .logo-text{text-shadow:0 0 18px rgba(123,44,191,.4);}
    .logo-text .dot-io{color:var(--purple);text-shadow:0 0 12px rgba(123,44,191,.7);}

    /* NAV LINKS */
    .nav-links{display:flex;align-items:center;gap:32px;list-style:none;flex-wrap:nowrap;white-space:nowrap;}
    .nav-links a{
      text-decoration:none;font-size:15px;font-weight:600;
      color:var(--ink);transition:color .3s,letter-spacing .3s;letter-spacing:.04em;position:relative;
      text-transform:uppercase;
    }
    .nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;
      background:var(--purple);transition:width .3s ease;border-radius:2px;}
    .nav-links a:hover{color:var(--purple);letter-spacing:.06em;}
    .nav-links a:hover::after{width:100%;}

    /* LOGIN BUTTON — premium gradient */
    .btn-login{
      position:relative;display:inline-flex;align-items:center;gap:8px;
      padding:10px 24px;font-family:var(--font-body);font-size:13px;
      font-weight:600;color:#fff;
      background:linear-gradient(135deg,#7B2CBF 0%,#9D4EDD 60%,#C77DFF 100%);
      border:none;border-radius:50px;cursor:pointer;
      text-decoration:none;letter-spacing:.05em;text-transform:uppercase;
      box-shadow:0 4px 16px rgba(123,44,191,.35);
      transition:all .25s cubic-bezier(.34,1.26,.64,1);
      overflow:hidden;
    }
    .btn-login::before{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);
      border-radius:50px;pointer-events:none;
    }
    .btn-login::after{
      content:'';position:absolute;inset:-2px;border-radius:50px;
      background:linear-gradient(135deg,#C77DFF,#7B2CBF,#C77DFF);
      z-index:-1;opacity:0;transition:opacity .25s;
    }
    .btn-login:hover{
      transform:translateY(-2px) scale(1.04);
      box-shadow:0 8px 28px rgba(123,44,191,.65),0 0 0 2px rgba(199,125,255,.4),0 1px 0 rgba(255,255,255,.2) inset;
      background:linear-gradient(135deg,#9D4EDD 0%,#C77DFF 60%,#7B2CBF 100%);
    }
    .btn-login:hover::after{opacity:1;}
    .btn-login:active{transform:scale(.97);}
    .btn-login svg{width:14px;height:14px;stroke:#fff;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(255,255,255,.4));}
    /* User avatar in navbar after login */
    .nav-user{
      display:none;align-items:center;gap:10px;cursor:pointer;
      background:var(--purple-pale);border-radius:50px;padding:6px 14px 6px 8px;
      border:1px solid rgba(123,44,191,.2);transition:all .2s;
    }
    .nav-user:hover{background:var(--purple);color:#fff;}
    .nav-user:hover .nav-user-name{color:#fff;}
    .nav-user-avatar{
      width:28px;height:28px;border-radius:50%;background:var(--purple);
      display:grid;place-items:center;color:#fff;font-size:13px;font-weight:600;flex-shrink:0;
    }
    .nav-user-name{font-size:13px;font-weight:500;color:var(--purple);white-space:nowrap;}
    /* ═══════════════════════════════════════════════
       AUTH MODAL — PREMIUM GOOGLE-STYLE
    ═══════════════════════════════════════════════ */
    .auth-overlay{
      display:none;position:fixed;inset:0;z-index:10000;
      background:rgba(15,10,30,.80);
      align-items:center;justify-content:center;padding:16px;
    }
    .auth-overlay.open{display:flex;}

    .auth-box{
      background:#fff;border-radius:20px;width:100%;max-width:360px;
      box-shadow:0 8px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
      animation:authIn .36s cubic-bezier(.34,1.26,.64,1);
      overflow:hidden;position:relative;
    }
    @keyframes authIn{
      from{opacity:0;transform:scale(.92) translateY(20px);}
      to{opacity:1;transform:scale(1) translateY(0);}
    }

    /* TOP BRAND STRIP */
    .auth-brand{
      padding:20px 28px 0;text-align:center;
    }
    .auth-brand-logo{
      width:40px;height:40px;border-radius:12px;margin:0 auto 10px;
      background:linear-gradient(135deg,#1a0a2e,#3d1280);
      display:grid;place-items:center;
      box-shadow:0 4px 16px rgba(123,44,191,.35),inset 0 1px 0 rgba(255,255,255,.12);
    }
    .auth-brand-logo svg{width:32px;height:32px;}
    .auth-brand h3{
      font-family:'DM Sans',sans-serif;font-size:18px;font-weight:700;
      color:#0F0B18;letter-spacing:-.02em;margin-bottom:4px;
    }
    .auth-brand p{font-size:13px;color:#888;font-weight:400;margin-bottom:0;}

    /* TABS */
    .auth-tabs{
      display:flex;margin:16px 28px 0;
      background:#f5f4f1;border-radius:12px;padding:4px;gap:4px;
    }
    .auth-tab{
      flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;
      cursor:pointer;color:#888;letter-spacing:.02em;
      border:none;background:transparent;font-family:'DM Sans',sans-serif;
      border-radius:9px;transition:all .2s;
    }
    .auth-tab.active{
      color:#0F0B18;background:#fff;
      box-shadow:0 1px 4px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.04);
    }

    /* BODY */
    .auth-body{padding:14px 28px 22px;}
    .auth-panel{display:none;animation:panelIn .22s ease;}
    .auth-panel.active{display:block;}
    @keyframes panelIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

    /* FIELDS */
    .auth-field{margin-bottom:10px;position:relative;}
    .auth-field label{
      display:block;font-size:12px;font-weight:500;color:#444;
      letter-spacing:.01em;margin-bottom:6px;
    }
    .auth-field-wrap{position:relative;}
    .auth-field input{
      width:100%;padding:10px 14px;border:1.5px solid #e8e8e8;
      border-radius:12px;font-size:14px;font-family:'DM Sans',sans-serif;color:#0F0B18;
      background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;
      -webkit-appearance:none;
    }
    .auth-field input:focus{
      border-color:#7B2CBF;
      box-shadow:0 0 0 3px rgba(123,44,191,.10);
    }
    .auth-field input::placeholder{color:#bbb;}
    .auth-field input.has-eye{padding-right:46px;}

    /* EYE TOGGLE */
    .eye-btn{
      position:absolute;right:14px;top:50%;transform:translateY(-50%);
      background:none;border:none;cursor:pointer;padding:4px;
      color:#aaa;transition:color .2s;line-height:0;
    }
    .eye-btn:hover{color:#7B2CBF;}
    .eye-btn svg{width:18px;height:18px;}

    /* FORGOT */
    .auth-forgot{
      display:block;text-align:right;font-size:12px;color:#7B2CBF;
      cursor:pointer;text-decoration:none;background:none;border:none;
      font-family:'DM Sans',sans-serif;margin-top:-8px;margin-bottom:16px;
      font-weight:500;transition:color .2s;
    }
    .auth-forgot:hover{color:#9D4EDD;text-decoration:underline;}

    /* MAIN BUTTON */
    .auth-btn{
      width:100%;padding:11px;
      background:linear-gradient(135deg,#7B2CBF 0%,#9D4EDD 100%);
      color:#fff;border:none;border-radius:12px;
      font-size:14px;font-weight:600;cursor:pointer;
      font-family:'DM Sans',sans-serif;letter-spacing:.01em;
      transition:all .2s;
      box-shadow:0 4px 16px rgba(123,44,191,.35);
      display:flex;align-items:center;justify-content:center;gap:8px;
      position:relative;overflow:hidden;
    }
    .auth-btn::before{
      content:'';position:absolute;inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);
      pointer-events:none;
    }
    .auth-btn:hover{
      background:linear-gradient(135deg,#6a1fa8 0%,#8B3ECC 100%);
      transform:translateY(-1px);
      box-shadow:0 6px 24px rgba(123,44,191,.45);
    }
    .auth-btn:active{transform:scale(.98);}
    .auth-btn:disabled{
      background:linear-gradient(135deg,#b0a0c8 0%,#c0b0d8 100%);
      cursor:not-allowed;transform:none;box-shadow:none;
    }

    /* SPINNER */
    .auth-spinner{
      width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);
      border-top-color:#fff;border-radius:50%;
      animation:spin .7s linear infinite;flex-shrink:0;
    }
    @keyframes spin{to{transform:rotate(360deg);}}

    /* DIVIDER */
    .auth-divider{
      display:flex;align-items:center;gap:12px;
      margin:10px 0;color:#ccc;font-size:12px;font-weight:500;
    }
    .auth-divider::before,.auth-divider::after{
      content:'';flex:1;height:1px;background:#ebebeb;
    }

    /* GOOGLE BUTTON */
    .auth-google-btn{
      width:100%;padding:10px 14px;
      background:#fff;color:#3c3c3c;
      border:1.5px solid #e0e0e0;border-radius:12px;
      font-size:14px;font-weight:500;cursor:pointer;
      font-family:'DM Sans',sans-serif;
      display:flex;align-items:center;justify-content:center;gap:10px;
      transition:all .2s;
      box-shadow:0 1px 4px rgba(0,0,0,.06);
    }
    .auth-google-btn:hover{
      background:#f8f8f8;border-color:#c0c0c0;
      box-shadow:0 2px 10px rgba(0,0,0,.10);
      transform:translateY(-1px);
    }
    .auth-google-btn:active{transform:scale(.98);}
    .auth-google-icon{width:18px;height:18px;flex-shrink:0;}

    /* MESSAGE */
    .auth-msg{
      font-size:13px;padding:11px 14px;border-radius:10px;margin-bottom:14px;
      display:none;font-weight:400;line-height:1.5;
    }
    .auth-msg.error{
      background:#fff5f5;color:#c0392b;display:block;
      border:1px solid #fecaca;
    }
    .auth-msg.success{
      background:#f0fff4;color:#276749;display:block;
      border:1px solid #c6f6d5;
    }

    /* CLOSE */
    .auth-close{
      position:absolute;top:16px;right:16px;width:32px;height:32px;
      background:#f5f4f1;border:none;border-radius:50%;
      cursor:pointer;color:#666;font-size:16px;display:grid;place-items:center;
      transition:all .2s;z-index:10;line-height:1;
    }
    .auth-close:hover{background:#ebebeb;color:#0F0B18;}

    /* SWITCH LINK */
    .auth-switch{
      text-align:center;font-size:13px;color:#888;margin-top:16px;
    }
    .auth-switch button{
      background:none;border:none;color:#7B2CBF;font-weight:600;
      cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;
      padding:0;transition:color .2s;
    }
    .auth-switch button:hover{color:#9D4EDD;text-decoration:underline;}

    /* MOBILE */
    @media(max-width:480px){
      .auth-box{border-radius:20px;max-width:100%;}
      .auth-brand,.auth-body{padding-left:24px;padding-right:24px;}
      .auth-tabs{margin-left:24px;margin-right:24px;}
    }

    /* ── WhatsApp in modal ── */
    .btn-whatsapp-modal{
      display:flex;align-items:center;justify-content:center;gap:10px;
      width:100%;padding:13px;background:#25D366;color:#fff;border:none;
      border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;
      font-family:var(--font-body);letter-spacing:.04em;margin-top:10px;
      text-decoration:none;box-sizing:border-box;
      transition:background .2s,transform .2s,box-shadow .2s;
      box-shadow:0 4px 16px rgba(37,211,102,.35);
    }
    .btn-whatsapp-modal:hover{background:#1ebe5d;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.50);}
    .btn-whatsapp-modal svg{width:20px;height:20px;fill:#fff;flex-shrink:0;}
    @media(max-width:480px){
      .btn-whatsapp-modal{font-size:13px;padding:12px 10px;}
    }

    /* HERO */
    .hero{
      min-height:100vh;
      display:grid;
      grid-template-columns:380px 1fr;
      align-items:center;
      gap:0;
      padding:120px 0 40px;
      overflow:visible;
      position:relative;
    }
    .hero-left{
      padding-left:0;
      padding-right:24px;
      z-index:2;
      position:relative;
    }
    .hero-badge{
      display:inline-flex;align-items:center;gap:8px;
      background:var(--purple-pale);color:var(--purple);
      border-radius:50px;padding:6px 16px;font-size:12px;font-weight:500;
      letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px;
      opacity:0;animation:fadeUp .7s .2s ease forwards;
    }
    .hero-badge .dot{width:6px;height:6px;background:var(--purple);border-radius:50%;animation:pulse 1.5s infinite;}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}
    .hero h1{
      font-family:var(--font-display);
      font-size:clamp(38px,4.2vw,68px);
      line-height:.95;
      letter-spacing:.01em;
      color:var(--ink);
      margin-bottom:24px;
      opacity:0;
      animation:fadeUp .7s .35s ease forwards;
    }
    .hero h1 .accent{
      color:var(--purple);
      font-size:clamp(50px,5.8vw,88px);
      display:block;
      line-height:.9;
    }
    .hero-sub{
      font-size:14px;font-weight:300;color:var(--muted);line-height:1.65;
      max-width:340px;margin-bottom:36px;
      opacity:0;animation:fadeUp .7s .5s ease forwards;
    }
    .hero-ctas{
      display:flex;gap:14px;align-items:center;flex-wrap:wrap;
      opacity:0;animation:fadeUp .7s .65s ease forwards;
    }
    .btn-primary{
      padding:13px 30px;background:var(--ink);color:var(--white);
      border-radius:50px;font-family:var(--font-body);font-size:14px;
      font-weight:500;text-decoration:none;letter-spacing:.02em;
      transition:background .25s,transform .2s;display:inline-block;
    }
    .btn-primary:hover{background:var(--purple);transform:translateY(-2px);}
    .btn-ghost{
      padding:13px 30px;background:transparent;color:var(--ink);
      border:1.5px solid rgba(15,11,24,.20);border-radius:50px;
      font-family:var(--font-body);font-size:14px;font-weight:500;
      text-decoration:none;letter-spacing:.02em;display:inline-block;
      transition:border-color .25s,color .25s,transform .2s;
    }
    .btn-ghost:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px);}

    
    .scroll-hint{
      display:flex;flex-direction:column;align-items:center;gap:8px;
      padding:24px 0 40px;opacity:0;animation:fadeIn 1s 1.3s ease forwards;
    }
    .scroll-hint span{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
    .scroll-line{
      width:1px;height:40px;
      background:linear-gradient(to bottom,var(--purple),transparent);
      animation:scrollLine 1.8s ease-in-out infinite;
    }
    @keyframes scrollLine{
      0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}
      51%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}
    }

    /* STATS */
    .stats{border-top:1px solid rgba(123,44,191,.10);border-bottom:1px solid rgba(123,44,191,.10);padding:36px 0;}
    .stats .container{display:flex;justify-content:space-around;gap:24px;flex-wrap:wrap;}
    .stat-item{text-align:center;}
    .stat-number{font-family:var(--font-display);font-size:48px;color:var(--ink);line-height:1;letter-spacing:.02em;}
    .stat-number span{color:var(--purple);}
    .stat-count{display:inline-block;color:var(--ink);animation:statColorShift 1.5s ease-in-out;}
    @keyframes statColorShift{
      0%{color:var(--purple);transform:translateY(6px) scale(.92);opacity:.4;}
      50%{color:var(--purple);}
      100%{color:var(--ink);transform:translateY(0) scale(1);opacity:1;}
    }
    .stat-label{font-size:12px;color:var(--muted);letter-spacing:.06em;margin-top:4px;text-transform:uppercase;}

    /* SOFTWARE PRODUCTS */
    .software{padding:90px 0 60px;}
    .software-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;}
    .sw-card{
      background:var(--white);border:1px solid rgba(123,44,191,.10);
      border-radius:var(--radius);padding:30px 24px;
      transition:transform .3s,box-shadow .3s,border-color .3s;cursor:pointer;
    }
    .sw-card:hover{transform:translateY(-8px);border-color:var(--purple);box-shadow:var(--glow);}
    /* PRODUCT MODAL */
    .prod-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.60);
      z-index:500;align-items:center;justify-content:center;}
    .prod-overlay.open{display:flex;}
    .prod-modal{background:#fff;border-radius:20px;padding:36px 32px;max-width:400px;width:90%;
      position:relative;box-shadow:0 24px 80px rgba(123,44,191,.25);animation:modalIn .3s ease;}
    @keyframes modalIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
    .prod-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;
      font-size:22px;cursor:pointer;color:var(--muted);transition:color .2s;}
    .prod-modal-close:hover{color:var(--ink);}
    .prod-modal-icon{width:60px;height:60px;border-radius:16px;background:var(--purple-pale);
      display:grid;place-items:center;margin-bottom:16px;}
    .prod-modal-icon svg{width:30px;height:30px;stroke:var(--purple);fill:none;stroke-width:1.8;}
    .prod-modal h3{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px;}
    .prod-modal p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:24px;}
    .qty-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
    .qty-label{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase;}
    .qty-ctrl{display:flex;align-items:center;gap:0;border:1.5px solid rgba(123,44,191,.25);border-radius:50px;overflow:hidden;}
    .qty-btn{width:36px;height:36px;background:transparent;border:none;cursor:pointer;
      font-size:20px;font-weight:300;color:var(--purple);transition:background .2s;
      display:grid;place-items:center;}
    .qty-btn:hover{background:var(--purple-pale);}
    .qty-num{width:44px;text-align:center;font-size:15px;font-weight:600;color:var(--ink);}
    .btn-add-cart{width:100%;padding:9px;background:var(--purple);color:#fff;border:none;
      border-radius:50px;font-size:12px;font-weight:500;cursor:pointer;letter-spacing:.04em;
      transition:background .25s,transform .2s;font-family:var(--font-body);}
    .btn-add-cart:hover{background:#9D4EDD;transform:translateY(-2px);}
    .btn-add-cart:active{transform:scale(.97);}
    .btn-prod-wa{
      display:flex;align-items:center;justify-content:center;gap:8px;
      width:100%;padding:9px;background:#25D366;color:#fff;border:none;
      border-radius:50px;font-size:12px;font-weight:500;cursor:pointer;
      letter-spacing:.04em;text-decoration:none;margin-top:8px;
      transition:background .2s,transform .2s;font-family:var(--font-body);
      box-shadow:0 3px 12px rgba(37,211,102,.35);
    }
    .btn-prod-wa:hover{background:#1ebe5d;transform:translateY(-2px);}
    .btn-prod-wa:active{transform:scale(.97);}
    .btn-prod-wa svg{width:15px;height:15px;fill:#fff;flex-shrink:0;}
    .add-success{text-align:center;color:var(--purple);font-size:13px;margin-top:10px;
      height:18px;opacity:0;transition:opacity .3s;}
    .add-success.show{opacity:1;}
    .sw-icon{
      width:52px;height:52px;border-radius:14px;background:var(--purple-pale);
      display:grid;place-items:center;margin-bottom:20px;
    }
    .sw-icon svg{width:26px;height:26px;stroke:var(--purple);fill:none;stroke-width:1.8;}
    .sw-card h3{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:8px;}
    .sw-card p{font-size:13px;color:var(--muted);line-height:1.6;font-weight:300;}

    /* ═══════════════════════════════════════════════
       PREMIUM MARKETPLACE — Freepik-style Cards
    ═══════════════════════════════════════════════ */

    /* ── BADGE SYSTEM ── */
    .td-badge {
      position:absolute;top:12px;left:12px;z-index:10;
      display:inline-flex;align-items:center;gap:5px;
      font-family:var(--font-body);font-size:10px;font-weight:700;
      letter-spacing:.10em;text-transform:uppercase;
      padding:5px 11px;border-radius:50px;
      pointer-events:none;
      box-shadow:0 2px 10px rgba(0,0,0,.18);
    }
    .td-badge-free {
      background:linear-gradient(135deg,#00c853,#00e676);
      color:#fff;
      border:1px solid rgba(255,255,255,.30);
    }
    .td-badge-pro {
      background:linear-gradient(135deg,#7B2CBF 0%,#C77DFF 60%,#FFD700 100%);
      color:#fff;
      border:1px solid rgba(255,215,0,.35);
      box-shadow:0 2px 14px rgba(123,44,191,.45),0 0 0 1px rgba(255,215,0,.15);
    }
    .td-badge-pro::before {
      content:'✦';font-size:9px;
    }
    .td-badge-free::before {
      content:'↓';font-size:11px;font-weight:900;
    }

    /* ── CARD IMAGE WRAP (hover system) ── */
    .td-img-wrap {
      position:relative;border-radius:14px;overflow:hidden;
      background:linear-gradient(135deg,#f0e8ff,#e4d4f7);
      cursor:pointer;
    }
    .td-img-wrap img {
      width:100%;height:100%;object-fit:cover;display:block;
      transition:transform .42s cubic-bezier(.34,1.1,.64,1);
    }
    /* dark overlay */
    .td-img-wrap .td-overlay {
      position:absolute;inset:0;
      background:linear-gradient(160deg,rgba(15,10,30,.45) 0%,rgba(123,44,191,.55) 100%);
      opacity:0;
      transition:opacity .35s ease;
      border-radius:14px;
    }
    /* download button in center */
    .td-dl-btn {
      position:absolute;top:50%;left:50%;
      transform:translate(-50%,-50%) scale(.7);
      opacity:0;
      transition:transform .35s cubic-bezier(.34,1.26,.64,1), opacity .3s ease;
      background:rgba(255,255,255,.97);
      color:#7B2CBF;
      border:none;border-radius:50px;
      padding:11px 26px;
      font-family:var(--font-body);font-size:13px;font-weight:700;
      letter-spacing:.05em;text-transform:uppercase;
      cursor:pointer;white-space:nowrap;
      box-shadow:0 6px 28px rgba(123,44,191,.40),0 2px 8px rgba(0,0,0,.18);
      display:flex;align-items:center;gap:8px;
      z-index:5;text-decoration:none;
    }
    .td-dl-btn svg {
      width:16px;height:16px;stroke:#7B2CBF;fill:none;stroke-width:2.2;flex-shrink:0;
      transition:stroke .2s;
    }
    .td-dl-btn:hover {
      background:linear-gradient(135deg,#7B2CBF,#C77DFF);
      color:#fff;
    }
    .td-dl-btn:hover svg { stroke:#fff; }

    /* ── Hover trigger (desktop) ── */
    @media(hover:hover){
      .td-img-wrap:hover img { transform:scale(1.07); }
      .td-img-wrap:hover .td-overlay { opacity:1; }
      .td-img-wrap:hover .td-dl-btn { opacity:1; transform:translate(-50%,-50%) scale(1); }
    }
    /* Always visible on mobile */
    @media(hover:none){
      .td-dl-btn {
        opacity:1 !important;
        transform:translate(-50%,-50%) scale(.85) !important;
      }
      .td-overlay { opacity:.45 !important; }
    }

    /* ── PREMIUM PRODUCT CARD ── */
    .td-product-card {
      background:#fff;border-radius:20px;overflow:hidden;
      border:1px solid rgba(123,44,191,.10);
      box-shadow:0 4px 24px rgba(123,44,191,.07);
      transition:transform .35s cubic-bezier(.34,1.1,.64,1),
                 box-shadow .35s ease,
                 border-color .35s ease;
      position:relative;
    }
    .td-product-card:hover {
      transform:translateY(-8px) scale(1.01);
      box-shadow:0 20px 60px rgba(123,44,191,.18),0 4px 16px rgba(0,0,0,.08);
      border-color:rgba(123,44,191,.30);
    }
    .td-card-img-area {
      position:relative;
      padding:16px 16px 0;
    }
    .td-card-img-area .td-img-wrap {
      aspect-ratio:4/3;
    }
    .td-card-body {
      padding:16px 18px 20px;
    }
    .td-card-title {
      font-size:15px;font-weight:600;color:var(--ink);
      margin-bottom:6px;line-height:1.3;
    }
    .td-card-desc {
      font-size:12px;color:var(--muted);line-height:1.55;font-weight:300;
      margin-bottom:14px;
    }
    .td-card-footer {
      display:flex;align-items:center;justify-content:space-between;
    }
    .td-card-price {
      font-size:16px;font-weight:700;color:var(--purple);letter-spacing:.01em;
    }
    .td-card-price.free-price {
      color:#00c853;
    }
    .td-status-pill {
      font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
      padding:4px 10px;border-radius:50px;
    }
    .td-status-pill.free { background:#e8fff0;color:#00a63e; }
    .td-status-pill.pro  { background:#f3e8ff;color:#7B2CBF; }

    /* ── DIGITAL PRODUCTS SECTION (sw-cards) upgrade ── */
    .sw-card {
      position:relative;overflow:hidden;
    }
    .sw-card .td-badge {
      top:14px;right:14px;left:auto;
      font-size:9px;padding:4px 10px;
    }
    /* Glassmorphism shimmer on hover */
    .sw-card::after {
      content:'';position:absolute;inset:0;border-radius:var(--radius);
      background:linear-gradient(135deg,rgba(199,125,255,.08) 0%,rgba(123,44,191,.05) 100%);
      opacity:0;transition:opacity .35s;pointer-events:none;
    }
    .sw-card:hover::after { opacity:1; }

    /* SHOPIFY STORE SECTION */
    .shopify-section{padding:80px 0 60px;}
    #collection-component-1779950079750{width:100%;}

    /* SERVICES */
    .services{content-visibility:auto;contain-intrinsic-size:0 600px;padding:80px 0 60px;}
    .section-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);font-weight:500;margin-bottom:14px;}
    .section-title{font-family:var(--font-display);font-size:clamp(34px,4.5vw,62px);line-height:.98;color:var(--ink);margin-bottom:52px;letter-spacing:.02em;}
    .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
    .service-card{
      padding:40px 32px;background:var(--bg-alt);border:1px solid transparent;
      transition:background .3s,border-color .3s,transform .3s;
    }
    .service-card:first-child{border-radius:var(--radius) 0 0 var(--radius);}
    .service-card:last-child{border-radius:0 var(--radius) var(--radius) 0;}
    .service-card:hover{background:var(--white);border-color:var(--border);transform:translateY(-4px);box-shadow:0 20px 60px rgba(123,44,191,.08);}
    .service-icon{width:48px;height:48px;background:var(--purple-pale);border-radius:12px;display:grid;place-items:center;margin-bottom:22px;}
    .service-icon svg{width:22px;height:22px;stroke:var(--purple);fill:none;stroke-width:1.8;}
    .service-card h3{font-weight:500;font-size:17px;margin-bottom:10px;color:var(--ink);}
    .service-card p{font-size:14px;color:var(--muted);line-height:1.65;font-weight:300;}

    /* PORTFOLIO */
    .portfolio{content-visibility:auto;contain-intrinsic-size:0 600px;padding:80px 0 100px;}
    .portfolio-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px;}
    .view-all{
      font-size:13px;color:var(--purple);text-decoration:none;font-weight:500;
      letter-spacing:.03em;border-bottom:1px solid var(--purple-pale);padding-bottom:2px;
      transition:border-color .2s;
    }
    .view-all:hover{border-color:var(--purple);}
    .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
    .project-card{
      background:#fff;
      border:1px solid rgba(255,255,255,.85);border-radius:var(--radius);overflow:hidden;
      box-shadow:0 8px 32px rgba(123,44,191,.07);
      transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s;
      cursor:pointer;text-decoration:none;display:block;color:inherit;
    }
    .project-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:var(--glow),0 32px 80px rgba(0,0,0,.10);border-color:rgba(123,44,191,.35);}
    .card-thumb{
      aspect-ratio:16/10;background:linear-gradient(135deg,#E8D5F7 0%,#D4BBEF 100%);
      position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
    }
    .card-thumb .thumb-icon{width:48px;height:48px;background:rgba(255,255,255,.55);border-radius:12px;display:grid;place-items:center;}
    .card-thumb svg{width:24px;height:24px;stroke:var(--purple);fill:none;stroke-width:1.6;}
    .project-card:nth-child(2) .card-thumb{background:linear-gradient(135deg,#C77DFF22 0%,#9D4EDD44 100%);}
    .project-card:nth-child(3) .card-thumb{background:linear-gradient(135deg,#7B2CBF22 0%,#C77DFF44 100%);}
    .card-tag-top{
      position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);
      border-radius:50px;padding:4px 12px;
      font-size:11px;font-weight:500;color:var(--purple);letter-spacing:.04em;
    }
    .card-body{padding:20px 20px 4px;}
    .card-body h3{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:3px;}
    .card-body p{font-size:13px;color:var(--muted);font-weight:300;}
    .card-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 18px;}
    .card-tag{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
    .tag-dot{width:8px;height:8px;border-radius:50%;}
    .tag-dot.purple{background:var(--purple);}.tag-dot.pink{background:#E040FB;}.tag-dot.blue{background:#4080FF;}
    .card-arrow{width:30px;height:30px;border-radius:50%;background:var(--purple-pale);display:grid;place-items:center;transition:background .2s;}
    .project-card:hover .card-arrow{background:var(--purple);}
    .project-card:hover .card-arrow svg{stroke:var(--white);}
    .card-arrow svg{width:14px;height:14px;stroke:var(--purple);fill:none;stroke-width:2;transition:stroke .2s;}

    /* PROCESS */
    .process{content-visibility:auto;contain-intrinsic-size:0 400px;padding:80px 0;background:var(--bg-alt);border-radius:32px;margin:0 20px 80px;}
    .process .container{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start;}
    .process-steps{display:flex;flex-direction:column;}
    .step{display:flex;gap:20px;padding:28px 0;border-bottom:1px solid rgba(123,44,191,.10);transition:transform .2s;}
    .step:last-child{border-bottom:none;}.step:hover{transform:translateX(6px);}
    .step-num{font-family:var(--font-display);font-size:36px;color:var(--purple-pale);line-height:1;flex-shrink:0;width:48px;}
    .step:hover .step-num{color:var(--purple);}
    .step-content h4{font-size:16px;font-weight:500;margin-bottom:6px;color:var(--ink);}
    .step-content p{font-size:13px;color:var(--muted);line-height:1.6;font-weight:300;}

    /* CTA SECTION */
    .cta-section{
      text-align:center;padding:100px 20px;
      background:var(--ink);color:var(--white);
      border-radius:32px;margin:0 20px 80px;
      position:relative;overflow:hidden;
    }
    .cta-section::before{
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse at 50% 0%,rgba(123,44,191,.5) 0%,transparent 70%);
      pointer-events:none;
    }
    .cta-section h2{font-family:var(--font-display);font-size:clamp(36px,5vw,72px);margin-bottom:20px;letter-spacing:.02em;position:relative;}
    .cta-section p{font-size:15px;color:rgba(255,255,255,.65);font-weight:300;max-width:480px;margin:0 auto 40px;line-height:1.7;position:relative;}
    .cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;}
    .btn-cta-primary{
      padding:14px 36px;background:var(--purple);color:var(--white);
      border-radius:50px;font-size:14px;font-weight:500;text-decoration:none;
      letter-spacing:.03em;transition:background .25s,transform .2s;display:inline-block;
    }
    .btn-cta-primary:hover{background:#9D4EDD;transform:translateY(-2px);}
    .btn-cta-wa{
      padding:14px 36px;background:transparent;color:var(--white);
      border:1.5px solid rgba(255,255,255,.25);border-radius:50px;
      font-size:14px;font-weight:500;text-decoration:none;
      letter-spacing:.03em;display:inline-flex;align-items:center;gap:8px;
      transition:border-color .25s,background .25s,transform .2s;
    }
    .btn-cta-wa:hover{border-color:#25D366;background:rgba(37,211,102,.15);transform:translateY(-2px);}
    .btn-cta-wa svg{width:18px;height:18px;fill:white;}

    /* WHATSAPP FLOATING — premium */
    .wa-float{
      position:fixed;bottom:100px;right:28px;z-index:99999;
      width:58px;height:58px;border-radius:50%;background:#25D366;
      display:grid;place-items:center;
      text-decoration:none;transition:transform .25s,box-shadow .25s;
      box-shadow:0 0 0 0 rgba(37,211,102,.7),
                 0 6px 28px rgba(37,211,102,.55),
                 0 0 40px rgba(37,211,102,.35);
      animation:waPulse 2.4s ease-in-out infinite;
    }
    .wa-float:hover{
      transform:scale(1.12);
      box-shadow:0 0 0 8px rgba(37,211,102,.15),
                 0 8px 36px rgba(37,211,102,.70),
                 0 0 60px rgba(37,211,102,.45);
      animation:none;
    }
    .wa-float svg{width:30px;height:30px;fill:white;position:relative;z-index:2;}

    /* Single ripple ring */
    .wa-float::before{
      content:'';position:absolute;inset:0;border-radius:50%;
      border:2px solid rgba(37,211,102,.6);
      animation:waRipple 2.4s ease-out infinite;
      pointer-events:none;
    }
    @keyframes waPulse{
      0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55),0 6px 28px rgba(37,211,102,.5),0 0 40px rgba(37,211,102,.30);}
      50%{box-shadow:0 0 0 10px rgba(37,211,102,.0),0 6px 28px rgba(37,211,102,.6),0 0 60px rgba(37,211,102,.45);}
    }
    @keyframes waRipple{
      0%{transform:scale(1);opacity:.7;}
      100%{transform:scale(2.2);opacity:0;}
    }
    .wa-tooltip{
      position:absolute;right:70px;top:50%;transform:translateY(-50%);
      background:var(--ink);color:var(--white);font-size:12px;font-weight:500;
      padding:6px 14px;border-radius:8px;white-space:nowrap;
      opacity:0;pointer-events:none;transition:opacity .2s;letter-spacing:.02em;
    }
    .wa-float:hover .wa-tooltip{opacity:1;}

    /* FOOTER */
    footer{background:var(--footer-bg);color:rgba(255,255,255,.65);padding:64px 0 36px;}
    .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:60px;margin-bottom:52px;}
    .footer-brand .logo-text-footer{
      font-family:var(--font-display);font-size:28px;color:var(--white);
      letter-spacing:.04em;margin-bottom:14px;display:flex;align-items:center;gap:10px;
    }
    .footer-logo-img{
      width:34px;height:34px;border-radius:8px;background:#1a1730;
      display:grid;place-items:center;overflow:hidden;
    }
    .footer-logo-img img{width:28px;height:28px;object-fit:contain;}
    .dot-io{color:#C77DFF;}
    .footer-brand p{font-size:14px;line-height:1.65;font-weight:300;max-width:280px;}
    .footer-col h4{font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.30);margin-bottom:18px;}
    .footer-col ul{list-style:none;}
    .footer-col ul li{margin-bottom:12px;}
    .footer-col ul a{color:rgba(255,255,255,.58);text-decoration:none;font-size:14px;font-weight:300;transition:color .2s;}
    .footer-col ul a:hover{color:var(--white);}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);padding-top:28px;
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
    }
    .copyright{font-size:13px;color:rgba(255,255,255,.30);font-weight:300;}

    /* SOCIAL ICONS — bigger, with color on hover */
    .social-icons{display:flex;gap:12px;align-items:center;}
    .social-icon{
      width:44px;height:44px;border:1px solid rgba(255,255,255,.12);
      border-radius:11px;display:grid;place-items:center;
      transition:border-color .25s,background .25s,transform .2s;
      text-decoration:none;cursor:pointer;
    }
    .social-icon svg{width:20px;height:20px;fill:rgba(255,255,255,.60);transition:fill .25s;}
    /* Brand colors on hover */
    .social-icon.fb:hover{border-color:#1877F2;background:rgba(24,119,242,.18);}
    .social-icon.fb:hover svg{fill:#1877F2;}
    .social-icon.ig:hover{border-color:#E1306C;background:rgba(225,48,108,.15);}
    .social-icon.ig:hover svg{fill:#E1306C;}
    .social-icon.li:hover{border-color:#0A66C2;background:rgba(10,102,194,.18);}
    .social-icon.li:hover svg{fill:#0A66C2;}
    .social-icon.wa:hover{border-color:#25D366;background:rgba(37,211,102,.15);}
    .social-icon.wa:hover svg{fill:#25D366;}

    /* ANIMATIONS */
    @keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
    @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
    .reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease;}
    .reveal.visible{opacity:1;transform:translateY(0);}

    /* MOBILE MENU */
    .hamburger{
      display:none;flex-direction:column;gap:5px;cursor:pointer;
      padding:8px;border:none;background:transparent;
    }
    .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s;}
    .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .hamburger.open span:nth-child(2){opacity:0;}
    .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .mobile-menu{
      display:none;position:fixed;top:0;left:0;right:0;bottom:0;
      background:rgba(245,244,241,.99);
      z-index:90;flex-direction:column;align-items:center;justify-content:center;gap:32px;
    }
    .mobile-menu.open{display:flex;}
    .mobile-menu a{
      font-family:var(--font-display);font-size:42px;color:var(--ink);
      text-decoration:none;letter-spacing:.04em;transition:color .2s;
    }
    .mobile-menu a:hover{color:var(--purple);}

    /* RESPONSIVE */
    @media(max-width:900px){
      .welcome-banner{font-size:11px;padding:7px 14px;}
      nav{top:30px;}nav.scrolled{top:36px;}
      .nav-links{display:none;}.hamburger{display:flex;}
      .hero{grid-template-columns:1fr;text-align:center;padding:110px 0 40px;}
      .hero-left{padding-right:0;}
      .hero-sub{margin:0 auto 36px;}
      .hero-ctas{justify-content:center;}
      
      
      
      .services-grid,.portfolio-grid,.software-grid{grid-template-columns:1fr 1fr;}
      .service-card{border-radius:var(--radius)!important;}
      .footer-top{grid-template-columns:1fr;gap:32px;}
      .process .container{grid-template-columns:1fr;}
      .cta-section{margin:0 10px 60px;padding:70px 16px;}
    }
    @media(max-width:600px){
      .services-grid,.portfolio-grid,.software-grid{grid-template-columns:1fr;}
      .hero h1{font-size:42px;}
    }

    /* SEARCH + CART BAR (below welcome banner) */
    .search-cart-bar{
      background:#fff;border-bottom:1px solid rgba(123,44,191,.10);
      padding:6px 0;position:relative;z-index:201;
    }
    .search-cart-inner{
      width:92%;max-width:1180px;margin:0 auto;
      display:flex;align-items:center;justify-content:space-between;gap:16px;
    }
    .mini-search{
      display:flex;align-items:center;gap:6px;
      background:#f5f4f1;border:1px solid rgba(123,44,191,.15);
      border-radius:50px;padding:4px 12px;flex:1;max-width:380px;
    }
    .mini-search svg{width:12px;height:12px;color:#9D4EDD;flex-shrink:0;}
    .mini-search input{
      border:none;background:transparent;outline:none;
      font-size:11px;font-family:'DM Sans',sans-serif;color:#0F0B18;width:100%;
    }
    .mini-search input::placeholder{color:#aaa;}
    .mini-search button{
      background:var(--purple);color:#fff;border:none;
      border-radius:50px;padding:2px 10px;font-size:10px;cursor:pointer;
      font-family:'DM Sans',sans-serif;transition:background .2s;flex-shrink:0;
    }
    .mini-search button:hover{background:#9D4EDD;}
    .top-actions{position:relative;}
    .mini-cart-btn{
      display:flex;align-items:center;gap:5px;background:transparent;
      border:1px solid rgba(123,44,191,.20);border-radius:50px;
      padding:4px 12px;cursor:pointer;font-size:11px;color:var(--purple);
      font-family:'DM Sans',sans-serif;transition:all .2s;position:relative;
    }
    .mini-cart-btn svg{width:13px;height:13px;stroke:var(--purple);}
    .mini-cart-btn:hover{background:var(--purple);color:#fff;}
    .mini-cart-btn:hover svg{stroke:#fff;}
    .cart-count{
      background:var(--purple);color:#fff;border-radius:50%;
      width:15px;height:15px;font-size:9px;display:grid;place-items:center;
      font-weight:600;
    }
    .cart-dropdown{
      display:none;position:absolute;top:calc(100% + 10px);right:0;
      background:#fff;border:1px solid rgba(123,44,191,.15);
      border-radius:16px;padding:18px;width:260px;
      box-shadow:0 20px 60px rgba(123,44,191,.15);z-index:300;
    }
    .cart-dropdown.open{display:block;}
    .cart-title{font-size:13px;font-weight:600;color:#0F0B18;margin-bottom:12px;}
    .cart-empty{font-size:12px;color:#aaa;font-style:italic;}
    .cart-service-list{margin-top:12px;border-top:1px solid rgba(123,44,191,.08);padding-top:12px;}
    .cart-add-item{
      display:block;width:100%;text-align:left;background:transparent;
      border:1px solid rgba(123,44,191,.12);border-radius:8px;
      padding:7px 12px;font-size:12px;color:#0F0B18;cursor:pointer;
      margin-bottom:6px;font-family:'DM Sans',sans-serif;transition:all .2s;
    }
    .cart-add-item:hover{background:var(--purple-pale);border-color:var(--purple);color:var(--purple);}
    .cart-item-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
    .cart-item-row span{font-size:12px;color:#0F0B18;}
    .cart-item-row button{background:none;border:none;color:#E040FB;cursor:pointer;font-size:14px;}
    .cart-checkout{
      display:block;text-align:center;background:var(--purple);color:#fff;
      border-radius:50px;padding:9px;font-size:12px;font-weight:500;
      text-decoration:none;margin-top:12px;transition:background .2s;
      font-family:'DM Sans',sans-serif;
    }
    .cart-checkout:hover{background:#9D4EDD;}
    @media(max-width:600px){
      .search-cart-bar{padding:4px 0;}
      .mini-search{max-width:180px;}
    }


    /* ═══════════════════════════════════════════════
       GEM CLUSTER — Hero Right
    ═══════════════════════════════════════════════ */
    .hero-right {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 600px;
      flex: 1;
      overflow: visible;
    }

    .gem-cluster {
      position: relative;
      width: 500px;
      height: 500px;
      background: transparent;
    }

    /* ── Image asset: no white box ── */
    .gem-img-asset {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      /* mix-blend-mode ensures any residual lightness blends away */
      mix-blend-mode: multiply;
      /* Fallback: force background transparent using CSS filter */
      filter: drop-shadow(0 0 32px rgba(157, 78, 221, 0.55))
              drop-shadow(0 0 80px rgba(123, 44, 191, 0.30));
    }

    /* ── MAIN GEM ── centered, slow rotation */
    .gem-main {
      position: absolute;
      width: 374px;
      height: 374px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      animation: gemBreath 10s ease-in-out infinite;
      filter: drop-shadow(0 0 40px rgba(157,78,221,0.6));
    }

    @keyframes gemBreath {
      0%   { transform: translate(-50%, -50%) scale(1)    rotate(0deg);   }
      25%  { transform: translate(-50%, -50%) scale(1.03) rotate(90deg);  }
      50%  { transform: translate(-50%, -50%) scale(1)    rotate(180deg); }
      75%  { transform: translate(-50%, -50%) scale(1.03) rotate(270deg); }
      100% { transform: translate(-50%, -50%) scale(1)    rotate(360deg); }
    }

    /* ── SMALL GEMS — floating up/down ── */
    .gem-small {
      position: absolute;
      z-index: 3;
    }

    .gem-small .gem-img-asset {
      filter: drop-shadow(0 0 18px rgba(157, 78, 221, 0.50))
              drop-shadow(0 0 40px rgba(123, 44, 191, 0.25));
    }

    /* Top-right small gem */
    .gem-small-1 {
      width: 130px;
      height: 130px;
      top: 20px;
      right: 10px;
      animation: floatUpDown 5.5s ease-in-out infinite;
    }

    /* Bottom-left small gem */
    .gem-small-2 {
      width: 110px;
      height: 110px;
      bottom: 30px;
      left: 20px;
      animation: floatUpDown 6.5s ease-in-out infinite 0.9s;
    }

    /* Top-left small gem */
    .gem-small-3 {
      width: 90px;
      height: 90px;
      top: 60px;
      left: 40px;
      animation: floatUpDown 7s ease-in-out infinite 1.8s;
      opacity: 0.80;
    }

    @keyframes floatUpDown {
      0%   { transform: translateY(0px);    }
      40%  { transform: translateY(-18px);  }
      60%  { transform: translateY(-12px);  }
      100% { transform: translateY(0px);    }
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .gem-cluster { width: 300px; height: 300px; }
      .gem-main    { width: 231px; height: 231px; }
      .gem-small-1 { width: 80px;  height: 80px;  top: 10px; right: 5px; }
      .gem-small-2 { width: 70px;  height: 70px;  bottom: 20px; left: 10px; }
      .gem-small-3 { width: 60px;  height: 60px;  top: 40px;  left: 20px; }
    }

    /* ── Chatbase AI button stays at bottom:28px (default), WA is at 100px ── */
    /* Ensure no overlap on mobile */
    @media(max-width:600px){
      .wa-float{bottom:90px;right:16px;width:52px;height:52px;}
    }
    /* ── Nav auth area on mobile ── */
    @media(max-width:900px){
      .btn-login{padding:8px 16px;font-size:12px;}
      .nav-user{padding:5px 10px 5px 6px;}
      .nav-user-name{display:none;}
      nav .container{gap:8px;}
      nav .container .nav-links-wrap{padding-left:0;}
    }
    /* ── Auth modal mobile ── */
    @media(max-width:500px){
      .auth-box{border-radius:20px;}
      .auth-body{padding:20px 24px 24px;}
      .auth-field input{padding:11px 14px;}
    }

    /* ═══════════════════════════════════════════════
       FEATURED PRODUCTS CAROUSEL
    ═══════════════════════════════════════════════ */
    .featured-carousel-section {
      padding: 90px 0 80px;
      background: #fff;
      overflow: hidden;
      position: relative;
    }
    .featured-carousel-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(123,44,191,.2), transparent);
    }
    .featured-carousel-section::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(123,44,191,.2), transparent);
    }
    .featured-carousel-header {
      text-align: center;
      margin-bottom: 56px;
      padding: 0 20px;
    }
    .featured-carousel-header .fc-label {
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--purple);
      font-weight: 500;
      margin-bottom: 12px;
      display: block;
    }
    .featured-carousel-header h2 {
      font-family: var(--font-display);
      font-size: clamp(34px, 4.5vw, 62px);
      line-height: .98;
      color: var(--ink);
      letter-spacing: .02em;
      margin-bottom: 14px;
    }
    .featured-carousel-header p {
      font-size: 15px;
      color: var(--muted);
      font-weight: 300;
      max-width: 420px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Fade masks on sides */
    .fc-track-wrap {
      position: relative;
      overflow: hidden;
    }
    .fc-track-wrap::before,
    .fc-track-wrap::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 100px;
      z-index: 10;
      pointer-events: none;
    }
    .fc-track-wrap::before {
      left: 0;
      background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
    }
    .fc-track-wrap::after {
      right: 0;
      background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
    }

    /* The scrolling track */
    .fc-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: fcScroll 36s linear infinite;
      will-change: transform;
      padding: 20px 20px 36px;
      align-items: flex-start;
    }
    .fc-track:hover {
      animation-play-state: paused;
    }
    @keyframes fcScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── PREMIUM RECTANGULAR PRODUCT CARD (replaces circles) ── */
    .fc-item {
      display: flex;
      flex-direction: column;
      gap: 0;
      cursor: pointer;
      flex-shrink: 0;
      width: 200px;
      text-decoration: none;
      color: inherit;
      position: relative;
      background: #fff;
      border-radius: 16px;
      border: 1px solid rgba(123,44,191,.10);
      box-shadow: 0 4px 20px rgba(123,44,191,.07), 0 1px 4px rgba(0,0,0,.05);
      overflow: hidden;
      transition: transform .35s cubic-bezier(.34,1.16,.64,1),
                  box-shadow .35s ease,
                  border-color .35s ease;
    }
    .fc-item:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 56px rgba(123,44,191,.20), 0 4px 12px rgba(0,0,0,.08);
      border-color: rgba(123,44,191,.30);
    }

    /* Image area */
    .fc-circle-wrap {
      width: 100%;
      height: 160px;
      border-radius: 0;
      overflow: hidden;
      background: linear-gradient(135deg, var(--purple-pale), #d4bbef);
      position: relative;
      flex-shrink: 0;
      transition: none;
      box-shadow: none;
      border: none;
    }
    .fc-circle-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .42s cubic-bezier(.34,1.1,.64,1);
    }
    .fc-item:hover .fc-circle-wrap img {
      transform: scale(1.07);
    }

    /* Overlay + download button (Freepik hover effect) */
    .fc-circle-wrap .td-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(160deg, rgba(15,10,30,.50), rgba(123,44,191,.58));
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
    }
    .fc-item:hover .fc-circle-wrap .td-overlay { opacity: 1; }

    .fc-circle-wrap .td-dl-btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%) scale(.72);
      opacity: 0;
      transition: transform .36s cubic-bezier(.34,1.26,.64,1), opacity .28s ease;
      padding: 9px 18px;
      font-size: 11px;
      white-space: nowrap;
      pointer-events: auto;
    }
    .fc-item:hover .fc-circle-wrap .td-dl-btn {
      opacity: 1;
      transform: translate(-50%,-50%) scale(1);
    }

    /* Card text area */
    .fc-card-body {
      padding: 12px 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .fc-item-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      text-align: left;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color .2s;
    }
    .fc-item:hover .fc-item-name { color: var(--purple); }
    .fc-item-price {
      font-size: 13px;
      font-weight: 700;
      color: var(--purple);
      letter-spacing: .02em;
    }

    /* Placeholder when no image */
    .fc-circle-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--purple-pale), #d4bbef);
    }
    .fc-circle-placeholder svg {
      width: 44px;
      height: 44px;
      stroke: var(--purple);
      fill: none;
      stroke-width: 1.5;
      opacity: .6;
    }

    /* Mobile: always show overlay/button */
    @media (hover: none) {
      .fc-circle-wrap .td-overlay { opacity: .35 !important; }
      .fc-circle-wrap .td-dl-btn {
        opacity: 1 !important;
        transform: translate(-50%,-50%) scale(.88) !important;
      }
    }

    /* Loading skeleton */
    .fc-skeleton {
      display: flex;
      gap: 20px;
      padding: 20px 40px 30px;
      overflow: hidden;
    }
    .fc-skel-item {
      display: flex;
      flex-direction: column;
      gap: 0;
      flex-shrink: 0;
      width: 200px;
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      border: 1px solid rgba(123,44,191,.08);
    }
    .fc-skel-circle {
      width: 100%;
      height: 160px;
      border-radius: 0;
      background: linear-gradient(90deg, #f0eef8 25%, #e4dff5 50%, #f0eef8 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
    }
    .fc-skel-line {
      height: 12px;
      border-radius: 6px;
      margin: 12px 14px 0;
      background: linear-gradient(90deg, #f0eef8 25%, #e4dff5 50%, #f0eef8 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
    }
    .fc-skel-line:last-child { margin-bottom: 14px; }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    @media (max-width: 768px) {
      .fc-track { gap: 14px; animation-duration: 26s; }
      .fc-item { width: 160px; }
      .fc-circle-wrap { height: 130px; }
      .fc-track-wrap::before,
      .fc-track-wrap::after { width: 50px; }
    }
    @media (max-width: 480px) {
      .fc-item { width: 140px; }
      .fc-circle-wrap { height: 110px; }
    }

    /* ── Disable heavy animations on mobile ── */
    @media (max-width: 900px) {
      .gem-main { animation: none; }
      .gem-small-1, .gem-small-2, .gem-small-3 { animation: none; }
    }

    /* ── Respect user motion preference ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

  
  @keyframes fcModalBgIn { from{opacity:0} to{opacity:1} }
  @keyframes fcModalIn   { from{opacity:0;transform:scale(.94) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
  #fcModal.open { display:flex !important; }

  /* ── Scrollbar styling ── */
  #fcModalGallery::-webkit-scrollbar,
  #fcModalDesc::-webkit-scrollbar { width:4px; }
  #fcModalGallery::-webkit-scrollbar-thumb,
  #fcModalDesc::-webkit-scrollbar-thumb { background:#C77DFF;border-radius:4px; }

  /* ── Thumbnail buttons ── */
  .fc-thumb-btn {
    width:64px;height:64px;border-radius:10px;overflow:hidden;cursor:pointer;
    border:2px solid transparent;transition:border-color .2s,transform .2s;flex-shrink:0;
    background:#e8d5f7;padding:0;
  }
  .fc-thumb-btn.active,
  .fc-thumb-btn:hover { border-color:#7B2CBF;transform:scale(1.06); }
  .fc-thumb-btn img { width:100%;height:100%;object-fit:cover;display:block; }

  /* ── Variant buttons ── */
  .fc-variant-btn {
    padding:7px 16px;border-radius:50px;border:1.5px solid rgba(123,44,191,.25);
    background:#fff;color:#0F0B18;font-size:13px;font-weight:500;cursor:pointer;
    transition:border-color .2s,background .2s,color .2s;font-family:'DM Sans',sans-serif;
  }
  .fc-variant-btn.active,
  .fc-variant-btn:hover { border-color:#7B2CBF;background:#7B2CBF;color:#fff; }

  /* ── Tablet breakpoint (≤640px): switch to vertical layout ── */
  @media(max-width:640px){
    #fcModal { padding:12px !important; align-items:flex-start !important; }
    #fcModalBox {
      flex-direction:column !important;
      max-height:85vh !important;
      overflow-y:auto !important;
      overflow-x:hidden !important;
      border-radius:20px !important;
      margin:auto 0 !important;
    }
    #fcModalGallery {
      width:100% !important;
      min-width:0 !important;
      border-radius:20px 20px 0 0 !important;
      padding:16px !important;
      overflow-y:visible !important;
      flex-shrink:0 !important;
    }
    #fcModalGallery > div:first-child { aspect-ratio:16/9 !important; }
    #fcModalInfo {
      padding:20px 16px 24px !important;
      overflow-y:visible !important;
    }
  }

  /* ── Mobile breakpoint (≤480px): tighter spacing, stacked buttons ── */
  @media(max-width:480px){
    #fcModal { padding:8px !important; }
    #fcModalBox { border-radius:16px !important; }
    #fcModalGallery { padding:12px !important; }
    #fcModalGallery > div:first-child { aspect-ratio:4/3 !important; }
    #fcModalInfo { padding:16px 14px 20px !important; }

    /* Title: smaller clamp floor on very narrow screens */
    #fcModalTitle { font-size:clamp(22px,6vw,34px) !important; }

    /* Price: slightly smaller */
    #fcModalPrice { font-size:18px !important; margin-bottom:12px !important; }

    /* Description: uncap height so it scrolls with the box, not independently */
    #fcModalDesc { max-height:none !important; }

    /* Action row: stack qty + buy button vertically */
    #fcActionRow {
      flex-direction:column !important;
      align-items:stretch !important;
      gap:10px !important;
    }
    /* Qty control: full width on mobile */
    #fcActionRow > div:first-child {
      width:100% !important;
      justify-content:center !important;
    }
    /* Buy Now: full width */
    #fcBuyBtn {
      width:100% !important;
      min-width:0 !important;
      flex:none !important;
    }

    /* Thumbnail row: smaller thumbs so they don't overflow */
    .fc-thumb-btn { width:48px !important; height:48px !important; }

    /* Close button: stay anchored top-right */
    #fcModalBox > button:first-child {
      top:10px !important;
      right:10px !important;
    }
  }

  /* ── Extra-small (≤360px): minimal padding ── */
  @media(max-width:360px){
    #fcModal { padding:6px !important; }
    #fcModalInfo { padding:14px 12px 16px !important; }
    #fcModalTitle { font-size:20px !important; }
  }
  
    /* ── Section: enough breathing room for all rows + hover lifts ── */
    .shopify-section {
      padding-top: 80px !important;
      padding-bottom: 120px !important;
    }

    /* ── Grid: auto rows, no height constraints whatsoever ── */
    .shop-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      padding: 24px;
      width: 100%;
      grid-auto-rows: auto;
      align-items: stretch;   /* all cards in a row = same height */
    }
    @media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 740px)  { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; } }
    @media (max-width: 480px)  { .shop-grid { grid-template-columns: 1fr; gap: 14px; padding: 14px; } }

    /* ── Card: flex column so body always fills the card naturally ── */
    #shopGrid .td-product-card {
      display: flex;
      flex-direction: column;
      height: auto;
      min-height: 0;
      overflow: hidden;        /* keep border-radius clip on the card itself */
      border-radius: 20px;
      background: #fff;
      border: 1px solid rgba(123,44,191,.10);
      box-shadow: 0 4px 24px rgba(123,44,191,.07);
      transition: transform .35s cubic-bezier(.34,1.1,.64,1),
                  box-shadow .35s ease,
                  border-color .35s ease;
      cursor: pointer;
      margin: 0;               /* remove any external margins — spacing managed by grid gap */
    }
    #shopGrid .td-product-card:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 20px 60px rgba(123,44,191,.18), 0 4px 16px rgba(0,0,0,.08);
      border-color: rgba(123,44,191,.30);
    }

    /* ── Image area: position:relative so badge anchors here ── */
    #shopGrid .td-card-img-area {
      position: relative;
      padding: 24px 24px 0;
      flex-shrink: 0;
      line-height: 0;   /* kills gap between inline elements */
    }

    /* ── Image wrap: taller container so contain has room to breathe ── */
    #shopGrid .td-img-wrap {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;        /* square gives more vertical room for portrait images */
      overflow: hidden;
      border-radius: 12px;
      background: #f7f3ff;        /* neutral bg shows around contained image edges */
    }

    /* Image: CONTAIN — full image always visible, no cropping ever */
    #shopGrid .td-img-wrap img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;        /* full image, no crop */
      object-position: center center;
      display: block;
      border-radius: 0;           /* contain doesn't need radius on img itself */
      padding: 6px;               /* tiny breathing gap from edges */
      box-sizing: border-box;
      transition: transform .38s cubic-bezier(.34,1.1,.64,1);
    }
    #shopGrid .td-product-card:hover .td-img-wrap img {
      transform: scale(1.04);     /* subtle zoom — contain keeps full image in frame */
    }

    /* Star rating row */
    #shopGrid .td-stars {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-bottom: 2px;
    }
    #shopGrid .td-stars span {
      font-size: 13px;
      line-height: 1;
      color: #f5c518;             /* Amazon-gold yellow */
    }
    #shopGrid .td-stars .td-star-empty {
      color: #ddd;
    }

    /* Overlay stays inside the wrap */
    #shopGrid .td-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg,rgba(15,10,30,.45) 0%,rgba(123,44,191,.55) 100%);
      opacity: 0;
      transition: opacity .35s ease;
      border-radius: 12px;
    }
    #shopGrid .td-product-card:hover .td-overlay { opacity: 1; }

    /* Download button inside wrap */
    #shopGrid .td-dl-btn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%) scale(.75);
      opacity: 0;
      transition: transform .35s cubic-bezier(.34,1.26,.64,1), opacity .3s ease;
      z-index: 5;
      white-space: nowrap;
    }
    #shopGrid .td-product-card:hover .td-dl-btn {
      opacity: 1;
      transform: translate(-50%,-50%) scale(1);
    }
    @media (hover:none) {
      #shopGrid .td-dl-btn  { opacity:1 !important; transform:translate(-50%,-50%) scale(.85) !important; }
      #shopGrid .td-overlay { opacity:.45 !important; }
    }

    /* ── Badge: sits INSIDE .td-card-img-area but OUTSIDE .td-img-wrap
          so card's overflow:hidden doesn't clip it ── */
    #shopGrid .td-badge {
      position: absolute;
      top: 32px;    /* 24px padding + 8px inset from image edge */
      right: 32px;
      left: auto;
      z-index: 20;
      pointer-events: none;
      /* Ensure it renders above the image area */
      isolation: isolate;
    }

    /* ── Card body: grows to fill remaining space ── */
    #shopGrid .td-card-body {
      padding: 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: visible;
    }

    /* Title: 2-line clamp so cards stay same height per row */
    #shopGrid .td-card-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex-shrink: 0;
    }

    /* Footer: price + pill side by side, never wraps weirdly */
    #shopGrid .td-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: auto;
      flex-wrap: nowrap;
    }

    /* Price block: sale price + strikethrough original */
    #shopGrid .td-price-block {
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1.2;
    }
    #shopGrid .td-price-sale {
      font-size: 16px;
      font-weight: 700;
      color: var(--purple);
      letter-spacing: .01em;
    }
    #shopGrid .td-price-sale.free-price { color: #00c853; }
    #shopGrid .td-price-original {
      font-size: 12px;
      color: #aaa;
      text-decoration: line-through;
      font-weight: 400;
    }
    #shopGrid .td-discount-badge {
      display: inline-block;
      background: linear-gradient(135deg,#ff4d4d,#ff7043);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
      padding: 3px 8px;
      border-radius: 50px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* ── Skeleton loader ── */
    .shop-skeleton {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      grid-auto-rows: auto;
    }
    @media (max-width: 1100px) { .shop-skeleton { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 740px)  { .shop-skeleton { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
    @media (max-width: 480px)  { .shop-skeleton { grid-template-columns: 1fr; gap: 14px; } }
    .shop-skel-card {
      border-radius: 20px;
      overflow: hidden;
      background: #fff;
      border: 1px solid rgba(123,44,191,.10);
    }
    .shop-skel-img {
      aspect-ratio: 4/3;
      width: 100%;
      background: linear-gradient(90deg, #f0e8ff 25%, #e4d4f7 50%, #f0e8ff 75%);
      background-size: 200% 100%;
      animation: shopShimmer 1.5s infinite;
    }
    .shop-skel-body { padding: 24px; }
    .shop-skel-line {
      height: 13px;
      border-radius: 6px;
      background: linear-gradient(90deg, #f0e8ff 25%, #e4d4f7 50%, #f0e8ff 75%);
      background-size: 200% 100%;
      animation: shopShimmer 1.5s infinite;
      margin-bottom: 10px;
    }
    .shop-skel-line.short { width: 55%; }
    @keyframes shopShimmer { to { background-position: -200% 0; } }
  

    /* ═══════════════════════════════════════════════
       LIGHTHOUSE OPTIMIZATION: Mobile Animation Reduction
    ═══════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* CRITICAL: Disable expensive gem animations on mobile */
      .gem-main,
      .gem-small,
      .gem-small-1,
      .gem-small-2,
      .gem-small-3 {
        animation: none !important;
        will-change: auto !important;
        opacity: 0.6 !important;
      }
      
      /* Slower banner scroll (less janky) */
      .welcome-banner-track {
        animation-duration: 45s !important;
      }
      
      /* Reduce hover effects on mobile */
      .fc-item:hover {
        transform: translateY(-4px) !important;
      }
      
      .project-card:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 16px 40px rgba(123,44,191,.12) !important;
      }
      
      /* Remove excessive box-shadows on mobile */
      .nav-logo:hover .logo-img-wrap {
        box-shadow: 0 0 12px rgba(180,80,255,.45);
      }
      
      /* Simplify button hover */
      .btn-login:hover {
        box-shadow: 0 4px 16px rgba(123,44,191,.35) !important;
      }
    }
    
    /* ACCESSIBILITY: Respect prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }