/* ============================================================
   MULTIMEMBER — design system + motion (multi-page)
   ============================================================ */

:root{
  --c-bg:#0a0714;
  --c-bg-soft:#100c1e;
  --c-surface:rgba(255,255,255,.05);
  --c-surface-strong:rgba(255,255,255,.1);
  --c-border:rgba(255,255,255,.11);
  --c-text:#fdf9ff;
  --c-muted:#a29bc2;
  --c-primary:#22d3ee;
  --c-primary-2:#6366f1;
  --c-accent:#a855f7;
  --c-pink:#ff5fa2;
  --c-orange:#ff9f43;
  --c-yellow:#ffd93d;
  --c-lime:#a3e635;
  --c-success:#4ade80;
  --c-warn:#facc15;
  --c-danger:#f87171;
  --shadow-soft:0 24px 60px rgba(0,0,0,.4);
  --shadow-glow:0 0 0 1px rgba(255,159,67,.3),0 30px 80px rgba(255,95,162,.2);
  --grad-brand:linear-gradient(120deg,var(--c-orange),var(--c-pink) 55%,var(--c-accent));
  --grad-text:linear-gradient(90deg,var(--c-yellow),var(--c-orange),var(--c-pink),var(--c-accent),var(--c-primary));
  --grad-rainbow:linear-gradient(90deg,var(--c-yellow),var(--c-orange),var(--c-pink),var(--c-accent),var(--c-primary),var(--c-lime));
  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-spring:cubic-bezier(.3,1.7,.5,1);
  --dur:.28s;
  --maxw:1360px;
  color-scheme:dark;
}

html[data-theme="light"]{
  --c-bg:#fff8f2;
  --c-bg-soft:#fdeee6;
  --c-surface:rgba(120,50,20,.04);
  --c-surface-strong:rgba(120,50,20,.07);
  --c-border:rgba(120,50,20,.1);
  --c-text:#241433;
  --c-muted:#6b5d80;
  --shadow-soft:0 20px 45px rgba(120,50,20,.1);
  --shadow-glow:0 0 0 1px rgba(255,95,162,.35),0 24px 60px rgba(255,159,67,.2);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:Vazirmatn,Tahoma,"Segoe UI",system-ui,Arial,sans-serif;overflow-x:hidden;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
::selection{background:var(--c-primary);color:#031017}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--c-primary),var(--c-primary-2));border-radius:99px;border:2px solid var(--c-bg)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:1.6em;height:1.6em}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;display:grid;place-items:center;gap:16px;background:var(--c-bg);z-index:9999;transition:opacity .45s ease,visibility .45s ease}
.boot.out{opacity:0;visibility:hidden}
.loader{width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--c-yellow),var(--c-orange),var(--c-pink),var(--c-accent),var(--c-primary),var(--c-yellow));animation:spin .9s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px))}
.boot span{font-size:13px;color:var(--c-muted);letter-spacing:.5px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- progress + fx ---------- */
.scroll-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:9998}
.scroll-progress i{display:block;height:100%;width:0%;background:var(--grad-rainbow);box-shadow:0 0 14px rgba(255,95,162,.6);transition:width .08s linear}
.bg-grid{position:fixed;inset:0;pointer-events:none;opacity:.2;background-image:linear-gradient(rgba(127,138,168,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(127,138,168,.08) 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(to bottom,#000,transparent 85%);z-index:-3}
.aurora{position:fixed;width:46vw;height:46vw;border-radius:50%;filter:blur(100px);opacity:.32;pointer-events:none;z-index:-2;animation:drift 24s ease-in-out infinite alternate;will-change:transform;mix-blend-mode:screen}
.a1{background:var(--c-orange);top:2%;right:-12%;animation-duration:23s}
.a2{background:var(--c-accent);top:40%;left:-18%;animation-duration:30s;animation-delay:-6s}
.a3{background:var(--c-pink);bottom:-8%;right:18%;animation-duration:19s;animation-delay:-3s}
.a4{background:var(--c-primary);top:60%;right:35%;animation-duration:26s;animation-delay:-11s;width:32vw;height:32vw}
.a5{background:var(--c-yellow);top:-6%;left:20%;animation-duration:21s;animation-delay:-8s;width:26vw;height:26vw;opacity:.22}
@keyframes drift{0%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(5%,-7%) scale(1.15) rotate(8deg)}100%{transform:translate(-6%,5%) scale(.92) rotate(-6deg)}}
.cursor-glow{position:fixed;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(255,159,67,.12),transparent 70%);transform:translate(-50%,-50%);left:var(--x,50%);top:var(--y,50%);transition:opacity .3s ease;opacity:0}
.cursor-glow.on{opacity:1}
@media(max-width:900px),(hover:none){.cursor-glow{display:none}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-scale.in{opacity:1;transform:scale(1)}
.stagger .reveal:nth-child(1){transition-delay:.02s}.stagger .reveal:nth-child(2){transition-delay:.08s}.stagger .reveal:nth-child(3){transition-delay:.14s}.stagger .reveal:nth-child(4){transition-delay:.2s}.stagger .reveal:nth-child(5){transition-delay:.26s}.stagger .reveal:nth-child(6){transition-delay:.32s}.stagger .reveal:nth-child(7){transition-delay:.38s}.stagger .reveal:nth-child(8){transition-delay:.44s}.stagger .reveal:nth-child(9){transition-delay:.5s}.stagger .reveal:nth-child(10){transition-delay:.56s}.stagger .reveal:nth-child(11){transition-delay:.62s}.stagger .reveal:nth-child(12){transition-delay:.68s}

/* ---------- nav ---------- */
.nav{height:88px;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,72px);background:rgba(5,6,11,.62);backdrop-filter:blur(22px);border-bottom:1px solid transparent;transition:height var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
html[data-theme="light"] .nav{background:rgba(244,246,251,.72)}
.nav.scrolled{height:68px;border-bottom-color:var(--c-border);box-shadow:0 10px 30px rgba(0,0,0,.25);background:rgba(5,6,11,.88)}
html[data-theme="light"] .nav.scrolled{background:rgba(244,246,251,.92)}
.brand{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.8px}
.brand b{font-weight:900}
.brand em{font-style:normal;font-weight:500;color:var(--c-primary)}
.brand-mark{width:38px;height:38px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;transform:skewY(-18deg);transition:transform .5s var(--ease-spring)}
.brand:hover .brand-mark{transform:skewY(-18deg) rotate(8deg) scale(1.08)}
.brand-mark span{border-radius:3px;background:var(--grad-brand);animation:markPulse 3s ease-in-out infinite}
.brand-mark span:nth-child(2){margin-top:6px;animation-delay:.15s}
.brand-mark span:nth-child(3){margin-top:12px;animation-delay:.3s}
@keyframes markPulse{0%,100%{opacity:1}50%{opacity:.55}}
.brand-logo{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,159,67,.35),0 0 22px rgba(168,85,247,.5);transition:transform .5s var(--ease-spring),box-shadow .3s ease}
.brand:hover .brand-logo{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 0 2px rgba(255,159,67,.5),0 0 32px rgba(168,85,247,.7)}
.desktop-nav{display:flex;gap:32px;color:var(--c-muted);font-size:14px}
.desktop-nav a{position:relative;padding:6px 0;display:flex;align-items:center;gap:6px}
.desktop-nav a::after{content:"";position:absolute;right:0;bottom:0;height:2px;width:0;background:var(--grad-brand);transition:width var(--dur) var(--ease);border-radius:2px}
.desktop-nav a:hover{color:var(--c-text)}
.desktop-nav a:hover::after,.desktop-nav a.active::after{width:100%}
.desktop-nav a.active{color:var(--c-text)}
.nav-actions{display:flex;gap:8px;align-items:center}
.icon-btn,.menu-btn,.acc-btn{border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);border-radius:12px;padding:9px 13px;cursor:pointer;transition:transform var(--dur) var(--ease-spring),background var(--dur),border-color var(--dur),box-shadow var(--dur);display:inline-flex;align-items:center;gap:7px}
.icon-btn:hover,.menu-btn:hover,.acc-btn:hover{transform:translateY(-2px);border-color:rgba(255,159,67,.4);box-shadow:0 8px 22px rgba(255,159,67,.15)}
.icon-btn:active,.menu-btn:active,.acc-btn:active{transform:translateY(0) scale(.96)}
#themeBtn svg{transition:transform .5s var(--ease-spring)}
#themeBtn.spin svg{transform:rotate(180deg)}
.menu-btn{display:none}
.mobile-nav{display:none;position:fixed;top:64px;right:0;left:0;background:var(--c-bg-soft);border-bottom:1px solid var(--c-border);padding:14px;z-index:99;flex-direction:column;gap:4px;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:13px 14px;border-radius:11px;color:var(--c-muted);transition:background var(--dur),color var(--dur)}
.mobile-nav a:hover{background:var(--c-surface);color:var(--c-text)}

/* ---------- layout ---------- */
.section{max-width:var(--maxw);margin:auto;padding:135px 24px}
.section.tight{padding-top:70px;padding-bottom:70px}
.eyebrow{display:flex;align-items:center;gap:9px;color:#7ee7f5;font-size:12px;font-weight:700;letter-spacing:1px}
html[data-theme="light"] .eyebrow{color:#0e7490}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--c-primary);box-shadow:0 0 18px var(--c-primary);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- hero (home) ---------- */
.hero{min-height:920px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;padding-top:100px}
.hero-copy,.hero-visual{position:relative;z-index:1}
.hero h1{font-size:clamp(64px,8.6vw,128px);line-height:1;letter-spacing:-4px;margin:26px 0;animation:riseIn .8s var(--ease) both}
.hero h1 span,h2 span{background:var(--grad-rainbow);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite;display:inline-block}
.hero h1 span.plain,h2 span.plain{background:none;-webkit-text-fill-color:currentColor;color:inherit;animation:none;display:inline}
@keyframes shine{to{background-position:300% center}}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.9) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.hero p{max-width:680px;color:var(--c-muted);font-size:20px;line-height:2;animation:riseIn .8s var(--ease) .08s both}
.hero-buttons{display:flex;gap:14px;margin-top:38px;animation:riseIn .8s var(--ease) .16s both}
.trust-row{display:flex;flex-wrap:wrap;gap:24px;color:var(--c-muted);font-size:13px;margin-top:28px;animation:riseIn .8s var(--ease) .24s both}
.trust-row span{display:flex;align-items:center;gap:7px}
.trust-row .ic{color:var(--c-lime)}

/* ---------- page-hero (sub pages) ---------- */
.page-hero{padding:175px 24px 80px;max-width:var(--maxw);margin:auto;text-align:center}
.page-hero h1{font-size:clamp(48px,7vw,86px);letter-spacing:-3px;margin:22px auto 18px;max-width:880px;animation:riseIn .7s var(--ease) both}
.page-hero p{max-width:620px;margin:auto;color:var(--c-muted);font-size:16px;line-height:1.9;animation:riseIn .7s var(--ease) .08s both}
.page-hero .eyebrow{justify-content:center;animation:riseIn .7s var(--ease) both}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;gap:10px;border:1px solid var(--c-border);border-radius:16px;padding:17px 28px;cursor:pointer;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease),border-color var(--dur);isolation:isolate;font-weight:800;font-size:15px}
.btn:hover{transform:translateY(-4px) scale(1.03)}
.btn:active{transform:translateY(-1px) scale(.97)}
.btn.primary{background:var(--grad-brand);background-size:220% 220%;color:#1a0b02;border:0;font-weight:900;box-shadow:0 18px 55px rgba(255,95,162,.28);animation:gradShift 5s ease infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn.primary:hover{box-shadow:0 24px 70px rgba(255,159,67,.4)}
.btn.primary::before{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg) translateX(-220%);transition:transform .7s ease}
.btn.primary:hover::before{transform:skewX(-20deg) translateX(320%)}
.btn.ghost{background:var(--c-surface);color:var(--c-text)}
.btn.ghost:hover{border-color:rgba(34,211,238,.4);background:var(--c-surface-strong)}
.btn.danger{background:rgba(248,113,113,.12);color:var(--c-danger);border-color:rgba(248,113,113,.3)}
.btn.danger:hover{background:rgba(248,113,113,.2)}
.btn.sm{padding:9px 14px;border-radius:10px;font-size:13px}
.btn.full{width:100%;margin-top:18px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:rip .6s var(--ease) forwards;background:rgba(255,255,255,.5);pointer-events:none;z-index:-1}
html[data-theme="light"] .ripple{background:rgba(15,23,42,.18)}
@keyframes rip{to{transform:scale(2.6);opacity:0}}

/* ---------- hero visual ---------- */
.hero-visual{display:grid;place-items:center;perspective:1200px}
.orbit-card{width:min(520px,100%);padding:30px;border:1px solid var(--c-border);border-radius:36px;background:linear-gradient(145deg,var(--c-surface-strong),var(--c-surface));box-shadow:var(--shadow-soft),inset 0 1px rgba(255,255,255,.08);position:relative;overflow:hidden;animation:popIn .7s var(--ease) both;transition:transform .15s var(--ease-spring);transform-style:preserve-3d;will-change:transform}
.orbit-card:before{content:"";position:absolute;width:260px;height:260px;background:var(--c-primary);filter:blur(120px);opacity:.17;left:-70px;top:-90px}
.orbit-top{display:flex;justify-content:space-between;align-items:center;color:#7c879d;font-size:10px;letter-spacing:1px}
.orbit-top .dot{width:8px;height:8px;border-radius:50%;background:var(--c-success);box-shadow:0 0 12px var(--c-success);animation:blink 1.6s ease-in-out infinite}
.orbit-ring{width:250px;height:250px;margin:44px auto 34px;border:1px solid rgba(255,159,67,.4);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 90px rgba(255,95,162,.18),inset 0 0 60px rgba(168,85,247,.12);position:relative}
.orbit-ring:after,.orbit-ring:before{content:"";position:absolute;inset:20px;border:1px dashed rgba(255,255,255,.12);border-radius:50%;animation:spin 12s linear infinite}
.orbit-ring:before{inset:-10px;animation-duration:18s;animation-direction:reverse}
.orb-core{width:112px;height:112px;border-radius:34px;display:grid;place-items:center;color:#1a0b02;background:var(--grad-brand);box-shadow:0 0 90px rgba(255,95,162,.5);animation:floatY 4s ease-in-out infinite}
.orb-core .ic{width:44px;height:44px;stroke-width:1.6}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.metric small,.mini-grid small{color:#747f93;display:block}
.metric b{font-size:30px}
.spark{height:44px;display:flex;align-items:end;gap:5px;margin-top:10px}
.spark i{width:100%;height:0;background:linear-gradient(var(--c-orange),var(--c-pink));border-radius:5px;transition:height 1s var(--ease-spring)}
.spark i:nth-child(2n){background:linear-gradient(var(--c-accent),var(--c-primary))}
.spark i:nth-child(3n){background:linear-gradient(var(--c-yellow),var(--c-orange))}
.spark.in i:nth-child(1){height:35%}.spark.in i:nth-child(2){height:52%;transition-delay:.05s}.spark.in i:nth-child(3){height:40%;transition-delay:.1s}.spark.in i:nth-child(4){height:72%;transition-delay:.15s}.spark.in i:nth-child(5){height:60%;transition-delay:.2s}.spark.in i:nth-child(6){height:88%;transition-delay:.25s}.spark.in i:nth-child(7){height:76%;transition-delay:.3s}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.mini-grid div{padding:13px;border-radius:14px;background:var(--c-surface);transition:transform var(--dur) var(--ease),background var(--dur)}
.mini-grid div:hover{transform:translateY(-3px);background:var(--c-surface-strong)}
.mini-grid b{font-size:15px}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--c-border);overflow:hidden;background:var(--c-surface)}
.ticker>div{width:max-content;display:flex;gap:80px;padding:18px 0;animation:ticker 26s linear infinite;color:#9da7ba;font-size:12px}
.ticker>div span{display:flex;align-items:center;gap:8px}
.ticker:hover>div{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(50%)}}

/* ---------- section heads ---------- */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:46px}
.section-head.centered{justify-content:center;text-align:center}
.section-head h2{font-size:clamp(38px,5.6vw,74px);margin:18px 0 0;letter-spacing:-2.4px}
.section-head p{color:#7d879b;max-width:560px}
.search{width:300px;display:flex;align-items:center;gap:9px;padding:13px 15px;border:1px solid var(--c-border);border-radius:13px;background:var(--c-surface);transition:border-color var(--dur),box-shadow var(--dur)}
.search:focus-within{border-color:rgba(34,211,238,.5);box-shadow:0 0 0 4px rgba(34,211,238,.08)}
.search .ic{color:#7c879d;font-size:18px}
.search input{width:100%;border:0;outline:0;background:transparent;color:var(--c-text)}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.filters button{border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-muted);padding:10px 16px;border-radius:11px;cursor:pointer;transition:all var(--dur) var(--ease)}
.filters button:hover{color:var(--c-text);border-color:rgba(255,159,67,.4)}
.filters button.active{background:var(--grad-brand);color:#1a0b02;border-color:transparent;font-weight:800;animation:popIn .3s var(--ease-spring)}

/* ---------- service grid ---------- */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{padding:24px;border:1px solid var(--c-border);background:linear-gradient(150deg,var(--c-surface-strong),var(--c-surface));border-radius:24px;min-height:275px;display:flex;flex-direction:column;transition:transform .4s var(--ease-spring),border-color .3s ease,box-shadow .3s ease;position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.service-card:before{content:"";position:absolute;width:160px;height:160px;background:var(--c-pink);filter:blur(80px);opacity:0;transition:opacity .3s ease;right:-30px;top:-40px}
.service-card:hover{border-color:rgba(255,159,67,.4);box-shadow:var(--shadow-glow);transform:translateY(-8px) scale(1.02)}
.service-card:hover:before{opacity:.28}
.card-top,.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.service-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:rgba(255,159,67,.14);color:var(--c-orange);font-size:26px;transition:transform .4s var(--ease-spring)}
.service-card:hover .service-icon{transform:rotate(-10deg) scale(1.15)}
.service-card:nth-of-type(5n+2) .service-icon,.feature-card:nth-of-type(5n+2) .service-icon{background:rgba(255,95,162,.14);color:var(--c-pink)}
.service-card:nth-of-type(5n+3) .service-icon,.feature-card:nth-of-type(5n+3) .service-icon{background:rgba(168,85,247,.14);color:var(--c-accent)}
.service-card:nth-of-type(5n+4) .service-icon,.feature-card:nth-of-type(5n+4) .service-icon{background:rgba(34,211,238,.14);color:var(--c-primary)}
.service-card:nth-of-type(5n+5) .service-icon,.feature-card:nth-of-type(5n+5) .service-icon{background:rgba(163,230,53,.16);color:var(--c-lime)}
.badge{font-size:10px;padding:6px 10px;border-radius:8px;background:rgba(255,217,61,.16);color:var(--c-yellow);font-weight:800}
.service-card h3{font-size:18px;margin:26px 0 6px;font-weight:800}
.service-card p{color:var(--c-muted);font-size:12px}
.card-bottom{margin-top:auto;padding-top:22px}
.card-bottom small{display:block;color:var(--c-muted);font-size:10px}
.card-bottom strong{font-size:16px}
.add{position:relative;overflow:hidden;isolation:isolate;border:0;background:var(--grad-brand);color:#1a0b02;width:42px;height:42px;border-radius:13px;cursor:pointer;display:grid;place-items:center;transition:transform .25s var(--ease-spring),box-shadow .25s ease;box-shadow:0 8px 22px rgba(255,95,162,.3)}
.add:hover{transform:scale(1.15) rotate(90deg)}
.add:active{transform:scale(.9) rotate(90deg)}
.add.added{animation:popIn .4s var(--ease-spring)}
.confetti-bit{position:fixed;z-index:400;pointer-events:none}

/* ---------- feature grid (home) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{padding:30px 26px;border:1px solid var(--c-border);border-radius:24px;background:var(--c-surface);transition:transform .35s var(--ease-spring),border-color .3s ease,box-shadow .3s ease}
.feature-card:hover{transform:translateY(-8px) rotate(-1deg) scale(1.02);border-color:rgba(255,159,67,.35);box-shadow:var(--shadow-glow)}
.feature-card .service-icon{margin-bottom:22px}
.feature-card:hover .service-icon{transform:rotate(-10deg) scale(1.15)}
.feature-card h3{font-size:17px;margin-bottom:8px;font-weight:800}
.feature-card p{color:var(--c-muted);font-size:13px;line-height:1.9}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps article{min-height:250px;padding:30px;border:1px solid var(--c-border);border-radius:24px;background:var(--c-surface);position:relative;transition:transform .3s var(--ease-spring),border-color .3s ease}
.steps article:hover{transform:translateY(-8px) scale(1.02);border-color:rgba(255,159,67,.35);box-shadow:var(--shadow-glow)}
.steps article>b{font-size:56px;color:rgba(127,138,168,.14);position:absolute;left:22px;top:12px}
.steps article span.num{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--c-primary);color:#031017;font-weight:900}
.steps .service-icon{margin-top:18px}
.steps h3{margin-top:16px;font-size:18px}
.steps p{color:#788397;line-height:1.9;font-size:13px;margin-top:8px}

/* ---------- stats ---------- */
.stats-panel{display:grid;grid-template-columns:repeat(4,1fr);padding-block:70px;border-block:1px solid var(--c-border);max-width:none;background:var(--c-surface)}
.stats-panel div{text-align:center;border-left:1px solid var(--c-border);transition:transform .3s ease}
.stats-panel div:hover{transform:translateY(-4px)}
.stats-panel div:last-child{border:0}
.stats-panel b{display:block;font-size:44px;background:var(--grad-rainbow);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.stats-panel span{color:#727d91;font-size:12px}

/* ---------- faq ---------- */
.faq{max-width:850px;margin:auto}
.faq-item{border-bottom:1px solid var(--c-border)}
.faq-summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;font-weight:700;padding:22px 0;transition:color var(--dur);outline-offset:4px}
.faq-summary:hover{color:var(--c-primary)}
.faq-summary .ic{color:var(--c-primary);transition:transform .35s var(--ease-spring);flex-shrink:0}
.faq-item.open .faq-summary .ic{transform:rotate(45deg)}
.faq-panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-panel p{color:#778195;line-height:2;font-size:13px;max-width:700px;margin:0 0 22px}

/* ---------- cta ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;min-height:480px;padding-inline:70px!important;border:1px solid var(--c-border);border-radius:38px;margin-bottom:110px;background:radial-gradient(circle at 80% 30%,rgba(255,159,67,.2),transparent 35%),radial-gradient(circle at 10% 90%,rgba(168,85,247,.18),transparent 40%),linear-gradient(135deg,var(--c-surface-strong),var(--c-surface));position:relative;overflow:hidden}
.cta h2{font-size:clamp(44px,6vw,76px);line-height:1.15;margin:20px 0}
.cta p{color:#7d879a;margin-bottom:26px}
.cta-art{width:300px;height:250px;position:relative}
.cta-art div{position:absolute;border:1px solid rgba(255,159,67,.4);border-radius:50%;inset:10px;animation:spin 13s linear infinite}
.cta-art div:nth-child(2){inset:45px;border-color:rgba(168,85,247,.4);animation-duration:9s}
.cta-art div:nth-child(3){inset:85px;border-color:rgba(244,114,182,.35);animation-duration:6s}

.close{border:0;background:var(--c-surface);color:var(--c-text);width:36px;height:36px;border-radius:10px;cursor:pointer;transition:transform var(--dur) var(--ease-spring);display:grid;place-items:center}
.close:hover{transform:rotate(90deg)}
.empty{grid-column:1/-1;padding:55px 20px;text-align:center;color:#707b90;border:1px dashed var(--c-border);border-radius:18px;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty .ic{font-size:32px;color:#4b5468}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px) scale(.95);padding:13px 20px;border-radius:12px;background:var(--c-text);color:var(--c-bg);font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:.3s var(--ease-spring);z-index:500;box-shadow:0 15px 40px rgba(0,0,0,.3);display:flex;align-items:center;gap:9px}
html[data-theme="light"] .toast{background:#0f172a;color:#fff}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* ---------- back to top ---------- */
.to-top{position:fixed;bottom:26px;right:26px;width:52px;height:52px;border-radius:50%;background:var(--grad-brand);color:#1a0b02;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 36px rgba(255,95,162,.4);opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:.3s var(--ease-spring);z-index:400}
.to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.to-top:hover{transform:translateY(-4px) scale(1.06)}

/* ---------- footer ---------- */
footer{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:74px max(24px,calc((100vw - 1172px)/2));border-top:1px solid var(--c-border);background:var(--c-bg-soft)}
footer h4{margin:0 0 18px}
footer a,footer small,footer p{display:block;color:#707b90;font-size:12px;margin:10px 0;transition:color var(--dur)}
footer a:hover{color:var(--c-primary)}
.status{color:var(--c-success);font-size:12px;display:flex;align-items:center;gap:7px}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--c-success);box-shadow:0 0 10px var(--c-success);animation:blink 1.6s ease-in-out infinite}
.footer-brand p{max-width:250px;line-height:2}

/* ---------- auth pages ---------- */
.auth-wrap{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:60px 20px}
.auth-card{width:min(440px,100%);padding:38px 32px;border:1px solid var(--c-border);border-radius:26px;background:linear-gradient(160deg,var(--c-surface-strong),var(--c-surface));box-shadow:var(--shadow-soft);animation:popIn .5s var(--ease) both;position:relative;overflow:hidden}
.auth-card:before{content:"";position:absolute;width:220px;height:220px;background:var(--c-primary);filter:blur(110px);opacity:.15;left:-60px;top:-70px}
.auth-card .service-icon{width:56px;height:56px;margin-bottom:18px}
.auth-card h1{font-size:28px;letter-spacing:-1px;margin-bottom:8px}
.auth-card>p{color:var(--c-muted);font-size:13px;margin-bottom:26px}
.field{margin-bottom:16px;text-align:right}
.field label{display:block;font-size:12px;color:var(--c-muted);margin-bottom:7px}
.field input{width:100%;padding:13px 15px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);color:var(--c-text);outline:0;transition:border-color var(--dur),box-shadow var(--dur)}
.field input:focus{border-color:rgba(34,211,238,.5);box-shadow:0 0 0 4px rgba(34,211,238,.08)}
.form-msg{font-size:12px;padding:10px 13px;border-radius:10px;margin-bottom:14px;display:none}
.form-msg.show{display:block}
.form-msg.err{background:rgba(248,113,113,.12);color:var(--c-danger)}
.form-msg.ok{background:rgba(74,222,128,.12);color:var(--c-success)}
.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--c-muted)}
.auth-switch a{color:var(--c-primary);font-weight:700}

/* ---------- admin ---------- */
body.admin-body{background:var(--c-bg-soft)}
.admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.admin-side{border-left:1px solid var(--c-border);background:var(--c-bg);padding:26px 18px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.admin-side .brand{margin-bottom:24px;padding:0 8px}
.side-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:var(--c-muted);cursor:pointer;transition:background var(--dur),color var(--dur)}
.side-link:hover{background:var(--c-surface);color:var(--c-text)}
.side-link.active{background:var(--grad-brand);color:#031017;font-weight:800}
.side-link .ic{font-size:18px}
.admin-side .logout-link{margin-top:auto}
.admin-main{padding:34px clamp(18px,3vw,44px);max-width:1400px}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:14px}
.admin-top h1{font-size:26px;letter-spacing:-1px}
.admin-top small{color:var(--c-muted)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:26px}
.stat{background:var(--c-surface);padding:18px 20px;border:1px solid var(--c-border);border-radius:16px;transition:transform .2s ease,box-shadow .2s ease;animation:riseIn .4s ease both}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.stat b{display:block;font-size:24px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:12px;color:var(--c-muted)}
.adminbox{background:var(--c-surface);border:1px solid var(--c-border);border-radius:20px;padding:24px}
.tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.tab-btn{border:1px solid var(--c-border);background:var(--c-surface);border-radius:12px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer;transition:.2s;color:var(--c-muted)}
.tab-btn.active{background:var(--grad-brand);color:#031017;border-color:transparent}
.filters-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.filters-row select,.filters-row input{border:1px solid var(--c-border);border-radius:11px;padding:11px 13px;font:inherit;background:var(--c-surface);color:var(--c-text)}
.tablewrap{overflow:auto;border-radius:14px}
.orders{width:100%;border-collapse:collapse;min-width:900px}
.orders th,.orders td{padding:14px;border-bottom:1px solid var(--c-border);text-align:right;font-size:13px}
.orders tbody tr{transition:background .15s}
.orders tbody tr:hover{background:var(--c-surface)}
.orders select{border:1px solid var(--c-border);border-radius:9px;padding:6px 8px;background:var(--c-bg-soft);color:var(--c-text)}
.pill{padding:5px 11px;border-radius:99px;background:rgba(99,102,241,.12);color:#a5b4fc;font-size:11px;font-weight:700;display:inline-block}
.pill.pending{background:rgba(250,204,21,.12);color:var(--c-warn)}
.pill.processing{background:rgba(34,211,238,.12);color:var(--c-primary)}
.pill.done{background:rgba(74,222,128,.12);color:var(--c-success)}
.pill.cancelled{background:rgba(248,113,113,.12);color:var(--c-danger)}
.pill.free{background:rgba(168,85,247,.12);color:var(--c-accent)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.product-card{border:1px solid var(--c-border);border-radius:16px;padding:18px;background:var(--c-bg-soft);transition:transform .2s var(--ease-spring),border-color .2s}
.product-card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.3)}
.product-card .service-icon{margin-bottom:14px}
.product-card h4{font-size:15px;margin-bottom:4px}
.product-card small{color:var(--c-muted);display:block;margin-bottom:10px}
.product-card strong{display:block;font-size:16px;margin-bottom:12px}
.product-actions{display:flex;gap:8px}
.product-actions .btn{flex:1;padding:9px 10px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);z-index:600;display:none;place-items:center;padding:20px}
.modal-overlay.open{display:grid}
.modal{width:min(480px,100%);background:var(--c-bg-soft);border:1px solid var(--c-border);border-radius:22px;padding:28px;animation:popIn .3s var(--ease-spring)}
.modal h3{font-size:19px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center}
.modal .close{background:var(--c-surface)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.icon-picker{display:flex;flex-wrap:wrap;gap:8px}
.icon-picker button{width:42px;height:42px;border-radius:11px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);cursor:pointer;display:grid;place-items:center;transition:.2s}
.icon-picker button.active{background:var(--grad-brand);color:#031017;border-color:transparent}
.stats-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
select{cursor:pointer}

/* ---------- account menu ---------- */
.acc-menu{position:relative}
.acc-drop{position:absolute;left:0;top:calc(100% + 10px);min-width:190px;background:var(--c-bg-soft);border:1px solid var(--c-border);border-radius:14px;padding:8px;box-shadow:var(--shadow-soft);opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;transition:.25s var(--ease-spring);z-index:150}
.acc-drop.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.acc-drop a,.acc-drop button{display:flex;align-items:center;gap:10px;width:100%;text-align:right;padding:10px 12px;border-radius:9px;border:0;background:transparent;color:var(--c-text);cursor:pointer;font-size:13px;transition:background var(--dur)}
.acc-drop a:hover,.acc-drop button:hover{background:var(--c-surface)}
.acc-drop .muted{color:var(--c-muted);font-size:11px;padding:8px 12px}

/* rotating rainbow border-beam removed (busy moving lines) */
.service-card,.feature-card,.orbit-card,.auth-card,.package{position:relative}

/* ---------- glow pulse on headline gradient text ---------- */
.hero h1 span:not(.plain),h2 span:not(.plain){filter:drop-shadow(0 0 18px rgba(255,95,162,.35));animation:shine 5s linear infinite,glowPulse 3s ease-in-out infinite}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 14px rgba(255,95,162,.3))}50%{filter:drop-shadow(0 0 30px rgba(255,159,67,.55))}}

/* ---------- floating spark particles (decorative) ---------- */
.sparks-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sparks-layer i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;opacity:0;animation:sparkRise linear infinite}
.sparks-layer i:nth-child(1){left:8%;background:var(--c-orange);animation-duration:7s;animation-delay:.2s}
.sparks-layer i:nth-child(2){left:22%;background:var(--c-pink);animation-duration:9s;animation-delay:1.5s}
.sparks-layer i:nth-child(3){left:38%;background:var(--c-yellow);animation-duration:6.5s;animation-delay:.8s}
.sparks-layer i:nth-child(4){left:55%;background:var(--c-accent);animation-duration:8s;animation-delay:2.2s}
.sparks-layer i:nth-child(5){left:70%;background:var(--c-primary);animation-duration:7.5s;animation-delay:.5s}
.sparks-layer i:nth-child(6){left:85%;background:var(--c-lime);animation-duration:9.5s;animation-delay:3s}
.sparks-layer i:nth-child(7){left:15%;background:var(--c-pink);animation-duration:10s;animation-delay:4s}
.sparks-layer i:nth-child(8){left:63%;background:var(--c-orange);animation-duration:6s;animation-delay:2.8s}
@keyframes sparkRise{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:1}90%{opacity:.6}100%{transform:translateY(-620px) scale(1.3);opacity:0}}

/* ---------- support chat widget ---------- */
.chat-fab{position:fixed;bottom:26px;left:26px;width:60px;height:60px;border-radius:50%;background:var(--grad-brand);color:#1a0b02;display:grid;place-items:center;cursor:pointer;z-index:420;box-shadow:0 16px 40px rgba(255,95,162,.4);transition:transform .3s var(--ease-spring)}
.chat-fab:hover{transform:scale(1.1) rotate(-6deg)}
.chat-fab .ic{width:26px;height:26px}
.chat-fab-ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--c-pink);opacity:.6;animation:chatPulse 2.2s ease-out infinite}
@keyframes chatPulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.chat-panel{position:fixed;bottom:100px;left:26px;width:min(380px,calc(100vw - 32px));height:min(540px,calc(100vh - 140px));background:var(--c-bg-soft);border:1px solid var(--c-border);border-radius:26px;box-shadow:var(--shadow-soft);z-index:421;display:flex;flex-direction:column;overflow:hidden;transform:translateY(24px) scale(.92);opacity:0;pointer-events:none;transition:.35s var(--ease-spring)}
.chat-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.chat-head{background:var(--grad-brand);padding:18px 20px;display:flex;justify-content:space-between;align-items:center;color:#1a0b02}
.chat-head-info{display:flex;align-items:center;gap:10px}
.chat-head-info b{font-size:14px;display:block}
.chat-head-info small{font-size:11px;opacity:.75}
.chat-dot{width:9px;height:9px;border-radius:50%;background:#1a0b02;box-shadow:0 0 0 3px rgba(26,11,2,.15)}
.chat-head .close{background:rgba(26,11,2,.12);color:#1a0b02}
.chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:80%;padding:11px 14px;border-radius:16px;font-size:13px;line-height:1.8;animation:riseIn .3s var(--ease) both}
.chat-msg.user{align-self:flex-end;background:var(--grad-brand);color:#1a0b02;border-bottom-left-radius:5px}
.chat-msg.bot,.chat-msg.admin{align-self:flex-start;background:var(--c-surface-strong);border-bottom-right-radius:5px}
.chat-msg.admin{border:1px solid rgba(168,85,247,.3)}
.chat-input-row{display:flex;gap:8px;padding:14px;border-top:1px solid var(--c-border)}
.chat-input-row input{flex:1;border:1px solid var(--c-border);border-radius:12px;padding:12px 14px;background:var(--c-surface);color:var(--c-text);outline:0}
.chat-input-row input:focus{border-color:rgba(255,159,67,.5)}
.chat-send{border:0;background:var(--grad-brand);color:#1a0b02;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:transform .2s var(--ease-spring)}
.chat-send:hover{transform:scale(1.08)}
.chat-lock{margin:auto;text-align:center;padding:30px;color:var(--c-muted);display:flex;flex-direction:column;align-items:center;gap:14px}
.chat-lock .service-icon{width:56px;height:56px}
.typing-dots{display:inline-flex;gap:4px;padding:4px 0}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--c-muted);animation:typingBounce 1.2s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* ---------- order modal ---------- */
.order-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.order-head h3{margin:0;font-size:18px}
.order-head small{color:var(--c-muted);display:block;margin-top:2px}
.order-price-row{display:flex;justify-content:space-between;align-items:center;background:var(--c-surface);border-radius:14px;padding:14px 16px;margin:18px 0;font-size:13px}
.order-price-row b{font-size:18px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.order-success{text-align:center;padding:10px 0}
.order-success .service-icon{width:64px;height:64px;margin:0 auto 16px;background:rgba(74,222,128,.14);color:var(--c-success)}
.order-success h3{margin-bottom:8px}
.order-success .order-id{display:inline-block;margin:14px 0;padding:10px 18px;border-radius:12px;background:var(--c-surface);font-weight:800;letter-spacing:1px}
.login-required{text-align:center;padding:10px 0}
.login-required .service-icon{width:60px;height:60px;margin:0 auto 16px}
.login-required h3{margin-bottom:8px}
.login-required p{color:var(--c-muted);font-size:13px;margin-bottom:20px}
.login-required .row{display:flex;gap:10px}
.login-required .btn{flex:1}

/* ---------- testimonials ---------- */
.testi-grid{columns:4 220px;column-gap:16px}
.testi-card{break-inside:avoid;margin-bottom:16px;border-radius:20px;overflow:hidden;border:1px solid var(--c-border);background:var(--c-surface);cursor:zoom-in;position:relative;transition:transform .35s var(--ease-spring),box-shadow .3s ease}
.testi-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-glow)}
.testi-card img{width:100%;display:block;transition:transform .5s var(--ease-spring)}
.testi-card:hover img{transform:scale(1.08)}
.testi-card .cap{padding:12px 14px;font-size:12px;color:var(--c-muted)}
.testi-card .zoom-hint{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,20,.55),transparent 45%);opacity:0;display:flex;align-items:flex-end;padding:14px;transition:opacity .3s ease}
.testi-card:hover .zoom-hint{opacity:1}
.testi-card .zoom-hint .ic{color:#fff}
.lightbox{position:fixed;inset:0;background:rgba(5,4,10,.92);backdrop-filter:blur(10px);z-index:700;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:40px 20px}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(700px,92vw);max-height:82vh;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:popIn .35s var(--ease-spring) both}
.lightbox .close{position:absolute;top:24px;left:24px;background:rgba(255,255,255,.12);color:#fff}
.testi-empty{text-align:center;padding:60px 20px;color:var(--c-muted);border:1px dashed var(--c-border);border-radius:20px}

/* ---------- hero watermark ---------- */
.hero-watermark{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);font-size:min(22vw,320px);font-weight:900;white-space:nowrap;letter-spacing:-.04em;background:var(--grad-rainbow);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.06;animation:shine 8s linear infinite;pointer-events:none;z-index:0;user-select:none}

/* ---------- responsive ---------- */
@media(max-width:1100px){.admin-shell{grid-template-columns:1fr}.admin-side{position:static;height:auto;flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--c-border)}.admin-side .logout-link{margin-top:0}}
@media(max-width:1000px){
  .service-grid{grid-template-columns:repeat(3,1fr)}
  .feature-grid{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr}
  .hero-visual{order:-1}
  .hero-copy{text-align:center}
  .hero-copy .eyebrow,.trust-row,.hero-buttons{justify-content:center}
  .steps{grid-template-columns:1fr}
  .cta{padding:45px!important}
  .cta-art{display:none}
}
@media(max-width:700px){
  .desktop-nav{display:none}
  .menu-btn{display:block}
  .hero{min-height:auto;padding-top:70px}
  .hero h1{font-size:50px;letter-spacing:-2px}
  .hero p{font-size:14px}
  .hero-buttons{flex-direction:column}
  .hero-buttons .btn{width:100%}
  .orbit-ring{width:190px;height:190px}
  .service-grid{grid-template-columns:1fr 1fr}
  .feature-grid{grid-template-columns:1fr}
  .section{padding:80px 18px}
  .section-head{align-items:stretch;flex-direction:column}
  .search{width:100%}
  .stats-panel{grid-template-columns:1fr 1fr;gap:25px}
  .stats-panel div:nth-child(2){border:0}
  .stats-panel div{border-left:1px solid var(--c-border)}
  footer{grid-template-columns:1fr 1fr}
  .ticker>div{gap:35px}
}
@media(max-width:430px){
  .service-grid{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr 1fr}
  .mini-grid div:last-child{display:none}
  .nav{padding-inline:14px}
  .brand{font-size:12px}
  .icon-btn{display:none}
  footer{grid-template-columns:1fr}
  .hero h1{font-size:44px}
  .to-top{bottom:16px;right:16px;width:44px;height:44px}
  .page-hero{padding-top:120px}
  .sparks-layer{display:none}
  .chat-fab{bottom:16px;left:16px;width:52px;height:52px}
  .chat-fab .ic{width:22px;height:22px}
  .chat-panel{bottom:80px;left:12px;width:calc(100vw - 24px)}
  .order-head{flex-direction:column;text-align:center;gap:8px}
  .modal{padding:22px}
}

/* =====================================================================
   v2 additions: news, cart, order history, announcement bar, extra motion
   ===================================================================== */

/* ---- page transitions ---- */
html{overflow-x:hidden}
body{animation:pageIn .6s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body.leaving{opacity:0;transition:opacity .26s ease}

/* ---- announcement bar ---- */
.announce{display:none;position:relative;z-index:101;align-items:center;justify-content:center;gap:12px;padding:10px 46px;text-align:center;font-size:13px;font-weight:700;color:#1a0b02;background:var(--grad-brand);background-size:240% 100%;animation:gradShift 6s ease infinite}
.announce.show{display:flex;animation:gradShift 6s ease infinite,slideDown .5s var(--ease) both}
.announce button{position:absolute;left:12px;top:50%;translate:0 -50%;border:0;background:rgba(0,0,0,.14);color:#1a0b02;width:26px;height:26px;border-radius:8px;cursor:pointer;display:grid;place-items:center;transition:transform .25s var(--ease-spring)}
.announce button:hover{transform:rotate(90deg) scale(1.1)}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

/* ---- cart button + badge ---- */
.cart-btn{position:relative;text-decoration:none}
.cart-badge{position:absolute;top:-7px;left:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--grad-brand);color:#1a0b02;font-size:11px;font-weight:900;display:none;place-items:center;box-shadow:0 4px 14px rgba(255,95,162,.5)}
.cart-badge.show{display:grid}
.cart-badge.bump{animation:badgeBump .6s var(--ease-spring)}
@keyframes badgeBump{0%{transform:scale(1)}35%{transform:scale(1.6) rotate(-12deg)}100%{transform:scale(1)}}
.cart-btn:hover svg{animation:cartWiggle .5s ease}
@keyframes cartWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.fly-dot{position:fixed;z-index:9998;width:18px;height:18px;border-radius:50%;background:var(--grad-brand);box-shadow:0 0 22px rgba(255,95,162,.8);pointer-events:none}

/* ---- service card: two actions + spotlight ---- */
.card-actions{display:flex;gap:8px}
.add.ghost-add{background:var(--c-surface-strong);color:var(--c-text);border:1px solid var(--c-border)}
.add.ghost-add:hover{transform:scale(1.15) rotate(-10deg);border-color:rgba(255,159,67,.5)}
.service-card,.feature-card,.news-card,.cart-item,.order-card{position:relative;overflow:hidden}
.service-card::after,.feature-card::after,.news-card::after,.cart-item::after,.order-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,159,67,.16),transparent 70%)}
.service-card:hover::after,.feature-card:hover::after,.news-card:hover::after,.cart-item:hover::after,.order-card:hover::after{opacity:1}
.service-card:hover .service-icon,.feature-card:hover .service-icon{transform:scale(1.12) rotate(-8deg)}
.service-card .service-icon,.feature-card .service-icon{animation:iconFloat 5s ease-in-out infinite}
@keyframes iconFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* ---- magnetic primary buttons ---- */
.btn.primary{translate:var(--tx,0) var(--ty,0);transition:translate .18s ease-out,transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease)}
.btn.primary::before{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sheen 4.5s ease-in-out infinite;z-index:-1}
@keyframes sheen{0%,60%{left:-70%}100%{left:130%}}

/* ---- headings underline draw + eyebrow ---- */
.section-head h2,.page-hero h1{position:relative}
.reveal.in .eyebrow i,.page-hero .eyebrow i{animation:blink 2s ease-in-out infinite,ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}100%{box-shadow:0 0 0 14px rgba(34,211,238,0)}}

/* ---- news ---- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.news-card{display:flex;flex-direction:column;border:1px solid var(--c-border);border-radius:24px;background:linear-gradient(150deg,var(--c-surface-strong),var(--c-surface));color:inherit;text-decoration:none;transition:transform .4s var(--ease-spring),border-color .3s ease,box-shadow .3s ease}
.news-card:hover{transform:translateY(-8px);border-color:rgba(255,159,67,.45);box-shadow:var(--shadow-soft)}
.news-img{aspect-ratio:16/9;overflow:hidden;background:var(--c-surface)}
.news-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.news-card:hover .news-img img{transform:scale(1.08)}
.news-img.ph{display:grid;place-items:center;color:var(--c-orange);background:linear-gradient(135deg,rgba(255,159,67,.14),rgba(168,85,247,.14))}
.news-info{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.news-info h3{margin:0;font-size:18px;line-height:1.7}
.news-info p{margin:0;color:var(--c-muted);font-size:13px;line-height:2}
.read-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--c-orange);font-weight:800;font-size:13px}
.read-more .ic{transition:transform .3s var(--ease-spring)}
.news-card:hover .read-more .ic{transform:translateX(-6px)}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:var(--c-muted);font-size:12px}
.article-meta span{display:inline-flex;align-items:center;gap:6px}
.article{max-width:820px;padding-top:150px}
.article h1{font-size:clamp(30px,5vw,50px);line-height:1.5;margin:16px 0 26px;letter-spacing:-1px}
.article-img{width:100%;border-radius:26px;margin-bottom:30px;box-shadow:var(--shadow-soft)}
.article-body p{font-size:16px;line-height:2.3;color:var(--c-text);margin:0 0 20px}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--c-muted);text-decoration:none;font-size:13px;margin-bottom:22px;transition:color .2s,transform .3s var(--ease-spring)}
.back-link:hover{color:var(--c-text);transform:translateX(6px)}
.back-link .ic{transform:rotate(180deg)}

/* ---- big empty state ---- */
.empty.big{padding:80px 20px;border-radius:28px;animation:popIn .5s var(--ease-spring) both}
.empty.big .ic-lg{animation:iconFloat 3s ease-in-out infinite}
.empty .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.empty a.btn,.empty .btn{color:var(--c-text)}
.empty .btn.primary{color:#1a0b02}

/* ---- cart ---- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start;padding-top:20px}
.cart-layout > .empty{grid-column:1/-1}
.cart-list{display:flex;flex-direction:column;gap:16px}
.cart-item{border:1px solid var(--c-border);border-radius:22px;padding:20px;background:linear-gradient(150deg,var(--c-surface-strong),var(--c-surface));transition:transform .3s var(--ease-spring),opacity .3s ease,max-height .3s ease,border-color .3s}
.cart-item:hover{border-color:rgba(255,159,67,.35)}
.cart-item.removing{opacity:0;transform:translateX(60px) scale(.94)}
.cart-item-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cart-item-title{flex:1}
.cart-item-title h3{margin:0 0 4px;font-size:16px}
.cart-item-title small{color:var(--c-muted);font-size:11px}
.danger-ic{color:var(--c-danger)}
.danger-ic:hover{background:rgba(248,113,113,.14)}
.cart-item-fields{display:grid;grid-template-columns:1fr 190px 150px;gap:14px;align-items:end}
.cart-item-fields .field{margin:0}
.cart-line-total{text-align:left}
.cart-line-total small{display:block;color:var(--c-muted);font-size:10px;margin-bottom:6px}
.cart-line-total b{font-size:15px;transition:color .3s}
.qty{display:flex;align-items:center;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);overflow:hidden}
.qty button{border:0;background:transparent;color:var(--c-text);width:40px;height:44px;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s var(--ease-spring)}
.qty button:hover{background:var(--c-surface-strong)}
.qty button:active{transform:scale(.8)}
.qty input{flex:1;min-width:0;border:0!important;background:transparent!important;text-align:center;box-shadow:none!important;padding:12px 4px!important}
.cart-summary{position:sticky;top:110px;border:1px solid var(--c-border);border-radius:24px;padding:24px;background:linear-gradient(160deg,var(--c-surface-strong),var(--c-surface));box-shadow:var(--shadow-soft)}
.cart-summary h3{margin:0 0 18px}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;color:var(--c-muted);font-size:13px}
.sum-row b{color:var(--c-text)}
.sum-row.total{border-top:1px dashed var(--c-border);margin-bottom:16px;padding-top:16px}
.sum-row.total b{font-size:18px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.full{width:100%}
.success-box .order-ids{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.success-box .service-icon{animation:popIn .6s var(--ease-spring) both}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}.cart-summary{position:static}.cart-item-fields{grid-template-columns:1fr 1fr}.cart-item-fields .field:first-child{grid-column:1/-1}}

/* ---- order history ---- */
.orders-list{display:flex;flex-direction:column;gap:16px;max-width:900px;margin:auto}
.order-card{border:1px solid var(--c-border);border-radius:22px;padding:22px;background:linear-gradient(150deg,var(--c-surface-strong),var(--c-surface));transition:transform .35s var(--ease-spring),border-color .3s}
.order-card:hover{transform:translateY(-4px);border-color:rgba(255,159,67,.35)}
.order-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.order-top small{display:block;color:var(--c-muted);font-size:11px;margin-top:4px}
.order-code{font-size:16px;letter-spacing:.5px;direction:ltr;display:inline-block}
.order-mid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.order-mid small{display:block;color:var(--c-muted);font-size:10px;margin-bottom:5px}
.order-mid b{font-size:13px;word-break:break-all}
.ord-steps{display:flex;margin-top:22px}
.ord-step{flex:1;position:relative;text-align:center;font-size:11px;color:var(--c-muted)}
.ord-step i{display:block;width:14px;height:14px;border-radius:50%;margin:0 auto 8px;background:var(--c-surface-strong);border:2px solid var(--c-border);position:relative;z-index:1;transition:all .4s var(--ease-spring)}
.ord-step::before{content:"";position:absolute;top:6px;right:50%;width:100%;height:2px;background:var(--c-border)}
.ord-step:first-child::before{display:none}
.ord-step.on{color:var(--c-text);font-weight:700}
.ord-step.on i{background:var(--c-orange);border-color:var(--c-orange);box-shadow:0 0 14px rgba(255,159,67,.7)}
.ord-step.on::before{background:var(--c-orange)}
.ord-step.on:last-child i{animation:ping 2s ease-out infinite}
.admin-note{margin-top:18px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(34,211,238,.08);color:var(--c-primary);font-size:12px;line-height:1.9}
@media(max-width:640px){.order-mid{grid-template-columns:1fr 1fr}}

/* ---- admin additions ---- */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-border);font-size:13px}
.switch-row small{display:block;color:var(--c-muted);margin-top:4px;font-size:11px}
.switch{position:relative;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;border-radius:99px;background:var(--c-surface-strong);border:1px solid var(--c-border);cursor:pointer;transition:background .3s}
.switch i::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .3s var(--ease-spring)}
.switch input:checked + i{background:var(--c-success)}
.switch input:checked + i::after{transform:translateX(-20px)}
.news-form{display:grid;gap:14px}
.news-form textarea{width:100%;min-height:170px;padding:13px 15px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);color:var(--c-text);font:inherit;line-height:2;resize:vertical}
.check-row{display:flex;gap:22px;flex-wrap:wrap;font-size:13px}
.check-row label{display:flex;align-items:center;gap:8px;cursor:pointer}
.btn-row{display:flex;gap:6px;flex-wrap:wrap}
.pill.off{background:rgba(148,163,184,.14);color:#94a3b8}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  body,.announce.show,.btn.primary::before,.service-card .service-icon,.feature-card .service-icon,.empty.big .ic-lg{animation:none!important}
  body.leaving{transition:none}
}

/* ---- AI chat: chips, notes, pop-in ---- */
.chat-msg{white-space:pre-wrap;line-height:2}
.chat-msg.pop{animation:msgPop .45s var(--ease-spring) both}
@keyframes msgPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.chat-chips button{border:1px solid rgba(255,159,67,.4);background:rgba(255,159,67,.09);color:var(--c-text);font:inherit;font-size:12px;padding:8px 13px;border-radius:99px;cursor:pointer;transition:transform .25s var(--ease-spring),background .2s,border-color .2s;animation:msgPop .5s var(--ease-spring) both}
.chat-chips button:nth-child(2){animation-delay:.06s}.chat-chips button:nth-child(3){animation-delay:.12s}.chat-chips button:nth-child(4){animation-delay:.18s}
.chat-chips button:hover{transform:translateY(-2px);background:rgba(255,159,67,.2);border-color:var(--c-orange)}
.chat-note{display:flex;align-items:center;gap:8px;justify-content:center;font-size:11px;color:var(--c-primary);background:rgba(34,211,238,.08);border-radius:12px;padding:8px 12px;margin:6px 0}

/* ---- payment card box ---- */
.pay-card{position:relative;overflow:hidden;margin:4px 0 16px;padding:18px 18px 14px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#1b1240 0%,#3a1c71 45%,#d76d77 100%);box-shadow:0 18px 40px -18px rgba(215,109,119,.7);animation:popIn .5s var(--ease-spring) both}
.pay-card::after{content:"";position:absolute;top:-40%;left:-30%;width:70%;height:180%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:rotate(18deg);animation:sheen 5s ease-in-out infinite}
.pay-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;opacity:.92;gap:10px}
.pay-top span{display:inline-flex;align-items:center;gap:6px}
.pay-num{display:block;width:100%;margin:16px 0 12px;padding:0;border:0;background:transparent;color:#fff;font:inherit;font-size:clamp(17px,4.6vw,22px);font-weight:800;letter-spacing:2px;direction:ltr;text-align:center;cursor:pointer;font-variant-numeric:tabular-nums;transition:transform .25s var(--ease-spring)}
.pay-num:hover{transform:scale(1.03)}
.pay-meta{display:flex;justify-content:space-between;font-size:11px;opacity:.9;position:relative;z-index:1}
.pay-note{margin:10px 0 0;font-size:11px;line-height:1.9;opacity:.9;position:relative;z-index:1}

/* ---- admin: AI panel ---- */
.ai-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:6px}
.ai-stat{padding:14px;border-radius:16px;background:var(--c-surface);border:1px solid var(--c-border);text-align:center}
.ai-stat b{display:block;font-size:22px;margin-bottom:4px}
.ai-stat small{color:var(--c-muted);font-size:11px}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:800px){.ai-grid{grid-template-columns:1fr}}
.ai-area{width:100%;min-height:90px;padding:12px 14px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface);color:var(--c-text);font:inherit;line-height:2;resize:vertical}
.ai-range{display:flex;align-items:center;gap:12px}
.ai-range input[type=range]{flex:1;accent-color:var(--c-orange)}
.ai-range output{min-width:44px;text-align:center;font-weight:800}
.ai-test-out{margin-top:14px;padding:16px;border-radius:16px;background:var(--c-surface);border:1px dashed var(--c-border);white-space:pre-wrap;line-height:2;font-size:13px}
.ai-test-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ai-tag{font-size:11px;padding:4px 10px;border-radius:99px;background:rgba(255,159,67,.14);color:var(--c-orange);font-weight:700}
.ai-top{font-size:11px;color:var(--c-muted);margin-top:10px;white-space:normal}
.needs-human{display:inline-block;margin-right:8px;font-size:10px;padding:3px 8px;border-radius:99px;background:rgba(248,113,113,.16);color:var(--c-danger);font-weight:800}

/* =====================================================================
   Service cards v2 (svc-card) + detail modal
   ===================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:24px;align-items:stretch}
.tier-orange{--a1:#ff9f43;--a2:#ff5fa2}
.tier-violet{--a1:#c084fc;--a2:#6366f1}
.tier-cyan{--a1:#22d3ee;--a2:#3b82f6}
.tier-emerald{--a1:#34d399;--a2:#10b981}
.tier-rose{--a1:#fb7185;--a2:#f43f5e}

.svc-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;border-radius:28px;border:1px solid var(--c-border);background:linear-gradient(160deg,var(--c-surface-strong),var(--c-surface));overflow:hidden;cursor:pointer;transition:transform .45s var(--ease-spring),border-color .3s ease,box-shadow .4s ease}
.svc-card::before{content:"";position:absolute;inset:-1px auto auto -1px;width:180px;height:180px;background:radial-gradient(circle,var(--a1),transparent 68%);opacity:.14;filter:blur(26px);pointer-events:none;transition:opacity .4s ease,transform .6s var(--ease)}
.svc-card:hover{transform:translateY(-10px);border-color:var(--a1);box-shadow:0 30px 60px -28px var(--a1)}
.svc-card:hover::before{opacity:.32;transform:translate(30px,20px) scale(1.25)}
.svc-card .service-icon{background:linear-gradient(135deg,var(--a1),var(--a2));color:#160a1f;box-shadow:0 10px 26px -10px var(--a2);animation:iconFloat 5s ease-in-out infinite}
.svc-card:hover .service-icon{transform:scale(1.12) rotate(-8deg)}
.svc-card .badge{border:1px solid var(--a1);color:var(--a1);background:transparent}
.svc-card h3{margin:2px 0 0;font-size:20px;line-height:1.6}
.svc-desc{margin:0;color:var(--c-muted);font-size:13px;line-height:2;min-height:52px}
.svc-price{display:flex;flex-direction:column;gap:2px}
.svc-price strong{font-size:30px;font-weight:900;letter-spacing:-.5px;background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-price small{color:var(--c-muted);font-size:12px}
.svc-per{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 12px;border-radius:99px;font-size:12px;font-weight:800;color:var(--a1);background:color-mix(in srgb,var(--a1) 12%,transparent)}
.svc-per .ic{width:15px;height:15px}
.svc-range{margin-top:2px}
.svc-range-bar{position:relative;height:6px;border-radius:99px;background:var(--c-surface-strong);overflow:hidden}
.svc-range-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a1));background-size:200% 100%;animation:gradShift 3.5s linear infinite;transform-origin:right;animation-name:gradShift,barGrow;animation-duration:3.5s,1.2s;animation-timing-function:linear,var(--ease);animation-fill-mode:none,both}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.svc-range-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--c-muted)}
.svc-feats{list-style:none;margin:0;padding:14px 0 0;border-top:1px dashed var(--c-border);display:flex;flex-direction:column;gap:9px;flex:1}
.svc-feats li{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.9;color:var(--c-muted)}
.svc-feats li b{color:var(--c-text)}
.svc-feats .ic{width:16px;height:16px;flex-shrink:0;margin-top:5px;color:var(--a1)}
.svc-feats li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.svc-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.svc-actions .add{background:linear-gradient(135deg,var(--a1),var(--a2));color:#160a1f;border:0;width:48px;height:48px;border-radius:16px;box-shadow:0 12px 24px -10px var(--a2)}
.svc-actions .add:hover{transform:scale(1.14) rotate(90deg)}

.svc-card.is-featured{border-color:transparent;box-shadow:0 30px 70px -30px var(--a2)}
.svc-card.is-featured::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:linear-gradient(120deg,var(--a1),var(--a2),#fff3,var(--a1));background-size:260% 100%;animation:gradShift 4s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:1!important;transition:none}
@media(min-width:900px){.svc-card.is-featured{transform:translateY(-8px)}.svc-card.is-featured:hover{transform:translateY(-16px)}}
.svc-ribbon{position:absolute;top:0;left:22px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 8px;border-radius:0 0 14px 14px;font-size:11px;font-weight:900;color:#160a1f;background:linear-gradient(135deg,var(--a1),var(--a2));animation:ribbonDrop .8s var(--ease-spring) both}
.svc-ribbon .ic{width:13px;height:13px}
@keyframes ribbonDrop{from{transform:translateY(-100%)}to{transform:none}}

/* trust strip */
.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:38px}
.trust-row > div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:24px 18px;border-radius:24px;border:1px solid var(--c-border);background:var(--c-surface);transition:transform .4s var(--ease-spring),border-color .3s}
.trust-row > div:hover{transform:translateY(-6px);border-color:rgba(255,159,67,.45)}
.trust-row small{color:var(--c-muted);font-size:12px;line-height:1.9}
.trust-row a{color:var(--c-orange);text-decoration:none;font-weight:800}

/* detail modal */
.detail{position:relative;display:flex;flex-direction:column;gap:18px}
.detail .service-icon{background:linear-gradient(135deg,var(--a1),var(--a2));color:#160a1f}
.detail-price{padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--a1) 16%,transparent),color-mix(in srgb,var(--a2) 12%,transparent));border:1px solid color-mix(in srgb,var(--a1) 35%,transparent)}
.detail-price strong{display:block;font-size:28px;font-weight:900;background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.detail-price span{font-size:12px;color:var(--c-muted)}
.detail-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.detail-feats li{display:flex;gap:12px;align-items:flex-start;animation:msgPop .5s var(--ease-spring) both}
.detail-feats li:nth-child(2){animation-delay:.05s}.detail-feats li:nth-child(3){animation-delay:.1s}.detail-feats li:nth-child(4){animation-delay:.15s}.detail-feats li:nth-child(5){animation-delay:.2s}.detail-feats li:nth-child(6){animation-delay:.25s}
.detail-feats .dot{flex-shrink:0;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 18%,transparent);color:var(--a1)}
.detail-feats .dot .ic{width:15px;height:15px}
.detail-feats b{font-size:13px}
.detail-feats p{margin:2px 0 0;font-size:12px;color:var(--c-muted);line-height:1.9}
.detail-notes{padding:14px 16px;border-radius:16px;background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.28);font-size:12px;line-height:2}
.detail-notes b{display:flex;align-items:center;gap:8px;color:#fbbf24;margin-bottom:6px}
.detail-notes ul{margin:0;padding:0 18px 0 0;color:var(--c-muted)}
.detail-qty{display:flex;flex-direction:column;gap:12px}
.detail-qty label{font-size:13px;font-weight:700}
.detail-qty label small{color:var(--c-muted);font-weight:400}
.detail-qty input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;outline:none;direction:rtl;background:linear-gradient(to left,var(--a1) var(--fill,0%),var(--c-surface-strong) var(--fill,0%))}
.detail-qty input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--a1);box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:grab;transition:transform .2s var(--ease-spring)}
.detail-qty input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);cursor:grabbing}
.detail-qty input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--a1);cursor:grab}
.detail .btn.primary{background:linear-gradient(135deg,var(--a1),var(--a2))}

/* modal scroll + detail header */
#orderModal .modal,#orderModalBox{max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
#orderModal .modal::-webkit-scrollbar{width:6px}
#orderModal .modal::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:9px}
.detail .order-head{padding-left:46px}
.detail .btn.primary.full{position:sticky;bottom:0;box-shadow:0 -14px 24px -8px var(--c-bg,#0a0815)}


/* =====================================================================
   Top bar v3: full menu, auth buttons, cart label, password eye
   ===================================================================== */
.desktop-nav{gap:clamp(12px,1.5vw,26px);font-size:13.5px;white-space:nowrap}
.nav-badge{display:inline-grid;place-items:center;margin-inline-start:6px;padding:1px 7px;border-radius:99px;font-size:9px;font-weight:900;letter-spacing:.5px;color:#160a1f;background:var(--grad-brand);background-size:200% 100%;animation:gradShift 3s linear infinite;box-shadow:0 0 14px rgba(255,95,162,.55)}
.nav-auth{display:flex;gap:8px;align-items:center}
.nav-login,.nav-register{padding:9px 16px;border-radius:12px;font-size:13px;font-weight:800;white-space:nowrap;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur),background var(--dur),border-color var(--dur)}
.nav-login{border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text)}
.nav-login:hover{transform:translateY(-2px);border-color:rgba(255,159,67,.4)}
.nav-register{color:#160a1f;background:var(--grad-brand);background-size:200% 100%;box-shadow:0 10px 26px -12px rgba(255,95,162,.8)}
.nav-register:hover{transform:translateY(-2px) scale(1.03);animation:gradShift 2s linear infinite}
.cart-btn .cart-label{font-size:13px;font-weight:700}
.mobile-auth{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.mobile-auth a{text-align:center;border:1px solid var(--c-border);background:var(--c-surface)}
.mobile-auth a:last-child:not(:only-child){background:var(--grad-brand);color:#160a1f;font-weight:800;border:0}
.mobile-auth a:only-child{grid-column:1/-1}
.mobile-nav{max-height:calc(100vh - 80px);overflow-y:auto}
.mobile-nav a{display:flex;align-items:center;gap:8px}
@media(max-width:1260px){.cart-btn .cart-label{display:none}.desktop-nav a[data-nav="home"]{display:none}}
@media(max-width:1340px){.desktop-nav{display:none}.menu-btn{display:inline-flex}}
@media(max-width:700px){.cart-btn{display:inline-flex!important}.nav-login{display:inline-flex}.nav-login,.nav-register{padding:8px 11px;font-size:12.5px}.nav-auth{gap:5px}.nav-actions{gap:6px}}
@media(max-width:400px){.nav-login,.nav-register{padding:7px 9px;font-size:12px}.nav-auth{gap:4px}.nav-actions{gap:4px}}

/* password eye */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-left:48px!important}
.pw-eye{position:absolute;left:8px;top:50%;translate:0 -50%;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--c-muted);cursor:pointer;transition:color .2s,background .2s,transform .3s var(--ease-spring)}
.pw-eye:hover{color:var(--c-text);background:var(--c-surface-strong)}
.pw-eye:active{transform:scale(.85)}
.pw-eye.on{color:var(--c-orange)}
.pw-eye svg{width:19px;height:19px}

/* support widget link to AI */
.chat-ai-link{display:flex;align-items:center;gap:10px;margin:8px 0;padding:11px 14px;border-radius:14px;color:var(--c-text);text-decoration:none;font-size:12px;font-weight:800;border:1px solid rgba(168,85,247,.4);background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(255,95,162,.12));transition:transform .3s var(--ease-spring)}
.chat-ai-link:hover{transform:translateY(-2px)}
.chat-ai-link span{flex:1}
.chat-ai-link .ic{width:17px;height:17px;color:#c084fc}


/* =====================================================================
   AI assistant page
   ===================================================================== */
.orb{position:relative;width:42px;height:42px;flex-shrink:0;border-radius:50%;background:conic-gradient(from 0deg,#ff9f43,#ff5fa2,#a855f7,#22d3ee,#ff9f43);animation:orbSpin 7s linear infinite;box-shadow:0 0 26px -4px rgba(168,85,247,.7)}
.orb i{position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,.08) 38%,transparent 62%),var(--c-bg-soft)}
.orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:inherit;filter:blur(14px);opacity:.45;z-index:-1}
.orb.sm{width:32px;height:32px;margin-top:2px}
.orb.big{width:96px;height:96px;margin:0 auto 22px;box-shadow:0 0 70px -6px rgba(168,85,247,.75)}
.orb.big i{inset:5px}
.orb.thinking{animation-duration:1.4s}
.orb.thinking i{animation:orbPulse 1s ease-in-out infinite}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbPulse{50%{transform:scale(.86)}}

.ai-page{padding:18px clamp(12px,3vw,48px) 10px}
.ai-shell{position:relative;display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;max-width:1280px;margin:0 auto;height:calc(100vh - 118px);min-height:560px}
.ai-side,.ai-main{border:1px solid var(--c-border);border-radius:28px;background:linear-gradient(160deg,var(--c-surface-strong),var(--c-surface));backdrop-filter:blur(18px);overflow:hidden}
.ai-side{display:flex;flex-direction:column;gap:12px;padding:16px}
.ai-list-title{font-size:11px;color:var(--c-muted);margin:6px 4px 0;font-weight:700}
.ai-chatlist{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin:0 -4px;padding:0 4px}
.ai-chat-item{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:14px;cursor:pointer;font-size:13px;color:var(--c-muted);border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .3s var(--ease-spring)}
.ai-chat-item:hover{background:var(--c-surface);color:var(--c-text);transform:translateX(-3px)}
.ai-chat-item.active{background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(255,95,162,.12));color:var(--c-text);border-color:rgba(168,85,247,.4)}
.ai-chat-item .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-chat-item .x{border:0;background:transparent;color:var(--c-muted);cursor:pointer;opacity:0;padding:4px;border-radius:8px;display:grid;transition:opacity .2s,color .2s}
.ai-chat-item:hover .x{opacity:1}.ai-chat-item .x:hover{color:var(--c-danger)}
.ai-empty{text-align:center;color:var(--c-muted);font-size:12px;padding:20px 0}
.ai-side-foot{display:flex;flex-direction:column;gap:10px}
.ai-side-foot small{color:var(--c-muted);font-size:10.5px;line-height:1.9;text-align:center}

.ai-main{display:flex;flex-direction:column;min-width:0}
.ai-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--c-border);background:linear-gradient(90deg,rgba(168,85,247,.10),transparent)}
.ai-head-info{flex:1;display:flex;flex-direction:column;gap:3px}
.ai-head-info b{font-size:15px}
.ai-head-info small{display:flex;align-items:center;gap:7px;color:var(--c-muted);font-size:11px}
.ai-online{width:8px;height:8px;border-radius:50%;background:var(--c-success);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:ping 2s ease-out infinite}
.ai-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;font-size:11px;font-weight:800;color:#160a1f;background:var(--grad-brand);background-size:200% 100%;animation:gradShift 4s linear infinite}
.ai-pill .ic{width:13px;height:13px}
.ai-menu{display:none}
.ai-scroll{flex:1;overflow-y:auto;padding:22px clamp(14px,3vw,30px);scroll-behavior:smooth}
.ai-msgs{display:flex;flex-direction:column;gap:18px;max-width:860px;margin:0 auto}

.ai-welcome{text-align:center;padding:clamp(10px,4vh,40px) 0 10px;animation:popIn .6s var(--ease-spring) both}
.ai-welcome h2{font-size:clamp(22px,3.4vw,32px);margin:0 0 10px;letter-spacing:-.5px}
.ai-welcome h2 span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-welcome > p{color:var(--c-muted);font-size:14px;line-height:2.1;max-width:560px;margin:0 auto 26px}
.ai-welcome .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ai-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px;text-align:right}
.ai-cap{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:16px;border-radius:20px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);font:inherit;cursor:pointer;transition:transform .4s var(--ease-spring),border-color .3s,box-shadow .3s;animation:msgPop .6s var(--ease-spring) both}
.ai-cap:nth-child(2){animation-delay:.07s}.ai-cap:nth-child(3){animation-delay:.14s}.ai-cap:nth-child(4){animation-delay:.21s}
.ai-cap:hover{transform:translateY(-6px);border-color:rgba(168,85,247,.55);box-shadow:0 20px 40px -22px rgba(168,85,247,.8)}
.ai-cap .service-icon{width:38px;height:38px;border-radius:12px}
.ai-cap b{font-size:14px}.ai-cap small{color:var(--c-muted);font-size:11.5px;line-height:1.9}
.chat-chips.center{justify-content:center}

.ai-row{display:flex;gap:12px;align-items:flex-start;animation:msgPop .45s var(--ease-spring) both}
.ai-row.user{justify-content:flex-start}
.ai-row.user .ai-bubble{background:linear-gradient(135deg,#ff9f43,#ff5fa2);color:#1a0b02;font-weight:600;border-radius:20px 20px 20px 6px;max-width:min(80%,560px)}
.ai-row.bot .ai-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ai-bubble{padding:12px 16px;border-radius:20px 20px 6px 20px;background:var(--c-surface-strong);border:1px solid var(--c-border);font-size:14px;line-height:2.05;word-break:break-word}
.ai-row.user .ai-bubble{border:0}
.ai-row.bot .ai-bubble{max-width:min(100%,640px)}
.ai-bubble p{margin:0}.ai-bubble p + p{margin-top:6px}
.ai-bubble b{color:var(--c-text);font-weight:900}
.ai-bubble ul{margin:6px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.ai-bubble li{position:relative;padding-right:18px}
.ai-bubble li::before{content:"";position:absolute;right:2px;top:.95em;width:7px;height:7px;border-radius:50%;background:var(--grad-brand)}
.ai-bubble.typing{white-space:pre-wrap}
.ai-bubble.typing::after{content:"";display:inline-block;width:2px;height:1em;margin-right:3px;vertical-align:-2px;background:var(--c-orange);animation:blink 1s step-end infinite}
.ai-bubble.err{border-color:rgba(248,113,113,.5);color:var(--c-danger)}
.ai-row.thinking .ai-bubble{display:flex;align-items:center;gap:12px}
.ai-row.thinking em{font-style:normal;font-size:12px;color:var(--c-muted)}
.ai-tools{display:flex;gap:4px;opacity:.55;transition:opacity .2s}
.ai-row:hover .ai-tools{opacity:1}
.ai-tools button{border:0;background:transparent;color:var(--c-muted);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,transform .3s var(--ease-spring)}
.ai-tools button:hover{background:var(--c-surface-strong);color:var(--c-text);transform:translateY(-2px)}
.ai-tools button.on{color:var(--c-orange);background:rgba(255,159,67,.14)}
.ai-tools button.down svg{transform:rotate(180deg)}
.ai-tools svg{width:15px;height:15px}

.ai-actions{display:flex;flex-direction:column;gap:8px;width:100%;max-width:640px}
.ai-svc,.ai-order{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);text-decoration:none;transition:transform .35s var(--ease-spring),border-color .25s;animation:msgPop .5s var(--ease-spring) both}
.ai-svc:hover,.ai-order:hover{transform:translateY(-3px);border-color:var(--a1,rgba(255,159,67,.5))}
.ai-svc .service-icon{background:linear-gradient(135deg,var(--a1),var(--a2));color:#160a1f;width:42px;height:42px;border-radius:13px}
.ai-svc-info,.ai-order > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ai-svc-info b,.ai-order b{font-size:13px}
.ai-svc-info small,.ai-order small{color:var(--c-muted);font-size:11px}
.ai-svc-btns{display:flex;gap:8px;align-items:center}
.ai-svc-btns .add{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#160a1f;border:0}
.ai-add,.ai-link{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px;border-radius:16px;border:1px solid transparent;font:inherit;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none;transition:transform .3s var(--ease-spring),box-shadow .3s,background .3s}
.ai-add{background:linear-gradient(135deg,#ff9f43,#ff5fa2);color:#1a0b02;box-shadow:0 14px 30px -16px rgba(255,95,162,.9)}
.ai-add:hover{transform:translateY(-2px) scale(1.01)}
.ai-add:disabled{opacity:.6;cursor:wait}
.ai-add.done{background:rgba(74,222,128,.14);color:var(--c-success);border-color:rgba(74,222,128,.4);box-shadow:none}
.ai-add.handoff{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff}
.ai-add.handoff.done{background:rgba(74,222,128,.14);color:var(--c-success)}
.ai-link{background:var(--c-surface);border-color:var(--c-border);color:var(--c-text)}
.ai-link:hover{transform:translateX(-4px);border-color:rgba(255,159,67,.5)}
.ai-add .ic,.ai-link .ic{width:17px;height:17px}

.ai-compose{padding:12px clamp(14px,3vw,30px) 14px;border-top:1px solid var(--c-border);background:linear-gradient(0deg,var(--c-surface),transparent)}
.ai-compose form{display:flex;gap:10px;align-items:flex-end;max-width:860px;margin:0 auto;padding:8px 8px 8px 10px;border-radius:22px;border:1px solid var(--c-border);background:var(--c-bg-soft);transition:border-color .25s,box-shadow .25s}
.ai-compose form:focus-within{border-color:rgba(168,85,247,.6);box-shadow:0 0 0 4px rgba(168,85,247,.13)}
.ai-compose textarea{flex:1;border:0!important;outline:0;background:transparent!important;color:var(--c-text);font:inherit;font-size:14px;line-height:2;resize:none;padding:6px 10px;max-height:150px;box-shadow:none!important}
.ai-send{width:46px;height:46px;flex-shrink:0;border:0;border-radius:16px;cursor:pointer;display:grid;place-items:center;color:#160a1f;background:linear-gradient(135deg,#ff9f43,#ff5fa2,#a855f7);background-size:200% 100%;transition:transform .3s var(--ease-spring),box-shadow .3s}
.ai-send:hover{transform:scale(1.08) rotate(-8deg);box-shadow:0 12px 26px -10px rgba(255,95,162,.9)}
.ai-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
.ai-send svg{width:20px;height:20px}
.ai-hint{display:flex;justify-content:center;gap:18px;margin-top:8px;font-size:10.5px;color:var(--c-muted)}
.ai-backdrop{display:none}

@media(max-width:900px){
  .ai-shell{grid-template-columns:1fr;height:calc(100vh - 100px)}
  .ai-menu{display:inline-flex!important}
  .ai-side{position:fixed;top:0;bottom:0;right:0;width:min(320px,86vw);z-index:200;border-radius:0;transform:translateX(105%);transition:transform .4s var(--ease);background:var(--c-bg-soft)}
  .ai-shell.side-open .ai-side{transform:none}
  .ai-backdrop{display:block;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}
  .ai-shell.side-open .ai-backdrop{opacity:1;pointer-events:auto}
  .ai-hint{display:none}
  .ai-main{border-radius:22px}
}
@media(max-width:560px){.ai-svc{flex-wrap:wrap}.ai-svc-btns{width:100%;justify-content:flex-end}.ai-row.user .ai-bubble{max-width:92%}}

.ai-log{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto}
.ai-log-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--c-surface);border:1px solid var(--c-border)}
.ai-log-row > div:first-child{min-width:0;display:flex;flex-direction:column;gap:4px}
.ai-log-row b{font-size:13px;line-height:1.8}.ai-log-row small{color:var(--c-muted);font-size:11px;line-height:1.8}

.ai-promo{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,50px);align-items:center;padding:clamp(26px,4vw,50px);border-radius:34px;border:1px solid rgba(168,85,247,.35);background:radial-gradient(120% 140% at 0% 0%,rgba(168,85,247,.22),transparent 60%),radial-gradient(90% 120% at 100% 100%,rgba(255,95,162,.16),transparent 60%),var(--c-surface);overflow:hidden}
.ai-promo .orb.big{margin:0;width:clamp(96px,14vw,150px);height:clamp(96px,14vw,150px)}
.ai-promo h2{margin:10px 0;font-size:clamp(24px,3.6vw,38px)}
.ai-promo h2 span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-promo p{color:var(--c-muted);line-height:2.1;font-size:14px;max-width:620px;margin:0 0 16px}
.ai-promo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ai-promo-chips a{padding:8px 14px;border-radius:99px;font-size:12px;border:1px solid rgba(168,85,247,.45);background:rgba(168,85,247,.1);color:var(--c-text);transition:transform .3s var(--ease-spring),background .2s}
.ai-promo-chips a:hover{transform:translateY(-3px);background:rgba(168,85,247,.22)}
@media(max-width:700px){.ai-promo{grid-template-columns:1fr;text-align:center;justify-items:center}.ai-promo-chips{justify-content:center}}

.ai-bubble{line-height:1.95}
.ai-bubble p + p{margin-top:3px}
.ai-cap{background:var(--c-surface-strong)}
.ai-cap small{color:var(--c-text);opacity:.65}

.ai-brain{margin-bottom:16px}
.ai-brain-box{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;font-size:13px;line-height:2}
.ai-brain-box b{font-size:14px}
.ai-brain-box.ok{background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.4)}
.ai-brain-box.ok b{color:var(--c-success)}
.ai-brain-box.warn{background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.35)}
.ai-brain-box.warn b{color:#fbbf24}
.ai-brain-box span{color:var(--c-muted)}
.ai-brain-box code{padding:2px 8px;border-radius:8px;background:var(--c-surface-strong)}

/* rich answers from the language model */
.ai-bubble h4{margin:10px 0 4px;font-size:15px;font-weight:900}
.ai-bubble ol{margin:6px 0;padding:0 22px 0 0;display:flex;flex-direction:column;gap:5px}
.ai-bubble ol li{padding-right:2px;list-style:decimal}
.ai-bubble ol li::before{display:none}
.ai-bubble code{padding:1px 7px;border-radius:7px;background:var(--c-surface);border:1px solid var(--c-border);font-size:12.5px;direction:ltr;unicode-bidi:embed}
.ai-bubble a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.ai-bubble blockquote{margin:6px 0;padding:6px 14px;border-right:3px solid var(--c-orange);background:rgba(255,159,67,.07);border-radius:10px;color:var(--c-muted)}
.ai-bubble hr{border:0;border-top:1px dashed var(--c-border);margin:10px 0}
.ai-bubble i{font-style:italic}
.ai-code{margin:10px 0;border-radius:14px;overflow:hidden;border:1px solid var(--c-border);background:#0b0a17;max-width:100%}
.ai-code-h{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:rgba(255,255,255,.06);font-size:11px;color:var(--c-muted)}
.ai-code-h button{border:0;background:transparent;color:var(--c-muted);font:inherit;font-size:11px;cursor:pointer;padding:3px 8px;border-radius:7px}
.ai-code-h button:hover{background:rgba(255,255,255,.1);color:#fff}
.ai-code pre{margin:0;padding:12px 14px;overflow-x:auto;text-align:left;font-size:12.5px;line-height:1.8;color:#e6e1ff}
.ai-code pre code{padding:0;background:none;border:0;font-size:inherit;direction:ltr;white-space:pre}
.ai-table{margin:10px 0;overflow-x:auto;border-radius:12px;border:1px solid var(--c-border)}
.ai-table table{border-collapse:collapse;width:100%;font-size:13px}
.ai-table th,.ai-table td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--c-border);white-space:nowrap}
.ai-table th{background:var(--c-surface);font-weight:900}
.ai-table tr:last-child td{border-bottom:0}
.ai-row.bot .ai-bubble{max-width:min(100%,720px)}

/* AI avatar (replaces the plain white orb) */
.orb{background:url(assets/ai-avatar.svg) center/cover no-repeat,#2a1b4d!important;animation:orbFloat 5s ease-in-out infinite!important;box-shadow:0 0 0 2px rgba(255,255,255,.14),0 10px 28px -8px rgba(168,85,247,.8)}
.orb i{display:none!important}
.orb::after{inset:-5px!important;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.55),transparent 68%)!important;filter:blur(10px)!important;opacity:.7!important;z-index:-1}
.orb.big{box-shadow:0 0 0 3px rgba(255,255,255,.16),0 24px 70px -10px rgba(168,85,247,.9)}
.orb.thinking{animation:orbThink 1s ease-in-out infinite!important}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes orbThink{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.09);filter:brightness(1.25)}}

/* ---- free member page ---- */
.free-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start;max-width:1100px;margin:0 auto}
.free-card{position:relative;text-align:center;padding:clamp(26px,4vw,46px);border-radius:32px;border:1px solid rgba(52,211,153,.35);background:radial-gradient(120% 90% at 50% 0%,rgba(52,211,153,.18),transparent 62%),var(--c-surface);overflow:hidden;animation:popIn .6s var(--ease-spring) both}
.free-card h2{margin:6px 0 8px;font-size:clamp(20px,3vw,28px)}
.free-card p{color:var(--c-muted);font-size:14px;line-height:2;margin:0 0 18px}
.free-card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.free-gift{width:92px;height:92px;margin:0 auto 12px;border-radius:28px;display:grid;place-items:center;color:#06281c;background:linear-gradient(135deg,#34d399,#22d3ee);box-shadow:0 20px 50px -14px rgba(52,211,153,.8);animation:iconFloat 3.5s ease-in-out infinite}
.free-gift .ic{width:42px;height:42px}
.free-form{text-align:right;display:flex;flex-direction:column;gap:12px;max-width:420px;margin:0 auto}
.free-form .btn.primary{background:linear-gradient(135deg,#34d399,#22d3ee);color:#06281c}
.free-ok{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px 16px;border-radius:14px;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.4);color:var(--c-success);font-size:13px}
.free-ring{position:relative;width:200px;height:200px;margin:0 auto 14px}
.free-ring svg{width:100%;height:100%;transform:rotate(-90deg);transform:rotate(-90deg) scaleY(-1)}
.free-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.free-ring .bg{stroke:var(--c-surface-strong)}
.free-ring .fg{stroke:url(#ringGrad);stroke:#34d399;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 8px rgba(52,211,153,.7))}
.free-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.free-ring-in small{color:var(--c-muted);font-size:11px}
.free-ring-in b{font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:1px}
.free-side{display:flex;flex-direction:column;gap:18px}
.free-rules,.free-hist{padding:22px;border-radius:24px;border:1px solid var(--c-border);background:var(--c-surface)}
.free-rules h3,.free-hist h3{margin:0 0 12px;font-size:15px}
.free-rules ul{margin:0;padding:0 18px 0 0;display:flex;flex-direction:column;gap:9px;color:var(--c-muted);font-size:13px;line-height:2}
.free-h-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--c-border)}
.free-h-row:last-child{border:0}
.free-h-row small{display:block;color:var(--c-muted);font-size:11px;margin-top:3px}
@media(max-width:860px){.free-wrap{grid-template-columns:1fr}}
.free-promo{display:flex;align-items:center;gap:18px;padding:20px 26px;border-radius:26px;border:1px solid rgba(52,211,153,.4);background:linear-gradient(120deg,rgba(52,211,153,.18),rgba(34,211,238,.1)),var(--c-surface);color:var(--c-text);text-decoration:none;transition:transform .4s var(--ease-spring),box-shadow .3s}
.free-promo:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(52,211,153,.9)}
.free-promo > div{flex:1}
.free-promo b{display:block;font-size:clamp(16px,2.4vw,21px)}
.free-promo small{color:var(--c-muted);font-size:12px}
.free-promo-ic{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;color:#06281c;background:linear-gradient(135deg,#34d399,#22d3ee);animation:iconFloat 4s ease-in-out infinite}
@media(max-width:640px){.free-promo{flex-wrap:wrap;justify-content:center;text-align:center}}
.nav-badge.free{background:linear-gradient(135deg,#34d399,#22d3ee)}

.orders-pay{max-width:900px;margin:0 auto 22px}

.ai-admin-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;font-size:12px;line-height:1.9;background:rgba(251,191,36,.12);border-bottom:1px solid rgba(251,191,36,.35)}
.ai-admin-bar span{color:var(--c-text)}

.free-ring svg{overflow:visible}
.free-ring .fg{filter:none;stroke:#34d399}
.free-ring{filter:drop-shadow(0 0 12px rgba(52,211,153,.45))}


/* =====================================================================
   Classy motion pack (soft, no streaks / no diagonal lines)
   ===================================================================== */
/* refined reveal: rise + gentle blur-in */
.reveal{filter:blur(6px);transform:translateY(26px) scale(.985);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.reveal.in{filter:none;transform:none}
.reveal-scale{filter:blur(8px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.reveal-scale.in{filter:none}

/* headline: words rise from a mask */
.split-in .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.split-in .w > i{display:inline-block;font-style:normal;transform:translateY(105%);opacity:0;animation:wordUp .9s var(--ease) both;animation-delay:var(--d,.3s)}
@keyframes wordUp{to{transform:none;opacity:1}}
/* accent bar under headings */
.section-head h2,.page-hero h1{position:relative}
.section-head h2::after{content:"";display:block;height:3px;width:0;margin-top:12px;border-radius:3px;background:var(--grad-brand);transition:width 1s var(--ease) .25s}
.section-head h2.bar-in::after{width:64px}

/* boot screen: logo + soft progress */
.boot{background:radial-gradient(60% 50% at 50% 45%,rgba(168,85,247,.16),transparent 70%),var(--c-bg)}
.boot .loader{width:84px;height:84px;border-radius:26px;background:url(assets/logo-180.png) center/cover,var(--c-surface);animation:bootPulse 1.6s ease-in-out infinite;box-shadow:0 20px 60px -16px rgba(168,85,247,.8)}
.boot .loader::before,.boot .loader::after{display:none}
.boot span{position:relative;padding-bottom:14px}
.boot span::after{content:"";position:absolute;left:50%;bottom:0;width:90px;height:3px;translate:-50% 0;border-radius:3px;background:linear-gradient(90deg,transparent 0,var(--c-orange) 50%,transparent 100%);background-size:200% 100%;animation:bootBar 1.3s ease-in-out infinite}
@keyframes bootPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.04)}}
@keyframes bootBar{0%{background-position:150% 0}100%{background-position:-50% 0}}

/* navigation: gliding pill instead of underline */
.desktop-nav{position:relative}
.nav-pill{position:absolute;top:0;left:0;z-index:0;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);opacity:0;pointer-events:none;transition:transform .45s var(--ease-spring),width .45s var(--ease),height .3s var(--ease),opacity .25s}
:root[data-theme="light"] .nav-pill{background:rgba(20,16,40,.06);border-color:rgba(20,16,40,.08)}
.desktop-nav a{z-index:1}
.desktop-nav a::after{display:none}

/* ripple */
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:rip .7s var(--ease) forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* toast v2 */
.toast{display:flex!important;align-items:center;gap:10px;min-width:220px;overflow:hidden;padding:13px 18px!important;border-radius:16px!important;background:rgba(18,14,34,.86)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);box-shadow:0 24px 60px -18px rgba(0,0,0,.7)}
:root[data-theme="light"] .toast{background:rgba(255,255,255,.92)!important;color:#1a1530!important;border-color:rgba(20,16,40,.1)}
.toast .t-ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:#06281c;background:linear-gradient(135deg,#34d399,#22d3ee);flex-shrink:0}
.toast .t-ic svg{width:15px;height:15px}
.toast .t-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#34d399,#22d3ee);transform-origin:right;transform:scaleX(0)}
.toast.show .t-bar{animation:tbar 2.6s linear forwards}
@keyframes tbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* add-to-cart success morph */
.add{transition:transform .35s var(--ease-spring),background .25s,box-shadow .3s}
.add.added{background:linear-gradient(135deg,#34d399,#22d3ee)!important;color:#06281c!important;transform:scale(1.12) rotate(0)!important}
.add.added svg{animation:tick .45s var(--ease-spring) both}
@keyframes tick{from{transform:scale(.3) rotate(-30deg)}to{transform:none}}

/* soft film grain: adds a premium texture, static */
body::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* footer links: underline grows */
footer a{position:relative;width:fit-content}
footer a::after{content:"";position:absolute;right:0;bottom:-3px;height:1px;width:0;background:var(--c-primary);transition:width .35s var(--ease)}
footer a:hover::after{width:100%}

/* inputs: calm focus glow */
.field input,.field textarea,.field select{transition:border-color .25s,box-shadow .3s,background .25s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(168,85,247,.6)!important;box-shadow:0 0 0 4px rgba(168,85,247,.14)!important;background:var(--c-surface-strong)}
.field label{transition:color .2s}
.field:focus-within label{color:var(--c-text)}

/* cards: gentle lift with depth */
.news-card,.svc-card,.cart-item,.order-card,.free-promo,.ai-cap{will-change:transform}
.btn:active,.add:active,.icon-btn:active{transform:scale(.94)}

/* section dividers */
.section.tight + .section.tight{position:relative}
.section.tight + .section.tight::before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--c-border),transparent)}

/* theme switch: circular reveal */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}

/* AI page: composer + message polish */
.ai-compose form{transition:border-color .3s,box-shadow .4s,transform .3s var(--ease-spring)}
.ai-compose form:focus-within{transform:translateY(-2px)}
.ai-row.bot .ai-bubble{box-shadow:0 18px 40px -28px rgba(0,0,0,.8)}
.ai-mic{width:46px;height:46px;flex-shrink:0;border:1px solid var(--c-border);border-radius:16px;background:var(--c-surface);color:var(--c-text);cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--ease-spring),background .25s,color .25s}
.ai-mic:hover{transform:translateY(-2px);background:var(--c-surface-strong)}
.ai-mic svg{width:19px;height:19px}
.ai-mic.rec{color:#fff;background:linear-gradient(135deg,#f43f5e,#ff5fa2);border-color:transparent;animation:micPulse 1.2s ease-out infinite}
@keyframes micPulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.55)}100%{box-shadow:0 0 0 16px rgba(244,63,94,0)}}

/* AI setup guide (admin) */
.llm-guide{margin:0 0 16px;padding:16px 18px;border-radius:18px;border:1px solid var(--c-border);background:var(--c-surface)}
.llm-guide ol{margin:8px 0 0;padding:0 20px 0 0;display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:2;color:var(--c-muted)}
.llm-guide a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-scale{filter:none!important}
  .split-in .w > i{animation:none!important;transform:none!important;opacity:1!important}
  .boot .loader,.boot span::after,.ai-mic.rec,.toast.show .t-bar{animation:none!important}
}

.sec-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding:12px 16px;border-radius:16px;font-size:13px;line-height:2;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.45)}
.sec-banner b{color:var(--c-danger)}

.field-err{display:block;margin-top:6px;color:var(--c-danger);font-size:11px;line-height:1.8;min-height:0}
.field-err:empty{display:none}
.field input.invalid{border-color:rgba(248,113,113,.75)!important;box-shadow:0 0 0 4px rgba(248,113,113,.12)!important}

/* ---------- profile page + account avatar ---------- */
.pf-card{width:min(560px,100%);margin:0 auto;padding:34px 30px;border:1px solid var(--c-border);border-radius:26px;background:linear-gradient(160deg,var(--c-surface-strong),var(--c-surface));box-shadow:var(--shadow-soft)}
.pf-top{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.pf-top h2{margin:0 0 4px;font-size:22px}
.pf-top small{color:var(--c-muted)}
.pf-avatar{width:92px;height:92px;flex:none;border-radius:50%;overflow:hidden;border:3px solid var(--c-orange);box-shadow:0 10px 34px rgba(255,159,67,.3);display:grid;place-items:center;background:var(--c-surface-strong)}
.pf-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pf-initial{font-size:38px;font-weight:900}
.pf-hint{display:block;margin-top:8px;font-size:12px;color:var(--c-muted);line-height:1.9}
.pf-hint.warn{color:var(--c-warn)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.pf-opt{aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid transparent;background:var(--c-surface);padding:0;cursor:pointer;transition:transform var(--dur) var(--ease-spring),border-color var(--dur),box-shadow var(--dur)}
.pf-opt img{width:100%;height:100%;display:block;object-fit:cover}
.pf-opt:hover{transform:translateY(-3px) scale(1.05)}
.pf-opt.sel{border-color:var(--c-orange);box-shadow:0 0 0 4px rgba(255,159,67,.2)}
.pf-up{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px dashed var(--c-border);color:var(--c-text);font-size:12px}
.pf-up.sel{border-style:solid}
.acc-av{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--c-orange);box-shadow:0 4px 14px rgba(255,159,67,.35)}
.acc-btn:has(.acc-av){padding:4px 14px 4px 5px}
.acc-drop .acc-head{display:flex;align-items:center;gap:10px;padding:8px 12px 10px}
.acc-drop .acc-head .acc-av{width:44px;height:44px}
.acc-drop .acc-head b{font-size:14px}
.mobile-nav .acc-av{width:26px;height:26px;display:inline-block;vertical-align:middle;margin-left:8px;box-shadow:none}
.pf-card .btn.sm{margin-top:10px}
@media(max-width:480px){.pf-card{padding:26px 20px}.pf-grid{gap:9px}}

/* ---------- responsive fixes ---------- */
.admin-main{min-width:0}                                   /* grid item must be allowed to shrink so wide tables scroll inside .tablewrap */
.admin-main .adminbox,.admin-main .tablewrap{max-width:100%}
@media(max-width:700px){
  .admin-top{flex-wrap:wrap;gap:14px}
  .admin-top .statgrid{width:100%}
}
@media(max-width:380px){
  .nav-actions{gap:6px}
  .nav-actions .cart-label{display:none}
  .icon-btn,.menu-btn,.acc-btn{padding:8px 10px}
  .nav-register,.nav-login{padding-left:10px;padding-right:10px;font-size:12px}
  .acc-btn:has(.acc-av){padding:3px 10px 3px 4px}
  .acc-av{width:30px;height:30px}
}
@media(max-width:340px){
  .nav{padding-left:8px;padding-right:8px;gap:6px}
  .brand span{font-size:13px}
  .brand-logo{width:34px;height:34px}
  .nav-actions{gap:4px}
  .icon-btn,.menu-btn,.acc-btn{padding:7px 8px}
}

/* green "online" dot on the support button */
.chat-fab-dot{position:absolute;top:1px;right:1px;width:15px;height:15px;border-radius:50%;background:#22c55e;border:2.5px solid var(--c-bg);box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:onlinePulse 1.8s ease-out infinite;pointer-events:none;z-index:2}
@keyframes onlinePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}
@media(max-width:700px){.chat-fab-dot{width:13px;height:13px;top:0;right:0}}
@media(prefers-reduced-motion:reduce){.chat-fab-dot{animation:none}}

/* services page: the three trust cards — centered icons, no lime-green */
.trust-row > div .service-icon{display:grid;place-items:center;justify-content:center;gap:0;margin:0 auto 6px;color:var(--c-orange);background:rgba(255,159,67,.16)}
.trust-row > div .service-icon .ic{color:inherit;display:block;margin:0}
.trust-row > div:nth-child(2) .service-icon{color:var(--c-pink);background:rgba(255,95,162,.14)}
.trust-row > div:nth-child(3) .service-icon{color:var(--c-accent);background:rgba(168,85,247,.14)}
html[data-theme="light"] .trust-row > div .service-icon{color:#e8730c}
html[data-theme="light"] .trust-row > div:nth-child(2) .service-icon{color:#d6247f}
html[data-theme="light"] .trust-row > div:nth-child(3) .service-icon{color:#7c3aed}

/* product cards: add button with a text label next to the plus */
.svc-actions .add.add-label{flex:1 1 auto;width:auto;min-width:0;height:48px;padding:0 14px;gap:8px;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:13px;font-weight:800;white-space:nowrap}
.svc-actions .add.add-label .ic{flex:none;transition:transform .3s var(--ease-spring)}
.svc-actions .add.add-label:hover{transform:translateY(-2px) scale(1.03)}
.svc-actions .add.add-label:hover .ic{transform:rotate(90deg)}
.svc-actions .add.add-label:active{transform:scale(.97)}
.svc-actions{flex-wrap:wrap}
.svc-actions .add.add-label{min-width:max-content;flex:1 1 150px}
.svc-actions .btn.sm{flex:0 0 auto}

/* long modals (e.g. the admin product form) scroll inside themselves instead of running off-screen */
.modal{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}


/* ---------- footer (4 columns: brand / services / quick links / contact) ---------- */
footer{display:block;padding:68px max(24px,calc((100vw - 1172px)/2)) 0;background:linear-gradient(180deg,var(--c-bg-soft),var(--c-bg));border-top:1px solid var(--c-border)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1.1fr;gap:48px 40px;align-items:start}
.foot-col h4{display:flex;align-items:center;gap:14px;margin:0 0 20px;font-size:15px;white-space:nowrap}
.foot-col h4::after{content:"";flex:1;height:1px;background:linear-gradient(to left,var(--c-border),transparent)}
footer .foot-col a{position:relative;display:block;width:fit-content;margin:11px 0;font-size:13px;color:#8a95ab}
.foot-brand p{max-width:330px;margin:18px 0 0;line-height:2.1;font-size:13px;color:#8a95ab}
.foot-group + .foot-group{margin-top:22px}
.foot-group-title{display:flex;align-items:center;gap:9px;font-weight:800;font-size:13px;margin-bottom:6px}
.foot-gi{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(42,171,238,.16);color:#2aabee}
.foot-gi .ic{width:13px;height:13px}
.foot-contact .foot-row{display:flex;align-items:center;gap:12px;width:fit-content;margin:0 0 14px;font-size:14px;color:#aab3c5}
.foot-contact a.foot-row:hover{color:var(--c-primary)}
.foot-ic{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(56,140,248,.14);color:#4c9bff;transition:transform var(--dur) var(--ease-spring)}
.foot-ic .ic{width:18px;height:18px}
.foot-contact a.foot-row:hover .foot-ic{transform:scale(1.1)}
.foot-social{display:flex;gap:12px;margin-top:20px}
footer .foot-social a{display:grid;place-items:center;width:46px;height:46px;margin:0;border-radius:50%;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur)}
.foot-social a .ic{width:20px;height:20px}
.foot-social .tg{background:rgba(42,171,238,.16);color:#2aabee}
.foot-social .call{background:rgba(34,197,94,.16);color:#22c55e}
.foot-social .tg:hover{transform:translateY(-3px);box-shadow:0 10px 24px -8px rgba(42,171,238,.7)}
.foot-social .call:hover{transform:translateY(-3px);box-shadow:0 10px 24px -8px rgba(34,197,94,.7)}
footer .foot-social a::after,footer .foot-contact a.foot-row::after,footer .foot-group a::after{display:none}
footer .foot-group #footSvcList a{margin:9px 0;font-size:13px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:54px;padding:22px 0 26px;border-top:1px solid var(--c-border)}
.foot-bottom p{margin:0;font-size:12px;color:#7d889d}
.foot-bottom-end{display:flex;align-items:center;gap:18px}
.foot-bottom small{margin:0;font-size:12px;color:#7d889d}
@media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:600px){footer{padding-top:48px}.foot-grid{grid-template-columns:1fr;gap:34px}.foot-bottom{flex-direction:column;align-items:flex-start;margin-top:36px}}
footer [hidden]{display:none !important}
footer .foot-col a.brand{display:flex;align-items:center;gap:10px;width:auto;margin:0;font-size:15px;color:inherit}
.foot-bottom{padding-inline:88px}
@media(max-width:1000px){.foot-bottom{padding-inline:0}}
@media(max-width:600px){.foot-bottom{padding-bottom:92px}}
html[data-theme="light"] footer .foot-col a,html[data-theme="light"] .foot-brand p,html[data-theme="light"] .foot-contact .foot-row{color:#4b5568}
html[data-theme="light"] .foot-bottom p,html[data-theme="light"] .foot-bottom small{color:#5d6a80}
html[data-theme="light"] footer .foot-col a.brand{color:var(--c-text)}
html[data-theme="light"] .foot-contact a.foot-row:hover,html[data-theme="light"] footer .foot-col a:hover{color:#0e7490}


/* ---------- about + contact pages ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1000px;margin:0 auto}
.contact-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 28px;border:1px solid var(--c-border);border-radius:24px;background:var(--c-surface);transition:transform .35s var(--ease-spring),border-color .3s,box-shadow .3s}
.contact-card:hover{transform:translateY(-4px);border-color:rgba(255,159,67,.4)}
.contact-card h3{margin:0;font-size:18px}
.contact-card p{margin:0;font-size:13.5px;line-height:2.1;color:var(--c-muted)}
.contact-wide{grid-column:1/-1;flex-direction:row;align-items:flex-start;gap:22px}
.contact-num{font-size:24px!important;letter-spacing:1px;margin-bottom:8px!important}
.contact-link{font-size:17px;font-weight:800;color:var(--c-primary);width:fit-content;transition:opacity .2s}
.contact-link:hover{opacity:.8;text-decoration:underline}
.contact-phones{display:flex;flex-wrap:wrap;gap:8px 22px}
.hours-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;width:100%}
.hours-list li{display:grid;gap:3px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--c-border)}
.hours-list b{font-size:13.5px}
.hours-list span{font-size:12.5px;line-height:2;color:var(--c-muted)}
.notice-box{display:flex;gap:18px;align-items:flex-start;max-width:1000px;margin:26px auto 0;padding:26px 28px;border:1px solid rgba(255,159,67,.4);border-radius:22px;background:rgba(255,159,67,.07)}
.notice-box p{margin:0;font-size:13.5px;line-height:2.2;color:var(--c-text)}
.notice-box .service-icon{flex:none}
.about-prose{max-width:860px;margin:0 auto;padding:34px 36px;border:1px solid var(--c-border);border-radius:26px;background:var(--c-surface)}
.about-prose p{margin:0 0 18px;font-size:15px;line-height:2.4;color:var(--c-text)}
.about-prose p:last-child{margin-bottom:0}
.about-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:860px;margin:26px auto 0}
.about-chips span{padding:9px 18px;border-radius:999px;border:1px solid var(--c-border);background:rgba(255,159,67,.1);font-size:13px;font-weight:700}
.feature-grid.three{grid-template-columns:repeat(3,1fr)}
html[data-theme="light"] .hours-list li{background:rgba(0,0,0,.03)}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr}.contact-wide{flex-direction:column;gap:12px}.feature-grid.three{grid-template-columns:1fr}.about-prose{padding:26px 22px}.notice-box{flex-direction:column;gap:12px;padding:22px}}

/* =====================================================================
   Comments / reviews
   ===================================================================== */
.cm-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start;max-width:1100px;margin:0 auto}
.cm-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.cm-sum,.cm-rules{padding:22px;border-radius:24px;border:1px solid var(--c-border);background:var(--c-surface)}
.cm-rules h3{margin:0 0 12px;font-size:15px}
.cm-rules ul{margin:0;padding:0 18px 0 0;display:flex;flex-direction:column;gap:9px;color:var(--c-muted);font-size:12.5px;line-height:2}
.cm-avg{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cm-avg > b{font-size:48px;font-weight:900;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.cm-avg small{display:block;color:var(--c-muted);font-size:12px;margin-top:6px}
.cm-dist{display:flex;flex-direction:column;gap:7px}
.cm-dist > div{display:grid;grid-template-columns:16px 1fr 28px;gap:10px;align-items:center;font-size:11px;color:var(--c-muted)}
.cm-dist i{display:block;height:7px;border-radius:99px;background:var(--c-surface-strong);overflow:hidden}
.cm-dist u{display:block;height:100%;border-radius:99px;background:var(--grad-brand);transition:width .9s var(--ease)}
.cm-dist em{font-style:normal;text-align:left}

.cm-stars{display:inline-flex;gap:2px}
.cm-stars i{display:grid;color:var(--c-surface-strong)}
.cm-stars i.on{color:#fbbf24;filter:drop-shadow(0 0 6px rgba(251,191,36,.45))}
.cm-stars svg{width:15px;height:15px;fill:currentColor}

.cm-composer{margin-bottom:22px;padding:22px;border-radius:26px;border:1px solid var(--c-border);background:linear-gradient(150deg,var(--c-surface-strong),var(--c-surface))}
.cm-comp-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cm-comp-head small{display:block;color:var(--c-muted);font-size:11px;margin-top:3px}
.cm-stars-pick{display:flex;align-items:center;gap:4px;margin-bottom:12px}
.cm-stars-pick button{border:0;background:transparent;color:var(--c-surface-strong);cursor:pointer;display:grid;padding:3px;transition:transform .25s var(--ease-spring),color .2s}
.cm-stars-pick button.on{color:#fbbf24;filter:drop-shadow(0 0 7px rgba(251,191,36,.5))}
.cm-stars-pick button:hover{transform:scale(1.25) rotate(-8deg)}
.cm-stars-pick svg{width:26px;height:26px;fill:currentColor}
.cm-stars-pick span{margin-right:10px;color:var(--c-muted);font-size:12px}
.cm-composer textarea{width:100%;min-height:110px;padding:14px 16px;border:1px solid var(--c-border);border-radius:16px;background:var(--c-surface);color:var(--c-text);font:inherit;font-size:14px;line-height:2;resize:vertical;transition:border-color .25s,box-shadow .3s}
.cm-composer textarea:focus{outline:0;border-color:rgba(168,85,247,.6);box-shadow:0 0 0 4px rgba(168,85,247,.14)}
.cm-comp-foot{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.cm-comp-foot small{color:var(--c-muted);font-size:11px}
.cm-comp-foot .form-msg{flex:1;min-width:140px}
.cm-lock{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cm-lock > .ic-lg{color:var(--c-orange);flex-shrink:0}
.cm-lock p{color:var(--c-muted);font-size:13px;line-height:2;margin:4px 0 12px}
.cm-lock .row{display:flex;gap:10px;flex-wrap:wrap}

.cm-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cm-list{display:flex;flex-direction:column;gap:14px}

.cm-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.14);background:var(--c-surface-strong)}
.cm-av.init{display:grid;place-items:center;font-weight:900;font-size:17px;color:#160a1f}
.cm-av.i0{background:linear-gradient(135deg,#ff9f43,#ff5fa2)}.cm-av.i1{background:linear-gradient(135deg,#c084fc,#6366f1)}.cm-av.i2{background:linear-gradient(135deg,#22d3ee,#3b82f6)}.cm-av.i3{background:linear-gradient(135deg,#34d399,#10b981)}.cm-av.i4{background:linear-gradient(135deg,#fb7185,#f43f5e)}

.cm-card{position:relative;padding:18px 20px;border-radius:22px;border:1px solid var(--c-border);background:linear-gradient(150deg,var(--c-surface-strong),var(--c-surface));animation:msgPop .5s var(--ease-spring) both;transition:transform .35s var(--ease-spring),border-color .3s,opacity .35s,max-height .35s}
.cm-card:hover{transform:translateY(-3px);border-color:rgba(255,159,67,.35)}
.cm-card.pinned{border-color:rgba(251,191,36,.45)}
.cm-card.leaving{opacity:0;transform:translateX(50px) scale(.96)}
.cm-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.cm-who{flex:1;min-width:110px}
.cm-who b{display:block;font-size:14px}
.cm-who small{color:var(--c-muted);font-size:11px}
.cm-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;font-size:10.5px;font-weight:800}
.cm-badge svg{width:12px;height:12px}
.cm-badge.pin{background:rgba(251,191,36,.14);color:#fbbf24}
.cm-badge.wait{background:rgba(34,211,238,.12);color:var(--c-primary)}
.cm-text{margin:0 0 12px;font-size:14px;line-height:2.1;white-space:pre-wrap;word-break:break-word}
.cm-card.compact .cm-text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.cm-reply{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:rgba(168,85,247,.09);border-right:3px solid #a855f7}
.cm-reply span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#c084fc;margin-bottom:4px}
.cm-reply svg{width:13px;height:13px}
.cm-reply p{margin:0;font-size:13px;line-height:2;color:var(--c-muted);white-space:pre-wrap}
.cm-foot{display:flex;align-items:center;gap:8px}
.cm-react,.cm-del{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--c-border);border-radius:99px;background:var(--c-surface);color:var(--c-muted);font:inherit;font-size:12px;cursor:pointer;transition:transform .3s var(--ease-spring),background .2s,color .2s,border-color .2s}
.cm-react svg,.cm-del svg{width:15px;height:15px}
.cm-react.dislike svg{transform:rotate(180deg)}
.cm-react:hover,.cm-del:hover{transform:translateY(-2px);color:var(--c-text)}
.cm-react.like.on{color:#34d399;border-color:rgba(52,211,153,.6);background:rgba(52,211,153,.12)}
.cm-react.dislike.on{color:#fb7185;border-color:rgba(251,113,133,.6);background:rgba(251,113,133,.12)}
.cm-react.pop{animation:cmPop .5s var(--ease-spring)}
@keyframes cmPop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.cm-react:disabled{opacity:.6;cursor:wait}
.cm-del{margin-right:auto;color:var(--c-danger)}
.cm-del:hover{background:rgba(248,113,113,.12);color:var(--c-danger)}

/* home page */
.cm-home-sum{display:flex;align-items:center;gap:12px;margin:-6px 0 22px;color:var(--c-muted);font-size:13px}
.cm-home-sum b{font-size:26px;color:var(--c-text)}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cm-grid:empty{display:none}
.cm-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.cm-cta small{color:var(--c-muted);font-size:12px}
@media(max-width:900px){.cm-layout{grid-template-columns:1fr}.cm-side{position:static;order:-1}}


/* =====================================================================
   Performance pass: same look, far fewer GPU-heavy layers
   ===================================================================== */
/* big blurred blobs -> soft radial masks (no 100px blur filter, no blend mode) */
.aurora{filter:none!important;mix-blend-mode:normal!important;-webkit-mask-image:radial-gradient(closest-side,#000 0%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0%,transparent 100%);opacity:.42}
.orbit-card:before,.service-card:before,.auth-card:before,.svc-card::before{filter:none!important;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
/* film grain forced a full-screen blend on every frame */
body::after{display:none!important}
/* reveal: opacity + transform only (blur transitions repaint every frame) */
.reveal,.reveal-scale{filter:none!important;transition:opacity .7s var(--ease),transform .7s var(--ease)!important}
.news-card,.svc-card,.cart-item,.order-card,.free-promo,.ai-cap{will-change:auto!important}
.ai-side,.ai-main{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(160deg,var(--c-bg-soft),var(--c-surface))!important}
/* below-the-fold sections are rendered only when they get close to the viewport */
main > .section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 640px}

/* weak phones / data saver / 2G (class set by site.js) */
html.lite .aurora,html.lite .cursor-glow,html.lite .bg-grid{display:none!important}
html.lite .nav,html.lite .modal-overlay,html.lite .lightbox,html.lite .toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.lite .nav{background:var(--c-bg-soft)!important}
html.lite *,html.lite *::before,html.lite *::after{animation:none!important}
html.lite .boot .loader,html.lite .boot span::after,html.lite .typing-dots span,html.lite .ai-mic.rec,html.lite .typing::after{animation:revert!important}
html.lite .split-in .w > i{transform:none!important;opacity:1!important}
html.lite .reveal,html.lite .reveal-scale{transition-duration:.35s!important}


/* top bar: guest state (login + register buttons) needs more room -> collapse extras earlier, never wrap */
.cart-btn,.cart-btn .cart-label,.nav-login,.nav-register,.desktop-nav a{white-space:nowrap}
@media(max-width:1700px){.cart-btn .cart-label{display:none}}
@media(max-width:1440px){.desktop-nav a[data-nav="home"]{display:none}}


/* =====================================================================
   Platforms: animated marquee, filter tabs, chips
   ===================================================================== */
.pf-svg,.pf-svg svg{display:block;width:100%;height:100%}
.pf-img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}

/* marquee (icons on soft white tiles, endless loop, pauses on hover) */
.pm{position:relative;overflow:hidden;padding:18px 0 34px;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.pm-track{display:flex;gap:18px;width:max-content;animation:pmMove var(--dur,40s) linear infinite}
.pm:hover .pm-track{animation-play-state:paused}
@keyframes pmMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pm-tile{position:relative;flex:0 0 auto;width:88px;height:88px;border-radius:26px;display:grid;place-items:center;background:#fff;box-shadow:0 14px 34px -16px rgba(20,16,50,.55),inset 0 0 0 1px rgba(255,255,255,.7);text-decoration:none;animation:pmBob 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s);transition:transform .4s var(--ease-spring),box-shadow .3s}
.pm-ic{width:46px;height:46px;display:block;border-radius:12px;transition:transform .4s var(--ease-spring)}
.pm-tile:hover{transform:translateY(-8px) scale(1.07);box-shadow:0 26px 44px -18px rgba(168,85,247,.7)}
.pm-tile:hover .pm-ic{transform:scale(1.1) rotate(-4deg)}
.pm-tile em{position:absolute;bottom:-26px;left:50%;translate:-50% 6px;opacity:0;font-style:normal;font-size:11px;font-weight:800;white-space:nowrap;color:var(--c-text);direction:rtl;transition:opacity .25s,translate .3s var(--ease)}
.pm-tile:hover em,.pm-tile:focus-visible em{opacity:1;translate:-50% 0}
@keyframes pmBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.pm-note{text-align:center;color:var(--c-muted);font-size:12px;margin:-6px 0 0}
@media(max-width:640px){.pm-tile{width:72px;height:72px;border-radius:22px}.pm-ic{width:38px;height:38px}.pm-track{gap:14px}}
@media (prefers-reduced-motion:reduce){.pm{-webkit-mask-image:none;mask-image:none;direction:rtl;overflow-x:auto}.pm-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}.pm-tile{animation:none}.pm-track .pm-tile[aria-hidden="true"]{display:none}}
html.lite .pm{direction:rtl;overflow-x:auto;-webkit-mask-image:none;mask-image:none}
html.lite .pm-track{animation:none!important;width:auto}
html.lite .pm-tile{animation:none!important}
html.lite .pm-track .pm-tile[aria-hidden="true"]{display:none}

/* services page: platform tabs */
.plat-tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;margin-bottom:6px;scrollbar-width:thin}
.plat-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 12px;border:1px solid var(--c-border);border-radius:99px;background:var(--c-surface);color:var(--c-text);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .3s var(--ease-spring),border-color .25s,background .25s,box-shadow .3s}
.plat-tab:hover{transform:translateY(-2px);border-color:rgba(255,159,67,.5)}
.plat-tab.active{background:linear-gradient(135deg,rgba(255,159,67,.2),rgba(168,85,247,.2));border-color:rgba(255,159,67,.7);box-shadow:0 12px 28px -16px rgba(255,95,162,.8)}
.plat-ic{width:26px;height:26px;border-radius:9px;background:#fff;display:grid;place-items:center;padding:3px;flex-shrink:0}
.plat-tab em{font-style:normal;font-size:11px;color:var(--c-muted);padding:1px 8px;border-radius:99px;background:var(--c-surface-strong)}
/* platform chip on service cards / cart */
.svc-plat{display:inline-flex;align-items:center;gap:6px;margin-right:auto;padding:3px 10px 3px 8px;border-radius:99px;background:var(--c-surface-strong);border:1px solid var(--c-border);font-size:11px;font-weight:700}
.svc-plat .pf-svg,.svc-plat .pf-img{width:16px;height:16px;flex-shrink:0}
.svc-plat em{font-style:normal}
.svc-plat.inline{margin:0 0 0 6px;vertical-align:middle}


/* admin: platforms */
.pf-admin-list{display:flex;flex-direction:column;gap:12px}
.pf-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;border:1px solid var(--c-border);background:var(--c-surface);flex-wrap:wrap}
.pf-row.off{opacity:.55}
.pf-info{flex:1;min-width:160px;display:flex;flex-direction:column;gap:3px}
.pf-info small{color:var(--c-muted);font-size:11px}
.pf-tile{width:52px;height:52px;border-radius:16px;background:#fff;display:grid;place-items:center;padding:8px;flex-shrink:0;box-shadow:0 8px 20px -12px rgba(0,0,0,.6)}
.pf-tile.sm{width:38px;height:38px;border-radius:12px;padding:6px;display:inline-grid;vertical-align:middle}
.pf-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
.pf-pick button{width:100%;aspect-ratio:1;border:2px solid transparent;border-radius:14px;background:#fff;padding:8px;cursor:pointer;transition:transform .25s var(--ease-spring),border-color .2s}
.pf-pick button:hover{transform:translateY(-2px)}
.pf-pick button.active{border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(255,159,67,.25)}
.product-card .svc-plat{margin:2px 0 6px;align-self:flex-start}

.section-head .btn{white-space:nowrap}

/* dropdown options: opaque theme colors so the list is readable on every page (native lists ignore translucent backgrounds) */
select{color-scheme:dark}
html[data-theme="light"] select{color-scheme:light}
select option,select optgroup{background-color:#16112a;color:#fdf9ff}
html[data-theme="light"] select option,html[data-theme="light"] select optgroup{background-color:#fff8f2;color:#241433}
select option:checked,select option:hover{background-color:#6366f1;color:#fff}

/* rules page */
.rules-prose h2{margin:30px 0 14px;font-size:19px;font-weight:800;color:var(--c-text)}
.rules-prose h2:first-of-type{margin-top:26px}
.rules-prose ul{margin:0 0 6px;padding:0 22px 0 0;display:grid;gap:12px}
.rules-prose li{font-size:15px;line-height:2.2;color:var(--c-text)}
.rules-prose li::marker{color:var(--c-primary)}
.rules-lead{padding:16px 20px;border-radius:16px;background:var(--c-surface-strong);border:1px solid var(--c-border);font-weight:700}
.rules-note{padding:18px 22px;border-radius:16px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.08);font-size:15px;line-height:2.2}
.rules-note b{color:#ef4444}
.rules-foot{margin-top:28px!important;padding-top:20px;border-top:1px dashed var(--c-border);color:var(--c-muted)!important}
.rules-copy{margin-top:14px!important;padding-top:18px;border-top:1px dashed var(--c-border);text-align:center;font-size:13px!important;line-height:2.2!important;color:var(--c-muted)!important}
@media(max-width:800px){.rules-prose h2{font-size:17px}.rules-prose ul{padding-right:18px}}

/* keep every line of the rules box inside it */
.rules-prose{box-sizing:border-box;width:100%;min-width:0;overflow:hidden}
.rules-prose p,.rules-prose li,.rules-prose h2,.rules-note{max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal}

/* navbar dropdown: "تماس با ما / درباره ما" */
.nav-dd{position:relative;display:flex;align-items:center}
.desktop-nav .nav-dd-btn{cursor:pointer;gap:6px}
.nav-caret{transition:transform var(--dur) var(--ease);flex:none}
.nav-dd.open .nav-caret,.m-dd.open .nav-caret{transform:rotate(180deg)}
.nav-dd-panel{display:none;position:absolute;top:calc(100% + 14px);right:0;min-width:170px;padding:8px;flex-direction:column;gap:2px;border-radius:16px;background:var(--c-bg-soft);border:1px solid var(--c-border);box-shadow:0 18px 40px rgba(0,0,0,.28);z-index:120}
.nav-dd.open .nav-dd-panel{display:flex}
.desktop-nav .nav-dd-panel a{padding:10px 14px;border-radius:10px;color:var(--c-muted);white-space:nowrap}
.desktop-nav .nav-dd-panel a:hover,.desktop-nav .nav-dd-panel a.active{background:var(--c-surface);color:var(--c-text)}
.m-dd-btn{cursor:pointer;justify-content:space-between}
.m-dd-sub{display:none;flex-direction:column;gap:2px;padding:2px 14px 6px 0}
.m-dd.open .m-dd-sub{display:flex}
.m-dd-sub a{padding:11px 14px!important;font-size:14px}

/* live orders (home) */
.live-box{position:relative;overflow:hidden;max-width:1100px;margin:0 auto;padding:44px clamp(16px,4vw,56px) 40px;border-radius:34px;background:linear-gradient(135deg,#4c1d95,#7c3aed 55%,#9333ea);color:#fff;text-align:center;box-shadow:0 30px 70px -30px rgba(124,58,237,.65)}
.live-box::before,.live-box::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}
.live-box::before{width:260px;height:260px;top:-110px;left:-70px}
.live-box::after{width:300px;height:300px;bottom:-150px;right:-90px}
.live-box h2{margin:0 0 8px;font-size:clamp(22px,3vw,30px);font-weight:900}
.live-sub{margin:0 0 26px;font-size:14px;opacity:.85}
.live-card{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:22px 26px 20px;border-radius:26px;background:#fcfbff;color:#1c1530;text-align:right;box-shadow:0 20px 50px -25px rgba(0,0,0,.45)}
.live-card.swap{animation:liveIn .5s var(--ease,ease)}
@keyframes liveIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.live-badge{display:inline-block;padding:7px 18px;border-radius:999px;background:#7c3aed;color:#fff;font-size:13px;font-weight:800}
.live-card h3{margin:14px 0 8px;font-size:clamp(18px,2.4vw,24px);font-weight:900;color:#1c1530}
.live-who{font-size:14px;color:#6b6480}
.live-who b{color:#7c3aed}
.live-st{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px;font-size:14px;color:#6b6480}
.live-st b{color:#1c1530}
.live-bar{height:12px;border-radius:99px;background:#eceaf2;overflow:hidden;direction:rtl}
.live-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff6b3d,#ff8a5c);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.live-foot{display:flex;justify-content:flex-start;margin-top:16px}
.live-pill{padding:8px 18px;border-radius:999px;background:linear-gradient(135deg,#6d28d9,#9333ea);color:#fff;font-size:13px;font-weight:800}
.live-pill.pending{background:linear-gradient(135deg,#f59e0b,#f97316)}
.live-pill.done{background:linear-gradient(135deg,#059669,#10b981)}
.live-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;margin-top:18px}
.live-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.4);cursor:pointer;transition:width .3s,background .3s}
.live-dots button.on{width:26px;background:#fff}
.live-actions{position:relative;z-index:1;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.live-btn{padding:14px 26px;border-radius:14px;font-weight:800;font-size:15px;color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.2);transition:transform .25s}
.live-btn.alt{background:linear-gradient(135deg,#3b82f6,#22c55e);border-color:rgba(255,255,255,.35)}
.live-btn:hover{transform:translateY(-3px)}
@media(max-width:640px){.live-box{border-radius:26px;padding:34px 14px 30px}.live-card{padding:18px 16px}}

.live-empty{display:flex;flex-direction:column;gap:8px;text-align:center;padding:14px 6px;color:#6b6480;font-size:14px;line-height:2}
.live-empty b{color:#1c1530;font-size:16px}

/* compact navbar: 6 main links + "بیشتر" dropdown, so the desktop bar fits from 1181px */
@media(min-width:1181px){.desktop-nav{display:flex!important}.menu-btn{display:none!important}.desktop-nav a[data-nav="home"]{display:flex!important}}
@media(max-width:1180px){.desktop-nav{display:none!important}.menu-btn{display:inline-flex!important}}
.desktop-nav{gap:clamp(14px,1.8vw,28px)}

/* live orders: use the site's own brand colors instead of plain purple */
.live-box{background:var(--grad-brand);box-shadow:0 30px 70px -30px rgba(255,159,67,.55)}
.live-badge{background:var(--grad-brand)}
.live-who b{color:var(--c-accent)}
.live-bar i{background:var(--grad-brand)}
.live-pill{background:var(--grad-brand)}
.live-pill.pending{background:linear-gradient(135deg,var(--c-orange),#f97316)}
.live-btn{background:rgba(20,10,40,.35)}
.live-btn.alt{background:linear-gradient(135deg,var(--c-primary-2),var(--c-primary));color:#05121a}

/* online payment + e-namad */
.pill.unpaid{background:rgba(255,159,67,.16);color:var(--c-orange);border:1px solid rgba(255,159,67,.4)}
.ord-pay{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,159,67,.1);border:1px dashed rgba(255,159,67,.45);font-size:13px}
.pay-banner{margin:0 0 16px;padding:14px 18px;border-radius:14px;font-size:14px;line-height:2}
.pay-banner.ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#16a34a}
.pay-banner.bad{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);color:#ef4444}
.foot-trust{margin-top:14px}
.foot-trust img{width:96px;height:auto;border-radius:10px;background:#fff;padding:4px}

/* live orders: same look as the site's own cards (no purple block) */
.live-box{background:linear-gradient(160deg,var(--c-surface-strong),var(--c-surface));color:var(--c-text);border:1px solid var(--c-border);box-shadow:0 24px 60px -36px rgba(255,120,60,.4)}
.live-box::before{background:radial-gradient(circle,rgba(255,159,67,.22),transparent 70%)}
.live-box::after{background:radial-gradient(circle,rgba(34,211,238,.16),transparent 70%)}
.live-sub{color:var(--c-muted);opacity:1}
.live-card{background:var(--c-bg-soft,var(--c-surface-strong));border:1px solid var(--c-border);color:var(--c-text);box-shadow:0 14px 34px -26px rgba(0,0,0,.35)}
.live-card h3,.live-st b,.live-empty b{color:var(--c-text)}
.live-who,.live-st,.live-empty{color:var(--c-muted)}
.live-who b{color:var(--c-orange)}
.live-bar{background:var(--c-border)}
.live-dots button{background:var(--c-border)}
.live-dots button.on{background:var(--c-orange)}
.live-btn{background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text)}
.live-btn.alt{background:var(--grad-brand);border-color:transparent;color:#1a0f08}
@media(max-width:400px){.nav-register{padding:8px 10px;font-size:12px}}

/* ---- rich articles ---- */
.article.has-rich{max-width:980px}
.article-body.rich h2{position:relative;margin:54px 0 22px;padding-right:18px;font-size:clamp(22px,3vw,30px);font-weight:900;line-height:1.6}
.article-body.rich h2::before{content:"";position:absolute;right:0;top:.35em;bottom:.35em;width:6px;border-radius:99px;background:var(--grad-brand)}
.article-body.rich h3{margin:30px 0 12px;font-size:19px;font-weight:800}
.article-body.rich blockquote{margin:22px 0;padding:18px 22px;border-radius:18px;background:var(--c-surface);border:1px solid var(--c-border);border-right:5px solid var(--c-orange);line-height:2.1}
.article-body.rich .rl{margin:0 0 22px;padding:0 22px 0 0;line-height:2.2}
.sym{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:900;line-height:1}
.sym.ok{background:rgba(34,197,94,.16);color:#16a34a}
.sym.no{background:rgba(239,68,68,.15);color:#ef4444}
.sym.warn{background:rgba(255,159,67,.2);color:#e07b12}
.sym.info{background:rgba(59,130,246,.16);color:#3b82f6}
/* pros / cons */
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 10px}
.pc{padding:22px 22px 14px;border-radius:24px;background:var(--c-surface);border:1px solid var(--c-border)}
.pc h4{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:18px;font-weight:900}
.pc h4 i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;font-style:normal;font-weight:900;color:#fff}
.pc-good{border-top:4px solid #22c55e}.pc-good h4 i{background:#22c55e}
.pc-bad{border-top:4px solid #f97316}.pc-bad h4 i{background:#f97316}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px dashed var(--c-border);font-size:14.5px;line-height:2}
.pc li:first-child{border-top:0}
.pc li .sym{margin-top:6px}
/* comparison table */
.rt-wrap{margin:8px 0 10px;overflow-x:auto;border-radius:22px;border:1px solid var(--c-border);background:var(--c-surface)}
.rt{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;font-size:14.5px}
.rt th{padding:16px 18px;text-align:right;font-weight:900;background:var(--c-surface-strong)}
.rt3 th:nth-child(2){background:rgba(34,197,94,.14);color:#16a34a}
.rt3 th:nth-child(3){background:rgba(239,68,68,.12);color:#ef4444}
.rt td{padding:15px 18px;border-top:1px solid var(--c-border);vertical-align:top;line-height:2}
.rt td:not(.rt-k){}
.rt td .sym{margin-left:8px;vertical-align:middle}
.rt td.rt-k{font-weight:800;white-space:nowrap;background:var(--c-surface-strong)}
.rt tbody tr:hover td:not(.rt-k){background:rgba(255,159,67,.06)}
/* tip cards */
.tip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:8px 0 10px}
.tip{position:relative;padding:22px 22px 20px;border-radius:22px;background:var(--c-surface);border:1px solid var(--c-border);transition:transform .35s var(--ease-spring),border-color .3s}
.tip:hover{transform:translateY(-5px);border-color:rgba(255,159,67,.5)}
.tip-n{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:12px;border-radius:12px;background:var(--grad-brand);color:#1a0f08;font-weight:900}
.tip h4{margin:0 0 8px;font-size:16.5px;font-weight:900}
.article-body.rich .tip p{margin:0;font-size:14px;line-height:2.1;color:var(--c-muted)}
/* check grid */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0 6px}
.chk{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--c-surface);border:1px solid var(--c-border);font-size:14.5px;font-weight:700;line-height:1.9}
/* cta */
.art-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:46px 0 10px;padding:28px 30px;border-radius:26px;background:linear-gradient(135deg,rgba(255,159,67,.16),rgba(255,93,143,.12) 55%,rgba(168,85,247,.14));border:1px solid var(--c-border)}
.art-cta h3{margin:0 0 6px;font-size:22px;font-weight:900}
.art-cta p{margin:0!important;font-size:14px!important;color:var(--c-muted)}
.art-cta-btns{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:760px){.pc-grid{grid-template-columns:1fr}.art-cta{padding:22px 18px}}

/* free page: Telegram / Instagram tabs */
.free-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:26px auto 0}
.free-tab{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);font:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:transform .3s var(--ease-spring),background .3s,border-color .3s}
.free-tab:hover{transform:translateY(-2px);border-color:rgba(255,159,67,.5)}
.free-tab.on{background:var(--grad-brand);border-color:transparent;color:#1a0f08;box-shadow:0 14px 30px -18px rgba(255,120,60,.8)}
.free-tab [data-pi]{display:inline-flex;width:22px;height:22px}
.free-tab [data-pi] svg,.free-tab [data-pi] img{width:22px;height:22px;border-radius:6px}

/* footer legal text */
.foot-legal{margin-top:40px;padding:22px 0 0;border-top:1px solid var(--c-border);padding-inline:88px}
.foot-legal h4{margin:0 0 10px;font-size:14px;font-weight:900}
.foot-legal p{margin:0 0 10px;font-size:12.5px;line-height:2.1;color:var(--c-muted)}
.foot-legal-en{font-size:11.5px!important;line-height:1.9!important;text-align:left;opacity:.9}
@media(max-width:1000px){.foot-legal{padding-inline:0}}
.foot-legal + .foot-bottom{margin-top:18px}

/* ===== responsive hardening (all pages) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img,svg,video,canvas,iframe{max-width:100%}
h2,h3,h4{overflow-wrap:anywhere}
.foot-legal p,.rules-prose p,.rules-prose li,.article-body p,.live-card h3{overflow-wrap:anywhere}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tip-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.chk-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.admin-top{flex-wrap:wrap;gap:10px}
.switch-row{gap:12px}
#mobileNav.open{max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto}
@media(max-width:700px){
  .grid2,.ai-grid{grid-template-columns:1fr}
  .stats-form{grid-template-columns:1fr!important}
  .adminbox{padding:16px}
  .art-cta-btns{width:100%}.art-cta-btns .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .free-tab{flex:1 1 100%;justify-content:center}
  .live-st{flex-wrap:wrap;gap:6px}
}
@media(max-width:480px){
  .service-grid{grid-template-columns:1fr}
  .live-box h2{font-size:21px}
  .live-btn{flex:1 1 100%;text-align:center}
  .article-body.rich h2{font-size:21px;margin-top:40px}
  .rt{font-size:13px}.rt th,.rt td{padding:12px 12px}
  .rules-note,.rules-lead{padding:14px 16px}
  .foot-legal-en{font-size:11px!important}
  .ord-pay{flex-direction:column;align-items:stretch}.ord-pay .btn{width:100%}
  .pay-banner{font-size:13px}
  .pc{padding:18px 16px 10px}
}

/* sms code field */
.otp-row{display:flex;gap:10px;align-items:stretch}
.otp-row input{flex:1;min-width:0;letter-spacing:6px;text-align:center;font-weight:800}
.otp-row .btn{flex:none;white-space:nowrap}