/* ============================================================
   "Toshkent-AERO" IBK — Bojxona qoidalari sayti
   Design system: premium, neutral state-service
   ============================================================ */

:root{
  /* Brand */
  --navy:        #00235E;
  --navy-700:    #001C4C;
  --navy-600:    #062E72;
  --navy-500:    #0A3E92;
  --navy-tint:   #EAF0FA;
  --navy-tint-2: #F4F7FC;

  /* Ink + neutrals (cool, low chroma) */
  --ink:        oklch(0.24 0.02 255);
  --ink-2:      oklch(0.40 0.02 255);
  --muted:      oklch(0.55 0.015 255);
  --faint:      oklch(0.70 0.01 255);
  --line:       oklch(0.92 0.008 255);
  --line-2:     oklch(0.95 0.006 255);
  --bg:         #FFFFFF;
  --bg-2:       oklch(0.985 0.004 255);
  --bg-3:       oklch(0.975 0.006 255);

  /* Status */
  --ok:         #0E7A4B;
  --ok-bg:      #E8F5EE;
  --ok-line:    #BFE3CE;
  --warn:       #9A6608;
  --warn-bg:    #FBF2E0;
  --warn-line:  #F0DCB0;
  --danger:     #C0362B;
  --danger-bg:  #FBE9E7;
  --danger-line:#F2C9C4;
  --info:       var(--navy);
  --info-bg:    var(--navy-tint);
  --info-line:  #C9D8F0;

  /* Radii + shadow */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(0,35,94,.05), 0 1px 3px rgba(0,35,94,.04);
  --shadow-2: 0 4px 14px rgba(0,35,94,.07), 0 2px 6px rgba(0,35,94,.05);
  --shadow-3: 0 18px 48px rgba(0,35,94,.13), 0 6px 16px rgba(0,35,94,.08);

  /* Layout */
  --maxw: 1120px;
  --header-h: 64px;

  --font: "Inter", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.6; font-feature-settings:"cv05","ss01";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
:lang(zh){ --font:"Noto Sans SC","Inter",system-ui,sans-serif; }
h1,h2,h3,h4{ margin:0; line-height:1.18; letter-spacing:-0.01em; color:var(--navy); font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; }
:focus-visible{ outline:3px solid color-mix(in oklch, var(--navy) 45%, transparent); outline-offset:2px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.icon{ width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* raster silhouette icons — tinted via mask so they follow currentColor + theme.
   (mask url is set inline so it resolves relative to the document, not this CSS file) */
.icon-img{ display:inline-block; stroke:none; fill:none; background-color:currentColor; }

/* ============================================================
   INTRO ANIMATION
   ============================================================ */
#intro{
  position:fixed; inset:0; height:100vh; height:100dvh; z-index:1000; display:grid; place-items:center;
  background-color:var(--navy-tint-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 42%, rgba(255,255,255,.50) 100%),
    url("../assets/bg-home.webp") center bottom / cover no-repeat,
    linear-gradient(180deg,#fff 0%, var(--navy-tint-2) 100%) var(--navy-tint-2);
  transition:opacity .7s ease, visibility .7s;
}
#intro.hide{ opacity:0; visibility:hidden; }
.intro-inner{ text-align:center; padding:24px; }
.intro-mark{
  width:74px; height:74px; margin:0 auto 26px; border-radius:20px;
  background:var(--navy); display:grid; place-items:center; color:#fff;
  box-shadow:var(--shadow-3);
  opacity:1; animation:introMark .9s cubic-bezier(.2,.7,.2,1) both;
}
.intro-mark .icon{ width:38px; height:38px; stroke-width:1.6; }
.intro-title{
  font-size:clamp(26px,5.5vw,44px); font-weight:700; color:var(--navy);
  opacity:1; animation:introUp .8s ease .25s both;
}
.intro-sub{
  margin-top:12px; color:var(--muted); font-size:clamp(14px,2.6vw,18px);
  opacity:1; animation:introUp .8s ease .45s both;
}
.intro-bar{
  width:220px; height:3px; margin:30px auto 0; max-width:220px; border-radius:99px;
  background:var(--navy); opacity:.85; transform-origin:center; animation:introBar 3s ease .3s both;
}
@keyframes introMark{ from{ transform:scale(.7) translateY(8px); } to{ transform:none; } }
@keyframes introUp{ from{ transform:translateY(14px); } to{ transform:none; } }
@keyframes introBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-row{ height:var(--header-h); display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:center; gap:11px; cursor:pointer; min-width:0; }
.brand-mark{
  width:38px; height:38px; border-radius:11px; background:var(--navy); color:#fff;
  display:grid; place-items:center; flex:none; box-shadow:var(--shadow-1);
}
.brand-mark .icon{ width:22px; height:22px; }
.brand-mark .brand-ico{ width:22px; height:22px; object-fit:contain; display:block; }
.fl .brand-mark .brand-ico{ width:20px; height:20px; }
.brand-name{ font-weight:700; color:var(--navy); font-size:16px; letter-spacing:-0.01em; white-space:nowrap; }
.brand-name .q{ font-weight:600; color:var(--muted); }
.header-spacer{ flex:1; }

.lang-switch{ display:flex; gap:2px; padding:3px; background:var(--bg-3); border:1px solid var(--line); border-radius:99px; }
.lang-switch button{
  padding:6px 11px; border-radius:99px; font-size:13px; font-weight:600; color:var(--ink-2);
  transition:.18s; white-space:nowrap;
}
.lang-switch button.active{ background:var(--navy); color:#fff; box-shadow:var(--shadow-1); }
.lang-switch button:not(.active):hover{ color:var(--navy); }

.icon-btn{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  color:var(--ink-2); border:1px solid transparent; transition:.16s; }
.icon-btn:hover{ background:var(--bg-3); color:var(--navy); }

/* ============================================================
   GENERIC PAGE / BREADCRUMB
   ============================================================ */
main{ min-height:60vh; }
.view{ opacity:1; animation:viewIn .45s ease both; }
@keyframes viewIn{ from{ transform:translateY(10px); } to{ transform:none; } }

.breadcrumb{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:13.5px; color:var(--muted); padding:18px 0 4px; }
.breadcrumb button{ color:var(--muted); font-weight:600; transition:.15s; }
.breadcrumb button:hover{ color:var(--navy); }
.breadcrumb .sep{ color:var(--faint); }
.breadcrumb .cur{ color:var(--navy); font-weight:600; }

.back-btn{ display:inline-flex; align-items:center; gap:8px; color:var(--navy);
  font-weight:600; font-size:14.5px; padding:9px 14px 9px 11px; border-radius:99px;
  background:var(--navy-tint); transition:.16s; margin:8px 0 4px; }
.back-btn:hover{ background:#dfe9f8; transform:translateX(-2px); }
.back-btn .icon{ width:18px; height:18px; }

.page-head{ padding:14px 0 8px; }
.page-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--navy-500); margin-bottom:12px; }
.page-kicker .icon{ width:17px; height:17px; }
.page-title{ font-size:clamp(26px,5vw,40px); }
.page-lead{ margin-top:14px; color:var(--ink-2); font-size:clamp(15.5px,2.4vw,18px); max-width:62ch; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding:clamp(40px,8vw,86px) 0 clamp(30px,5vw,52px); }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 88% -10%, var(--navy-tint) 0%, transparent 55%),
    radial-gradient(90% 70% at -8% 8%, var(--navy-tint-2) 0%, transparent 50%);
}
.hero-grid-lines{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%); }
.hero-inner{ position:relative; z-index:1; }
.hero-split{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
@media(min-width:880px){ .hero-split{ grid-template-columns:1.02fr 0.98fr; gap:40px; } }
.hero-copy{ max-width:620px; }
.hero-illo{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; }
.hero-illo .illo{ width:min(460px,100%); height:auto; position:relative; z-index:1; }
.hero-illo .illo-emblem{ width:min(420px,92%); height:auto; position:relative; z-index:1;
  filter:drop-shadow(0 18px 34px rgba(16,42,90,.22));
  animation:floatY 6s ease-in-out infinite; transform-origin:center; }
@media(prefers-reduced-motion:reduce){ .hero-illo .illo-emblem{ animation:none; } }
/* abstract decorative backdrop behind the hero illustration */
.hero-illo::before{ content:""; position:absolute; z-index:0; width:116%; height:116%; left:-8%; top:-8%;
  background:
    radial-gradient(42% 46% at 70% 28%, color-mix(in oklch, var(--navy) 17%, transparent) 0%, transparent 68%),
    radial-gradient(40% 44% at 26% 74%, color-mix(in oklch, var(--ok) 16%, transparent) 0%, transparent 70%),
    radial-gradient(62% 64% at 50% 52%, color-mix(in oklch, var(--navy-tint) 88%, transparent) 0%, transparent 72%);
  filter:blur(10px); border-radius:46% 54% 48% 52% / 52% 46% 54% 48%;
  animation:heroBlob 16s ease-in-out infinite; }
.hero-illo::after{ content:""; position:absolute; z-index:0; width:74%; height:74%; left:13%; top:13%;
  border-radius:50%; border:1.5px dashed color-mix(in oklch, var(--navy) 20%, transparent);
  background:
    radial-gradient(circle at 16% 24%, var(--navy-500) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 88% 72%, var(--ok) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 78% 12%, color-mix(in oklch, var(--navy) 55%, transparent) 0 2.5px, transparent 3.5px);
  opacity:.45; animation:heroSpin 48s linear infinite; }
@keyframes heroBlob{
  0%,100%{ transform:scale(1) rotate(0deg); border-radius:46% 54% 48% 52% / 52% 46% 54% 48%; }
  50%{ transform:scale(1.05) rotate(7deg); border-radius:54% 46% 52% 48% / 46% 54% 48% 52%; } }
@keyframes heroSpin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .hero-illo::before, .hero-illo::after{ animation:none; } }
.hero-illo .illo-img{ width:min(460px,100%); height:auto; display:block; background:transparent;
  animation:floatY 6s ease-in-out infinite; transform-origin:center;
  filter:drop-shadow(0 18px 30px rgba(16,42,90,.16)); }
@media(prefers-reduced-motion:reduce){ .hero-illo .illo-img{ animation:none; } }
.hero-illo .illo-hero .pp-body{ animation:floatY 6s ease-in-out infinite; transform-origin:center; }
/* inline "upload your own image" affordance on the hero illustration */
.illo-tools{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  gap:8px; padding:14px; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.hero-illo:hover .illo-tools, .illo-tools:focus-within{ opacity:1; }
.illo-tools > *{ pointer-events:auto; }
.illo-upload-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:99px;
  background:var(--navy); color:#fff; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  border:1px solid var(--navy); box-shadow:var(--shadow-2); transition:transform .15s, background .15s; }
.illo-upload-btn:hover{ transform:translateY(-1px); }
.illo-upload-btn .icon{ width:17px; height:17px; }
.illo-remove-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:99px; background:#fff; color:var(--ink-2); border:1px solid var(--line);
  box-shadow:var(--shadow-1); cursor:pointer; transition:color .15s, border-color .15s; }
.illo-remove-btn:hover{ color:var(--danger,#c0392b); border-color:#e3b4b0; }
.illo-remove-btn .icon{ width:18px; height:18px; }
/* animated brand caption shown beneath the hero visual */
.hero-illo-cap{ position:relative; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:2px; max-width:92%;
  padding:11px 22px; border-radius:16px; text-align:center;
  background:color-mix(in oklch, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:blur(9px) saturate(1.2); backdrop-filter:blur(9px) saturate(1.2);
  border:1px solid var(--line); box-shadow:var(--shadow-2);
  animation:hicIn .85s cubic-bezier(.2,.7,.2,1) .45s both, hicFloat 6s ease-in-out 1.4s infinite; }
.hero-illo-cap .hic-name{ font-weight:700; color:var(--navy); font-size:15.5px; letter-spacing:-.01em; white-space:nowrap; }
.hero-illo-cap .hic-sub{ font-size:12px; color:var(--muted); font-weight:500; line-height:1.35; }
@keyframes hicIn{ from{ opacity:0; transform:translateY(16px) scale(.95); }
  to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes hicFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media(prefers-reduced-motion:reduce){ .hero-illo-cap{ animation:none; opacity:1; transform:translateY(0); } }
@media(max-width:879px){ .illo-tools{ opacity:1; position:static; inset:auto; padding:12px 0 0; } }
@media(max-width:879px){ .hero-illo{ order:-1; max-width:420px; margin:0 auto; } }
.hero-center{ max-width:820px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:99px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1);
  font-size:13px; font-weight:700; letter-spacing:.01em; color:var(--navy-500); margin-bottom:24px; }
.hero-eyebrow .icon{ width:17px; height:17px; }
.hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1);
  font-size:13px; font-weight:600; color:var(--navy-500); margin-bottom:22px; }
.hero-badge .dot{ width:7px; height:7px; border-radius:99px; background:var(--ok); }
.hero h1{ font-size:clamp(28px,5.4vw,52px); line-height:1.1; text-wrap:balance; position:relative; }
.hero-lead{ margin-top:20px; font-size:clamp(16px,2.5vw,19px); color:var(--ink-2); max-width:60ch; line-height:1.55; }
.hero-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* terminal line-art behind hero */
.hero-terminal{ position:absolute; left:0; right:0; bottom:-2px; z-index:0; display:flex; justify-content:center;
  pointer-events:none; opacity:.4;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 64%);
  mask-image:linear-gradient(180deg, transparent, #000 64%); }
.hero-terminal .illo{ width:min(960px,96%); height:auto; }
/* paper-plane accent near title */
.hero-pp{ position:absolute; right:clamp(-8px,2vw,40px); top:-44px; width:clamp(120px,18vw,190px); z-index:2;
  pointer-events:none; }
.hero-pp .illo{ width:100%; height:auto; }
@media(max-width:640px){ .hero-pp{ position:static; width:150px; margin:14px auto 0; order:3; } }

/* ============================================================
   ILLUSTRATIONS (shared line-art styling)
   ============================================================ */
.illo .il-s{ stroke:var(--navy); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.illo .il-s2{ stroke:color-mix(in oklch,var(--navy) 42%, #fff); stroke-width:1.8; stroke-linecap:round; fill:none; }
.illo .il-f{ fill:var(--navy-tint); }
.illo .il-f2{ fill:color-mix(in oklch,var(--navy-tint) 60%, #fff); }
.illo .il-fa{ fill:color-mix(in oklch,var(--navy) 18%, #fff); }
.illo .il-dash{ stroke:var(--navy-500); stroke-width:2; stroke-dasharray:6 8; fill:none; opacity:.55; }
.illo .il-dot{ fill:var(--navy); }
.illo .il-g{ fill:var(--ok-bg); }
.illo .il-gs{ stroke:var(--ok); stroke-width:2.2; fill:none; stroke-linejoin:round; }
.illo .il-gw{ stroke:var(--ok); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.illo .il-gw2{ stroke:color-mix(in oklch,var(--ok) 55%, #fff); stroke-width:2.4; stroke-linecap:round; fill:none; }
.illo .il-arrow{ fill:var(--ok); }
.illo-pp .pp-body{ animation:floatY 6s ease-in-out infinite; transform-origin:center; }

/* ============================================================
   PAGE BANNER (illustrated, on section pages)
   ============================================================ */
.page-banner{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:flex-end;
  min-height:184px; margin:6px 0 22px; padding:22px 26px; border-radius:var(--r-xl);
  background:linear-gradient(120deg, var(--navy-tint-2) 0%, var(--navy-tint) 100%);
  border:1px solid var(--info-line); box-shadow:var(--shadow-1); }
.page-banner.green{ background:linear-gradient(120deg, var(--ok-bg) 0%, #f0faf3 60%, var(--navy-tint-2) 100%);
  border-color:var(--ok-line); }
.page-banner::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:34px 34px; opacity:.5;
  -webkit-mask-image:radial-gradient(70% 80% at 80% 30%, #000, transparent 75%);
  mask-image:radial-gradient(70% 80% at 80% 30%, #000, transparent 75%); }
.pb-illo{ position:relative; z-index:1; width:min(360px,52%); }
.pb-illo .illo{ width:100%; height:auto; }
.pb-cap{ position:absolute; left:26px; bottom:22px; right:auto; z-index:2; max-width:300px;
  display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--navy-700); }
.pb-cap .icon{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--navy-500); }
/* mobile section banner: photo background */
.page-banner.banner-mobile{ min-height:240px;
  background:linear-gradient(100deg, rgba(255,255,255,.93) 20%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.1) 80%), url("../assets/bg-mobile.webp") center right / cover no-repeat; }
.page-banner.banner-mobile::before{ display:none; }
.page-banner.banner-mobile .pb-illo{ display:none; }
@media(max-width:620px){
  .page-banner{ flex-direction:column; align-items:center; min-height:0; padding:18px; gap:14px; }
  .pb-illo{ width:min(300px,80%); }
  .pb-cap{ position:static; max-width:none; text-align:left; }
}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; border-radius:99px; font-weight:600; font-size:15.5px; transition:.18s; }
.btn .icon{ width:19px; height:19px; }
.btn-primary{ background:var(--navy); color:#fff; box-shadow:var(--shadow-2); }
.btn-primary:hover{ background:var(--navy-600); transform:translateY(-1px); box-shadow:var(--shadow-3); }
.btn-ghost{ background:#fff; color:var(--navy); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--navy-500); background:var(--navy-tint-2); }

/* ============================================================
   SECTION CARDS GRID (home)
   ============================================================ */
.section{ padding-top:clamp(26px,5vw,46px); padding-bottom:clamp(26px,5vw,46px); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-head h2{ font-size:clamp(21px,3.6vw,30px); }
.section-head p{ color:var(--muted); font-size:14.5px; margin-top:6px; }

.card-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media(min-width:560px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .card-grid{ grid-template-columns:repeat(4,1fr); gap:14px; } }

.nav-card{ position:relative; display:flex; flex-direction:column; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px 20px;
  box-shadow:var(--shadow-1); transition:transform .2s ease, box-shadow .2s ease, border-color .2s; overflow:hidden; }
.nav-card::after{ content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--navy-tint) 0%, transparent 70%);
  opacity:0; transition:opacity .25s; }
.nav-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:#cfdcf2; }
.nav-card:hover::after{ opacity:.9; }
.nav-card .ico-wrap{ width:62px; height:62px; border-radius:16px; background:var(--navy-tint);
  color:var(--navy); display:grid; place-items:center; margin-bottom:18px; position:relative; z-index:1; }
.nav-card .ico-wrap .icon{ width:34px; height:34px; }
.nav-card h3{ font-size:18.5px; position:relative; z-index:1; }
.nav-card .nc-desc{ margin-top:9px; color:var(--ink-2); font-size:14.5px; line-height:1.5; flex:1; position:relative; z-index:1; }
.nav-card .nc-go{ margin-top:18px; display:inline-flex; align-items:center; gap:7px;
  color:var(--navy); font-weight:600; font-size:14.5px; position:relative; z-index:1; }
.nav-card .nc-go .icon{ width:17px; height:17px; transition:transform .2s; }
.nav-card:hover .nc-go .icon{ transform:translateX(4px); }
.nav-card .nc-index{ position:absolute; top:20px; right:22px; font-size:13px; font-weight:700;
  color:var(--faint); z-index:1; }

/* big split choice (Kirish / Chiqish) */
.split{ display:grid; gap:18px; grid-template-columns:1fr; margin-top:8px; }
@media(min-width:720px){ .split{ grid-template-columns:1fr 1fr; } }
.split-card{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:34px 30px;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-1); text-align:left;
  transition:transform .2s, box-shadow .2s; min-height:200px; display:flex; flex-direction:column; }
.split-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); }
.split-card.in{ background:linear-gradient(150deg,#fff 60%, var(--ok-bg)); }
.split-card.out{ background:linear-gradient(150deg,#fff 60%, var(--navy-tint)); }
.split-card .ico-wrap{ width:58px; height:58px; border-radius:16px; display:grid; place-items:center; margin-bottom:auto; }
.split-card.in .ico-wrap{ background:var(--ok-bg); color:var(--ok); }
.split-card.out .ico-wrap{ background:var(--navy-tint); color:var(--navy); }
.split-card .ico-wrap .icon{ width:30px; height:30px; }
.split-card h3{ font-size:24px; margin-top:22px; }
.split-card p{ color:var(--ink-2); font-size:15px; margin-top:8px; }
.split-card .nc-go{ margin-top:18px; display:inline-flex; align-items:center; gap:7px; color:var(--navy); font-weight:600; }
.split-card .nc-go .icon{ width:18px; height:18px; transition:transform .2s; }
.split-card:hover .nc-go .icon{ transform:translateX(4px); }

/* ============================================================
   RULE PAGES — sidebar nav + content panel
   ============================================================ */
.rule-layout{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
@media(min-width:860px){ .rule-layout{ grid-template-columns:288px 1fr; gap:24px; } }

.rule-nav{ display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1); }
@media(min-width:860px){ .rule-nav{ position:sticky; top:calc(var(--header-h) + 12px); }
  .rule-nav::-webkit-scrollbar{ width:6px; } }
.rn-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 14px;
  border-radius:12px; transition:.16s; color:var(--ink-2); position:relative; }
.rn-item .rn-ico{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--bg-3); color:var(--navy); transition:.16s; }
.rn-item .rn-ico .icon{ width:19px; height:19px; }
.rn-t{ flex:1; min-width:0; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.rn-chev{ flex:none; color:var(--faint); display:grid; place-items:center; }
.rn-chev .icon{ width:17px; height:17px; }
.rn-tag{ flex:none; display:inline-flex; align-items:center; height:23px; padding:0 9px; border-radius:99px;
  font-size:11.5px; font-weight:700; background:var(--navy); color:#fff; white-space:nowrap; }
.rn-tag.rt-success{ background:var(--ok); } .rn-tag.rt-warning{ background:var(--warn); } .rn-tag.rt-danger{ background:var(--danger); }
.rn-item:hover{ background:var(--bg-2); }
.rn-item:hover .rn-ico{ background:var(--navy-tint); }
.rn-item.active{ background:var(--navy); }
.rn-item.active .rn-t{ color:#fff; }
.rn-item.active .rn-ico{ background:rgba(255,255,255,.16); color:#fff; }
.rn-item.active .rn-chev{ color:rgba(255,255,255,.7); }
.rn-item.rt-danger .rn-ico{ background:var(--danger-bg); color:var(--danger); }

@media(max-width:859px){
  .rule-nav{ flex-direction:row; overflow-x:auto; gap:8px; padding:8px; scroll-snap-type:x proximity; }
  .rn-item{ flex:0 0 auto; width:auto; flex-direction:column; gap:7px; text-align:center; padding:12px 14px; min-width:104px; scroll-snap-align:start; }
  .rn-t{ font-size:12.5px; }
  .rn-chev,.rn-tag{ display:none; }
}

.rule-content{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-1); overflow:hidden; min-height:340px; }

/* overview state */
.rc-overview{ display:grid; grid-template-columns:1fr; align-items:center; gap:20px; padding:30px 30px; }
@media(min-width:680px){ .rc-overview{ grid-template-columns:1.1fr .9fr; } }
.rc-badge{ display:inline-block; font-size:12.5px; font-weight:700; color:var(--navy-500);
  background:var(--navy-tint); padding:6px 13px; border-radius:99px; margin-bottom:16px; }
.rc-otext h2{ font-size:clamp(26px,4vw,38px); line-height:1.1; }
.rc-divider{ width:54px; height:4px; border-radius:99px; background:var(--navy-500); margin:16px 0; }
.rc-otext p{ color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:46ch; }
.rc-illo{ display:flex; justify-content:center; align-items:center; padding:8px;
  background:radial-gradient(70% 70% at 60% 40%, var(--navy-tint-2), transparent 75%); border-radius:var(--r-lg); }
.rc-illo.green{ background:radial-gradient(70% 70% at 60% 40%, var(--ok-bg), transparent 75%); }
.rc-illo .illo{ width:100%; max-width:340px; height:auto; }
@media(max-width:679px){ .rc-illo{ order:-1; } }
/* exit-section overview: airplane photo background (only this box) */
.rc-overview-exit{ grid-template-columns:1fr; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(100deg, rgba(255,255,255,.94) 26%, rgba(255,255,255,.62) 54%, rgba(255,255,255,.22) 82%), url("../assets/bg-exit.webp") center right / cover no-repeat; }
@media(min-width:680px){ .rc-overview-exit{ grid-template-columns:1fr; } }
.rc-overview-exit .rc-illo{ display:none; }
.rc-overview-exit .rc-otext p{ max-width:40ch; }
.rc-overview-exit{ min-height:344px; align-content:center; background-position:center 42%; }
/* entry-section overview: airport/passport illustration background (only this box) */
.rc-overview-entry{ grid-template-columns:1fr; min-height:344px; align-content:center; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(100deg, rgba(255,255,255,.94) 26%, rgba(255,255,255,.62) 52%, rgba(255,255,255,.18) 84%), url("../assets/bg-entry.webp") center right / cover no-repeat; }
@media(min-width:680px){ .rc-overview-entry{ grid-template-columns:1fr; } }
.rc-overview-entry .rc-illo{ display:none; }
.rc-overview-entry .rc-otext p{ max-width:40ch; }
/* post-section overview: parcels illustration background (only this box) */
.rc-overview-post{ grid-template-columns:1fr; min-height:344px; align-content:center; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(100deg, rgba(255,255,255,.95) 28%, rgba(255,255,255,.64) 54%, rgba(255,255,255,.2) 86%), url("../assets/bg-post.webp") center right / cover no-repeat; }
@media(min-width:680px){ .rc-overview-post{ grid-template-columns:1fr; } }
.rc-overview-post .rc-illo{ display:none; }
.rc-overview-post .rc-otext p{ max-width:40ch; }

/* detail state */
.rc-detail{ padding:28px 30px 32px; animation:none; }
.rc-dhead{ display:flex; align-items:flex-start; gap:16px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.rc-dhead .rule-ico{ width:50px; height:50px; flex:none; border-radius:13px; display:grid; place-items:center; }
.rc-dhead .rule-ico .icon{ width:26px; height:26px; }
.rt-info .rc-dhead .rule-ico{ background:var(--info-bg); color:var(--info); }
.rt-warning .rc-dhead .rule-ico{ background:var(--warn-bg); color:var(--warn); }
.rt-danger .rc-dhead .rule-ico{ background:var(--danger-bg); color:var(--danger); }
.rt-success .rc-dhead .rule-ico{ background:var(--ok-bg); color:var(--ok); }
.rc-dtitle{ flex:1; min-width:0; }
.rc-dtitle h2{ font-size:clamp(20px,3vw,26px); line-height:1.2; }
.rc-short{ margin-top:7px; color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.rc-dhead .rule-tag{ flex:none; align-self:flex-start; }

/* ============================================================
   RULE CARDS (accordion)
   ============================================================ */
.rule-list{ display:flex; flex-direction:column; gap:14px; }
.rule{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.rule.open{ box-shadow:var(--shadow-2); border-color:#cfdcf2; }
.rule-head{ width:100%; display:flex; align-items:flex-start; gap:16px; padding:20px 20px; text-align:left; }
.rule-ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none; }
.rule-ico .icon{ width:24px; height:24px; }
.rt-info .rule-ico{ background:var(--info-bg); color:var(--info); }
.rt-warning .rule-ico{ background:var(--warn-bg); color:var(--warn); }
.rt-danger .rule-ico{ background:var(--danger-bg); color:var(--danger); }
.rt-success .rule-ico{ background:var(--ok-bg); color:var(--ok); }
.rule-main{ flex:1; min-width:0; display:block; }
.rule-title{ display:block; font-size:17.5px; font-weight:700; color:var(--navy); }
.rule-short{ display:block; margin-top:6px; color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.rule-chev{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  color:var(--muted); transition:.2s; margin-top:2px; }
.rule.open .rule-chev{ transform:rotate(180deg); color:var(--navy); }
.rule-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.rule.open .rule-body{ grid-template-rows:1fr; }
.rule-body-inner{ overflow:hidden; }
.rule-body-pad{ padding:0 20px 22px 82px; }
@media(max-width:560px){ .rule-body-pad{ padding:0 20px 22px 20px; } }

.callout{ border-radius:var(--r); padding:14px 16px; margin:4px 0 16px; display:flex; gap:11px;
  font-size:14.5px; line-height:1.55; }
.callout .icon{ width:20px; height:20px; flex:none; margin-top:1px; }
.callout.warn{ background:var(--warn-bg); border:1px solid var(--warn-line); color:#6e4a06; }
.callout.danger{ background:var(--danger-bg); border:1px solid var(--danger-line); color:#8a2a22; }
.callout.ok{ background:var(--ok-bg); border:1px solid var(--ok-line); color:#0a5436; }
.callout.info{ background:var(--info-bg); border:1px solid var(--info-line); color:var(--navy-700); }
.callout strong{ font-weight:700; }

.legal{ border-left:3px solid var(--line); padding:2px 0 2px 16px; margin:6px 0; }
.legal p{ color:var(--ink-2); font-size:14.5px; line-height:1.62; margin-bottom:10px; }
.legal p:last-child{ margin-bottom:0; }
.legal ul{ margin:8px 0 10px; display:flex; flex-direction:column; gap:7px; }
.legal li{ position:relative; padding-left:18px; color:var(--ink-2); font-size:14.5px; line-height:1.55; }
.legal li::before{ content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:2px; background:var(--navy-500); }
.legal-note{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted);
  background:var(--bg-3); border:1px solid var(--line); padding:5px 11px; border-radius:99px; margin-bottom:12px; }
.legal-note .icon{ width:15px; height:15px; }

.legal-basis{ margin-top:14px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.legal-basis .icon{ width:15px; height:15px; flex:none; }

/* highlighted definition / example blocks inside legal text */
.legal-ex{ display:flex; gap:11px; align-items:flex-start; margin:4px 0 12px; padding:14px 16px;
  border-radius:var(--r); font-size:14.5px; line-height:1.6; color:var(--navy-700);
  background:linear-gradient(150deg, var(--navy-tint-2), var(--navy-tint));
  border:1px solid var(--info-line); border-left:4px solid var(--navy-500); }
.legal-ex .icon{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--navy-500); }
.legal-ex.ex{ color:#6e4a06; background:linear-gradient(150deg,#fefaf0,var(--warn-bg));
  border-color:var(--warn-line); border-left-color:var(--warn); }
.legal .legal-h.legal-h-ico{ display:flex; align-items:center; gap:11px; }
.legal .legal-h-icon{ flex:none; display:grid; place-items:center; color:var(--navy); }
.legal .legal-h-icon .icon{ width:30px; height:30px; }
.legal .legal-ex.tone-ok .icon{ color:var(--ok); }
.legal .legal-ex.tone-warn .icon{ color:var(--warn); }
.legal .legal-ex.tone-ok, .legal .legal-ex.tone-warn{ align-items:center; }
.legal .legal-ex.tone-ok .icon, .legal .legal-ex.tone-warn .icon{ width:44px; height:48px; margin-top:0; }
.legal-ex.ex span{ font-style:italic; }
/* inline emphasis inside legal text */
.legal .tx-key{ font-weight:700; color:var(--navy); }
.legal .tx-ok{ font-weight:700; color:var(--ok); }
.legal .tx-red{ font-weight:700; color:var(--danger); }
.legal .legal-frame{ border-radius:var(--r); padding:13px 16px; margin:6px 0 16px;
  display:flex; gap:13px; align-items:flex-start; }
.legal .legal-frame p{ margin:0; flex:1; min-width:0; }
.legal .legal-frame-ico{ flex:none; display:grid; place-items:center; margin-top:1px; }
.legal .legal-frame-ico .icon{ width:42px; height:42px; }
.legal .legal-frame.frame-green .legal-frame-ico .icon{ color:var(--ok); }
.legal .legal-frame.frame-red .legal-frame-ico .icon{ color:var(--danger); }
.legal .legal-frame.frame-yellow .legal-frame-ico .icon{ color:var(--warn); }
.legal .legal-frame.frame-red{ border:1.5px solid var(--danger); background:var(--danger-bg); }
.legal .legal-frame.frame-green{ border:1.5px solid var(--ok); background:var(--ok-bg); }
.legal .legal-frame.frame-yellow{ border:1.5px solid var(--warn); background:var(--warn-bg); }
.legal .tx-warn{ font-weight:700; color:var(--warn); }
.legal i, .legal em{ font-style:italic; color:var(--muted); }

/* green / red lane definition cards */
.lane-card{ margin:6px 0 14px; padding:15px 18px 16px; border-radius:var(--r);
  border:1px solid var(--line); border-left:5px solid var(--line); background:#fff; }
.lane-card .lane-head{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px;
  letter-spacing:-.01em; margin-bottom:7px; }
.lane-card .lane-dot{ width:13px; height:13px; border-radius:50%; flex:none; box-shadow:0 0 0 4px rgba(0,0,0,.04); }
.lane-card .lane-text{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0; }
.lane-green{ background:linear-gradient(150deg, var(--ok-bg), #f3faf5 70%); border-color:var(--ok-line); border-left-color:var(--ok); }
.lane-green .lane-head{ color:var(--ok); }
.lane-green .lane-dot{ background:var(--ok); }
.lane-red{ background:linear-gradient(150deg, var(--danger-bg), #fdf3f1 70%); border-color:var(--danger-line); border-left-color:var(--danger); }
.lane-red .lane-head{ color:var(--danger); }
.lane-red .lane-dot{ background:var(--danger); }

/* extra-emphasis key phrase inside legal text */
.emph-key{ font-weight:700; color:var(--ok); background:var(--ok-bg);
  padding:1px 7px; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  box-shadow:inset 0 0 0 1px var(--ok-line); }
/* whole emphasized legal block */
.key-note{ display:flex; gap:13px; align-items:flex-start; margin:6px 0 16px; padding:17px 19px;
  border-radius:var(--r); background:linear-gradient(150deg, var(--ok-bg), #f3faf5 72%);
  border:1px solid var(--ok-line); border-left:5px solid var(--ok); box-shadow:var(--shadow-1); }
.key-note .icon{ width:22px; height:22px; flex:none; margin-top:1px; color:var(--ok); }
.key-note-img{ width:58px; height:58px; flex:none; object-fit:contain; margin-top:1px; }
.key-note-ico{ flex:none; display:grid; place-items:center; margin-top:1px; }
.key-note-ico .icon{ width:42px; height:42px; color:var(--ok); }
.key-note p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink); font-weight:500; }
.key-note .emph-key{ background:#fff; }

/* app download block (declaration card) + telegram bot link (medicine card) */
.app-dl{ margin:8px 0 16px; padding:16px 18px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-2); }
.app-dl-label{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink-2); margin-bottom:12px; }
.app-dl-label .icon{ width:18px; height:18px; color:var(--navy); flex:none; }
.app-dl-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.app-dl-btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 20px; border-radius:12px;
  background:var(--navy); color:#fff; font-weight:600; font-size:14.5px; transition:transform .15s, background .15s; }
.app-dl-btn:hover{ transform:translateY(-1px); background:var(--navy-600); }
.app-dl-btn .icon{ width:22px; height:22px; }
.tg-bot{ display:flex; align-items:center; gap:14px; margin:8px 0 16px; padding:15px 18px; border-radius:var(--r);
  border:1px solid color-mix(in oklch, #229ED9 40%, var(--line)); background:color-mix(in oklch, #229ED9 8%, var(--bg));
  transition:transform .15s, box-shadow .15s; }
.tg-bot:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
.tg-bot .tg-ico{ width:46px; height:46px; border-radius:12px; background:#229ED9; color:#fff; display:grid; place-items:center; flex:none; }
.tg-bot .tg-ico .icon{ width:26px; height:26px; }
.tg-bot .tg-txt{ display:flex; flex-direction:column; flex:1; min-width:0; }
.tg-bot .tg-title{ font-weight:700; font-size:15.5px; color:var(--ink); }
.tg-bot .tg-sub{ font-size:13px; color:var(--muted); margin-top:1px; }
.tg-bot > .icon{ width:20px; height:20px; flex:none; color:#229ED9; }

/* legal CTA button (clearance card) — confirm / reject */
.legal-cta{ display:flex; align-items:center; gap:14px; margin:14px 0 6px; padding:15px 20px;
  border-radius:var(--r); background:linear-gradient(135deg, var(--navy), var(--navy-600));
  color:#fff; box-shadow:var(--shadow-2); transition:transform .18s, box-shadow .18s; }
.legal-cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-3); }
.legal-cta .legal-cta-ico{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.16);
  display:grid; place-items:center; flex:none; }
.legal-cta .legal-cta-ico .icon{ width:24px; height:24px; color:#fff; }
.legal-cta .legal-cta-txt{ display:flex; flex-direction:column; flex:1; min-width:0; }
.legal-cta .legal-cta-title{ font-weight:700; font-size:15.5px; }
.legal-cta .legal-cta-sub{ font-size:12.5px; color:rgba(255,255,255,.72); margin-top:1px; }
.legal-cta > .icon{ width:20px; height:20px; flex:none; transition:transform .18s; }
.legal-cta:hover > .icon{ transform:translateX(4px); }

/* video guide CTA (mobile section) */
.video-guide{ display:flex; align-items:center; gap:14px; margin:16px 0 4px; padding:16px 20px;
  border-radius:var(--r); background:linear-gradient(135deg, var(--navy), var(--navy-600));
  color:#fff; box-shadow:var(--shadow-2); transition:transform .18s, box-shadow .18s; }
.video-guide:hover{ transform:translateY(-2px); box-shadow:var(--shadow-3); }
.video-guide .vg-ico{ width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.16);
  display:grid; place-items:center; flex:none; }
.video-guide .vg-ico .icon{ width:24px; height:24px; color:#fff; }
.video-guide .vg-txt{ display:flex; flex-direction:column; flex:1; min-width:0; }
.video-guide .vg-title{ font-weight:700; font-size:16px; }
.video-guide .vg-sub{ font-size:13px; color:rgba(255,255,255,.72); margin-top:1px; }
.video-guide > .icon{ width:20px; height:20px; flex:none; transition:transform .18s; }
.video-guide:hover > .icon{ transform:translateX(4px); }

/* numeric norm list */
.norm-grid{ display:grid; gap:10px; grid-template-columns:1fr; margin:6px 0 8px; }
@media(min-width:520px){ .norm-grid{ grid-template-columns:1fr 1fr; } }
.norm{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 15px; }
.norm-name{ font-size:14px; color:var(--ink-2); }
.norm-lead{ display:flex; align-items:center; gap:11px; min-width:0; }
.norm-ico{ width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--navy-tint); color:var(--navy); }
.norm-ico .icon{ width:20px; height:20px; }
.norm-val{ font-weight:700; color:var(--navy); font-size:15px; white-space:nowrap; }

/* ============================================================
   PROHIBITED LIST
   ============================================================ */
.search-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:6px 0 18px; }
.search-input{ flex:1; min-width:220px; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:12px 18px; box-shadow:var(--shadow-1); }
.search-input .icon{ width:20px; height:20px; color:var(--muted); }
.search-input input{ border:none; outline:none; flex:1; font-size:16px; font-family:inherit; color:var(--ink); background:none; min-width:0; }
.filters{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:99px;
  font-size:14px; font-weight:600; letter-spacing:.3px; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); transition:.16s; line-height:1.25; }
.chip .icon{ width:18px; height:18px; }
.chip:hover{ border-color:var(--navy-500); }
.chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.chip.active.danger{ background:var(--danger); border-color:var(--danger); }
.chip.active.warn{ background:var(--warn); border-color:var(--warn); }

.prohibited-list{ display:flex; flex-direction:column; gap:12px; }
.pro-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 18px;
  box-shadow:var(--shadow-1); display:flex; gap:15px; align-items:flex-start; }
.pro-num{ flex:none; width:30px; height:30px; border-radius:8px; background:var(--bg-3); color:var(--muted);
  display:grid; place-items:center; font-size:13px; font-weight:700; }
/* per-item icon chip (status-coloured) */
.pro-thumb-ico{ flex:none; width:96px; height:96px; border-radius:18px; display:grid; place-items:center; }
.pro-thumb-ico img{ width:58px; height:58px; object-fit:contain; display:block; }
.pro-thumb-ico.danger{ background:var(--danger-bg); border:1px solid var(--danger-line); }
.pro-thumb-ico.warn{ background:var(--warn-bg); border:1px solid var(--warn-line); }
/* per-item small image (user-uploadable) */
.pro-thumb{ flex:none; position:relative; width:112px; height:112px; border-radius:18px; overflow:hidden;
  display:grid; place-items:center; cursor:pointer; background:var(--bg-2); color:var(--muted);
  border:none; transition:color .16s, box-shadow .16s, background .16s; }
.pro-thumb .icon{ width:38px; height:38px; }
.pro-thumb:hover{ color:var(--navy); background:var(--bg-3); }
.pro-thumb .pro-thumb-plus{ position:absolute; right:5px; bottom:5px; width:24px; height:24px; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-1); }
.pro-thumb .pro-thumb-plus .icon{ width:14px; height:14px; }
.pro-thumb.has{ background:#fff; }
.pro-thumb.has img{ width:100%; height:100%; object-fit:cover; display:block; }
.pro-thumb-x{ position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink-2); display:grid; place-items:center;
  box-shadow:var(--shadow-1); opacity:0; transition:opacity .15s, color .15s; }
.pro-thumb.has:hover .pro-thumb-x{ opacity:1; }
.pro-thumb-x:hover{ color:var(--danger); }
.pro-thumb-x .icon{ width:15px; height:15px; }
.pro-main{ flex:1; min-width:0; }
.pro-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pro-name{ font-weight:600; color:var(--navy); font-size:15.5px; line-height:1.4; }
.pro-note{ margin-top:8px; color:var(--ink-2); font-size:14px; line-height:1.55; }
.pro-note .hl{ font-weight:700; color:var(--navy); }
.pro-basis{ margin-top:9px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.pro-basis .icon{ width:14px; height:14px; }
.badge{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px;
  font-size:12.5px; font-weight:700; white-space:nowrap; }
.badge .icon{ width:14px; height:14px; }
.badge.danger{ background:var(--danger-bg); color:var(--danger); }
.badge.warn{ background:var(--warn-bg); color:var(--warn); }
.empty{ text-align:center; color:var(--muted); padding:46px 20px; font-size:15px; }

/* ============================================================
   CALCULATOR
   ============================================================ */
.calc-tabs{ display:inline-flex; gap:4px; padding:4px; background:var(--bg-3); border:1px solid var(--line);
  border-radius:99px; margin:4px 0 22px; }
.calc-tabs button{ padding:10px 20px; height:60px; display:inline-flex; align-items:center; justify-content:center; border-radius:99px; font-weight:600; font-size:14.5px; color:var(--ink-2); transition:.16s; }
.calc-tabs button.active{ background:#fff; color:var(--navy); box-shadow:var(--shadow-1); }
.rate-status{ display:flex; align-items:center; gap:9px; margin-top:13px; font-size:13px; line-height:1.4; }
.rate-status > span{ display:inline-flex; align-items:center; gap:7px; flex:1; min-width:0; }
.rate-status .icon{ width:16px; height:16px; flex:none; }
.rate-status .rs-ok{ color:var(--ok); }
.rate-status .rs-ok b{ color:var(--navy); font-weight:700; }
.rate-status .rs-load{ color:var(--muted); }
.rate-status .rs-fail{ color:#6e4a06; }
.rate-status .rs-man{ color:var(--muted); }
.rate-status .rs-refresh{ flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  color:var(--navy); background:var(--navy-tint); transition:background .15s, transform .15s; }
.rate-status .rs-refresh:hover{ background:#dfe9f8; }
.rate-status .rs-refresh:active{ transform:rotate(-60deg); }
.rate-status .rs-refresh .icon{ width:16px; height:16px; }
.calc-wrap{ display:grid; gap:20px; grid-template-columns:1fr; }
@media(min-width:860px){ .calc-wrap{ grid-template-columns:1fr 1fr; align-items:start; } }
.calc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-1); }
.calc-card h3{ font-size:18px; margin-bottom:4px; }
.calc-card .sub{ color:var(--muted); font-size:13.5px; margin-bottom:18px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.field .input{ display:flex; align-items:center; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:0 14px; transition:.16s; }
.field .input:focus-within{ border-color:var(--navy-500); background:#fff; box-shadow:0 0 0 3px var(--navy-tint); }
.field .input input{ border:none; outline:none; background:none; flex:1; font-size:16px; font-family:inherit;
  padding:13px 0; color:var(--ink); min-width:0; }
.field .input .unit{ font-size:13.5px; color:var(--muted); font-weight:600; white-space:nowrap; padding-left:8px; }

.result-card{ background:linear-gradient(160deg, var(--navy) 0%, var(--navy-600) 100%); color:#fff;
  border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-2); position:relative; overflow:hidden; }
.result-card::before{ content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px;
  border-radius:50%; background:rgba(255,255,255,.06); }
.result-card h3{ color:#fff; font-size:15px; font-weight:600; opacity:.8; letter-spacing:.02em; position:relative; }
.result-total{ font-size:clamp(30px,6vw,42px); font-weight:700; margin-top:8px; letter-spacing:-.02em; position:relative; }
.result-total .cur{ font-size:18px; opacity:.7; font-weight:600; margin-left:6px; }
.result-rows{ margin-top:20px; display:flex; flex-direction:column; gap:1px; position:relative;
  background:rgba(255,255,255,.12); border-radius:12px; overflow:hidden; }
.result-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 15px;
  background:rgba(255,255,255,.04); font-size:14px; }
.result-row .rl{ opacity:.82; }
.result-row .rv{ font-weight:700; white-space:nowrap; }
.result-row.hl{ background:rgba(255,255,255,.12); }
.calc-disclaimer{ margin-top:18px; display:flex; gap:10px; font-size:13px; line-height:1.5; color:#6e4a06;
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:var(--r); padding:13px 15px; }
.calc-disclaimer .icon{ width:18px; height:18px; flex:none; margin-top:1px; }

/* ============================================================
   STEP CARDS (mobile devices)
   ============================================================ */
.steps{ display:flex; flex-direction:column; gap:14px; counter-reset:step; }
.step{ display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 22px; box-shadow:var(--shadow-1); position:relative; }
.step-num{ flex:none; width:44px; height:44px; border-radius:13px; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:18px; }
.step-ico{ flex:none; position:relative; width:64px; height:64px; border-radius:16px;
  background:var(--navy-tint-2); border:1px solid var(--line); display:grid; place-items:center; }
.step-ico img{ width:40px; height:40px; object-fit:contain; display:block; }
.step-ico-num{ position:absolute; top:-8px; left:-8px; width:24px; height:24px; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:700; font-size:12px; display:grid; place-items:center; box-shadow:var(--shadow-1); }
.step-main h3{ font-size:17px; }
.step-main p{ margin-top:7px; color:var(--ink-2); font-size:14.5px; line-height:1.55; }
.step-main a.link{ color:var(--navy-500); font-weight:600; border-bottom:1.5px solid var(--navy-tint); }
.step-main a.link:hover{ border-color:var(--navy-500); }
.step-ways{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.step-way{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--navy);
  background:var(--navy-tint); padding:7px 12px; border-radius:99px; }
.step-way .icon{ width:15px; height:15px; }
.step-way.is-link{ cursor:pointer; transition:background .15s, color .15s, transform .15s; }
.step-way.is-link:hover{ background:var(--navy); color:#fff; transform:translateY(-1px); }

/* ============================================================
   CONTACT CARDS
   ============================================================ */
.contact-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:760px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; }
.contact-head{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.contact-head .ico-wrap{ width:46px; height:46px; border-radius:13px; background:var(--navy-tint); color:var(--navy);
  display:grid; place-items:center; flex:none; }
.contact-head .ico-wrap .icon{ width:24px; height:24px; }
.contact-head h3{ font-size:17px; }
.contact-rows{ display:flex; flex-direction:column; gap:10px; }
.contact-rowitem{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.5; }
.contact-rowitem .icon{ width:17px; height:17px; color:var(--muted); flex:none; margin-top:2px; }
.contact-actions{ margin-top:18px; display:flex; flex-wrap:wrap; gap:9px; }
.c-act{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:99px;
  font-size:13.5px; font-weight:600; transition:.16s; white-space:nowrap; }
.c-act .icon{ width:16px; height:16px; }
.c-act.call{ background:var(--ok-bg); color:var(--ok); }
.c-act.call:hover{ background:#d8efe2; }
.c-act.mail{ background:var(--navy-tint); color:var(--navy); }
.c-act.mail:hover{ background:#dde9f8; }
.c-act.map{ background:var(--bg-3); color:var(--ink-2); border:1px solid var(--line); }
.c-act.map:hover{ border-color:var(--navy-500); color:var(--navy); }
.ext-list{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.ext-toggle{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--navy); }
.ext-toggle .icon{ width:16px; height:16px; transition:.2s; }
.ext-toggle.open .icon{ transform:rotate(180deg); }
.ext-rows{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.ext-rows.open{ grid-template-rows:1fr; }
.ext-rows-inner{ overflow:hidden; }
.ext-grid{ padding-top:12px; display:grid; gap:8px; grid-template-columns:1fr; }
@media(min-width:520px){ .ext-grid{ grid-template-columns:1fr 1fr; } }
.ext-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px;
  background:var(--bg-2); border-radius:9px; padding:8px 12px; }
.ext-item .en{ color:var(--ink-2); }
.ext-item .num{ font-weight:700; color:var(--navy); }

/* ============================================================
   DISCLAIMER / FOOTER
   ============================================================ */
.disclaimer{ margin-top:36px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; display:flex; gap:12px; font-size:13px; color:var(--muted); line-height:1.55; }
.disclaimer .icon{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--faint); }
.site-footer{ margin-top:48px; border-top:1px solid var(--line); background:var(--bg-2); }
.footer-row{ padding:30px 0; display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.footer-row .fl{ display:flex; align-items:center; gap:11px; }
.footer-row .fl .brand-mark{ width:34px; height:34px; }
.footer-name{ font-weight:700; color:var(--navy); font-size:14.5px; }
.footer-sub{ color:var(--muted); font-size:12.5px; margin-top:2px; }
.footer-note{ color:var(--muted); font-size:12.5px; max-width:46ch; line-height:1.5; }

/* misc helpers */
.mt8{ margin-top:8px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; }
.divider{ height:1px; background:var(--line); margin:8px 0; border:none; }

/* ============================================================
   CUSTOM SCREEN BACKGROUND + CUSTOM ICONS
   ============================================================ */
#screen-bg{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity .4s ease; }
#screen-bg.on{ opacity:1; }
#screen-bg.on::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.48) 46%, rgba(255,255,255,.70) 100%); }
.site-header{ position:sticky; }
main#app{ position:relative; z-index:1; }
.site-footer{ position:relative; z-index:1; }
/* when a custom bg is on, let hero/banner own backdrops soften so the photo reads */
#screen-bg.on ~ main .hero-bg,
#screen-bg.on ~ main .hero-grid-lines{ opacity:.25; }

.cust-ico{ width:30px; height:30px; object-fit:contain; border-radius:7px; }
.split-card .cust-ico{ width:34px; height:34px; }

/* ============================================================
   CUSTOMIZE PANEL (drawer)
   ============================================================ */
#cust-panel{ position:fixed; inset:0; z-index:1200; visibility:hidden; }
#cust-panel.open{ visibility:visible; }
.cz-backdrop{ position:absolute; inset:0; background:rgba(0,20,50,.42); opacity:0; transition:opacity .28s; }
#cust-panel.open .cz-backdrop{ opacity:1; }
.cz-drawer{ position:absolute; top:0; right:0; height:100%; width:min(420px,92vw);
  background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
#cust-panel.open .cz-drawer{ transform:none; }
.cz-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:22px 22px 16px; border-bottom:1px solid var(--line); }
.cz-title{ font-size:19px; font-weight:700; color:var(--navy); }
.cz-sub{ font-size:13px; color:var(--muted); margin-top:5px; line-height:1.5; max-width:34ch; }
.cz-x{ width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center;
  color:var(--muted); border:1px solid var(--line); transition:.16s; }
.cz-x:hover{ background:var(--bg-3); color:var(--danger); }
.cz-x .icon{ width:18px; height:18px; }
.cz-body{ flex:1; overflow-y:auto; padding:18px 22px 28px; }
.cz-group{ margin-bottom:24px; }
.cz-gh{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--navy-500); margin-bottom:12px; }
.cz-gh .icon{ width:16px; height:16px; }
.cz-row{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--bg-2); margin-bottom:9px; }
.cz-thumb{ width:54px; height:40px; flex:none; border-radius:8px; background-size:cover; background-position:center;
  border:1px solid var(--line); display:grid; place-items:center; color:var(--faint); background-color:#fff; }
.cz-thumb.icon{ width:42px; height:42px; }
.cz-thumb.empty .icon,.cz-thumb.fb .icon{ width:20px; height:20px; }
.cz-thumb.fb{ color:var(--navy); background:var(--navy-tint); }
.cz-rl{ flex:1; min-width:0; }
.cz-name{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.3; }
.cz-actions{ display:flex; align-items:center; gap:6px; flex:none; }
.cz-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:9px;
  font-size:12.5px; font-weight:600; transition:.16s; }
.cz-btn.up{ background:var(--navy-tint); color:var(--navy); }
.cz-btn.up:hover{ background:#dde9f8; }
.cz-btn.up .icon{ width:15px; height:15px; }
.cz-btn.rm{ width:34px; height:34px; padding:0; justify-content:center; background:var(--danger-bg); color:var(--danger); }
.cz-btn.rm:hover{ background:#f6d6d1; }
.cz-btn.rm .icon{ width:15px; height:15px; }
.cz-reset{ display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:99px;
  font-size:13.5px; font-weight:600; color:var(--danger); background:var(--danger-bg); border:1px solid var(--danger-line);
  transition:.16s; }
.cz-reset:hover{ background:#f6d6d1; }
.cz-reset .icon{ width:16px; height:16px; }
@media(max-width:560px){ .cz-actions .cz-btn.up span{ display:none; } .cz-btn.up{ padding:9px; } }

/* ============================================================
   BRAND SUBTITLE
   ============================================================ */
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-sub{ font-size:11px; color:var(--muted); font-weight:500; white-space:nowrap; letter-spacing:.01em; }
@media(max-width:560px){ .brand-sub{ display:none; } }

/* ============================================================
   HERO MOTION  (all transform/offset based — visible at frame 0)
   ============================================================ */
.hero-motion{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(8px); opacity:.55; }
.blob.b1{ width:300px; height:300px; right:-60px; top:-40px;
  background:radial-gradient(circle at 35% 35%, #d7e4fa, transparent 68%); animation:drift1 14s ease-in-out infinite; }
.blob.b2{ width:240px; height:240px; left:-50px; bottom:-70px;
  background:radial-gradient(circle at 50% 50%, #e7eefb, transparent 70%); animation:drift2 18s ease-in-out infinite; }
.ring{ position:absolute; border:1.5px solid var(--navy); border-radius:50%; opacity:.10; }
.ring.r1{ width:120px; height:120px; right:12%; top:24%; animation:floatY 9s ease-in-out infinite; }
.ring.r2{ width:54px; height:54px; right:30%; top:62%; border-color:var(--navy-500); opacity:.16; animation:floatY 7s ease-in-out infinite reverse; }
.dot-sq{ position:absolute; width:14px; height:14px; border-radius:4px; background:var(--navy); opacity:.10;
  right:22%; top:48%; animation:spin 16s linear infinite; }
.flight{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.flight .path{ fill:none; stroke:var(--navy-500); stroke-width:1.6; stroke-dasharray:5 7; opacity:.30;
  animation:dash 6s linear infinite; }
.flight .endpt{ fill:var(--navy); }
.plane-badge{ position:absolute; right:16%; top:30%; width:42px; height:42px; border-radius:13px; background:#fff;
  box-shadow:var(--shadow-2); display:grid; place-items:center; color:var(--navy); animation:floatY 6s ease-in-out infinite; }
.plane-badge .icon{ width:22px; height:22px; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-22px,18px) scale(1.06);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(24px,-16px) scale(1.08);} }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes dash{ to{ stroke-dashoffset:-120;} }

/* hero key-limit chips */
.hero-stats{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
.hstat{ position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 18px;
  box-shadow:var(--shadow-1); min-width:128px; animation:floatY 7s ease-in-out infinite; }
.hstat:nth-child(2){ animation-delay:-1.6s; } .hstat:nth-child(3){ animation-delay:-3.1s; } .hstat:nth-child(4){ animation-delay:-4.6s; }
.hstat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.hstat .hv{ font-size:clamp(20px,3.4vw,26px); font-weight:700; color:var(--navy); letter-spacing:-.02em; white-space:nowrap; }
.hstat .hl{ font-size:12px; color:var(--muted); margin-top:3px; }
.hstat .hbar{ position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:99px; background:var(--navy); }
.hstat.green .hbar{ background:var(--ok); } .hstat.green .hv{ color:var(--ok); }
.hstat .hv, .hstat .hl{ padding-left:10px; }

/* ============================================================
   KEY FACTS (in rule body)
   ============================================================ */
.facts{ display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 18px; }
.fact{ flex:1 1 140px; min-width:140px; background:linear-gradient(160deg,#fff, var(--navy-tint-2));
  border:1px solid var(--info-line); border-radius:var(--r); padding:14px 16px; transition:transform .2s, box-shadow .2s; }
.fact:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.fact .fv{ font-size:23px; font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1; white-space:nowrap; }
.fact .fl{ font-size:12.5px; color:var(--ink-2); margin-top:7px; line-height:1.35; }
.rt-success .fact{ background:linear-gradient(160deg,#fff, var(--ok-bg)); border-color:var(--ok-line); }
.rt-success .fact .fv{ color:var(--ok); }
.rt-warning .fact{ background:linear-gradient(160deg,#fff, var(--warn-bg)); border-color:var(--warn-line); }
.rt-warning .fact .fv{ color:var(--warn); }

/* featured first fact — full-width hero row, the rest sit below it */
.facts .fact:first-child{ flex:1 1 100%; min-width:100%; padding:18px 20px 17px;
  border-left:4px solid var(--navy); background:linear-gradient(150deg, var(--navy-tint), #fff 78%);
  display:flex; flex-direction:column; }
.facts .fact:first-child .fv{ font-size:40px; }
.facts .fact:first-child .fl{ font-size:13.5px; margin-top:8px; }
/* hero fact with a large icon to the side */
.facts .fact.fact-ico-row{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; }
.facts .fact.fact-ico-row .fact-text{ display:flex; flex-direction:column; min-width:0; }
.fact-ico{ flex:none; display:grid; place-items:center; color:var(--navy); opacity:.92; }
.fact-ico .icon{ width:42px; height:42px; }
.facts .fact:first-child.fact-ico-row{ flex:1 1 100%; min-width:100%; gap:20px; }
.facts .fact:first-child .fact-ico .icon{ width:84px; height:84px; }
.facts .fact.fact-ico-row:not(:first-child) .fv{ font-size:18px; white-space:normal; line-height:1.15; }
.rt-success .fact-ico{ color:var(--ok); }
.rt-warning .fact-ico{ color:var(--warn); }
/* currency card: both facts side-by-side, no hero treatment */
.rule-in-currency .facts .fact:first-child,
.rule-post-duty-free .facts .fact:first-child{ flex:1 1 140px; min-width:140px; padding:14px 16px;
  border-left:1px solid var(--info-line); background:linear-gradient(160deg,#fff, var(--navy-tint-2)); }
.rule-in-currency .facts .fact:first-child .fv,
.rule-post-duty-free .facts .fact:first-child .fv{ font-size:18px; line-height:1.15; }
.rule-in-currency .facts .fact:first-child .fact-ico .icon,
.rule-post-duty-free .facts .fact:first-child .fact-ico .icon{ width:42px; height:42px; }
/* jewellery card: both facts side-by-side with image icons on the left */
.rule-out-jewelry .facts .fact:first-child{ flex:1 1 140px; min-width:140px; padding:14px 16px; display:flex;
  border-left:1px solid var(--info-line); background:linear-gradient(160deg,#fff, var(--navy-tint-2)); }
.rule-out-jewelry .facts .fact .fv{ font-size:22px; }
.fact-ico-img{ width:48px; height:48px; flex:none; object-fit:contain; border-radius:9px; }
.rt-success .facts .fact:first-child{ border-left-color:var(--ok); background:linear-gradient(150deg, var(--ok-bg), #fff 78%); }
.rt-warning .facts .fact:first-child{ border-left-color:var(--warn); background:linear-gradient(150deg, var(--warn-bg), #fff 78%); }

/* headline tag pill in collapsed rule head */
.rule-tag{ flex:none; align-self:flex-start; display:inline-flex; align-items:center; height:26px; padding:0 11px;
  border-radius:99px; font-size:13px; font-weight:700; letter-spacing:-.01em; margin-top:1px;
  background:var(--navy); color:#fff; box-shadow:var(--shadow-1); white-space:nowrap; }
.rt-success .rule-tag{ background:var(--ok); }
.rt-warning .rule-tag{ background:var(--warn); }
.rt-danger .rule-tag{ background:var(--danger); }
@media(max-width:430px){ .rule-tag{ display:none; } }

/* inline number highlight */
.hl-num{ font-weight:700; color:var(--navy); background:linear-gradient(transparent 62%, color-mix(in oklch, var(--navy) 16%, transparent) 0); padding:0 2px; }

/* ============================================================
   SCROLL REVEAL (transform-only; opacity always 1)
   ============================================================ */
.reveal{ transform:translateY(20px); transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.reveal.seen{ transform:none; }
.card-grid .reveal:nth-child(2){ transition-delay:.06s; }
.card-grid .reveal:nth-child(3){ transition-delay:.12s; }
.card-grid .reveal:nth-child(4){ transition-delay:.18s; }
.card-grid .reveal:nth-child(5){ transition-delay:.24s; }
.rule-list .reveal:nth-child(2){ transition-delay:.05s; }
.rule-list .reveal:nth-child(3){ transition-delay:.10s; }
.rule-list .reveal:nth-child(4){ transition-delay:.15s; }
.rule-list .reveal:nth-child(5){ transition-delay:.20s; }
.steps .reveal:nth-child(2){ transition-delay:.07s; }
.steps .reveal:nth-child(3){ transition-delay:.14s; }
.steps .reveal:nth-child(4){ transition-delay:.21s; }

/* calc result pop on change */
.result-total{ transition:transform .35s cubic-bezier(.2,1.4,.4,1); }
.result-total.pop{ transform:scale(1.05); }

/* ============================================================
   MOBILE REFINEMENTS  (mobil qurilmalarga moslashuv)
   ============================================================ */
html, body{ overflow-x:hidden; max-width:100%; }

@media (max-width:640px){
  .wrap{ padding:0 16px; }
  .hero{ padding:30px 0 22px; }
  .hero-stats{ margin-top:24px; gap:10px; }
  .section{ padding-top:22px; padding-bottom:22px; }
}

/* hero CTA → full-width stacked, big tap targets */
@media (max-width:480px){
  .hero-cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero-cta .btn{ width:100%; padding:15px 20px; }
}

/* hero key-limit chips → clean 2-up grid on phones */
@media (max-width:520px){
  .hero-stats{ display:grid; grid-template-columns:1fr 1fr; }
  .hstat{ min-width:0; padding:13px 14px; }
  .hstat .hv{ font-size:21px; }
  /* calm the float on small screens so the grid stays tidy */
  .hstat, .hstat:nth-child(2), .hstat:nth-child(3), .hstat:nth-child(4){ animation:none; }
}

/* lighter decorative motion on phones */
@media (max-width:560px){
  .blob.b1{ width:200px; height:200px; }
  .blob.b2{ width:170px; height:170px; }
  .ring.r1{ width:84px; height:84px; }
  .plane-badge{ width:36px; height:36px; right:8%; top:26%; }
  .dot-sq{ display:none; }
}

/* header compaction so brand + 4 languages never overflow */
@media (max-width:460px){
  :root{ --header-h:58px; }
  .header-row{ gap:8px; }
  .brand{ gap:9px; }
  .brand-mark{ width:34px; height:34px; border-radius:10px; }
  .brand-mark .icon{ width:20px; height:20px; }
  .brand-name{ font-size:14.5px; }
  .lang-switch{ padding:2px; }
  .lang-switch button{ padding:7px 9px; font-size:12.5px; }
}
@media (max-width:360px){
  .brand-name{ font-size:13.5px; }
  .lang-switch button{ padding:7px 7px; font-size:12px; }
}

/* facts + norms stack to one column on the smallest screens */
@media (max-width:430px){
  .facts{ gap:8px; }
  .fact{ flex:1 1 100%; min-width:0; }
  .norm-grid{ grid-template-columns:1fr; }
}

/* tighter rule heads + bigger touch feel */
@media (max-width:560px){
  .rule-head{ padding:16px; gap:13px; }
  .rule-ico{ width:42px; height:42px; }
  .rule-title{ font-size:16.5px; }
  .page-title{ line-height:1.12; }
  .calc-tabs{ width:100%; }
  .calc-tabs button{ flex:1; padding:11px 8px; }
  .contact{ padding:20px; }
  .contact-actions .c-act{ flex:1 1 auto; justify-content:center; }
}

/* avoid sub-pixel breadcrumb crowding */
@media (max-width:430px){
  .breadcrumb{ font-size:12.5px; gap:5px; }
}

/* ============================================================
   Reduced-motion safety — never leave content stuck invisible
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .view{ opacity:1 !important; transform:none !important; }
  .reveal{ transform:none !important; }
  .intro-mark,.intro-title,.intro-sub{ opacity:1 !important; transform:none !important; }
  .intro-bar{ width:220px !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   MOBILE TEXT-SAFETY — keep every line of copy inside its box
   (phones are the primary device; nothing should spill past the edge)
   ============================================================ */
/* long words, numbers, emails and links wrap instead of overflowing */
.legal, .legal p, .legal li, .lane-text, .lane-head, .pro-note, .pro-title,
.rc-short, .callout span, .legal-ex span, .legal-frame p, .key-note,
.nc-desc, .page-lead, .page-title, .pb-cap span, .disclaimer span,
.contact-rowitem, .step-way, .step-main, .app-dl-label span, .tg-bot,
.fact .fl, .norm-item, .rule-title, .rule-short, h1, h2, h3, h4{
  overflow-wrap:break-word;
}
/* raster images never exceed their container */
img{ max-width:100%; height:auto; }
/* inline illustration SVGs cap to their box (small .icon svgs keep their size) */
.hero-illo svg, .pb-illo svg, .rc-illo svg, .illo{ max-width:100%; }

@media (max-width:560px){
  /* store / download buttons full-width and easy to tap */
  .app-dl-btns{ flex-direction:column; }
  .app-dl-btn{ width:100%; justify-content:center; }
  /* let the big hero fact value wrap if a translated label is long */
  .facts .fact:first-child .fv{ white-space:normal; }
}

/* ============================================================
   MOBILE COMFORT — app-like, ergonomic touch behaviour
   ============================================================ */
/* remove the grey tap-flash; we provide our own :active feedback below */
*{ -webkit-tap-highlight-color: transparent; }
/* snappier taps: no 300ms delay, no accidental double-tap zoom on controls */
button, a, .nav-card, .chip, .rn-item, .lang-switch button, .btn, .rule-head,
.contact, .c-act, .app-dl-btn, .step-way, .back-btn{ touch-action: manipulation; }
/* in-page scroll targets clear the sticky header */
html{ scroll-padding-top: calc(var(--header-h) + 12px); }
/* notch safe-area (0 on ordinary phones; pads rounded-corner / landscape devices) */
body{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* tap anywhere to skip the splash */
#intro{ cursor:pointer; }

/* tactile press feedback (hover never fires on touch) */
.nav-card:active{ transform: scale(.985); }
.btn:active{ transform: translateY(1px); }
.chip:active, .rn-item:active, .app-dl-btn:active, .c-act:active,
.back-btn:active, .lang-switch button:active{ transform: scale(.97); }

@media (max-width:560px){
  /* comfortable minimum tap sizes */
  .lang-switch button{ min-height:38px; }
  .chip{ min-height:42px; }
  .c-act{ min-height:44px; }
  /* momentum scroll + hidden scrollbar for the horizontal rule nav */
  .rule-nav{ -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .rule-nav::-webkit-scrollbar{ display:none; }
}

/* ============================================================
   SUB-SECTION GRID → DETAIL  (sub-sections as cards; tap to open)
   ============================================================ */
.rule-section{ padding-top:6px; }
.rule-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:20px 0 4px; }
@media(min-width:600px){ .rule-grid{ grid-template-columns:1fr 1fr; gap:14px; } }
@media(min-width:1000px){ .rule-grid{ grid-template-columns:1fr 1fr 1fr; } }

.rule-card{ position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1);
  transition:transform .16s, box-shadow .16s, border-color .16s; }
.rule-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.rule-card:active{ transform:scale(.99); }
.rule-card.rt-danger{ border-left-color:var(--danger); }
.rule-card.rt-warning{ border-left-color:var(--warn); }
.rule-card.rt-success{ border-left-color:var(--ok); }
.rc-card-ico{ flex:none; width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--navy-tint); color:var(--navy); }
.rule-card.rt-danger .rc-card-ico{ background:var(--danger-bg); color:var(--danger); }
.rule-card.rt-warning .rc-card-ico{ background:var(--warn-bg); color:var(--warn); }
.rule-card.rt-success .rc-card-ico{ background:var(--ok-bg); color:var(--ok); }
.rc-card-ico .icon{ width:26px; height:26px; }
.rc-card-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.rc-card-title{ font-weight:700; color:var(--navy); font-size:15.5px; line-height:1.25; }
.rc-card-short{ font-size:13px; color:var(--ink-2); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rc-card-go{ flex:none; color:var(--muted); display:grid; place-items:center; }
.rc-card-go .icon{ width:20px; height:20px; }
.rule-card .rule-tag{ flex:none; align-self:flex-start; }

/* previous / next within a section */
.detail-nav{ display:flex; gap:10px; align-items:stretch; margin:22px 0 6px; }
.dnav{ display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:50%; padding:12px 14px;
  background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--navy);
  font-weight:600; font-size:13px; box-shadow:var(--shadow-1); transition:transform .15s, border-color .15s; }
.dnav:hover{ border-color:var(--navy-500); }
.dnav:active{ transform:scale(.97); }
.dnav .icon{ width:18px; height:18px; flex:none; }
.dnav-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dnav.next{ margin-left:auto; text-align:right; }
.dnav-sp{ flex:0 0 1px; }

/* roomier reading width inside the rule detail on phones */
@media(max-width:560px){
  .rc-detail{ padding:20px 18px 24px; }
  .rule-card{ padding:15px 14px; }
  .rc-card-ico{ width:46px; height:46px; border-radius:12px; }
}

/* ============================================================
   PROHIBITED / RESTRICTED — more compact on phones
   ============================================================ */
@media (max-width:560px){
  .prohibited-list{ gap:10px; }
  .pro-item{ padding:13px; gap:12px; border-radius:14px; }
  .pro-thumb-ico{ width:64px; height:64px; border-radius:13px; }
  .pro-thumb-ico img{ width:40px; height:40px; }
  .pro-num{ width:28px; height:28px; }
  .pro-top{ gap:8px; }
  .pro-name{ font-size:14.5px; line-height:1.3; }
  .badge{ padding:4px 9px; font-size:11.5px; }
  .pro-note{ font-size:13px; line-height:1.5; margin-top:6px; }
  .pro-basis{ font-size:11px; margin-top:7px; }
  .search-bar{ gap:8px; margin:4px 0 14px; }
  .search-input{ min-width:0; }
}
/* very narrow phones — tighten the thumbnail a touch more */
@media (max-width:380px){
  .pro-thumb-ico{ width:56px; height:56px; }
  .pro-thumb-ico img{ width:34px; height:34px; }
}

/* ============================================================
   PROHIBITED — compact search + filter controls on phones
   ============================================================ */
@media (max-width:560px){
  .search-input{ padding:9px 15px; gap:8px; }
  .search-input .icon{ width:18px; height:18px; }
  /* input text stays 16px so iOS doesn't zoom on focus */
  #pro-filters{ gap:8px; }
  #pro-filters .chip{ padding:7px 12px; font-size:12.5px; min-height:34px; gap:6px; }
  #pro-filters .chip .icon{ width:15px; height:15px; }
}
@media (max-width:380px){
  #pro-filters .chip{ padding:6px 10px; font-size:12px; }
  #pro-filters .chip .icon{ width:14px; height:14px; }
}

/* small author credit at the very bottom */
.footer-credit{ border-top:1px solid var(--line); text-align:center;
  padding:13px 16px calc(13px + env(safe-area-inset-bottom));
  font-size:11.5px; letter-spacing:.3px; color:var(--muted); }

/* a little breathing room between the filter chips and the first item */
#pro-filters{ margin-bottom:14px; }