/* Simourgh Plus — public site design system 2026 (approved C3 + TradeForge palette + liquid glass). Generated from homepage-redesign-demo/assets; edit there and re-run the concat, or edit here carefully. */
/* Shared base for all three demo directions: font, reset, a11y helpers */
@font-face { font-family: 'Vazirmatn'; src: url('/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/fonts/vazirmatn/Vazirmatn-Black.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'ss01'; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select { font: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--focus, #2563eb); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 1000; padding: 8px 14px; background: #111; color: #fff; border-radius: 8px; }
.skip:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* the demo badge shown on every direction so nobody confuses it with production */
.demo-tag { position: fixed; bottom: 12px; inset-inline-end: 12px; z-index: 999; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 6px 10px; border-radius: 999px; background: #111; color: #fff; opacity: .85; display: flex; gap: 8px; align-items: center; }
.demo-tag a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .demo-tag { display: none; } }
/* Shared motion primitives for A2/B2/C2. Colours come from each page's own tokens. */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-stagger] > *{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
[data-reveal][data-stagger].in > *{opacity:1;transform:none}
/* page-load entrance for hero children */
.enter > *{animation:enter .7s cubic-bezier(.2,.7,.2,1) both}
html.qa-still .enter > *,html.qa-still .ph-tile{animation:none!important}
.enter > *:nth-child(2){animation-delay:.08s}.enter > *:nth-child(3){animation-delay:.16s}.enter > *:nth-child(4){animation-delay:.24s}.enter > *:nth-child(5){animation-delay:.32s}.enter > *:nth-child(6){animation-delay:.4s}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* marquee */
.mq{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:10px;width:max-content;animation:mq 60s linear infinite}
.mq:hover .mq-track,.mq.static .mq-track{animation-play-state:paused}
.mq-item{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--mq-bg,#fff);border:1px solid var(--mq-line,#e5e5e5);font-size:13px;font-weight:600;white-space:nowrap}
.mq-item img{width:22px;height:22px;border-radius:6px}
@keyframes mq{to{transform:translateX(50%)}}
/* floating logo wall */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wt{aspect-ratio:1;border-radius:16px;background:var(--wt-bg,#fff);border:1px solid var(--wt-line,#e5e5e5);display:grid;place-items:center;box-shadow:0 10px 24px -18px rgba(0,0,0,.35);animation:float 6s ease-in-out infinite;animation-delay:var(--d,0s);transition:transform .2s,border-color .2s}
.wt img{width:44%;height:44%}
.wt:hover{transform:translateY(-4px) scale(1.04);border-color:var(--wt-hover,#333);animation-play-state:paused}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* feather stroke drawing */
.draw .shaft{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.6s ease-out forwards}
.draw path:not(.shaft){stroke-dasharray:90;stroke-dashoffset:90;animation:draw .9s ease-out forwards;animation-delay:calc(.5s + var(--i,0) * 40ms)}
@keyframes draw{to{stroke-dashoffset:0}}
/* decision path */
.dpath{width:100%;height:auto;overflow:visible}
.dpath .dash{stroke-dasharray:8 8;animation:dashflow 1.4s linear infinite;opacity:.7}
@keyframes dashflow{to{stroke-dashoffset:-32}}
.dpath .node{opacity:0;animation:enter .6s cubic-bezier(.2,.7,.2,1) forwards}
.dpath .n2{animation-delay:.25s}.dpath .n3{animation-delay:.5s}
/* phone frame */
.phone{width:230px;border-radius:34px;padding:10px;background:var(--ph-frame,#1a1a1a);box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12)}
.phone-screen{border-radius:26px;background:var(--ph-screen,#0e1114);padding:14px 12px;min-height:420px;display:flex;flex-direction:column;gap:12px}
.ph-bar{display:flex;justify-content:center}.ph-bar span{width:60px;height:6px;border-radius:6px;background:rgba(255,255,255,.15)}
.ph-search{height:32px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.ph-search i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:shimmer 2.4s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph-tile{aspect-ratio:1;border-radius:14px;background:#fff;display:grid;place-items:center;animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:var(--d,0ms)}
.ph-tile img{width:50%;height:50%}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.ph-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:8px 6px 2px;border-top:1px solid rgba(255,255,255,.08)}
.ph-tabs span{width:22px;height:6px;border-radius:6px;background:rgba(255,255,255,.15)}.ph-tabs span.on{background:var(--ph-accent,#5DD9B0)}
@media (prefers-reduced-motion: reduce){.enter > *,.wt,.draw path,.dpath .dash,.dpath .node,.ph-tile,.ph-search i,.mq-track{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}}
/* Shared base for the C-family templates (C3/C4/C5): theme tokens (dark + light), app bar, status,
   stories, tiles/rows, quick-look sheet, tab bar, overlays, footer. Each page adds its own hero/sections. */
:root{
  --bg:#0E1114; --sf:#161B20; --sf2:#1E252C; --sf3:#26303A; --text:#E9EEF2; --muted:#9AA7B2; --dim:#6F7C87; --line:#273038; --line-2:#2F3A44;
  --acc:#5DD9B0; --acc-ink:#0B3B2E; --acc-soft:rgba(93,217,176,.14); --acc-2:#B9A7F5;
  --amber:#F2C14E; --amber-soft:rgba(242,193,78,.14); --tile:#FFFFFF; --tile-line:transparent;
  --bar:rgba(14,17,20,.86); --shadow:0 30px 60px -30px rgba(0,0,0,.8); --dots:rgba(255,255,255,.06);
  --focus:var(--acc); --r:16px; --r-lg:22px; --max:1120px; --tab-h:66px; color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#F3F6F5; --sf:#FFFFFF; --sf2:#EDF2F0; --sf3:#E2E9E6; --text:#10181C; --muted:#55646B; --dim:#7C8A91; --line:#E2E8E6; --line-2:#D2DCD8;
  --acc:#0F8A66; --acc-ink:#FFFFFF; --acc-soft:rgba(15,138,102,.12); --acc-2:#5B48C8;
  --amber:#8A5A00; --amber-soft:rgba(242,193,78,.24); --tile:#FFFFFF; --tile-line:var(--line);
  --bar:rgba(243,246,245,.88); --shadow:0 30px 60px -36px rgba(16,24,28,.35); --dots:rgba(16,24,28,.07); color-scheme:light;
}
body{background-color:var(--bg);background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:22px 22px;color:var(--text);font-size:15px;transition:background-color .3s,color .3s}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
@media(max-width:640px){.wrap{padding:0 14px}body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;font-weight:700;font-size:14px;border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn-acc{background:var(--acc);color:var(--acc-ink)}.btn-acc:hover{filter:brightness(1.08)}
.btn-dark{background:var(--sf2);color:var(--text);border-color:var(--line-2)}.btn-dark:hover{background:var(--sf3)}
.btn-sm{height:38px;padding:0 14px;font-size:13px}
.ico-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sf2);border:1px solid var(--line-2);color:var(--text)}
.ico-btn svg{width:20px;height:20px}
svg.i{width:1em;height:1em}

/* app bar */
.bar{position:sticky;top:0;z-index:50;background:var(--bar);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;color:var(--text)}
.brand img{width:36px;height:36px;border-radius:11px}
.search{position:relative;flex:1;max-width:520px}
.search .box{display:flex;align-items:center;height:42px;border-radius:12px;background:var(--sf2);border:1px solid var(--line-2);padding:0 12px;gap:8px}
.search .box:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:14px;color:var(--text)}
.search input::placeholder{color:var(--dim)}
.search svg{width:19px;height:19px;color:var(--muted);flex:none}
.results{position:absolute;inset-inline:0;top:calc(100% + 8px);background:var(--sf2);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;z-index:60;max-height:380px;overflow-y:auto}
.results a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.results a:last-child{border-bottom:0}
.results a[aria-selected=true],.results a:hover{background:var(--sf3)}
.results img{width:30px;height:30px;border-radius:8px;background:#fff;padding:3px}
.results b{display:block;font-size:14px}
.results span{font-size:12px;color:var(--muted)}
.bact{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.bact .lang{font:700 12px/1 system-ui;letter-spacing:.06em;padding:9px 10px;border:1px solid var(--line-2);border-radius:10px;color:var(--muted)}
.theme{position:relative;overflow:hidden}
.theme svg{position:absolute;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s}
.theme .sun{transform:translateY(24px);opacity:0}.theme .moon{transform:none;opacity:1}
[data-theme=light] .theme .sun{transform:none;opacity:1}[data-theme=light] .theme .moon{transform:translateY(-24px);opacity:0}
@media(max-width:640px){.bar .wrap{height:58px;gap:8px}.bar .search{display:none}.bact .btn,.bact .lang{display:none}}
@media(min-width:641px){.bact .m-only{display:none}}

/* status */
.status{margin-top:14px;background:var(--amber-soft);border:1px solid rgba(242,193,78,.35);border-radius:var(--r);padding:11px 14px;display:flex;align-items:center;gap:12px}
.status svg{width:20px;height:20px;color:var(--amber);flex:none}
.status p{font-size:13px;color:var(--text);line-height:1.7;flex:1 1 220px;min-width:0}
.status a{flex:none;font-size:12.5px;font-weight:700;color:var(--amber);white-space:nowrap}
.status .full{display:inline}.status .short{display:none}
@media(max-width:640px){.status .full{display:none}.status .short{display:inline}}

/* section head */
.sh{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px}
.sh h2{font-size:18px;font-weight:800}
.sh span{font-size:12.5px;color:var(--dim)}
.sh a{margin-inline-start:auto;font-size:13px;font-weight:700;color:var(--acc);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.sh a svg{width:15px;height:15px}

/* stories */
.stories .row{display:flex;gap:6px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding:10px 0 8px;margin-top:-6px;scroll-snap-type:x proximity}
.stories .row::-webkit-scrollbar{display:none}
.stories a{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;scroll-snap-align:start}
.stories .c{width:64px;height:64px;border-radius:22px;background:var(--sf2);border:1px solid var(--line-2);display:grid;place-items:center;transition:.2s;position:relative}
.stories .c svg{width:26px;height:26px}
.stories .c::after{content:"";position:absolute;inset:-4px;border-radius:26px;border:1.5px solid currentColor;opacity:0;transform:scale(.9);transition:.25s}
.stories a:hover .c{transform:translateY(-2px)}
.stories a:hover .c::after{opacity:.7;transform:scale(1)}
.stories b{font-size:12px;font-weight:600;color:var(--text);line-height:1.4}
.stories small{font-size:10.5px;color:var(--dim)}
@media(min-width:900px){.stories .row{gap:10px}.stories a{width:calc((100% - 100px)/11)}}

/* tiles / rows */
.crow{margin-bottom:8px;scroll-margin-top:80px}
.tiles{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;scroll-snap-type:x proximity}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:none;width:132px;scroll-snap-align:start;background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,background .2s}
.tile:hover{border-color:var(--acc);background:var(--sf2);transform:translateY(-3px)}
.tile:active{transform:scale(.97)}
.lg{background:var(--tile);border:1px solid var(--tile-line);display:grid;place-items:center}
.tile .lg{width:56px;height:56px;border-radius:16px}
.tile .lg img{width:34px;height:34px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tile:hover .lg img{transform:scale(1.15)}
.tile b{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.tile small{font-size:11px;color:var(--dim);direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(min-width:900px){.tiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));overflow:visible}.tile{width:auto}.tiles .tile:nth-child(n+9){display:none}.crow.open .tiles .tile{display:flex}}
.crow .moreb{display:none;margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--muted)}
@media(min-width:900px){.crow[data-extra]:not(.open) .moreb{display:inline-block}}

/* marquee (shared with motion.css, themed) */
.mq{--mq-bg:var(--sf);--mq-line:var(--line)}
.mq-item b{color:var(--text)}
.mq.rev .mq-track{animation-direction:reverse}

/* telegram / iran / how / guides / faq */
.tg{margin-top:26px;background:var(--sf);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:center}
.tg h2{font-size:22px;font-weight:900}
.tg p{color:var(--muted);font-size:14px;margin-top:8px;max-width:48ch}
.tg .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tg .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tg .cd{background:var(--sf2);border:1px solid var(--line-2);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px}
.tg .cd img{width:32px;height:32px;border-radius:9px;background:#fff;padding:3px}
.tg .cd b{font-size:14px}
.tg .cd span{font-size:12px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fest{grid-column:1/-1;background:var(--amber-soft);border:1px solid rgba(242,193,78,.3);border-radius:var(--r);padding:12px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fest .badge{font-size:11px;font-weight:800;color:#3A2A00;background:#F2C14E;padding:3px 9px;border-radius:999px}
.fest b{font-size:13.5px}.fest span{font-size:12px;color:var(--muted);flex-basis:100%}
.fest a{font-size:12.5px;font-weight:700;color:var(--amber);margin-inline-start:auto}
@media(max-width:800px){.tg{grid-template-columns:1fr;padding:18px}}
.iran{margin-top:16px;background:var(--sf);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
.iran h2{font-size:20px;font-weight:900}
.iran p{color:var(--muted);font-size:14px;margin-top:8px}
.iran .feats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.iran .feats span{font-size:12px;font-weight:600;background:var(--sf2);border:1px solid var(--line-2);padding:4px 10px;border-radius:999px}
.iran .diff{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.8;border-inline-start:3px solid var(--acc);padding-inline-start:10px}
.iran .cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.banks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.banks a{background:#fff;border:1px solid var(--tile-line);border-radius:12px;height:60px;display:grid;place-items:center;padding:8px}
.banks img{max-height:30px;width:auto;max-width:90%}
.banks .t{font-size:12px;font-weight:800;color:#1F1A17}
@media(max-width:800px){.iran{grid-template-columns:1fr;padding:18px}}
.how{margin-top:26px}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.how li{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;gap:12px}
.how i{flex:none;width:30px;height:30px;border-radius:10px;background:var(--acc);color:var(--acc-ink);font:800 14px/30px Vazirmatn;text-align:center;font-style:normal}
.how li:nth-child(2) i{background:#F2C14E;color:#3A2A00}
.how b{display:block;font-size:14px}.how span{font-size:12.5px;color:var(--muted);line-height:1.7}
@media(max-width:800px){.how ol{grid-template-columns:1fr}}
.gf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:6px}
@media(max-width:900px){.gf{grid-template-columns:1fr}}
.glist a{display:flex;gap:12px;align-items:center;padding:11px 12px;background:var(--sf);border:1px solid var(--line);border-radius:12px;margin-bottom:6px}
.glist a:hover{border-color:var(--acc)}
.glist .tag{flex:none;font-size:11px;font-weight:700;color:var(--acc-2);background:var(--sf2);padding:3px 8px;border-radius:999px}
.glist b{display:block;font-size:13.5px}.glist span{font-size:12px;color:var(--muted)}
details{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:0 14px;margin-bottom:6px}
details summary{list-style:none;cursor:pointer;padding:13px 0;font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px}
details summary::-webkit-details-marker{display:none}
details summary svg{width:18px;height:18px;margin-inline-start:auto;color:var(--muted);flex:none;transition:transform .2s}
details[open] summary svg{transform:rotate(180deg);color:var(--acc)}
details p{padding:0 0 14px;font-size:13.5px;color:var(--muted);line-height:1.9}

/* footer */
footer{margin-top:34px;border-top:1px solid var(--line);padding:28px 0 30px;color:var(--muted);font-size:13px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h4{font-size:13px;font-weight:800;color:var(--text);margin-bottom:10px}
footer li{margin-bottom:7px}footer li a:hover{color:var(--acc)}
.social{display:flex;gap:8px;margin-top:12px}
.social a{width:36px;height:36px;border-radius:10px;background:var(--sf2);border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted)}
.social a:hover{color:var(--acc);border-color:var(--acc)}.social svg{width:17px;height:17px}
.legal{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px}
.legal .links{display:flex;gap:12px;flex-wrap:wrap}

/* tab bar */
.tabbar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--bar);backdrop-filter:blur(14px);border-top:1px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom)}
.tabbar .in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:var(--tab-h)}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--muted);position:relative}
.tabbar svg{width:22px;height:22px}
.tabbar .on{color:var(--acc)}
.tabbar .on::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
@media(max-width:640px){.tabbar{display:block}}

/* overlays + quick look */
dialog.ov{border:0;padding:0;margin:0;max-width:none;width:100vw;height:100dvh;max-height:100dvh;background:var(--bg);color:var(--text)}
dialog.ov::backdrop{background:rgba(0,0,0,.5)}
.ov .in{padding:14px;display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto}
.ov .top{display:flex;align-items:center;gap:10px}
.ov .top h2{font-size:16px;font-weight:800}
.ov .close{margin-inline-start:auto}
.ov .search{max-width:none;flex:none}
.ov .results{position:static;margin-top:8px;max-height:none;box-shadow:none}
.ov .catl a{display:flex;align-items:center;gap:12px;padding:12px;background:var(--sf);border:1px solid var(--line);border-radius:12px;margin-bottom:6px;font-weight:700;font-size:14px}
.ov .catl svg{width:20px;height:20px;color:var(--acc)}
.ov .catl span{margin-inline-start:auto;font-size:12px;color:var(--dim);font-weight:500}
.ov .quick{display:flex;flex-wrap:wrap;gap:6px}
dialog.ql{border:0;padding:0;margin:0;max-width:none;width:100vw;inset:auto 0 0 0;background:var(--sf2);color:var(--text);border-radius:24px 24px 0 0;border-top:1px solid var(--line-2);max-height:86dvh}
dialog.ql::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
dialog.ql[open]{animation:sheetup .35s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:768px){dialog.ql{width:520px;inset:auto 0 24px 0;margin:0 auto;border-radius:24px;border:1px solid var(--line-2)}}
.ql .in{padding:12px 20px 22px;overflow-y:auto;max-height:86dvh;position:relative}
.ql .grab{width:40px;height:5px;border-radius:5px;background:var(--line-2);margin:0 auto 14px}
.ql .top{display:flex;align-items:center;gap:14px}
.ql .lg{width:60px;height:60px;border-radius:18px;flex:none}
.ql .lg img{width:36px;height:36px}
.ql h2{font-size:18px;font-weight:800}
.ql .cat{font-size:12.5px;color:var(--muted)}
.ql .desc{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.85}
.ql .paused{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--amber);background:var(--amber-soft);border:1px solid rgba(242,193,78,.3);padding:8px 12px;border-radius:12px}
.ql .paused svg{width:16px;height:16px;flex:none}
.ql .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ql .acts .btn{height:auto;min-height:44px;padding:8px 12px;font-size:13px;text-align:center}
.ql .close{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;border-radius:12px;background:var(--sf3);display:grid;place-items:center}
.ql .close svg{width:18px;height:18px}
/* phone frame tokens follow theme */
.phone{--ph-frame:var(--sf3);--ph-screen:var(--bg);--ph-accent:var(--acc)}
[data-theme=light] .phone{--ph-frame:#1C232A;--ph-screen:#F3F6F5}
[data-theme=light] .ph-bar span,[data-theme=light] .ph-tabs span{background:rgba(16,24,28,.12)}
[data-theme=light] .ph-search{background:#fff;border-color:var(--line)}
[data-theme=light] .ph-tile{border:1px solid var(--line)}
@media(max-width:640px){.sh{flex-wrap:wrap}.sh span{display:none}.sh h2{font-size:17px}}

/* featured: 8 large square tiles (no duplicates, no marquee) */
.f8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:900px){.f8{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ft{background:linear-gradient(160deg,var(--sf2),var(--sf));border:1px solid var(--line-2);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:12px;min-height:150px;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s}
.ft::after{content:"";position:absolute;inset:auto -30px -40px auto;width:120px;height:120px;border-radius:50%;background:var(--acc-soft);filter:blur(30px)}
.ft:hover{border-color:var(--acc);transform:translateY(-3px)}
.ft .lg{width:52px;height:52px;border-radius:14px}
.ft .lg img{width:32px;height:32px;transition:transform .3s}
.ft:hover .lg img{transform:scale(1.12)}
.ft b{font-size:15px;line-height:1.4;position:relative}
.ft small{font-size:12px;color:var(--muted);position:relative}
.ft .n{position:absolute;top:12px;inset-inline-end:14px;font-size:11px;font-weight:800;color:var(--dim)}
/* Theme for c3-vitrin.html — palette sampled from the TradeForge reference (light, white, lavender field,
   ink navy text, violet accent) + Apple-style liquid-glass chrome (navbar, search, chips, status, modals,
   floating controls, CTAs). Content cards stay flat white and readable. Dark variant keeps the same hues. */
:root,:root[data-theme=light]{
  --bg:#FFFFFF; --sf:#FFFFFF; --sf2:#F3F7FC; --sf3:#E6EEF8; --text:#131722; --muted:rgba(46,53,73,.72); --dim:rgba(46,53,73,.52);
  --line:rgba(46,53,73,.12); --line-2:rgba(46,53,73,.2);
  --acc:#2456C7; --acc-ink:#FFFFFF; --acc-soft:rgba(36,86,199,.10); --acc-2:#183E96;
  --amber:#7A5A00; --amber-soft:rgba(255,204,102,.22); --tile:#FFFFFF; --tile-line:rgba(46,53,73,.10);
  --bar:transparent; --shadow:0 0 24px 2px rgba(0,0,0,.05); --dots:rgba(0,0,0,0);
  --field:radial-gradient(120% 90% at 50% 0%,#F4F8FE 0%,#E6EEFA 55%,#F7FAFE 100%); --field-line:rgba(36,86,199,.08); --field-soft:linear-gradient(180deg,#F7FAFE,#EEF4FC);
  --g-fill:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.52)); --g-fill-strong:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  --g-line:rgba(46,53,73,.12); --g-edge:rgba(255,255,255,.95); --g-edge-b:rgba(46,53,73,.06); --g-shadow:0 12px 32px -18px rgba(19,23,34,.28); --g-blur:blur(20px) saturate(160%);
  --focus:var(--acc); color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#131722; --sf:#1B2030; --sf2:#222839; --sf3:#2B3247; --text:#F3F4F8; --muted:rgba(243,244,248,.7); --dim:rgba(243,244,248,.48);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
  --acc:#7FA8FF; --acc-ink:#0F1220; --acc-soft:rgba(127,168,255,.16); --acc-2:#B4CBFF;
  --amber:#F2C14E; --amber-soft:rgba(242,193,78,.14); --tile:#FFFFFF; --tile-line:transparent;
  --shadow:0 30px 60px -30px rgba(0,0,0,.8);
  --field:radial-gradient(120% 90% at 50% 0%,#1E2740 0%,#161C2C 60%,#131722 100%); --field-line:rgba(127,168,255,.14); --field-soft:linear-gradient(180deg,#1A2030,#161C2A);
  --g-fill:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); --g-fill-strong:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  --g-line:rgba(255,255,255,.14); --g-edge:rgba(255,255,255,.3); --g-edge-b:rgba(255,255,255,.05); --g-shadow:0 12px 32px -14px rgba(0,0,0,.7); --g-blur:blur(22px) saturate(170%);
  color-scheme:dark;
}
body{background-image:none;background-color:var(--bg);color:var(--text)}
/* --- glass primitive --- */
.gl{background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),inset 0 -1px 0 var(--g-edge-b),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
@supports not (backdrop-filter:blur(1px)){.bar .wrap,.search .box,.results,.ico-btn,.btn-dark,.status,dialog.ql,dialog.ov .in,.tabbar .in{background:rgba(255,255,255,.95)}[data-theme=dark] .bar .wrap,[data-theme=dark] .results,[data-theme=dark] dialog.ql,[data-theme=dark] dialog.ov .in{background:rgba(27,32,48,.96)}}

/* --- floating navbar (detached, capsule) --- */
.bar{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:10px 0 0}
.bar .wrap{background:var(--g-fill);border:1px solid var(--g-line);border-radius:22px;height:60px;padding:0 10px 0 14px;max-width:calc(var(--max) - 8px);
  box-shadow:inset 0 1px 0 var(--g-edge),inset 0 -1px 0 var(--g-edge-b),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
@media(max-width:640px){.bar{padding-top:8px}.bar .wrap{height:54px;border-radius:18px;margin:0 8px;padding:0 6px 0 10px}}
.brand{color:var(--text)}
.bact .lang{border-radius:999px;color:var(--muted);border-color:var(--g-line)}
/* --- search --- */
.search .box{background:var(--g-fill);border:1px solid var(--g-line);border-radius:999px;box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.search .box:focus-within{border-color:rgba(36,86,199,.5);box-shadow:inset 0 1px 0 var(--g-edge),0 0 0 4px var(--acc-soft)}
.search input{color:var(--text)}
.results{background:var(--g-fill-strong);border:1px solid var(--g-line);border-radius:18px;box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.results a[aria-selected=true],.results a:hover{background:var(--acc-soft)}
/* --- icon buttons, theme toggle --- */
.ico-btn{border-radius:999px;background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--text)}
.ico-btn:hover{background:var(--g-fill-strong)}
/* --- buttons --- */
.btn{border-radius:999px;font-weight:700;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn-acc{background:linear-gradient(180deg,#3B6FE0,#2456C7);color:#fff;border:1px solid rgba(24,62,150,.9);
  box-shadow:inset 0 2px 1px 1px rgba(255,255,255,.15),inset 0 -2px 0 0 rgb(24,62,150),0 2px 4px rgba(0,0,0,.25)}
.btn-acc:hover{filter:none;background:linear-gradient(180deg,#4A7CE8,#2A5ED0)}
[data-theme=dark] .btn-acc{background:linear-gradient(180deg,#9DBBFF,#7FA8FF);color:#0F1220;border-color:rgba(127,168,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(24,62,150,.6)}
.btn-dark,.btn-line{background:var(--g-fill);border:1px solid var(--g-line);color:var(--text);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.btn-dark:hover,.btn-line:hover{background:var(--g-fill-strong);border-color:rgba(36,86,199,.45)}
/* --- status capsule --- */
.status{border-radius:999px;background:var(--g-fill);border:1px solid rgba(36,86,199,.22);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.status svg{color:var(--acc)}.status a{color:var(--acc)}.status p{color:var(--text)}
@media(max-width:640px){.status{border-radius:18px}}
/* --- hero as one rounded lavender field (reference layout) --- */
.hero{border-radius:28px;margin-top:14px;background:var(--field);border:1px solid var(--field-line);overflow:hidden}
.hero h1{color:var(--text)}
.hero h1 em{color:var(--acc);background:none;-webkit-text-fill-color:currentColor}
.hero .lead{color:var(--muted)}
.kicker{color:var(--acc);background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff}
[data-theme=dark] .kicker{background:var(--acc-soft);border-color:transparent;box-shadow:none}
.kicker i{background:var(--acc)}
.facts span{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff;border-radius:999px;color:var(--text)}
[data-theme=dark] .facts span{background:var(--sf2);border-color:var(--line);box-shadow:none}
.facts b{color:var(--acc)}
@media(max-width:640px){.hero{border-radius:22px}}
/* phone: white frame on the field, lavender screen */
.phone{--ph-frame:#131722;--ph-screen:#F6F5FF;--ph-accent:var(--acc);box-shadow:0 30px 60px -26px rgba(19,23,34,.45),inset 0 0 0 1px rgba(255,255,255,.12)}
[data-theme=dark] .phone{--ph-frame:#0F1220;--ph-screen:#1B2030}
.ph-bar span,.ph-tabs span{background:rgba(19,23,34,.12)}
[data-theme=dark] .ph-bar span,[data-theme=dark] .ph-tabs span{background:rgba(255,255,255,.15)}
.ph-search{background:#fff;border-color:rgba(46,53,73,.1)}
[data-theme=dark] .ph-search{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08)}
.ph-tile{border:1px solid rgba(46,53,73,.08)}
.ph-title b{color:var(--text)}
.remote button{border-radius:999px;background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--text)}
.remote button[aria-pressed=true]{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* --- content cards: flat white, soft shadow, no glass --- */
.ft{background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),inset 0 -1px 0 var(--g-edge-b),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-radius:22px}
.ft:hover{background:var(--g-fill-strong);transform:translateY(-3px)}
.ft::after{background:var(--acc-soft)}
.ft:hover{border-color:rgba(36,86,199,.45)}
.ft .n{color:var(--dim)}
[data-theme=dark] .ft{background:var(--g-fill)}
.tile{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.tile:hover{border-color:rgba(36,86,199,.45);background:var(--sf2)}
[data-theme=dark] .tile{background:var(--sf)}
.lg{border:1px solid var(--tile-line)}
.stories .c{background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.stories a:hover .c{background:var(--g-fill-strong)}
.sh a{color:var(--acc)}
.tg,.iran,.how li,.glist a,details{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
[data-theme=dark] .tg,[data-theme=dark] .iran,[data-theme=dark] .how li,[data-theme=dark] .glist a,[data-theme=dark] details{background:var(--sf)}
.tg .cd{background:var(--sf2);border-color:var(--line)}
.how i{background:var(--acc);color:#fff}.how li:nth-child(2) i{background:var(--sf3);color:var(--text)}
.fest{background:var(--sf2);border-color:var(--line)}.fest .badge{background:var(--acc);color:#fff}.fest a{color:var(--acc)}
.glist .tag{color:var(--acc);background:var(--acc-soft)}
details[open] summary svg{color:var(--acc)}
.banks a{border:1px solid var(--line)}
footer{border-top:1px solid var(--line)}
.social a{background:#fff;border-color:var(--line)}
[data-theme=dark] .social a{background:var(--sf2)}
/* --- modals + sheets --- */
dialog.ql,dialog.ov .in{background:var(--g-fill-strong);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--text)}
dialog.ql{border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow);border-radius:28px 28px 0 0}
@media(min-width:768px){dialog.ql{border-radius:28px}}
dialog.ql::backdrop,dialog.ov::backdrop{background:rgba(19,23,34,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-theme=dark] dialog.ql::backdrop,[data-theme=dark] dialog.ov::backdrop{background:rgba(0,0,0,.5)}
dialog.ov{background:transparent}
.ql .lg{border:1px solid var(--tile-line)}
.ql .paused{border-radius:14px;color:var(--acc);background:var(--acc-soft);border-color:rgba(36,86,199,.25)}
.ql .paused svg{color:var(--acc)}
.ql .close,.ov .close{border-radius:999px;background:var(--g-fill-strong);border:1px solid var(--g-line)}
.ov .catl a{border-radius:14px;background:var(--g-fill);border:1px solid var(--g-line)}
.ov .catl svg{color:var(--acc)}
.ov .quick .btn{color:var(--text)}
/* --- floating dock (mobile tab bar) --- */
.tabbar{background:transparent;border:0;padding:0 10px calc(10px + env(safe-area-inset-bottom));backdrop-filter:none;-webkit-backdrop-filter:none}
.tabbar .in{background:var(--g-fill-strong);border:1px solid var(--g-line);border-radius:22px;box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);height:60px}
.tabbar a,.tabbar button{color:var(--dim)}.tabbar .on{color:var(--acc)}.tabbar .on::before{display:none}
/* floating controls (desktop) */
.float{position:fixed;inset-inline-end:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:8px}
.float .ico-btn{width:44px;height:44px}
.float .top-btn{opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .25s,transform .25s}
.float .top-btn.on{opacity:1;pointer-events:auto;transform:none}
@media(max-width:640px){.float{display:none}}
.demo-tag{inset-inline-end:auto;inset-inline-start:12px}
@media(prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* ===== site-wide liquid glass (client request): every section and card shares one material ===== */
body{background:radial-gradient(60% 40% at 15% 10%,rgba(36,86,199,.07),transparent 60%),radial-gradient(50% 35% at 85% 30%,rgba(36,86,199,.06),transparent 60%),radial-gradient(60% 40% at 50% 90%,rgba(36,86,199,.05),transparent 60%),linear-gradient(180deg,#FFFFFF,#F3F7FC)}
[data-theme=dark] body{background:radial-gradient(60% 40% at 15% 10%,rgba(127,168,255,.10),transparent 60%),radial-gradient(50% 35% at 85% 30%,rgba(127,168,255,.08),transparent 60%),linear-gradient(180deg,#131722,#0F1320)}
.field{background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),inset 0 -1px 0 var(--g-edge-b),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
#services.field{margin-top:18px;padding:6px 18px 14px}
@media(max-width:640px){#services.field{padding:4px 12px 10px}}
.tile,.tg,.iran,.how li,.glist a,details,.tg .cd,.fest,footer .social a{background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
[data-theme=dark] .tile,[data-theme=dark] .tg,[data-theme=dark] .iran,[data-theme=dark] .how li,[data-theme=dark] .glist a,[data-theme=dark] details,[data-theme=dark] .tg .cd,[data-theme=dark] .fest{background:var(--g-fill)}
.tile{border-radius:18px}.tile:hover{background:var(--g-fill-strong);border-color:rgba(36,86,199,.35)}
.tg .cd,.fest{box-shadow:inset 0 1px 0 var(--g-edge)}
.tg,.iran{border-radius:24px}
.how li,.glist a,details{border-radius:16px}
.banks a{background:rgba(255,255,255,.85);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 #fff}
footer{margin-top:34px;background:var(--g-fill);border:1px solid var(--g-line);border-radius:24px 24px 0 0;box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
footer .wrap{padding-top:4px}
.sh{padding:0 2px}
/* Secondary-page components for the approved design (theme-forge + liquid glass). Loaded after app-base + theme-forge. */
.page{padding-top:12px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);margin:10px 4px 0}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--acc)}
.crumbs svg{width:13px;height:13px;opacity:.6}
.crumbs b{color:var(--text);font-weight:600}
/* page head field */
.phead{margin-top:12px;border-radius:24px;padding:26px 28px;background:var(--field);border:1px solid var(--field-line);display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.phead .lg{width:72px;height:72px;border-radius:20px;background:#fff;border:1px solid rgba(46,53,73,.1);display:grid;place-items:center;box-shadow:0 12px 28px -18px rgba(19,23,34,.35)}
.phead .lg img{width:44px;height:44px}
.phead .lg svg{width:34px;height:34px}
.phead h1{font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.45;letter-spacing:-.01em;text-wrap:balance}
.phead h1 em{font-style:normal;color:var(--acc)}
.phead .sub{margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.8;max-width:70ch}
.phead .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--text);background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.chip svg{width:14px;height:14px;color:var(--acc)}
.chip.acc{background:var(--acc);color:#fff;border-color:var(--acc)}
.chip.note{color:var(--muted)}
@media(max-width:640px){.phead{grid-template-columns:1fr;padding:18px 16px;border-radius:20px}.phead .lg{width:56px;height:56px;border-radius:16px}.phead .lg img{width:34px;height:34px}}
/* two-column body */
.body2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;margin-top:18px;align-items:start}
@media(max-width:960px){.body2{grid-template-columns:1fr}}
.aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
@media(max-width:960px){.aside{position:static;order:-1}}
/* glass card */
.card{border-radius:20px;padding:18px;background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),inset 0 -1px 0 var(--g-edge-b),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.card h2,.card h3{font-size:16px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.card h2 svg,.card h3 svg{width:18px;height:18px;color:var(--acc)}
.card .muted{font-size:13px;color:var(--muted);line-height:1.8}
/* plans */
.plans{display:grid;gap:8px}
.plan{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border-radius:14px;background:var(--sf);border:1px solid var(--line);position:relative}
[data-theme=dark] .plan{background:rgba(255,255,255,.04)}
.plan b{font-size:13.5px;font-weight:600;display:block}
.plan .usd{font-size:11.5px;color:var(--dim);direction:ltr;display:block;text-align:right}
.plan .t{font-size:13.5px;font-weight:800;color:var(--acc);white-space:nowrap}
.plan .pop{position:absolute;top:-8px;inset-inline-start:12px;font-size:10.5px;font-weight:700;color:#fff;background:var(--acc);padding:1px 8px;border-radius:999px}
.paused{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:14px;background:var(--acc-soft);border:1px solid rgba(36,86,199,.2);font-size:12.5px;color:var(--text);line-height:1.7}
.paused svg{width:16px;height:16px;color:var(--acc);flex:none;margin-top:3px}
.acts{display:grid;gap:8px;margin-top:12px}
.acts .btn{width:100%}
/* prose from real content */
.prose{display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.95;color:var(--text)}
.prose h2{font-size:18px;font-weight:800;margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line);color:var(--text)}
.prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose h3{font-size:15px;font-weight:700;margin:10px 0 2px;color:var(--text)}
.prose p{color:var(--muted)}
.prose ul{margin:2px 0 6px;padding-inline-start:18px;list-style:disc;color:var(--muted)}
.prose li{margin:2px 0}
.prose bdi{unicode-bidi:isolate}
/* service grid (category page) */
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:900px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sgrid{grid-template-columns:1fr}}
.sc{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);transition:transform .2s,border-color .2s}
.sc:hover{transform:translateY(-3px);border-color:rgba(36,86,199,.4)}
.sc .top{display:flex;align-items:center;gap:12px}
.sc .lg{width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid rgba(46,53,73,.1);display:grid;place-items:center;flex:none}
.sc .lg img{width:28px;height:28px}
.sc b{font-size:15px;font-weight:700;display:block}
.sc small{font-size:12px;color:var(--muted);display:block;direction:ltr;text-align:right}
.sc p{font-size:13px;color:var(--muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.sc .foot span{font-size:12px;color:var(--dim)}
.sc .foot b{font-size:12.5px;color:var(--acc);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.sc .foot b svg{width:14px;height:14px}
.flag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);border:1px dashed var(--line-2);padding:2px 8px;border-radius:999px}
/* tool bar (category filter/search) */
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 12px}
.tools .search{max-width:360px;flex:1 1 240px}
.tools .chips{display:flex;flex-wrap:wrap;gap:6px}
.tools .chip[aria-pressed=true]{background:var(--acc);color:#fff;border-color:var(--acc)}
/* pricing table */
.ptable{display:grid;gap:8px}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.prow:hover{border-color:rgba(36,86,199,.4)}
.prow .lg{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid rgba(46,53,73,.1);display:grid;place-items:center}
.prow .lg img{width:22px;height:22px}
.prow b{font-size:14px;font-weight:600;display:block}
.prow small{font-size:12px;color:var(--muted)}
.prow .n{font-size:12px;color:var(--dim);white-space:nowrap}
.prow .from{font-size:13.5px;font-weight:800;color:var(--acc);white-space:nowrap;direction:ltr}
.prow .from i{font-style:normal;font-size:11px;color:var(--dim);font-weight:500;display:block;text-align:right}
@media(max-width:560px){.prow{grid-template-columns:auto minmax(0,1fr) auto}.prow .n{display:none}}
/* steps */
.steps{counter-reset:s;display:grid;gap:8px}
.step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:16px;background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.step i{width:34px;height:34px;border-radius:12px;background:var(--acc);color:#fff;font:800 14px/34px Vazirmatn;text-align:center;font-style:normal}
.step b{font-size:14.5px;font-weight:700;display:block;line-height:1.6}
.step span{font-size:13px;color:var(--muted);line-height:1.7}
.step a{color:var(--acc);font-weight:600;font-size:13px}
/* support decision table */
.dt{display:grid;gap:8px}
.dtr{display:grid;grid-template-columns:1.1fr .8fr 1.3fr 1fr;gap:12px;padding:12px 14px;border-radius:16px;background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);font-size:13px;line-height:1.7}
.dtr div b{display:block;font-size:11px;font-weight:700;color:var(--dim);margin-bottom:2px}
.dtr .k{color:var(--acc);font-weight:700}
@media(max-width:800px){.dtr{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.dtr{grid-template-columns:1fr}}
/* two path cards */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:640px){.paths{grid-template-columns:1fr}}
.pathc{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;background:var(--g-fill);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.pathc .ic{width:40px;height:40px;border-radius:12px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center}
.pathc .ic svg{width:22px;height:22px}
.pathc b{font-size:16px;font-weight:800}
.pathc p{font-size:13.5px;color:var(--muted);line-height:1.8}
.pathc .btn{align-self:flex-start;margin-top:4px}
/* forms (auth) */
.auth{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;margin-top:18px;align-items:start}
@media(max-width:860px){.auth{grid-template-columns:1fr}}
.form{display:grid;gap:12px}
.ff{display:grid;gap:6px}
.ff label{font-size:13px;font-weight:600}
.ff input{height:46px;border-radius:14px;border:1px solid var(--g-line);background:var(--g-fill);padding:0 14px;font-size:14px;color:var(--text);box-shadow:inset 0 1px 0 var(--g-edge);outline:0}
.ff input:focus{border-color:rgba(36,86,199,.5);box-shadow:inset 0 1px 0 var(--g-edge),0 0 0 4px var(--acc-soft)}
.ff small{font-size:12px;color:var(--dim)}
.or{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.hint{font-size:12.5px;color:var(--dim);line-height:1.7}
/* related tiles */
.rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:800px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* demo notes */
.dnote{margin:14px 0 0;font-size:12px;color:var(--dim);display:flex;gap:8px;align-items:center}
.dnote svg{width:14px;height:14px;flex:none}
.err{text-align:center;padding:60px 20px}
.err .big{font-size:64px;font-weight:900;color:var(--acc);line-height:1}
.err p{color:var(--muted);margin:10px 0 18px}
.flag svg,.dnote svg,.chip svg,.paused svg{width:14px;height:14px;flex:none}
.card svg.i,.prose svg{width:1em;height:1em}
.prow .from,.plan .usd{font-feature-settings:normal;font-family:system-ui,'Vazirmatn',sans-serif}

/* ===== home (welcome.blade.php) ===== */
/* ---- C3 unique: showcase hero with interactive phone + 8 featured tiles ---- */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center;padding:36px 32px 30px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--acc);background:var(--acc-soft);padding:5px 12px;border-radius:999px}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--acc);font-style:normal}
.hero h1{margin-top:14px;font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.35;letter-spacing:-.01em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lead{margin-top:12px;color:var(--muted);font-size:15.5px;max-width:52ch;line-height:1.9;text-wrap:pretty}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.facts span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;background:var(--sf);border:1px solid var(--line);padding:7px 12px;border-radius:12px}
.facts b{font-size:16px;font-weight:900;color:var(--acc)}
.hero .actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
/* interactive phone */
.showcase{display:flex;flex-direction:column;align-items:center;gap:14px}
.phone{transform:rotate(-4deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.showcase:hover .phone{transform:rotate(0)}
.ph-title{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted);padding:0 4px 4px}
.ph-title b{color:var(--text);font-size:13px}
.ph-title i{margin-inline-start:auto;height:3px;flex:0 0 90px;border-radius:3px;background:var(--line-2);overflow:hidden;font-style:normal;position:relative}
.ph-title i::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:right;animation:prog 3.2s linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.remote{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.remote button{height:34px;padding:0 12px;border-radius:999px;background:var(--sf);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:.2s}
.remote button svg{width:14px;height:14px}
.remote button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.ph-grid .ph-tile{cursor:pointer}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:20px;padding:26px 18px 22px}.showcase{margin-top:4px}.phone{width:200px;transform:none}.phone-screen{min-height:330px}}
.featured{margin-top:26px}
.stories{margin-top:18px}
.field{border-radius:24px;padding:18px 18px 20px;background:var(--field-soft);border:1px solid var(--field-line)}
@media(max-width:640px){.field{padding:12px 12px 14px;border-radius:18px}}

/* ===== legacy shim: pages that still use the 2025 inline styles/classes pick up the new palette ===== */
:root,:root[data-theme=light]{--gold:#2456C7;--gold-l:#4A7CE8;--gold-d:#183E96;--gold-bg:#EEF3FC;--crim:#183E96;--crim-d:#131722;--card:#FFFFFF;--brd:rgba(46,53,73,.12);--txt:#131722;--mut:rgba(46,53,73,.72);--green:#219653;--green-bg:rgba(33,150,83,.08);--dim:#5B6275;--bg:#FFFFFF}
:root[data-theme=dark]{--gold:#7FA8FF;--gold-l:#9DBBFF;--gold-d:#B4CBFF;--gold-bg:rgba(127,168,255,.12);--crim:#B4CBFF;--crim-d:#F3F4F8;--card:#1B2030;--brd:rgba(255,255,255,.1);--txt:#F3F4F8;--mut:rgba(243,244,248,.7);--dim:rgba(243,244,248,.6);--bg:#131722;--green-bg:rgba(33,150,83,.16)}
html{background:var(--bg)!important}
body{font-family:'Vazirmatn',system-ui,sans-serif}
.cd,.cat-card,.support-card,.support-step,.category-hero,.category-stat,.category-compare-card,.access-decision-card,.access-decision-fact,.guide-action-card,.guide-action-fact,.notfound-card,.notfound-panel,.notfound-hint,.server-error-card,.pricing-card,.pricing-hero,.pricing-stat,.hero-path-item,.purchase-signal-strip,.checkout-path-card,.product-visual-proof,.stars-package-panel,.stars-package-card,.plan-selector,.sp-tabs,.sp-tab-content,.related-card{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--text)!important;border-radius:18px}
.cd:hover,.pricing-card:hover,.related-card:hover{border-color:rgba(36,86,199,.4)!important;transform:translateY(-2px)}
.btn-g{background:linear-gradient(180deg,#3B6FE0,#2456C7)!important;color:#fff!important;border:1px solid rgba(24,62,150,.9)!important;border-radius:999px!important;box-shadow:inset 0 2px 1px 1px rgba(255,255,255,.15),inset 0 -2px 0 0 rgb(24,62,150),0 2px 4px rgba(0,0,0,.25)!important;transform:none!important}
.btn-o{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;color:var(--text)!important;border-radius:999px!important;box-shadow:inset 0 1px 0 var(--g-edge)!important}
.btn-o:hover{border-color:rgba(36,86,199,.45)!important;color:var(--text)!important}
.section-badge,.pricing-pill,.pricing-kicker,.product-category-tag,.product-stat-pill,.product-proof-pill,.purchase-signal-badge,.checkout-path-badge,.ivpn-status__pill,.stars-promo-badge,.pay-chip{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;color:var(--muted)!important;border-radius:999px!important}
.plan-option{background:var(--sf)!important;border:1px solid var(--line)!important;border-radius:14px!important}
.plan-option.selected{border-color:var(--acc)!important;background:var(--acc-soft)!important}
.plan-radio-dot{background:var(--acc)!important}
.popular-flag{background:var(--acc)!important;color:#fff!important}
.faq-item{border-color:var(--line)!important}
.separator{border-color:var(--line)!important;opacity:.6}
[style*="color:var(--crim-d)"]{color:var(--text)!important}
[style*="background:var(--crim-d)"]{background:var(--sf2)!important;color:var(--text)!important}
.footer-gradient{background:var(--sf)!important}

/* ===== service page (service-show / service-hub / private-access content): liquid-glass surfaces over the existing markup ===== */
.sp-breadcrumb{max-width:none;padding:10px 0;font-size:13px;color:var(--muted)}
.sp-breadcrumb a:hover{color:var(--acc)!important}
.sp-container{max-width:none;padding:0 0 40px}
.product-hero,.buy-box,.service-info-card,.review-card,.review-summary,.feature-item,.websites-category,.private-access-brief,.stars-promo-shell,.stars-package-panel,.renewal-picker,.content-closing-card,.ivpn-status,.hero-quick-buy,.fee-notice-banner,.checkout-disabled-note,.stars-buy-summary,.stars-custom-inline,.stars-smart,.mobile-stars-custom,.service-inputs{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--text)!important;border-radius:22px!important}
.product-hero{overflow:hidden}
.product-hero-banner{background:linear-gradient(135deg,rgba(36,86,199,.10),rgba(36,86,199,.03) 55%,transparent)!important;border-bottom:1px solid var(--g-line)!important}
.product-icon-box{background:#fff!important;border:1px solid var(--g-line)!important;border-radius:18px!important;box-shadow:var(--g-shadow)!important}
.product-title,.section-heading,.buy-box-header,.review-name,.plan-name,.faq-trigger,.related-card-name,.stars-package-title,.checkout-path-title,.purchase-signal-title{color:var(--text)!important}
.product-subtitle,.desc-text,.buy-box-label,.review-body,.review-date,.plan-gb,.related-card-desc,.purchase-signal-label,.checkout-path-body,.faq-answer{color:var(--muted)!important}
.sp-tabs-nav{display:flex;gap:6px;padding:6px;background:var(--g-fill)!important;border:1px solid var(--g-line)!important;border-radius:999px!important;box-shadow:inset 0 1px 0 var(--g-edge)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);overflow-x:auto;scrollbar-width:none}
.sp-tabs-nav::-webkit-scrollbar{display:none}
.sp-tab-btn{flex:1 0 auto;border:0!important;border-radius:999px!important;padding:10px 16px!important;background:transparent!important;color:var(--muted)!important;font-weight:700;white-space:nowrap}
.sp-tab-btn.active{background:linear-gradient(180deg,#3B6FE0,#2456C7)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 6px rgba(36,86,199,.3)!important}
.sp-tab-content{margin-top:14px;padding:clamp(16px,3vw,26px)}
.buy-box-wrapper{position:sticky;top:84px}
.plan-option{padding:12px 14px!important;transition:border-color .2s,background .2s}
.plan-option:hover{border-color:rgba(36,86,199,.4)!important}
.plan-radio{border-color:var(--line)!important}
.plan-option.selected .plan-radio{border-color:var(--acc)!important}
.price-main,.plan-price,.stars-package-price,.hero-cta-price,.renewal-price,.related-card-price{color:var(--acc)!important;font-feature-settings:normal}
.btn-buy,.hero-cta-button,.content-closing-cta,.sp-mobile-sticky-cta .btn-g{background:linear-gradient(180deg,#3B6FE0,#2456C7)!important;color:#fff!important;border:1px solid rgba(24,62,150,.9)!important;border-radius:999px!important;box-shadow:inset 0 2px 1px 1px rgba(255,255,255,.15),inset 0 -2px 0 0 rgb(24,62,150),0 2px 4px rgba(0,0,0,.25)!important}
.btn-buy[disabled],.btn-buy.disabled,.btn-buy[aria-disabled=true]{opacity:.55;filter:grayscale(.3);cursor:not-allowed}
.faq-item{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;border-radius:16px!important;margin-bottom:10px;padding:0 6px;box-shadow:inset 0 1px 0 var(--g-edge)}
.faq-trigger{padding:14px 10px!important;font-weight:700}
.faq-answer{padding:0 10px 14px!important}
.related-section{padding:32px 0}
.related-card{padding:18px!important}
.related-card-icon{background:#fff!important;border:1px solid var(--g-line)!important;border-radius:14px!important}
.custom-service-content{color:var(--text)}
.custom-service-content h2,.custom-service-content h3{color:var(--text)!important}
.custom-service-content p,.custom-service-content li{color:var(--muted)!important;line-height:1.9}
.custom-service-content a{color:var(--acc)!important}
section[style*="border-top:1px dashed"]{border-top:1px solid var(--g-line)!important;padding-left:0!important;padding-right:0!important;max-width:none!important}
.wcat-site,.stars-package-card{background:var(--sf)!important;border:1px solid var(--line)!important;border-radius:14px!important}
.stars-package-card.selected,.stars-package-card.active{border-color:var(--acc)!important;background:var(--acc-soft)!important}
.sp-mobile-sticky-cta{background:var(--g-fill-strong,var(--g-fill))!important;border-top:1px solid var(--g-line)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);bottom:64px!important}
.review-avatar{background:var(--acc-soft)!important;color:var(--acc)!important}
.review-bar-fill{background:var(--acc)!important}
.rating-stars,.stars-icon-glyph{color:#F2B705!important}
.checkout-path-card[data-tone="paused"]{background:var(--g-fill)!important;border-color:rgba(36,86,199,.25)!important}
.checkout-path-step-index{background:var(--acc)!important;color:#fff!important}
.trust-icon,.feature-icon,.section-heading-icon{color:var(--acc)!important}
.anim-in{opacity:1!important;transform:none!important}
/* generic helpers used by inner pages */
.actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.err .actions{justify-content:center}
.err[style*="text-align:start"] .actions{justify-content:flex-start}
.phead .actions{margin-top:14px}
.plan.card{position:relative}
@media (max-width:720px){.paths[style*="repeat(3"]{grid-template-columns:1fr!important}.dt[style*="auto-fill"]{grid-template-columns:1fr!important}}
/* service hub (parent service with sub-plans) */
.hub-hero,.hub-grid-section{max-width:none;padding-left:0;padding-right:0}
.hub-hero-inner{background:var(--field)!important;border:1px solid var(--field-line)!important;border-radius:24px!important;text-align:start!important;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.hub-hero-inner>*{margin-inline:0!important}
.hub-icon-box{background:#fff!important;border:1px solid var(--g-line)!important;border-radius:20px!important;box-shadow:var(--g-shadow)!important;grid-row:span 3}
.hub-title{color:var(--text)!important}
.hub-subtitle{color:var(--muted)!important}
.hub-cat-tag{display:inline-flex;background:var(--acc-soft)!important;color:var(--acc)!important;border:0!important;border-radius:999px!important;font-weight:700}
.child-card{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-radius:20px!important}
.child-card:hover{border-color:rgba(36,86,199,.4)!important;transform:translateY(-2px)}
.child-card-icon{background:#fff!important;border:1px solid var(--g-line)!important;border-radius:14px!important}
.child-card-title{color:var(--text)!important}.child-card-desc{color:var(--muted)!important}
.child-card-price{color:var(--acc)!important;font-feature-settings:normal}
.child-card-btn{background:linear-gradient(180deg,#3B6FE0,#2456C7)!important;color:#fff!important;border:1px solid rgba(24,62,150,.9)!important;border-radius:999px!important;box-shadow:inset 0 2px 1px 1px rgba(255,255,255,.15),inset 0 -2px 0 0 rgb(24,62,150)!important}
@media (max-width:640px){.hub-hero-inner{grid-template-columns:1fr}.hub-icon-box{grid-row:auto}}
/* banners (rate strip for IR visitors when sales are open; points festival) */
.usdt-rate-banner{background:var(--g-fill-strong)!important;border-top:1px solid var(--g-line)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--text)!important;box-shadow:0 -8px 30px -20px rgba(19,23,34,.35)}
.usdt-rate-banner__label,.usdt-rate-banner__note{color:var(--muted)!important}
.usdt-rate-banner__value{color:var(--acc)!important;font-feature-settings:normal}
@media (max-width:640px){.usdt-rate-banner{bottom:calc(58px + env(safe-area-inset-bottom,0px))!important}}
.point-festival-banner{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;border-radius:20px!important;box-shadow:inset 0 1px 0 var(--g-edge),var(--g-shadow)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--text)!important;margin-top:12px}
.point-festival-banner__badge{background:var(--acc-soft)!important;color:var(--acc)!important;border-radius:999px!important}
.point-festival-banner__copy{color:var(--muted)!important}
.point-festival-banner__cta{background:linear-gradient(180deg,#3B6FE0,#2456C7)!important;color:#fff!important;border-radius:999px!important;border:1px solid rgba(24,62,150,.9)!important}
/* dark: keep the showcase phone readable against the navy field */
[data-theme=dark] .phone{--ph-frame:#2A3145;--ph-screen:#151A28;box-shadow:0 30px 60px -26px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px rgba(127,168,255,.15)}
[data-theme=dark] .ph-tile{background:#fff}
.ph-title i.paused::after{animation-play-state:paused}
.ph-title i[hidden]{display:none}
/* ===== polish round 3: featured numbers, aligned subtitles, phone crossfade ===== */
.ft .n{top:10px;inset-inline-start:12px;inset-inline-end:auto;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font:800 12px/1 'Vazirmatn',system-ui,sans-serif;font-feature-settings:normal;color:var(--acc);background:var(--acc-soft);border:1px solid rgba(36,86,199,.18)}
[data-theme=dark] .ft .n{color:#BFD3FF;background:rgba(127,168,255,.16);border-color:rgba(127,168,255,.25)}
.ft b,.tile b{font-family:'Vazirmatn',system-ui,sans-serif;text-align:start}
.ft small,.tile small,.sc small,.prow small{font-family:'Vazirmatn',system-ui,sans-serif;font-size:11.5px;line-height:1.5;color:var(--dim);direction:inherit;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;unicode-bidi:plaintext;font-feature-settings:normal}
.tile b{min-height:auto;line-height:1.5}
.tile{gap:8px}
.tile .lg,.ft .lg{margin-bottom:2px}
/* phone: crossfade between category screens instead of a hard rebuild */
#phone{position:relative}
.phone-screen{position:relative}
.ph-grid{transition:opacity .28s ease,transform .28s ease}
.phone.switching .ph-grid{opacity:0;transform:translateY(6px) scale(.98)}
.phone .ph-grid .ph-tile{animation-duration:.42s}
.ph-title{padding-bottom:6px}
.ph-title i{display:none}
/* ===== round 4 ===== */
/* featured tiles: logo + text centred, number badge stays in the corner */
.ft{align-items:center;text-align:center;padding:22px 14px 16px;gap:8px}
.ft .lg{margin:4px auto 2px}
.ft b,.ft small{text-align:center;width:100%}
.ft .n{z-index:2}
/* plan selector: one tidy row per plan (radio | name | price) */
.plan-option{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px!important;margin-bottom:8px!important}
.plan-left{display:contents!important}
.plan-left>div:last-child{min-width:0}
.plan-name{font-size:13px!important;line-height:1.55;font-weight:700!important;overflow-wrap:anywhere}
.plan-price,.plan-option .plan-price{font-size:14.5px!important;white-space:nowrap;font-feature-settings:normal;justify-self:end}
.plan-option .popular-flag{left:auto!important;right:14px!important;transform:none!important;top:-9px!important}
[dir=rtl] .plan-option .popular-flag{right:auto!important;left:14px!important}
.plan-selector{max-height:none}
/* custom long-form content (117 per-service Tailwind templates): normalise boxes, spacing and type to the glass system, keep brand accents */
.custom-service-content{font-size:15px;line-height:2}
.custom-service-content>*+*{margin-top:22px}
.custom-service-content [class*="rounded-"]{border-radius:20px!important}
.custom-service-content [class*="rounded-full"]{border-radius:999px!important}
.custom-service-content [class~="bg-white"],.custom-service-content [class~="bg-zinc-50"],.custom-service-content [class~="bg-zinc-100"],.custom-service-content [class~="bg-stone-50"],.custom-service-content [class~="bg-slate-50"],.custom-service-content [class~="bg-gray-50"],.custom-service-content [class~="bg-neutral-50"]{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;box-shadow:inset 0 1px 0 var(--g-edge)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.custom-service-content [class~="bg-zinc-950"],.custom-service-content [class~="bg-zinc-900"],.custom-service-content [class~="from-zinc-950"],.custom-service-content [class~="from-slate-950"],.custom-service-content [class~="from-gray-950"],.custom-service-content [class~="from-neutral-950"],.custom-service-content [class~="from-stone-950"],.custom-service-content [class~="bg-black"]{background:linear-gradient(135deg,#131722,#1B2030 60%,#1E3A8A)!important;color:#F3F4F8!important;border:1px solid rgba(255,255,255,.08)!important}
.custom-service-content [class*="border-zinc"],.custom-service-content [class*="border-stone"],.custom-service-content [class*="border-slate"],.custom-service-content [class*="border-gray"]{border-color:var(--g-line)!important}
.custom-service-content [class*="text-zinc-9"],.custom-service-content [class*="text-zinc-8"],.custom-service-content [class*="text-stone-9"],.custom-service-content [class*="text-slate-9"],.custom-service-content [class*="text-gray-9"]{color:var(--text)!important}
.custom-service-content [class*="text-zinc-6"],.custom-service-content [class*="text-zinc-7"],.custom-service-content [class*="text-zinc-5"],.custom-service-content [class*="text-stone-6"],.custom-service-content [class*="text-slate-6"],.custom-service-content [class*="text-gray-6"]{color:var(--muted)!important}
.custom-service-content [class*="shadow-"]{box-shadow:var(--g-shadow)!important}
.custom-service-content h2{font-size:22px!important;font-weight:900!important;line-height:1.5;margin:0 0 12px!important;padding:0!important;border:0!important;color:var(--text)!important}
.custom-service-content h3{font-size:17px!important;font-weight:800!important;margin:0 0 8px!important;color:var(--text)!important}
.custom-service-content p{margin:0 0 10px!important}
.custom-service-content img,.custom-service-content svg[width]{max-width:100%;height:auto;border-radius:18px}
.custom-service-content table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.custom-service-content table th,.custom-service-content table td{padding:12px 14px!important;border-bottom:1px solid var(--g-line)!important;text-align:start!important}
.custom-service-content table thead th,.custom-service-content table th{background:var(--acc-soft)!important;color:var(--text)!important;font-weight:800}
.custom-service-content [class*="overflow-x"]{border-radius:20px;border:1px solid var(--g-line)}
.custom-service-content details{background:var(--g-fill)!important;border:1px solid var(--g-line)!important;border-radius:16px!important;padding:6px 14px!important;margin-bottom:8px!important}
.custom-service-content details summary{list-style:none;cursor:pointer;padding:8px 0!important;font-weight:800}
.custom-service-content details summary::-webkit-details-marker{display:none}
.custom-service-content details[open] summary{border-bottom:1px solid var(--g-line);margin-bottom:8px}
.custom-service-content .grid{gap:14px!important}
.custom-service-content [class*="md:grid-cols"]{align-items:stretch}
.custom-service-content [class*="text-3xl"],.custom-service-content [class*="text-4xl"]{font-size:26px!important;line-height:1.4!important}
.custom-service-content [class*="text-2xl"]{font-size:21px!important;line-height:1.45!important}
.custom-service-content [class*="text-xl"]{font-size:17px!important;line-height:1.55!important}
.custom-service-content [class*="p-6"],.custom-service-content [class*="p-5"],.custom-service-content [class*="md:p-9"]{padding:clamp(16px,2.4vw,26px)!important}
section[style*="border-top:1px dashed"] .custom-service-content,section[style*="border-top:1px solid"] .custom-service-content{max-width:1040px;margin:0 auto}
[data-theme=dark] .custom-service-content [class~="bg-white"],[data-theme=dark] .custom-service-content [class~="bg-zinc-50"]{background:var(--g-fill)!important}
/* custom content: inside dark hero/containers keep everything light-on-dark (undo the light-card remaps there) */
.custom-service-content :is([class~="bg-zinc-950"],[class~="bg-zinc-900"],[class~="from-zinc-950"],[class~="from-slate-950"],[class~="from-gray-950"],[class~="from-neutral-950"],[class~="from-stone-950"],[class~="bg-black"]) :is([class*="bg-white"],[class~="bg-zinc-50"],[class~="bg-zinc-100"],[class~="bg-zinc-900"],[class~="bg-zinc-950"],[class~="bg-stone-50"],[class~="bg-slate-50"],[class~="bg-gray-50"]){background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;color:#F3F4F8!important}
.custom-service-content :is([class~="bg-zinc-950"],[class~="bg-zinc-900"],[class~="from-zinc-950"],[class~="from-slate-950"],[class~="from-gray-950"],[class~="from-neutral-950"],[class~="from-stone-950"],[class~="bg-black"]) :is(h1,h2,h3,h4,p,li,span,div,td,th,strong,b){color:#F3F4F8!important}
.custom-service-content :is([class~="bg-zinc-950"],[class~="bg-zinc-900"],[class~="from-zinc-950"],[class~="from-slate-950"],[class~="from-gray-950"],[class~="from-neutral-950"],[class~="from-stone-950"],[class~="bg-black"]) :is([class*="text-zinc-6"],[class*="text-zinc-5"],[class*="text-zinc-4"],[class*="text-zinc-3"],[class*="text-stone-"],[class*="text-slate-"],[class*="text-gray-"],[class*="text-white/"]){color:rgba(243,244,248,.78)!important}
.custom-service-content :is([class~="bg-zinc-950"],[class~="bg-zinc-900"],[class~="from-zinc-950"],[class~="bg-black"]) :is([class*="text-emerald"],[class*="text-lime"],[class*="text-amber"],[class*="text-sky"],[class*="text-rose"],[class*="text-violet"],[class*="text-indigo"],[class*="text-blue"]){color:#BFD3FF!important}
.custom-service-content :is([class~="bg-zinc-950"],[class~="bg-zinc-900"],[class~="from-zinc-950"],[class~="bg-black"]) [class*="border-"]{border-color:rgba(255,255,255,.14)!important}
/* light cards nested inside light cards: flat inner surface instead of stacked glass */
.custom-service-content :is([class~="bg-zinc-50"],[class~="bg-white"]) :is([class~="bg-white"],[class~="bg-zinc-50"]){background:var(--sf)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important}
/* phone bottom bars = story-style progress: the active bar fills over one cycle, then the next one */
.ph-tabs{gap:6px;justify-content:center}
.ph-tabs span{position:relative;overflow:hidden;width:26px;height:6px;background:rgba(19,23,34,.12)!important}
[data-theme=dark] .ph-tabs span{background:rgba(255,255,255,.16)!important}
.ph-tabs span::after{content:"";position:absolute;inset:0;border-radius:6px;background:var(--acc);transform:scaleX(0);transform-origin:right}
[dir=ltr] .ph-tabs span::after{transform-origin:left}
.ph-tabs span.on::after{animation:prog var(--cycle,3.2s) linear forwards}
.phone.ph-hold .ph-tabs span.on::after{animation-play-state:paused}
html.qa-still .ph-tabs span.on::after,.ph-tabs.static span.on::after{animation:none;transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.ph-tabs span.on::after{animation:none;transform:scaleX(1)}}
/* phone: no transform transition on hover (Chrome re-rasterises transformed layers inside backdrop-filter parents → blurry/"resized" frame); static tilt, own compositing layer */
.phone{transform:rotate(-4deg) translateZ(0);transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform;backface-visibility:hidden}
.showcase:hover .phone{transform:rotate(0) translateZ(0)}
@media(max-width:900px){.phone,.showcase:hover .phone{transform:none!important}}
.phone-screen{overflow:hidden;transform:translateZ(0)}
.ph-grid{will-change:opacity,transform}