:root{
  --ink:#101216;
  --paper:#FFFFFF;
  --mut:#555e6e;
  --line:#D7DCE5;
  --line2:#C5CCD8;
  --soft:#F4F6FA;
  --soft2:#ECEFF5;
  --shadow: 0 24px 62px rgba(9,12,20,.10);
  --shadow2: 0 10px 28px rgba(9,12,20,.08);
  --r:24px;
  --r2:18px;
  --max: 1180px;

  --green:#13161C;
  --greenInk:#101216;
  --red:#FF4D4F;
  --amber:#FFB020;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
body.nav-open{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }

.bg{
  position:fixed; inset:0; z-index:-1;
  background:
    linear-gradient(128deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 36%),
    linear-gradient(90deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,.06) 52%, rgba(0,0,0,0) 78%, rgba(0,0,0,.05) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 2px, rgba(255,255,255,0) 2px 4px),
    linear-gradient(180deg, #fff, #f7f8fc);
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 18px; }

/* TEDA section */
.tedaHero{display:grid;grid-template-columns:1fr;gap:10px}
.tedaHero img{width:100%;height:180px;object-fit:cover;border-radius:16px;border:1px solid var(--line);background:#fff}
@media(min-width:860px){.tedaHero img{height:210px}}

/* Gallery */
.gal{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
@media(min-width:860px){.gal{grid-template-columns:repeat(3, minmax(0, 1fr));}}
@media(min-width:1100px){.gal{grid-template-columns:repeat(4, minmax(0, 1fr));}}
.galIt{margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow2);overflow:hidden}
.galIt img{display:block;width:100%;height:170px;object-fit:cover}
.galIt figcaption{padding:10px 10px 12px;font-size:12px;color:var(--mut);word-break:break-word}

/* Top bar */
.top{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topIn{
  max-width: var(--max);
  margin:0 auto;
  padding: 14px 18px;
  display:flex; align-items:center; gap: 14px;
}
.brand{ display:flex; align-items:center; gap: 0; min-width: 300px; }
.brandLogo{
  width: 290px;
  height: 82px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: block;
}
.brandText{ display:none; }

.nav{ display:flex; align-items:center; gap: 6px; flex:1; flex-wrap:nowrap; overflow:auto; }
.nav::-webkit-scrollbar{ display:none; }
.navLink{
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: rgba(16,18,22,.82);
  border:1px solid transparent;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .55px;
  white-space: nowrap;
}
.navLink:hover{ background: var(--soft); border-color: var(--line); }
.navLink.active{ background: #141922; border-color: #141922; color: #fff; font-weight: 800; }

.actions{ display:flex; gap:10px; align-items:center; }

.srOnly{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border:0;
}

.langSwitch{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.langSelect{
  height: 100%;
  border: 0;
  border-radius: 999px;
  padding: 0 28px 0 12px;
  min-width: 64px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
  background: transparent;
  color: inherit;
  cursor:pointer;
  outline: none;
  box-shadow: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.langSelect:focus{
  box-shadow: inset 0 0 0 1px rgba(16,18,22,.35);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background:#fff;
  box-shadow: var(--shadow2);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
  cursor:pointer;
  user-select:none;
}
.btn:hover{ background: var(--soft); }
.btn.green{
  background: linear-gradient(180deg, #1a1f2a, #0f131a);
  border-color: #0f131a;
  color: #fff;
}
.btn.ghost{ background: rgba(255,255,255,.65); }
.btn.danger{
  background: rgba(255,77,79,.12);
  border-color: rgba(255,77,79,.35);
  color: #8A0B0D;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn.is-disabled{ opacity:.45; pointer-events:none; cursor:not-allowed; }

.hamburger{
  display:none;
  margin-left:auto;
  width: 44px; height: 44px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.hamburger span{ display:block; height:2px; background: var(--ink); margin: 8px 10px; border-radius: 99px; }

.drawerBackdrop{
  position: fixed;
  inset: 0;
  z-index: 70;
  border: 0;
  background: rgba(7,10,16,.34);
  opacity: 0;
  transition: opacity .22s ease;
  cursor: pointer;
}
.drawerBackdrop.is-open{ opacity: 1; }

.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 88vw);
  z-index: 80;
  background: rgba(255,255,255,.97);
  border-left: 1px solid var(--line);
  box-shadow: -22px 0 60px rgba(8,12,18,.16);
  transform: translateX(104%);
  transition: transform .22s ease;
  overflow-y: auto;
}
.drawer.is-open{ transform: translateX(0); }
.drawerIn{
  padding: 16px 14px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.drawerTop{
  padding: 6px 4px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.drawerLogo{
  width: 210px;
  max-width: 100%;
  height: auto;
  display:block;
}
.drawerLink{
  padding: 12px 12px;
  border-radius: 13px;
  border:1px solid var(--line);
  background:#fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.drawerLang{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin: 2px 0 4px;
}
.drawerLangLink{
  padding:10px 11px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-size: 11px;
  font-weight: 800;
  text-align:center;
}
.drawerLangLink.active{
  background:#141922;
  color:#fff;
  border-color:#141922;
}
.drawerBtns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

@media (max-width: 980px){
  .nav{ display:none; }
  .actions{ display:none; }
  .hamburger{ display:inline-block; }
  .brand{ min-width: 0; }
  .brandText{ display:none; }
  .brandLogo{ width: 210px; height: 62px; }
}

/* Layout blocks */
.hero{
  margin-top: 14px;
  border-radius: calc(var(--r) + 10px);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,251,255,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.heroIn{
  padding: 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}
@media (max-width: 980px){ .heroIn{ grid-template-columns: 1fr; } }

.card{
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #fbfcff);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.cardH{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  background: linear-gradient(180deg, #fff, #f4f7fc);
}
.cardH b{ font-size: 13px; letter-spacing:.2px; }
.cardH span{ font-size: 12px; color: var(--mut); }
.cardB{ padding: 14px; }

.kpiRow{ display:flex; gap: 10px; flex-wrap:wrap; }
.kpi{
  flex:1;
  min-width: 220px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--soft));
  padding: 12px;
}
.kpi b{ display:block; }
.kpi small{ color: var(--mut); display:block; margin-top:4px; line-height:1.45; }

.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.c12{ grid-column: span 12; }
.c8{ grid-column: span 8; }
.c6{ grid-column: span 6; }
.c4{ grid-column: span 4; }
.c3{ grid-column: span 3; }
@media (max-width: 980px){ .c8,.c6,.c4,.c3{ grid-column: span 12; } }

label{ display:block; font-size: 12px; color: var(--mut); margin: 0 0 6px 2px; }
select,input,textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: #fff;
  color: var(--ink);
  outline:none;
  font-size: 14px;
}
select:focus,input:focus,textarea:focus{ border-color: rgba(16,18,22,.45); box-shadow: 0 0 0 3px rgba(16,18,22,.10); }
textarea{ min-height: 96px; resize: vertical; }

.help{
  margin-top: 8px;
  font-size: 12px;
  color: var(--mut);
  line-height:1.5;
}

.badge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,18,22,.22);
  background: rgba(16,18,22,.08);
  color: var(--greenInk);
  font-weight: 900;
  font-size: 12px;
}
.badge.red{
  border-color: rgba(255,77,79,.35);
  background: rgba(255,77,79,.10);
  color: #8A0B0D;
}
.badge.amber{
  border-color: rgba(255,176,32,.35);
  background: rgba(255,176,32,.10);
  color: #6B3A00;
}

.heroTitle{ font-size: 30px; letter-spacing:-.6px; line-height: 1.10; margin: 0; }
.heroSub{ margin-top: 10px; color: var(--mut); line-height:1.55; max-width: 72ch; }

.chips{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.chip{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow2);
  font-size: 13px;
  font-weight: 800;
}
.chip:hover{ background: var(--soft); }

.hr{ height:1px; background: var(--line); margin: 14px 0; }

/* Accordion */
details{
  border: 1px dashed var(--line2);
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--soft);
}
details + details{ margin-top:10px; }
details summary{
  cursor:pointer;
  font-weight: 900;
  color: var(--ink);
  list-style:none;
}
details summary::-webkit-details-marker{ display:none; }

/* Table */
.tableWrap{ overflow:auto; border:1px solid var(--line); border-radius: 16px; }
table{
  width:100%;
  border-collapse: collapse;
  min-width: 640px;
  background:#fff;
}
th,td{ padding: 12px 12px; border-bottom: 1px solid var(--line); text-align:left; font-size: 13px; }
th{ background: linear-gradient(180deg, #fff, var(--soft)); font-size: 12px; color: var(--mut); letter-spacing:.2px; }
tr:hover td{ background: var(--soft); }

/* Order preview */
.previewTop{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--soft));
}
.previewBody{
  padding: 14px;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
  color: #1B2233;
  min-height: 260px;
  background: #fff;
}

.brandRow{ display:flex; gap: 10px; flex-wrap:wrap; }
.brandChip{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  cursor:pointer;
  user-select:none;
  box-shadow: var(--shadow2);
  min-width: 190px;
}
.brandChip:hover{ background: var(--soft); }
.brandChip.active{
  border-color: rgba(16,18,22,.45);
  box-shadow: 0 0 0 3px rgba(16,18,22,.10), var(--shadow2);
}
.brandChip img{
  width: 56px; height: 26px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}
.brandChip .t{ display:flex; flex-direction:column; gap:2px; }
.brandChip .t b{ font-size: 13px; }
.brandChip .t small{ color: var(--mut); font-size: 11px; }

/* Footer */
.foot{
  margin-top: 18px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,248,253,.88));
  backdrop-filter: blur(14px);
}
.footCenter{
  max-width: var(--max);
  margin:0 auto;
  padding: 26px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-wrap:wrap;
}
.footLogoWrap{ padding: 2px 0 8px; }
.footLogo{
  width: 320px;
  max-width: 86vw;
  height: auto;
  display:block;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.footTitle{ font-weight: 900; }
.footMut{ color: var(--mut); margin-top: 6px; line-height: 1.5; font-size: 13px; }
.footBtns{ display:flex; gap:10px; flex-wrap:wrap; }
.footFine{
  margin-top: 6px;
  color: var(--mut);
  font-size: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.dot{ opacity:.5; }

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 13px;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 99999;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}
.toast.show{ opacity:1; }

/* Small utilities */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--soft);
  font-size: 12px;
  color: var(--mut);
}

.note{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,176,32,.35);
  background: rgba(255,176,32,.12);
  color: #6B3A00;
  line-height:1.55;
  font-size: 13px;
}

code.k{
  background: var(--soft2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 8px;
}

/* Panel */
.panelWrap{ max-width: 980px; margin: 0 auto; }
.panelBox{ border:1px solid var(--line); border-radius: var(--r); background:#fff; box-shadow: var(--shadow2); overflow:hidden; }
.panelBox .panelH{ padding: 12px 14px; border-bottom:1px solid var(--line); background: linear-gradient(180deg,#fff,var(--soft)); display:flex; align-items:center; justify-content:space-between; }
.panelBox .panelB{ padding: 14px; }
.panelTabs{ display:flex; gap: 10px; flex-wrap:wrap; }
.panelTab{ padding: 8px 10px; border-radius: 12px; border:1px solid var(--line); background:#fff; font-weight: 900; font-size: 13px; }
.panelTab.active{ background: rgba(16,18,22,.10); border-color: rgba(16,18,22,.35); color: var(--greenInk); }

/* ---------------------------------
   Components used by pages
---------------------------------- */
.mut{ color: var(--mut); }
.lead{ color: rgba(11,13,18,.78); line-height:1.7; max-width: 85ch; }
.h1{
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.6px;
  line-height: 1.12;
  margin: 10px 0 0;
}
.h3{ font-size: 16px; margin: 0 0 8px; }
.p{ margin: 0 0 10px; line-height:1.75; }
.ul{ margin: 0; padding-left: 18px; line-height:1.75; }
.ul li{ margin: 6px 0; }

.link{ color: var(--greenInk); border-bottom: 1px dashed rgba(16,18,22,.45); }
.link:hover{ border-bottom-style: solid; }

.stack{ display:flex; flex-direction:column; gap:10px; }
.rowBetween{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.big{ font-size: 22px; font-weight: 1000; }
.sep{ height:1px; background: var(--line); margin: 14px 0; }

.steps{ margin:0; padding-left: 18px; line-height:1.8; }
.steps li{ margin: 8px 0; }

/* mini widgets */
.miniGrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mini{ border:1px solid var(--line); border-radius: 16px; padding: 10px; background: linear-gradient(180deg,#fff,var(--soft)); }
.miniTop{ font-size: 12px; color: var(--mut); }
.miniVal{ font-size: 18px; font-weight: 1000; margin-top: 4px; }

/* news */
.news{ display:flex; flex-direction:column; gap: 10px; }
.newsItem{ border:1px solid var(--line); border-radius: 16px; padding: 10px 12px; background:#fff; box-shadow: var(--shadow2); }
.newsItem:hover{ background: var(--soft); }
.newsItem b{ display:block; font-size: 13px; line-height:1.45; }
.newsItem small{ display:block; margin-top:4px; color: var(--mut); font-size: 12px; }

/* product cards */
.prod{ display:block; border:1px solid var(--line); border-radius: var(--r); background:#fff; box-shadow: var(--shadow2); padding: 14px; height: 100%; }
.prod:hover{ background: var(--soft); }
.prodTop{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.prodName{ font-weight: 1000; margin-top: 10px; line-height:1.35; }
.prodMeta{ color: var(--mut); font-size: 12px; line-height:1.5; display:flex; gap: 8px; flex-wrap:wrap; align-items:center; }

.chip.mini{ padding: 6px 10px; font-size: 12px; font-weight: 900; }

/* order preview */
.pre{ margin:0; white-space: pre-wrap; background: #0B0D12; color: #EAF0FF; border-radius: 16px; padding: 12px; border: 1px solid rgba(255,255,255,.10); min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height:1.55; }

.orderSignalRow{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}
.orderSignal{
  border:1px solid var(--line);
  border-radius:14px;
  background: linear-gradient(180deg,#fff,var(--soft));
  padding:10px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.orderSignal b{ display:block; font-size: 12px; letter-spacing:.1px; }
.orderSignal small{ display:block; margin-top:3px; color: var(--mut); font-size: 11px; line-height:1.4; }
.sigDot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:4px;
  flex:0 0 auto;
}
.sigDot.sig-green{ background:#161b24; box-shadow:0 0 0 4px rgba(16,18,22,.16); }
.sigDot.sig-blue{ background:#2F7CF6; box-shadow:0 0 0 4px rgba(47,124,246,.16); }
.sigDot.sig-dark{ background:#0B0D12; box-shadow:0 0 0 4px rgba(11,13,18,.14); }

.actionGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.actionBtn{
  width:100%;
  justify-content:flex-start;
  min-height:48px;
  font-size: 12px;
  letter-spacing:.1px;
}
.actionBtnWide{
  grid-column:1 / -1;
  justify-content:center;
}
.btnIcon{
  width:28px;
  height:28px;
  border-radius:9px;
  border:1px solid var(--line2);
  background:var(--soft);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.btnIcon svg{
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.actionBtn.green .btnIcon{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
}

/* img row */
.imgRow{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.imgRow img{ width: 48%; min-width: 180px; height: 52px; object-fit: contain; border-radius: 14px; border:1px solid var(--line); background:#fff; padding: 8px; }

/* accordion (guide) */
.accordion{ display:flex; flex-direction:column; gap: 10px; }
.accBtn{ text-align:left; padding: 12px 12px; border-radius: 16px; border:1px solid var(--line); background: #fff; box-shadow: var(--shadow2); font-weight: 1000; cursor:pointer; }
.accBtn:hover{ background: var(--soft); }
.accBody{ padding: 12px 12px; border-radius: 16px; border:1px dashed var(--line2); background: var(--soft); }

/* note variants */
.note.ok{ border-color: rgba(16,18,22,.30); background: rgba(16,18,22,.08); color: var(--greenInk); }
.note.bad{ border-color: rgba(255,77,79,.35); background: rgba(255,77,79,.10); color: #8A0B0D; }

/* contact page */
.contactPage{
  align-items: start;
  gap: 14px;
}
.contactCard{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.65);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(246,249,253,.68));
  box-shadow: 0 18px 40px rgba(8,12,18,.10), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(115%);
}
.contactCard .cardH{
  padding: 13px 15px;
  border-bottom-color: rgba(197,204,216,.65);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,248,252,.65));
}
.contactCard .cardB{
  padding: 16px;
}
.contactChannels .stack{
  gap: 9px;
}
.contactAction{
  width: 100%;
  justify-content: flex-start;
  min-height: 49px;
  border-radius: 16px;
  font-size: 11px;
}
.contactAction .btnIcon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.contactHint{
  margin-top: 12px;
  border: 1px solid rgba(255,176,32,.34);
  background: linear-gradient(180deg, rgba(255,245,221,.82), rgba(255,239,199,.72));
  color: #5E4D1F;
}
.contactForm{
  margin-top: 12px;
  gap: 10px 12px;
}
.contactField label{
  margin-bottom: 7px;
  margin-left: 3px;
  letter-spacing: .35px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  color: #667282;
}
.contactField input,
.contactField textarea{
  border-radius: 16px;
  border: 1px solid rgba(16,18,22,.16);
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7);
}
.contactField textarea{
  min-height: 132px;
}
.contactField input:focus,
.contactField textarea:focus{
  border-color: rgba(16,18,22,.45);
  box-shadow: 0 0 0 3px rgba(16,18,22,.09), inset 0 1px 0 rgba(255,255,255,.7);
}
.contactSubmitRow{
  margin-top: 2px;
}
.contactSubmitBtn{
  min-height: 50px;
  border-radius: 16px;
  min-width: 200px;
}
.contactSubmitBtn .btnIcon{
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.15);
}
.contactFormHelp{
  margin-top: 12px;
  line-height: 1.6;
}

/* ---------- New Landing ---------- */
.quickOrderHero{
  margin-top: 10px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.62);
  background:
    radial-gradient(1200px 420px at 15% -20%, rgba(17,20,28,.22), transparent 60%),
    linear-gradient(155deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
  box-shadow: 0 20px 38px rgba(8,12,18,.14), inset 0 1px 0 rgba(255,255,255,.58);
  backdrop-filter: blur(16px) saturate(118%);
  padding: 20px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: center;
}
.quickOrderHead h2{
  margin: 10px 0 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -.35px;
  color: #10131a;
}
.quickOrderHead p{
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mut);
  max-width: 54ch;
}
.quickTag{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.84);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.quickOrderActions{
  display:flex;
  flex-direction: column;
  gap: 9px;
}
.quickOrderActions .btn{
  min-height: 48px;
  justify-content: center;
}
.quickSignals{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.quickSignals span{
  border:1px solid rgba(16,18,22,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.66);
  padding: 9px 10px;
  font-size: 11px;
  color: var(--mut);
  line-height:1.45;
  text-align:center;
}

.landingHero{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 14px;
  align-items: stretch;
}
.landingLeft,
.landingRight{
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.42));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.landingLeft{ padding: 22px 22px 18px; }
.landingRight{ padding: 14px; display:flex; flex-direction:column; gap:12px; }

.heroTag{
  display:inline-flex;
  align-items:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.landingTitle{
  margin: 14px 0 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 58px;
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.45px;
}
.landingLead{
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mut);
  max-width: 58ch;
}
.heroCtaRow{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.heroBtn{ min-height: 46px; }

.heroInfoRow{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:9px;
}
.heroInfo{
  border:1px solid rgba(16,18,22,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.66);
  padding: 9px 10px;
  font-size: 11px;
  color: var(--mut);
  line-height:1.45;
  text-align:center;
}

.logoStage{
  border:0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  min-height: 170px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px 6px 2px;
}
.logoStage img{
  max-width: min(98%, 640px);
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(8,12,18,.16));
}

.showroomStrip{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.showroomStrip img{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow2);
}

.showroomSection{
  margin-top: 16px;
  border:1px solid rgba(255,255,255,.58);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.42));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  padding: 16px;
}
.sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}
.sectionHead h2{
  margin:0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.4px;
}
.showroomGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.showCard{
  border:1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow2);
}
.showCard img{
  width:100%;
  height:230px;
  object-fit:cover;
  display:block;
  filter: saturate(.88) contrast(1.04);
}
.showCardText{ padding: 12px 12px 13px; display:flex; flex-direction:column; gap:5px; }
.showCardText b{ font-size: 14px; }
.showCardText span{ font-size: 12px; color:var(--mut); line-height:1.45; }

.flowSection{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.flowCard{
  border:1px solid rgba(255,255,255,.62);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.46));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.flowCard h3{
  margin:0 0 10px;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 700;
}
.flowCard p{ margin:0 0 12px; color:var(--mut); }
.flowSteps{ display:flex; flex-direction:column; gap:8px; }
.flowStep{
  border:1px solid rgba(16,18,22,.10);
  border-radius:14px;
  background: rgba(255,255,255,.74);
  padding: 10px 11px;
  display:flex;
  align-items:center;
  gap:10px;
}
.flowStep b{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#151a23;
  color:#fff;
  font-size:12px;
  flex: 0 0 auto;
}
.flowStep span{ font-size: 12px; color: var(--mut); line-height:1.45; }
.flowActions{ margin-top: 12px; display:flex; flex-wrap:wrap; gap:10px; }
.technicalCard .techLinks{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---------- Home: global conversion blocks ---------- */
.orderPrime{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 30px;
  background: linear-gradient(165deg, rgba(255,255,255,.74), rgba(244,248,255,.58));
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 18px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  position: relative;
  overflow:hidden;
}
.orderPrime::after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-90px;
  width:210px;
  height:210px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background: linear-gradient(135deg, rgba(16,18,22,.14), rgba(16,18,22,0));
  pointer-events:none;
}
.orderPrimeTitle{
  margin: 12px 0 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 1.04;
  letter-spacing: -.45px;
}
.orderPrimeLead{
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mut);
  max-width: 56ch;
}
.orderPrimeActions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:flex-start;
  justify-content:flex-end;
  align-content:flex-start;
}
.orderPrimeMeta{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:9px;
}
.orderPrimeMeta span{
  border: 1px solid rgba(16,18,22,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.68);
  padding: 9px 10px;
  text-align:center;
  font-size: 11px;
  line-height: 1.42;
  color: var(--mut);
}

.globalEdgeSection{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.50));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 16px;
}
.edgeGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.edgeCard{
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow2);
  padding: 14px;
}
.edgeCard h3{
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -.2px;
}
.edgeCard p{
  margin: 0;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.6;
}
.edgeTags{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.edgeTags span{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,18,22,.14);
  background: rgba(255,255,255,.72);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
}

.matcherSection{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(246,249,255,.52));
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 16px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 12px;
}
.matcherForm h3{
  margin: 10px 0 0;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -.35px;
}
.matcherForm p{
  margin: 9px 0 14px;
  color: var(--mut);
  line-height: 1.6;
  font-size: 13px;
}
.matcherResult{
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow2);
  padding: 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 10px;
}
.matcherResultInner{
  border: 1px solid rgba(16,18,22,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  padding: 12px;
  min-height: 240px;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.55;
}
.matcherLine{
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.matcherLine b{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.matcherLine strong{
  display:block;
  margin-top: 4px;
  font-size: 20px;
  letter-spacing: -.15px;
}
.matcherList{
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--mut);
}
.matcherList li{
  margin: 6px 0;
  line-height: 1.5;
}
.matcherFine{
  margin-top: 10px;
  border-top: 1px dashed rgba(16,18,22,.18);
  padding-top: 10px;
  font-size: 12px;
  color: var(--mut);
}

.trustSection{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.64), rgba(246,249,255,.52));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 16px;
}
.trustGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.trustBadges{
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow2);
  padding: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-content:flex-start;
}
.trustBadge{
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(16,18,22,.14);
  background: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.trustSteps{
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow2);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.trustStep{
  border: 1px solid rgba(16,18,22,.10);
  border-radius: 13px;
  background: rgba(255,255,255,.70);
  padding: 9px 10px;
  display:flex;
  align-items:flex-start;
  gap:9px;
}
.trustStep b{
  font-size: 11px;
  letter-spacing: .4px;
  margin-top: 2px;
}
.trustStep span{
  color: var(--mut);
  line-height: 1.5;
  font-size: 12px;
}

@media (max-width: 1100px){
  .orderPrimeTitle{ font-size: 40px; }
  .landingTitle{ font-size: 40px; }
  .quickOrderHead h2{ font-size: 38px; }
  .matcherForm h3{ font-size: 32px; }
}

@media (max-width: 980px){
  .orderPrime{
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 24px;
  }
  .orderPrimeActions{ justify-content:flex-start; }
  .orderPrimeMeta{ grid-template-columns: 1fr; }
  .landingHero{ grid-template-columns: 1fr; }
  .heroInfoRow{ grid-template-columns: 1fr; }
  .showroomGrid{ grid-template-columns: 1fr; }
  .flowSection{ grid-template-columns: 1fr; }
  .edgeGrid{ grid-template-columns: 1fr; }
  .matcherSection{ grid-template-columns: 1fr; }
  .matcherResultInner{ min-height: 0; }
  .trustGrid{ grid-template-columns: 1fr; }
  .brand{ min-width: 0; }
  .brandLogo{ width: 230px; height: 68px; }
  .quickOrderHero{ grid-template-columns: 1fr; padding: 14px; border-radius: 26px; }
  .quickOrderActions{ flex-direction: row; flex-wrap: wrap; }
  .quickOrderActions .btn{ flex: 1 1 220px; }
  .quickSignals{ grid-template-columns: 1fr; }
  .contactSubmitBtn{ width: 100%; }
}

/* small screens */
@media (max-width: 520px){
  .h1{ font-size: 28px; }
  .orderPrimeTitle{ font-size: 34px; }
  .orderPrimeLead{ font-size: 13px; }
  .landingTitle{ font-size: 33px; }
  .landingLeft{ padding: 16px; }
  .landingRight{ padding: 12px; }
  .globalEdgeSection,
  .matcherSection,
  .trustSection,
  .showroomSection{ border-radius: 22px; }
  .edgeCard h3{ font-size: 18px; }
  .matcherForm h3{ font-size: 30px; }
  .matcherResult{ padding: 10px; }
  .trustBadge{ font-size: 10px; }
  .quickOrderHero{ padding: 12px; border-radius: 20px; }
  .quickOrderHead h2{ font-size: 32px; }
  .quickOrderHead p{ font-size: 13px; }
  .quickOrderActions{ flex-direction: column; }
  .quickOrderActions .btn{ width: 100%; }
  .sectionHead{ flex-direction:column; align-items:flex-start; }
  .showroomStrip{ grid-template-columns: 1fr; }
  .showroomStrip img{ height: 200px; }
  .miniGrid{ grid-template-columns: 1fr; }
  .imgRow img{ width: 100%; }
  .orderSignalRow{ grid-template-columns: 1fr; }
  .actionGrid{ grid-template-columns: 1fr; }
  .brandLogo{ width: 205px; height: 62px; padding: 0; }
  .footLogo{ width: 240px; }
  .contactPage{ margin-top: 12px; gap: 10px; }
  .contactCard{ border-radius: 22px; }
  .contactCard .cardH{ padding: 11px 12px; }
  .contactCard .cardB{ padding: 12px; }
  .contactAction{ min-height: 46px; font-size: 10px; }
  .contactAction .btnIcon{ width: 28px; height: 28px; }
  .contactForm{ margin-top: 10px; gap: 8px 10px; }
  .contactField label{ font-size: 10px; margin-bottom: 6px; }
  .contactField input,
  .contactField textarea{ font-size: 16px; padding: 11px 12px; }
  .contactField textarea{ min-height: 118px; }
  .contactSubmitBtn{ min-height: 48px; font-size: 12px; }
}

/* ---------------------------------
   Dark Navy Elegant Theme (v2026.02.23-r17)
---------------------------------- */
:root{
  --ink:#EAF2FF;
  --paper:#050D1E;
  --mut:#C3D4F5;
  --line:rgba(178,203,246,.30);
  --line2:rgba(205,224,255,.42);
  --soft:rgba(112,151,226,.16);
  --soft2:rgba(126,166,236,.14);
  --shadow: 0 30px 74px rgba(2,6,18,.64);
  --shadow2: 0 16px 44px rgba(2,6,16,.56);
  --green:#E6EEFF;
  --greenInk:#07122B;
}

body{
  color: var(--ink);
  background: radial-gradient(130% 140% at 10% -20%, #12274F 0%, #081731 42%, #050D1E 100%);
  isolation:isolate;
}

.bg{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(187,214,255,.22) 0%, rgba(187,214,255,0) 56%),
    radial-gradient(900px 500px at 90% 6%, rgba(125,166,255,.20) 0%, rgba(125,166,255,0) 58%),
    linear-gradient(160deg, #071428 0%, #050D1E 48%, #091C3C 100%);
}
.bg::before,
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.bg::before{
  background:
    repeating-linear-gradient(125deg, rgba(208,227,255,.14) 0 2px, transparent 2px 86px),
    repeating-linear-gradient(305deg, rgba(118,161,242,.10) 0 1px, transparent 1px 72px);
  opacity:.42;
}
.bg::after{
  background:
    linear-gradient(135deg, transparent 0 74%, rgba(166,200,255,.16) 74% 79%, transparent 79%),
    linear-gradient(315deg, transparent 0 70%, rgba(97,141,230,.15) 70% 75%, transparent 75%);
  background-size: 340px 340px, 300px 300px;
  background-position: 0 0, 100% 100%;
  opacity:.34;
}

.top{
  background: rgba(8,22,48,.68);
  border-bottom: 1px solid rgba(182,208,248,.26);
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
}

.brand{
  position:relative;
}
.brand::after{
  content:"";
  position:absolute;
  left: 28px;
  top: 50%;
  width: 216px;
  height: 52px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(235,245,255,.52) 0%, rgba(235,245,255,.18) 48%, rgba(235,245,255,0) 100%);
  filter: blur(9px);
  opacity:.34;
  pointer-events:none;
  z-index:0;
}
.brandLogo,
.drawerLogo,
.footLogo{
  position:relative;
  z-index:1;
  filter:
    brightness(0) invert(.86)
    saturate(.85)
    drop-shadow(0 0 8px rgba(223,237,255,.24));
}
.footLogoWrap{
  position:relative;
}
.footLogoWrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:44%;
  width:min(320px, 62vw);
  height:58px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background: radial-gradient(closest-side, rgba(228,241,255,.36) 0%, rgba(228,241,255,.12) 46%, rgba(228,241,255,0) 100%);
  filter:blur(8px);
  opacity:.25;
  pointer-events:none;
}

.navLink{
  color: rgba(230,240,255,.82);
}
.navLink:hover{
  background: rgba(106,150,236,.20);
  border-color: rgba(189,211,248,.26);
}
.navLink.active{
  background: linear-gradient(180deg, rgba(232,241,255,.96), rgba(203,220,250,.94));
  border-color: rgba(230,241,255,.72);
  color:#07122B;
}

.langSwitch{
  border-color: rgba(193,213,248,.34);
  background: rgba(12,29,60,.56);
}
.langSelect{
  color: rgba(230,240,255,.92);
}
.langSelect:focus{
  box-shadow: inset 0 0 0 1px rgba(230,240,255,.54);
}

.btn{
  border-color: rgba(190,211,248,.36);
  background: rgba(12,30,62,.66);
  color: var(--ink);
}
.btn:hover{
  background: rgba(32,59,106,.76);
}
.btn.green{
  background: linear-gradient(180deg, #EAF1FF, #CFE0FF);
  border-color: rgba(230,240,255,.76);
  color:#07122B;
}
.btn.ghost{
  background: rgba(16,37,74,.62);
}
.btn.danger{
  background: rgba(255,77,79,.18);
  border-color: rgba(255,113,115,.46);
  color:#FFE4E4;
}

.hamburger{
  border-color: rgba(194,215,251,.34);
  background: rgba(11,30,62,.62);
}
.hamburger span{
  background: rgba(232,241,255,.94);
}

.drawer{
  background: rgba(6,18,39,.94);
  border-left: 1px solid rgba(190,211,248,.24);
  box-shadow: -22px 0 66px rgba(0,0,0,.52);
}
.drawerTop{
  border-bottom: 1px solid rgba(190,211,248,.20);
}
.drawerLink,
.drawerLangLink{
  border-color: rgba(190,211,248,.24);
  background: rgba(7,21,43,.74);
  color: var(--ink);
}
.drawerLangLink.active{
  background: rgba(245,250,255,.95);
  color:#07122B;
  border-color: rgba(255,255,255,.7);
}

.hero,
.card,
.showCard,
.flowCard,
.panelBox,
.prod,
.mini,
.newsItem,
.brandChip,
.tableWrap{
  background: linear-gradient(180deg, rgba(16,36,74,.64), rgba(10,24,52,.58));
  border-color: rgba(172,197,239,.26);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
}

.hero,
.card,
.showCard,
.flowCard{
  position:relative;
  overflow:hidden;
}
.hero::after,
.card::after,
.showCard::after,
.flowCard::after{
  content:"";
  position:absolute;
  right:-78px;
  bottom:-78px;
  width:180px;
  height:180px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background: linear-gradient(135deg, rgba(170,205,255,.24), rgba(120,162,245,0));
  pointer-events:none;
}

.cardH,
.panelBox .panelH,
.previewTop{
  background: linear-gradient(180deg, rgba(26,49,89,.60), rgba(14,30,58,.56));
  border-bottom-color: rgba(176,202,245,.20);
}

label,
.cardH span,
.previewBody,
.flowStep span,
.showCardText span,
.prodMeta,
.miniTop,
.newsItem small,
.footMut,
.footFine,
.mut,
.lead{
  color: var(--mut);
}

.h1,
.heroTitle,
.flowCard h3,
.sectionHead h2{
  color: #F0F5FF;
}

select,
input,
textarea{
  border-color: rgba(196,216,252,.30);
  background: rgba(5,16,36,.74);
  color: var(--ink);
}
select::placeholder,
input::placeholder,
textarea::placeholder{
  color: rgba(182,201,236,.78);
}
select:focus,
input:focus,
textarea:focus{
  border-color: rgba(235,244,255,.54);
  box-shadow: 0 0 0 3px rgba(129,168,238,.26);
}

.pill{
  border-color: rgba(194,214,251,.30);
  background: linear-gradient(90deg, rgba(44,72,124,.42), rgba(21,42,80,.40));
  color: rgba(224,236,255,.94);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 9px 50%);
  padding: 6px 16px 6px 12px;
}

.chip{
  border-color: rgba(192,214,251,.28);
  background: rgba(9,24,48,.72);
}
.chip:hover{
  background: rgba(31,52,92,.82);
}

table{
  background: rgba(6,16,34,.78);
}
th{
  background: rgba(16,33,65,.72);
  color: rgba(208,225,255,.86);
}
th,td{
  border-bottom-color: rgba(176,202,245,.16);
}
tr:hover td{
  background: rgba(21,39,74,.56);
}

.note{
  border-color: rgba(255,217,152,.42);
  background: rgba(255,176,32,.16);
  color: #F6D6A2;
}
.note.ok{
  border-color: rgba(128,217,184,.40);
  background: rgba(29,153,111,.17);
  color:#D3FFE9;
}
.note.bad{
  border-color: rgba(255,131,132,.44);
  background: rgba(162,36,37,.22);
  color:#FFD8D8;
}

.flowStep{
  border-color: rgba(186,210,251,.26);
  background: rgba(8,21,45,.64);
}
.flowStep b{
  background: rgba(238,246,255,.95);
  color:#08142E;
}

.foot{
  border-top-color: rgba(186,210,251,.24);
  background: linear-gradient(180deg, rgba(7,17,37,.78), rgba(5,12,28,.92));
}

.toast{
  border-color: rgba(196,216,252,.30);
  background: rgba(8,20,42,.88);
  color: var(--ink);
}

.orderPrime,
.globalEdgeSection,
.matcherSection,
.trustSection{
  background: linear-gradient(180deg, rgba(16,36,74,.62), rgba(10,24,52,.56));
  border-color: rgba(172,197,239,.24);
  box-shadow: var(--shadow);
}
.orderPrime::after{
  background: linear-gradient(135deg, rgba(170,205,255,.24), rgba(120,162,245,0));
}
.orderPrimeMeta span,
.edgeCard,
.matcherResult,
.matcherResultInner,
.trustBadges,
.trustSteps,
.trustStep{
  border-color: rgba(186,210,251,.24);
  background: rgba(8,21,45,.64);
  box-shadow: var(--shadow2);
}
.edgeTags span,
.trustBadge{
  border-color: rgba(192,214,251,.28);
  background: rgba(12,29,59,.62);
  color: var(--ink);
}
.orderPrimeMeta span,
.edgeCard p,
.matcherForm p,
.matcherResultInner,
.matcherList,
.matcherFine,
.trustStep span{
  color: var(--mut);
}
.orderPrimeTitle,
.matcherForm h3,
.edgeCard h3{
  color:#F0F5FF;
}
.matcherFine{
  border-top-color: rgba(190,211,248,.24);
}

@media (max-width: 980px){
  .brand::after{
    width: 156px;
    height: 42px;
    left: 10px;
    opacity:.28;
  }
}

/* ---------------------------------
   Arabic / RTL support
---------------------------------- */
html[lang="ar"] body{
  font-family: "Tajawal", "Noto Sans Arabic", "Sora", ui-sans-serif, system-ui, sans-serif;
}

html[dir="rtl"] .topIn,
html[dir="rtl"] .nav,
html[dir="rtl"] .actions,
html[dir="rtl"] .drawerIn{
  direction: rtl;
}

html[dir="rtl"] .drawer{
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--line);
  box-shadow: 22px 0 66px rgba(0,0,0,.52);
  transform: translateX(-104%);
}
html[dir="rtl"] .drawer.is-open{ transform: translateX(0); }

html[dir="rtl"] .langSelect{
  padding: 0 12px 0 28px;
  background-position:
    14px calc(50% - 2px),
    19px calc(50% - 2px);
}

html[dir="rtl"] label,
html[dir="rtl"] .lead,
html[dir="rtl"] .p,
html[dir="rtl"] .mut,
html[dir="rtl"] .cardH b,
html[dir="rtl"] .cardH span,
html[dir="rtl"] .flowStep span,
html[dir="rtl"] .showCardText,
html[dir="rtl"] .footCenter,
html[dir="rtl"] .contactField label{
  text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select{
  text-align: right;
}

html[dir="rtl"] .flowStep,
html[dir="rtl"] .orderSignal{
  flex-direction: row-reverse;
}

html[dir="rtl"] .pre{
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .footFine{
  justify-content: center;
}