/* ============================================================
   TRAVELZOP — Marketing site design system (v2, modern)
   Light · premium Gulf · porcelain + deep navy + metallic gold
   Display: Fraunces · Body: Manrope · Mono: Space Mono
   ============================================================ */

:root {
  --bg:        #F5F8FC;
  --bg-2:      #EEF3FA;
  --bg-warm:   #FBFAF6;
  --surface:   #FFFFFF;
  --ink:       #0A1C55;
  --ink-2:     #143174;
  --ink-3:     #1C3358;
  --ink-soft:  #45566F;
  --ink-mute:  #7A879E;
  --gold:      #0A93D6;
  --gold-2:    #00A8E8;
  --gold-bright:#35BEF7;
  --gold-soft: #E2F4FD;
  --line:      #DEE6F0;
  --line-2:    #E9EEF6;
  --mist:      #E9F0F9;
  --ok:        #2E9E6A;
  --violet:    #6E5BD6;

  --display: "Fraunces", Georgia, serif;
  --body:    "Manrope", system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --container: 1180px;
  --wide: 1320px;
  --radius:   20px;
  --radius-sm: 13px;
  --radius-lg: 28px;
  --shadow-xl: 0 40px 90px -40px rgba(11,23,48,.4);
  --shadow:   0 28px 64px -32px rgba(11,23,48,.3);
  --shadow-sm: 0 14px 34px -20px rgba(11,23,48,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { overflow-x: clip; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-bright); color: var(--ink); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: var(--wide); }
section { position: relative; }
.pad { padding: 100px 0; }
.pad-lg { padding: 128px 0; }
.pad-sm { padding: 64px 0; }
@media (max-width: 760px){ .pad, .pad-lg { padding: 64px 0; } .pad-sm { padding: 44px 0; } }

/* ---------- Type ---------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 500; line-height: 1.05; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2.05rem, 4.3vw, 3.25rem); }
h3 { font-size: clamp(1.32rem, 2.3vw, 1.72rem); }
h4 { font-size: 1.14rem; }
.serif-it { font-style: italic; }
p { color: var(--ink-soft); }
.lead { font-size: clamp(1.06rem, 1.55vw, 1.3rem); color: var(--ink-soft); line-height: 1.62; }
.big { font-size: clamp(1.5rem, 3vw, 2.1rem); font-family: var(--display); line-height: 1.3; }

.eyebrow {
  font-family: var(--mono); font-size: .73rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content:""; width: 24px; height: 1px; background: var(--gold); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content:""; width: 24px; height: 1px; background: var(--gold); }

.section-head { max-width: 740px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 { margin: 18px 0 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  padding: 15px 26px; border-radius: 100px; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 18px 34px -16px rgba(11,23,48,.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -16px rgba(11,23,48,.6); }
.btn-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold-2)); color: #fff; box-shadow: 0 18px 34px -16px rgba(10,147,214,.6); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -16px rgba(10,147,214,.68); }
.btn-ghost { background: rgba(255,255,255,.6); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: #fff; }
.btn-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-light:hover { background: rgba(255,255,255,.18); }
.btn-lg { padding: 18px 34px; font-size: 1.02rem; }
.btn .arw { transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}.d5{transition-delay:.35s}
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Utility ---------- */
.grid { display: grid; gap: 24px; }
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.center{text-align:center}
.mono{font-family:var(--mono)}
.gold-txt{color:var(--gold)}
.chip { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; padding: 7px 13px; border-radius: 100px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }

/* dark sections */
.dark { background: linear-gradient(165deg, #0A1C55 0%, #143174 100%); color: #fff; position: relative; overflow: hidden; }
.dark h1,.dark h2,.dark h3,.dark h4 { color: #fff; }
.dark p { color: #A9B8D0; }
.dark .eyebrow { color: var(--gold-bright); }
.dark .eyebrow::before, .dark .eyebrow::after { background: var(--gold-bright); }
.dark-mesh::before {
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 85% 8%, rgba(0,168,240,.14), transparent 60%),
    radial-gradient(700px 500px at 5% 95%, rgba(12,80,170,.16), transparent 60%);
}

/* ---------- Glass card ---------- */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
}
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }

/* ============================================================
   HEADER + MEGA NAV
   ============================================================ */
.hdr { position: sticky; top: 0; z-index: 100; background: rgba(245,248,252,.8); backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.hdr.scrolled { border-color: var(--line); background: rgba(245,248,252,.95); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); }
.brand .mark { width: 33px; height: 33px; border-radius: 9px; background: linear-gradient(140deg, var(--ink), var(--ink-2)); display: grid; place-items: center; color: var(--gold-bright); box-shadow: 0 6px 16px -6px rgba(11,23,48,.5); font-size: .95rem; }
.brand b { color: var(--gold); font-weight: 800; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav > a, .nav .has-mega > button { font-family: var(--body); font-size: .94rem; font-weight: 600; color: var(--ink-soft); padding: 9px 14px; border-radius: 10px; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color .2s, background .2s; }
.nav > a:hover, .nav .has-mega:hover > button { color: var(--ink); background: rgba(11,23,48,.04); }
.nav .caret { width: 9px; transition: transform .25s; }
.has-mega { position: relative; }
.has-mega:hover .caret { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); width: 620px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega a { display: flex; gap: 12px; padding: 12px; border-radius: 12px; transition: background .2s; }
.mega a:hover { background: var(--bg); }
.mega .mi-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--mist); display: grid; place-items: center; font-size: 1.1rem; }
.mega .mi-t { font-weight: 700; font-size: .92rem; color: var(--ink); }
.mega .mi-d { font-size: .8rem; color: var(--ink-mute); line-height: 1.4; }
.hdr-cta { display: flex; align-items: center; gap: 12px; }
.menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--ink); }
@media (max-width: 1024px){ .nav, .hdr-cta .btn { display: none; } .menu-btn { display: block; } }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.drawer.open { display: block; }
.drawer-bg { position: absolute; inset: 0; background: rgba(11,23,48,.45); }
.drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(340px, 88vw); background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow); overflow-y: auto; }
.drawer-panel .dgroup { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); padding: 16px 12px 6px; }
.drawer-panel a { padding: 12px; border-radius: 10px; font-weight: 600; color: var(--ink); font-size: .98rem; }
.drawer-panel a:hover { background: var(--bg); }
.drawer-close { align-self: flex-end; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--ink-soft); }

/* ============================================================
   HERO (aurora)
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: 72px 0 88px; }
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aurora::before, .aurora::after { content:""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.aurora::before { width: 620px; height: 620px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(0,168,240,.5), transparent 68%); }
.aurora::after { width: 560px; height: 560px; bottom: -220px; left: -140px; background: radial-gradient(circle, rgba(12,80,170,.28), transparent 66%); }
.hero-inner { position: relative; z-index: 1; }

.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-copy h1 { margin: 22px 0 22px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero-note { margin-top: 24px; color: var(--ink-mute); font-size: .93rem; display: flex; align-items: center; gap: 9px; }
.hero-note .mono { color: var(--gold); }

/* trust strip */
.trust-strip { margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.trust-strip > .mono { font-size: .7rem; letter-spacing: .16em; color: var(--ink-mute); }
.trust-logos { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.trust-logos span { font-weight: 700; font-size: 1.02rem; color: var(--ink); opacity: .5; transition: opacity .2s; }
.trust-logos span:hover { opacity: 1; }

/* ============================================================
   UI MOCKUP FRAMES (browser chrome + stylized dashboards)
   ============================================================ */
.ui-frame { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xl); }
.ui-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #EEF2F8; border-bottom: 1px solid var(--line); }
.ui-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #CDD6E4; }
.ui-bar .dot:nth-child(1){background:#E6857E}.ui-bar .dot:nth-child(2){background:#E9C06A}.ui-bar .dot:nth-child(3){background:#7FC29B}
.ui-url { margin-left: 10px; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 12px; font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); }
.ui-open { font-family: var(--mono); color: var(--gold); font-size: .74rem; font-weight: 700; }
.ui-body { background: linear-gradient(180deg,#fff,#FAFCFF); }

/* mini admin dashboard mock */
.dash { display: grid; grid-template-columns: 150px 1fr; min-height: 340px; }
.dash-side { background: #0A1C55; padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; }
.dash-side .ds-logo { color: #fff; font-weight: 800; font-size: .95rem; padding: 6px 10px 16px; }
.dash-side .ds-logo b { color: var(--gold-bright); }
.dash-side a { color: #93A3BE; font-size: .78rem; padding: 8px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.dash-side a.on { background: rgba(0,168,240,.14); color: var(--gold-bright); }
.dash-main { padding: 22px; }
.dash-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dash-h b { font-family: var(--display); font-size: 1.15rem; }
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.kpi .k-l { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); font-weight: 700; }
.kpi .k-v { font-family: var(--display); font-size: 1.25rem; color: var(--ink); margin-top: 3px; }
.kpi .k-d { font-size: .62rem; color: var(--ok); font-weight: 700; margin-top: 2px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.bars i { flex: 1; background: linear-gradient(180deg, var(--gold-bright), var(--gold-2)); border-radius: 4px 4px 0 0; display: block; }

/* ledger mock (accounting) */
.ledger { padding: 20px; font-family: var(--mono); font-size: .74rem; }
.ledger-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-family: var(--body); }
.ledger-h b { font-family: var(--display); font-size: 1.1rem; }
.led-tabs { display: flex; gap: 6px; }
.led-tabs span { font-family: var(--mono); font-size: .64rem; padding: 5px 10px; border-radius: 7px; background: var(--bg); color: var(--ink-mute); }
.led-tabs span.on { background: var(--ink); color: #fff; }
.led-row { display: grid; grid-template-columns: 2.4fr 1fr 1fr; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line-2); }
.led-row.head { color: var(--ink-mute); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.led-row .deb { color: var(--ink); text-align: right; }
.led-row .cred { color: var(--gold); text-align: right; }
.led-row.tot { border-top: 2px solid var(--ink); border-bottom: none; font-weight: 700; color: var(--ink); margin-top: 4px; }

/* wallet mock (agent) */
.wallet { padding: 22px; }
.wallet-top { background: linear-gradient(135deg, #0A1C55, #143174); border-radius: 14px; padding: 20px; color: #fff; margin-bottom: 14px; position: relative; overflow: hidden; }
.wallet-top::after { content:""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(0,168,240,.25), transparent 70%); top: -60px; right: -40px; }
.wallet-top .wl { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #93A3BE; font-family: var(--mono); }
.wallet-top .wv { font-family: var(--display); font-size: 2rem; margin: 4px 0; }
.wallet-top .wc { font-size: .74rem; color: var(--gold-bright); font-family: var(--mono); }
.wallet-rows { display: flex; flex-direction: column; gap: 8px; }
.wallet-rows .wr { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: .8rem; }
.wallet-rows .wr b { font-family: var(--mono); }
.wr .up { color: var(--ok); } .wr .dn { color: #C0392B; }

/* ============================================================
   BENTO GRID
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; }
.bento .cell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; position: relative; overflow: hidden; }
.bento .cell:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bento .span2 { grid-column: span 2; }
.bento .rspan2 { grid-row: span 2; }
.bento .dark-cell { background: linear-gradient(160deg, #0A1C55, #143174); color: #fff; border: none; }
.bento .dark-cell h3 { color: #fff; } .bento .dark-cell p { color: #A9B8D0; }
.cell-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--mist); display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 16px; }
.dark-cell .cell-ico { background: rgba(0,168,240,.15); }
.cell h3 { margin-bottom: 8px; }
.cell p { font-size: .93rem; }
.cell-tag { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--gold); margin-bottom: 14px; text-transform: uppercase; }
@media (max-width: 940px){ .bento { grid-template-columns: repeat(2,1fr); } .bento .span2 { grid-column: span 2; } }
@media (max-width: 600px){ .bento { grid-template-columns: 1fr; } .bento .span2, .bento .rspan2 { grid-column: auto; grid-row: auto; } }

/* ============================================================
   FEATURE ROW (alternating copy + mockup)
   ============================================================ */
.frow { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.frow + .frow { margin-top: 110px; }
.frow.flip .frow-media { order: -1; }
.frow-copy .eyebrow { margin-bottom: 18px; }
.frow-copy h2 { margin-bottom: 18px; }
.flist { list-style: none; margin: 24px 0 30px; display: flex; flex-direction: column; gap: 13px; }
.flist li { padding-left: 30px; position: relative; color: var(--ink-soft); font-size: .97rem; }
.flist li::before { content:"✦"; position: absolute; left: 0; top: 1px; color: var(--gold); }
.flist b { color: var(--ink); }
@media (max-width: 940px){ .frow { grid-template-columns: 1fr; gap: 34px; } .frow + .frow { margin-top: 64px; } .frow.flip .frow-media { order: 0; } }

/* ============================================================
   STATS
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat { text-align: center; padding: 20px; }
.stat b { font-family: var(--display); font-size: clamp(2.4rem,5vw,3.4rem); color: var(--ink); display: block; line-height: 1; }
.dark .stat b { color: #fff; }
.stat span { font-size: .86rem; color: var(--ink-mute); display: block; margin-top: 10px; }
.dark .stat span { color: #93A3BE; }
@media (max-width: 620px){ .stats { grid-template-columns: 1fr 1fr; gap: 26px; } }

/* ============================================================
   COMPARISON
   ============================================================ */
.cmp { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; align-items: center; }
.cmp-row > div { padding: 17px 22px; border-bottom: 1px solid rgba(255,255,255,.09); font-size: .93rem; }
.cmp-row > div:not(.cmp-k){ text-align: center; color: #8E9EB8; }
.cmp-k { color: #DBE4F0; font-weight: 600; }
.cmp-head > div { padding: 22px; }
.cmp-col { font-family: var(--display); font-size: 1.12rem !important; color: #fff !important; display: flex; flex-direction: column; gap: 3px; }
.cmp-col .mono { font-family: var(--mono); font-size: .64rem; color: #7E8FA8; letter-spacing: .06em; }
.cmp-col.hl { color: var(--gold-bright) !important; }
.cmp-row .hl { color: #fff !important; font-weight: 700; background: rgba(0,168,240,.08); }
.cmp-head { background: rgba(255,255,255,.03); }
.cmp-row:last-child > div { border-bottom: none; }
@media (max-width: 820px){ .cmp { overflow-x: auto; } .cmp-row { grid-template-columns: 1.4fr .85fr .85fr 1fr; min-width: 640px; } }

/* ============================================================
   PRICING
   ============================================================ */
.price-grid { align-items: stretch; }
.price { display: flex; flex-direction: column; position: relative; }
.price-name { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--gold); margin-bottom: 16px; }
.price-amt { font-family: var(--display); font-size: 1rem; color: var(--ink-mute); line-height: 1.3; margin-bottom: 16px; }
.price-amt b { font-size: 2.5rem; color: var(--ink); }
.price > p { font-size: .92rem; margin-bottom: 20px; }
.price ul { list-style: none; margin-bottom: 26px; flex: 1; display: flex; flex-direction: column; gap: 11px; }
.price li { padding-left: 26px; position: relative; font-size: .91rem; color: var(--ink-soft); }
.price li::before { content:"✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.price.featured { border-color: var(--gold); box-shadow: 0 34px 74px -34px rgba(10,147,214,.42); transform: translateY(-8px); }
.price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--gold-bright), var(--gold-2)); color: #fff; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; padding: 6px 16px; border-radius: 100px; font-weight: 700; }
@media (max-width: 940px){ .price.featured { transform: none; } }
.care { margin-top: 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.care h3 { margin-bottom: 8px; } .care p { max-width: 640px; font-size: .95rem; }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.prod { padding: 30px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.prod:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.prod-ico { font-size: 1.7rem; display: block; margin-bottom: 14px; }
.prod h3 { margin-bottom: 8px; }
.prod p { font-size: .94rem; }
.prod-more { background: linear-gradient(160deg, #0A1C55, #143174); border: none; }
.prod-more h3 { color: #fff; } .prod-more p { color: #A9B8D0; } .prod-more .prod-ico { filter: grayscale(0); }

/* ============================================================
   MARKETS
   ============================================================ */
.markets-grid .market { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px; display: flex; flex-direction: column; gap: 6px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.market:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.m-flag { font-size: 1.6rem; }
.market b { font-family: var(--display); font-size: 1.25rem; color: var(--ink); }
.market .mono { font-size: .7rem; color: var(--ink-mute); letter-spacing: .08em; }

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cta-contacts { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 30px; }
.cta-contacts .mono { font-size: .64rem; letter-spacing: .12em; color: #7E8FA8; display: block; margin-bottom: 6px; }
.cta-contacts a, .cta-contacts span:not(.mono) { color: #DBE4F0; font-weight: 600; }
.cta-contacts a:hover { color: var(--gold-bright); }
.cta-form { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.cf-row { margin-bottom: 15px; }
.cf-row label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.cf-row input, .cf-row textarea, .cf-row select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; font-family: var(--body); font-size: .95rem; color: var(--ink); background: var(--bg); transition: border-color .2s, box-shadow .2s; }
.cf-row input:focus, .cf-row textarea:focus, .cf-row select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(0,168,240,.22); background: #fff; }
.cf-note { text-align: center; margin-top: 14px; font-size: .73rem; color: var(--ink-mute); }
@media (max-width: 940px){ .cta-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: #0A1C55; color: #C4CEDE; padding: 78px 0 34px; }
.foot h4 { font-family: var(--body); color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
.foot a { color: #9FB0C7; font-size: .92rem; line-height: 2.05; transition: color .2s; }
.foot a:hover { color: var(--gold-bright); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.1fr; gap: 36px; }
.foot-brand .brand { color: #fff; margin-bottom: 15px; } .foot-brand .brand b { color: var(--gold-bright); }
.foot-brand p { color: #8194AE; max-width: 260px; font-size: .92rem; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 52px; padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #6E7F98; font-size: .84rem; }
.foot-cities { display: flex; flex-wrap: wrap; gap: 5px 16px; }
.foot-cities a { font-family: var(--mono); font-size: .76rem; }
@media (max-width: 940px){ .foot-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px){ .foot-grid { grid-template-columns: 1fr 1fr; } }

/* page hero (sub-pages) */
.phero { padding: 60px 0 20px; position: relative; overflow: hidden; }
.phero .lead { max-width: 640px; }
.breadcrumb { font-family: var(--mono); font-size: .72rem; color: var(--ink-mute); margin-bottom: 20px; letter-spacing: .04em; }
.breadcrumb a:hover { color: var(--gold); }

/* hero route animation */
.hero-art { display: grid; place-items: center; }
.arc { animation: flow 3.2s linear infinite; }
.arc.a2{animation-delay:.4s}.arc.a3{animation-delay:.8s}.arc.a4{animation-delay:1.2s}.arc.a5{animation-delay:1.6s}.arc.a6{animation-delay:2s}
@keyframes flow { to { stroke-dashoffset: -44; } }
.ring { transform-origin: 230px 230px; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
.node text { opacity: 0; animation: fadein .6s ease forwards; }
.node:nth-child(2) text{animation-delay:.3s}.node:nth-child(3) text{animation-delay:.5s}.node:nth-child(4) text{animation-delay:.7s}.node:nth-child(5) text{animation-delay:.9s}.node:nth-child(6) text{animation-delay:1.1s}
@keyframes fadein { to { opacity: 1 } }
@media (max-width: 940px){
  .hero .grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .hero-art { order: -1; max-width: 340px; margin: 0 auto; }
}

/* ---- mobile overflow hardening: let grid/flex children shrink below content ---- */
.frow > *, .cta-grid > *, .bento .cell, .grid > * { min-width: 0; }
.frow-media, .frow-copy { min-width: 0; }
@media (max-width: 620px){
  .dash { grid-template-columns: 92px 1fr; min-height: 300px; }
  .dash-side { padding: 14px 10px; }
  .dash-side a { font-size: .68rem; padding: 6px 8px; }
  .dash-side .ds-logo { font-size: .82rem; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi .k-v { font-size: 1.05rem; }
  .ledger { font-size: .68rem; padding: 14px; }
  .led-tabs span { font-size: .58rem; padding: 4px 7px; }
  .wallet-top .wv { font-size: 1.6rem; }
  .app-search { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px){
  .kpis { grid-template-columns: 1fr 1fr; gap: 7px; }
  .dash { grid-template-columns: 84px 1fr; }
}

/* brand logo image (replaces text wordmark) */
.brand-logo { height: 30px; width: auto; display: block; }
.foot-logo { height: 34px; margin-bottom: 4px; }
@media (max-width: 480px){ .brand-logo { height: 26px; } }

/* ============ BLOG ============ */
.blog-list{display:grid;gap:22px;max-width:820px;margin:0 auto}
.blog-card{border:1px solid var(--line);border-radius:18px;padding:26px 28px;background:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(10,28,85,.09);border-color:var(--gold-2)}
.blog-card h2{font-size:clamp(20px,2.4vw,26px);margin:10px 0 10px;line-height:1.25}
.blog-card h2 a{color:var(--ink);text-decoration:none}
.blog-card h2 a:hover{color:var(--gold)}
.blog-meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.blog-card p{color:var(--ink-soft);margin:0 0 14px}
.blog-tags{display:flex;flex-wrap:wrap;gap:7px}
.blog-tag{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold);letter-spacing:.02em}

.article{max-width:760px;margin:0 auto}
.article h2{font-size:clamp(24px,3vw,32px);margin:46px 0 16px;line-height:1.24}
.article h3{font-size:clamp(19px,2.2vw,22px);margin:34px 0 12px;line-height:1.3}
.article p{font-size:17.5px;line-height:1.78;color:var(--ink-2);margin:0 0 20px}
.article ul,.article ol{margin:0 0 22px;padding-left:22px}
.article li{font-size:17.5px;line-height:1.75;color:var(--ink-2);margin-bottom:10px}
.article strong{color:var(--ink);font-weight:700}
.article a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.article-hero{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:8px}
.tldr{background:var(--gold-soft);border:1px solid rgba(10,147,214,.24);border-radius:16px;padding:24px 28px;margin:30px 0 40px}
.tldr h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.tldr ul{margin:0;padding-left:20px}
.tldr li{font-size:16px;line-height:1.65;margin-bottom:8px;color:var(--ink-2)}
.callout{border-left:3px solid var(--gold-2);background:var(--bg-2);padding:20px 24px;border-radius:0 12px 12px 0;margin:28px 0}
.callout p{margin:0;font-size:16.5px}
.blog-table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.blog-table th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);padding:10px 12px;border-bottom:2px solid var(--line)}
.blog-table td{padding:12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.blog-table tr:last-child td{border-bottom:none}
.faq-q{font-weight:700;color:var(--ink);margin:24px 0 8px;font-size:17.5px}
.article-cta{border:1px solid var(--line);border-radius:18px;padding:32px;margin:48px 0 0;text-align:center;background:var(--bg-2)}
.article-cta h3{margin:0 0 10px}
.article-cta p{margin:0 0 20px}
@media(max-width:640px){.article p,.article li{font-size:16.5px}.blog-card{padding:22px}}