/* ---------- Base / Vars ---------- */
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    :root{
      --bg:#000; --card:#0b0b0c; --muted:#b0b4c0; --line:#1e1e22;
      --acc1:#ff2d8d; --acc2:#00e5ff; --white:#fff; --container:1240px; --radius:20px;
      --shadow:0 10px 30px rgba(0,0,0,.45);
    }
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; line-height:1.6; color:var(--white); background:var(--bg)}
    .container{max-width:var(--container); margin:0 auto; padding:0 20px}
    .section{padding:72px 0}
    .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
    .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:linear-gradient(90deg,var(--acc1),var(--acc2))}
    .gradient-text{background:linear-gradient(90deg,var(--acc1),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; background:linear-gradient(90deg,var(--acc1),var(--acc2)); color:#000; font-weight:700; box-shadow:var(--shadow); border:none}
    .btn.ghost{background:linear-gradient(#000,#000) padding-box, linear-gradient(90deg,var(--acc1),var(--acc2)) border-box; border:1px solid transparent; color:#fff}
    .btn svg{width:18px; height:18px}

    /* ---------- Header ---------- */
    header.site{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(3px); background: rgb(0 0 0 / 62%); border-bottom:1px solid rgba(255,255,255,.08)}
    .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{display:flex; align-items:center; gap:12px; color:var(--white); font-weight:800; text-decoration:none}
    .brand .logo{
      width:44px;
      height:44px;
      flex:0 0 44px;
      background:center / cover no-repeat url("/media/img/IMG_3451.webp");
      filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
    }
    .menu{display:flex; gap:1px; align-items:center; border:1px solid #f63492; border-radius:3rem; padding:5px 17px}
    .menu a{display:inline-block; padding:8px 12px; color:#e5e9f2; text-decoration:none; transition:color .2s ease, text-shadow .2s ease, filter .2s ease}
    .menu a:is(:hover,:focus-visible,.active,[aria-current="page"]){
      background-image:linear-gradient(90deg,var(--acc1),var(--acc2));
      -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
      filter:brightness(1.12); text-shadow:0 0 10px rgb(255 255 255 / 61%); box-shadow:0 0 8px 0 rgb(255 255 255 / 61%); border-radius:2rem;
    }
    .burger{display:none; width:36px; height:36px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; color:var(--white)}
    .lang{display:flex; gap:6px; align-items:center}
    .lang button{
      min-height:36px;
      padding:6px 10px;
      border:1px solid var(--line);
      border-radius:10px;
      background:rgba(255,255,255,.035);
      color:#cfd2dc;
      font-weight:750;
      cursor:pointer;
      transition:border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .lang button:is(:hover,:focus-visible){
      border-color:rgba(255,255,255,.24);
      color:#fff;
      outline:none;
    }
    .lang button.active{
      border-color:transparent;
      background:linear-gradient(90deg,var(--acc1),var(--acc2));
      color:#061016;
      box-shadow:0 10px 26px rgba(0,229,255,.16);
    }

    /* ---------- Page hero ---------- */
    .page-hero{padding:48px 0 16px}
    .page-hero h1{font-size:clamp(28px,6vw,56px); margin:0}
    .page-hero p{color:var(--muted); margin:8px 0 0}

    /* ---------- Toolbar ---------- */
    .toolbar{position:sticky; top:64px; z-index:40; background:linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.65)); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.06)}
    .toolbar .inner{display:flex; gap:12px; align-items:center; padding:10px 0}
    .chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:#0a0b10; color:#e5e9f2; padding:8px 12px; border-radius:12px}
    .chip input,.chip select{background:transparent; border:none; color:#e5e9f2; outline:none}
    .chip input::placeholder{color:#8b93a3}
    .toggle{display:inline-flex; border:1px solid var(--line); border-radius:12px; overflow:hidden}
    .toggle button{padding:8px 12px; background:#0a0b10; color:#cfd2dc; border:none; cursor:pointer}
    .toggle button.active{background:linear-gradient(90deg,var(--acc1),var(--acc2)); color:#000; font-weight:700}

    /* ---------- Grid / Cards ---------- */
    .pgrid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; padding:20px 0}
    .pcard{grid-column: span 6; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; color:var(--white);
           display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.45);
           opacity:0; transform:translateY(14px); transition:all .6s ease}
    .pcard.in{opacity:1; transform:translateY(0)}
    .pthumb{aspect-ratio:16/9; background:#0d142c}
    .pthumb img{width:100%; height:100%; object-fit:cover; display:block}
    .pbody{padding:14px}
    .pbody h3{margin:0 0 6px}
    .pbody p{margin:0; color:var(--muted)}
    .pactions{padding:0 14px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px}
    .price{display:flex; flex-direction:column; gap:4px; font-size:14px; color:#b0b4c0}
    .price b{color:#fff; font-size:16px}
    .muted{color:#8a93a1; font-size:12px}
    .hidden{display:none !important}
    .empty{color:var(--muted); text-align:center; padding:40px 0}

    /* ---------- Responsive ---------- */
	    @media (max-width: 990px){
	      .burger{display:flex}
	      .menu{display:none}
	      .menu.open{display:flex; position:absolute; top:64px; left:0; right:0; background:rgba(0,0,0,.96); padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.08); gap:18px; flex-wrap:wrap}
	      .menu.open a{padding:10px 0}
	      .pcard{grid-column: span 12}
	    }

@media (max-width:600px){
  body.mobile-menu-open{overflow:hidden}
  header.site{z-index:10000}
  .burger{position:relative; z-index:10002; width:42px; height:42px; border-radius:14px; background:rgba(255,255,255,.045); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
  .menu{
    position:fixed !important;
    inset:0 !important;
    z-index:10001;
    display:flex !important;
    flex-direction:column;
    justify-content:flex-start;
    gap:10px;
    min-height:100vh;
    min-height:100dvh;
    padding:calc(env(safe-area-inset-top, 0px) + 112px) 18px calc(env(safe-area-inset-bottom, 0px) + 24px);
    border:0;
    border-radius:0 !important;
    background:linear-gradient(135deg, rgba(255,45,141,.14), transparent 34%), linear-gradient(315deg, rgba(0,229,255,.12), transparent 38%), rgba(2,3,7,.97);
    overflow-y:auto;
    overscroll-behavior:contain;
    opacity:1;
    pointer-events:none;
    visibility:hidden;
    transform:translateX(102%);
    transition:transform .46s cubic-bezier(.18,.86,.26,1), visibility 0s linear .46s;
  }
  .menu::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 82%, transparent); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 82%, transparent); opacity:.35}
  .menu::after{content:"CherryX-Digital"; position:absolute; top:calc(env(safe-area-inset-top, 0px) + 18px); left:18px; right:78px; z-index:1; display:flex; align-items:center; min-height:54px; padding:0 16px 0 58px; border:1px solid rgba(255,255,255,.1); border-radius:0; background-image:url("/media/img/IMG_3451.webp"), linear-gradient(rgba(255,255,255,.065), rgba(255,255,255,.035)), linear-gradient(90deg, rgba(255,45,141,.72), rgba(0,229,255,.62)); background-origin:padding-box, padding-box, border-box; background-clip:padding-box, padding-box, border-box; background-position:14px center, center, center; background-size:34px 34px, auto, auto; background-repeat:no-repeat; color:#fff; font-size:15px; font-weight:850; letter-spacing:0; box-shadow:0 18px 46px rgba(0,0,0,.2)}
  .menu.open{pointer-events:auto; visibility:visible; transform:translateX(0); transition:transform .46s cubic-bezier(.18,.86,.26,1), visibility 0s linear 0s}
  .menu a{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:0 16px; border:1px solid rgba(255,255,255,.1); border-radius:0; background:rgba(255,255,255,.055); color:#f7f8fb; font-size:16px; font-weight:750; line-height:1.2; opacity:0; transform:translateX(18px); box-shadow:0 16px 40px rgba(0,0,0,.18); transition:opacity .28s ease, transform .42s cubic-bezier(.18,.86,.26,1), border-color .2s ease, background .2s ease}
  .menu a::after{content:""; width:8px; height:8px; flex:0 0 auto; margin-left:12px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); opacity:.7}
  .menu a:is(:hover,:focus-visible,.active,[aria-current="page"]){background:linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)) padding-box, linear-gradient(90deg,var(--acc1),var(--acc2)) border-box; border-color:transparent; color:#fff; -webkit-text-fill-color:#fff; filter:none; text-shadow:none; box-shadow:0 18px 44px rgba(0,0,0,.24)}
  .menu.open a{opacity:1; transform:translateX(0)}
  .menu.open a:nth-child(1){transition-delay:.05s}
  .menu.open a:nth-child(2){transition-delay:.09s}
  .menu.open a:nth-child(3){transition-delay:.13s}
  .menu.open a:nth-child(4){transition-delay:.17s}
  .menu.open a:nth-child(5){transition-delay:.21s}
  .menu.open a:nth-child(6){transition-delay:.25s}
  .menu.open a:nth-child(7){transition-delay:.29s}
  .menu.open a:nth-child(8){transition-delay:.33s}
  .menu{counter-reset:mobile-nav}
  .menu a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; min-height:62px; padding:0 14px 0 12px; border-color:transparent; background:linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,.052)) padding-box, linear-gradient(100deg, rgba(255,45,141,.5), rgba(255,255,255,.1) 42%, rgba(0,229,255,.42)) border-box; color:#fff; font-weight:800; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.22)}
  .menu a::before{counter-increment:mobile-nav; content:counter(mobile-nav, decimal-leading-zero); display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.26); color:rgba(255,255,255,.72); font-size:11px; font-weight:850; line-height:1}
  .menu a::after{content:">"; display:grid; place-items:center; width:30px; height:30px; margin-left:0; border:1px solid rgba(255,255,255,.12); background:linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.03)) padding-box, linear-gradient(90deg, rgba(255,45,141,.55), rgba(0,229,255,.48)) border-box; color:#fff; font-size:16px; font-weight:850; line-height:1; transform:none}
}

	    footer{border-top:1px solid rgba(255,255,255,.08); color:var(--muted); padding:28px 0; margin-top:12px}

.mobile-menu-panel{display:none}
@media (max-width:600px){
  .menu{gap:0 !important; padding:calc(env(safe-area-inset-top, 0px) + 100px) 18px calc(env(safe-area-inset-bottom, 0px) + 18px) !important; background:linear-gradient(180deg, rgba(255,255,255,.045), transparent 28%), linear-gradient(135deg, rgba(255,45,141,.16), transparent 36%), linear-gradient(315deg, rgba(0,229,255,.13), transparent 40%), #020305 !important}
  .menu > a{display:flex !important; align-items:center; justify-content:space-between; min-height:48px !important; padding:0 2px !important; border:0 !important; border-bottom:1px solid rgba(255,255,255,.105) !important; background:transparent !important; box-shadow:none !important; color:rgba(255,255,255,.92) !important; font-size:17px !important; font-weight:760 !important; line-height:1.15; opacity:0; transform:translate3d(26px,0,0); transition:opacity .48s ease, transform .62s cubic-bezier(.18,.86,.26,1), color .22s ease !important}
  .menu > a::before{content:"" !important; width:6px !important; height:6px !important; margin-right:12px; border:0 !important; background:linear-gradient(135deg,var(--acc1),var(--acc2)) !important; box-shadow:0 0 18px rgba(0,229,255,.28); flex:0 0 auto}
  .menu > a::after{content:"" !important; width:9px !important; height:9px !important; border:0 !important; border-top:1.5px solid rgba(255,255,255,.72) !important; border-right:1.5px solid rgba(255,255,255,.72) !important; background:transparent !important; box-shadow:none !important; transform:rotate(45deg) !important; opacity:.75}
  .menu.open > a{opacity:1; transform:translate3d(0,0,0)}
  .menu.open > a:nth-of-type(1){transition-delay:.08s !important}.menu.open > a:nth-of-type(2){transition-delay:.18s !important}.menu.open > a:nth-of-type(3){transition-delay:.28s !important}.menu.open > a:nth-of-type(4){transition-delay:.38s !important}.menu.open > a:nth-of-type(5){transition-delay:.48s !important}.menu.open > a:nth-of-type(6){transition-delay:.58s !important}.menu.open > a:nth-of-type(7){transition-delay:.68s !important}.menu.open > a:nth-of-type(8){transition-delay:.78s !important}
  .mobile-menu-panel{position:relative; z-index:2; display:grid; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.13); opacity:0; transform:translateY(12px); transition:opacity .42s ease, transform .52s cubic-bezier(.18,.86,.26,1)}
  .menu.open .mobile-menu-panel{opacity:1; transform:translateY(0); transition-delay:.88s}
  .mobile-menu-panel a::before,.mobile-menu-panel a::after{content:none !important; display:none !important}
  .mobile-menu-email{display:flex !important; min-height:42px !important; align-items:center; justify-content:center !important; padding:0 14px !important; border:1px solid rgba(255,255,255,.13) !important; background:rgba(255,255,255,.045) !important; color:rgba(255,255,255,.82) !important; font-size:13px !important; font-weight:650 !important; opacity:1 !important; transform:none !important}
  .mobile-menu-auth{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .mobile-menu-auth:has(.mobile-menu-btn:only-child){grid-template-columns:1fr}
  .mobile-menu-btn{display:flex !important; min-height:46px !important; align-items:center; justify-content:center !important; padding:0 12px !important; border:1px solid rgba(255,255,255,.16) !important; background:rgba(255,255,255,.07) !important; color:#fff !important; font-size:14px !important; font-weight:820 !important; opacity:1 !important; transform:none !important; box-shadow:none !important}
  .mobile-menu-btn--primary{border-color:transparent !important; background:linear-gradient(90deg,var(--acc1),var(--acc2)) !important; color:#020305 !important}
  .menu > a{width:100% !important; justify-content:flex-start !important; font-size:20px !important; min-height:56px !important}
  .menu > a::after{margin-left:auto !important}
  .menu::after{top:0 !important; left:0 !important; right:auto !important; width:min(82vw, 330px) !important; min-height:70px !important; padding-left:68px !important; border-left:0 !important; border-top:0 !important; background-position:18px center, center, center !important; background-size:40px 40px, auto, auto !important; font-size:16px !important}
  .menu > a:is(:hover,:focus-visible,.active,[aria-current="page"]){color:var(--acc1) !important; -webkit-text-fill-color:var(--acc1) !important}
  .mobile-menu-email{border:1px solid transparent !important; background:linear-gradient(#080a10,#080a10) padding-box, linear-gradient(90deg, rgba(255,45,141,.68), rgba(0,229,255,.52)) border-box !important}
  .mobile-menu-btn{border:1px solid transparent !important; background:linear-gradient(#07090f,#07090f) padding-box, linear-gradient(90deg, rgba(255,45,141,.72), rgba(0,229,255,.58)) border-box !important}
  .mobile-menu-btn--primary{background:linear-gradient(90deg,var(--acc1),var(--acc2)) padding-box, linear-gradient(90deg,var(--acc1),var(--acc2)) border-box !important; color:#020305 !important; box-shadow:0 16px 34px rgba(255,45,141,.18) !important}
}

@media (max-width:600px){
  body{padding-top:calc(58px + env(safe-area-inset-top, 0px))}
  header.site{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:10000 !important;
    transform:none !important;
    background:rgba(0,0,0,.78);
    backdrop-filter:saturate(150%) blur(10px);
    -webkit-backdrop-filter:saturate(150%) blur(10px);
  }
}