/* FG Platform 5.7 Vontobel Theme — visual layer only, no logic changes */

:root{
  --bg:#f4f5f9;
  --surface:#ffffff;
  --surface-2:#f4f6fb;
  --surface-soft:#eef1f7;
  --surface-sunken:#e8ecf6;
  --ink:#0f1428;
  --muted:#6f7690;
  --soft:#9299b1;
  --line:#e2e6f1;
  --brand:#4e46d9;
  --brand-dark:#443cc0;
  --violet:#4e46d9;
  --violet-2:#6660ef;
  --emerald:#19c49a;
  --green-soft:#eafbf5;
  --amber-soft:#fff1c8;
  --header:rgba(255,255,255,.88);
  --shadow:0 20px 60px rgba(20,27,50,.08);
  --shadow-sm:0 12px 30px rgba(20,27,50,.06);
  --shadow-lg:0 28px 80px rgba(20,27,50,.12);
}
html[data-theme=dark]{
  --bg:#040817;
  --surface:#0d1330;
  --surface-2:#11193d;
  --surface-soft:#091127;
  --surface-sunken:#0a1026;
  --ink:#f2f4fb;
  --muted:#a6aecc;
  --soft:#7f89af;
  --line:#1f2854;
  --brand:#5852e9;
  --brand-dark:#4a44cc;
  --violet:#5852e9;
  --violet-2:#736efe;
  --emerald:#16d0a0;
  --green-soft:#0d2a24;
  --amber-soft:#3a2f16;
  --header:rgba(4,8,23,.9);
  --shadow:0 22px 70px rgba(0,0,0,.34);
  --shadow-sm:0 16px 44px rgba(0,0,0,.24);
  --shadow-lg:0 30px 90px rgba(0,0,0,.42);
  --fixed-light-bg:#0f1634;
  --fixed-light-ink:#f4f6ff;
  --fixed-light-muted:#aeb7d2;
  --fixed-light-soft:#8f99bc;
  --fixed-light-line:#1f2956;
  --highlight-bg:linear-gradient(145deg,#11193d,#101735);
  --highlight-ink:#f5f7ff;
  --highlight-muted:#aeb6d1;
  --highlight-line:#283466;
}

body{background:var(--bg)}

/* Header */
.site-header{background:var(--header)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:blur(22px) saturate(1.15)!important}
.header-inner{height:72px!important;gap:22px!important}
.brand{font-size:18px!important;font-weight:800!important;color:var(--ink)!important}
.brand b{color:var(--emerald)!important}
.brand-mark.chart-mark{position:relative;display:flex!important;align-items:flex-end;justify-content:center;gap:3px;background:linear-gradient(180deg,#554ee7,#2d2c82)!important;box-shadow:0 14px 30px rgba(84,78,231,.22)!important}
.brand-mark.chart-mark i{display:block;width:4px;border-radius:3px;background:#fff;opacity:.95}
.brand-mark.chart-mark i:nth-child(1){height:10px;align-self:flex-end}
.brand-mark.chart-mark i:nth-child(2){height:15px;align-self:flex-end}
.brand-mark.chart-mark i:nth-child(3){height:20px;align-self:flex-end}
.brand-mark.chart-mark::after{content:"";position:absolute;right:6px;top:6px;width:4px;height:4px;border-radius:50%;background:var(--emerald)}
.desktop-nav{gap:8px!important}
.desktop-nav a{padding:10px 14px!important;border-radius:12px!important;font-weight:700!important;color:var(--muted)!important}
.desktop-nav a:hover,.desktop-nav a.active{background:var(--surface-2)!important;color:var(--ink)!important}
.pill-switch,.icon-button,.user-chip,.user-menu-popover,.mobile-menu-button{border-color:var(--line)!important}
.pill-switch{background:var(--surface)!important;padding:4px!important;box-shadow:var(--shadow-sm)}
.pill-switch a{font-size:12px!important;font-weight:800!important;padding:7px 10px!important;color:var(--soft)!important}
.pill-switch a.active{background:var(--brand-dark)!important;color:#fff!important}
.icon-button,.mobile-menu-button{background:var(--surface)!important;border-radius:12px!important;box-shadow:var(--shadow-sm);color:var(--muted)!important}
.user-chip{padding:8px 10px!important;border:1px solid var(--line)!important;border-radius:14px!important;background:var(--surface)!important;box-shadow:var(--shadow-sm)}
.user-chip b{font-size:13px!important}
.user-chip span:first-child{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,#615bff,#4540c2);color:#fff;font-size:11px;font-weight:800}
.user-menu-popover{box-shadow:var(--shadow)!important}
.mobile-nav{background:var(--surface)!important}

.btn{border-radius:14px!important;font-weight:800!important;letter-spacing:-.01em}
.btn-primary,.btn-violet{background:linear-gradient(135deg,#5750e9,#4842c8)!important;color:#fff!important;box-shadow:0 16px 34px rgba(84,78,231,.22)!important}
.btn-ghost{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important;box-shadow:var(--shadow-sm)}
.btn-light{background:#fff!important;color:#131935!important;box-shadow:var(--shadow-sm)}
.btn:hover{transform:translateY(-1px)}

/* Homepage */
.landing-hero{min-height:0!important;padding:0 0 38px!important;background:var(--bg)!important}
.landing-hero:after{display:none!important}
.landing-hero-grid{min-height:540px!important;grid-template-columns:minmax(0,560px) 1fr!important;gap:0!important;padding-block:0!important}
.landing-hero-image{z-index:0!important}
.landing-hero-image span{display:block!important;position:absolute!important;inset:0!important;pointer-events:none!important}
.landing-hero-image img{object-position:center center}
.landing-hero-image span{background:linear-gradient(90deg,rgba(244,245,249,.98) 0%,rgba(244,245,249,.95) 34%,rgba(244,245,249,.70) 52%,rgba(244,245,249,.18) 69%,rgba(244,245,249,0) 100%)!important}
html[data-theme=dark] .landing-hero-image span{background:linear-gradient(90deg,rgba(4,8,23,.98) 0%,rgba(4,8,23,.95) 34%,rgba(4,8,23,.73) 54%,rgba(4,8,23,.22) 72%,rgba(4,8,23,0) 100%)!important}
.landing-copy{position:relative;z-index:1;padding:74px 0 64px!important;max-width:610px!important}
.update-badge{background:rgba(255,255,255,.86)!important;border-color:var(--line)!important;color:#7b84a2!important;box-shadow:var(--shadow-sm)}
html[data-theme=dark] .update-badge{background:rgba(11,18,43,.9)!important;color:#bcc4e1!important}
.update-badge i{box-shadow:0 0 0 5px rgba(25,196,154,.15)!important}
.landing-copy h1{max-width:620px!important;margin:22px 0 18px!important;font-size:clamp(3.35rem,5.7vw,5.5rem)!important;line-height:.96!important;letter-spacing:-.06em!important;color:var(--ink)!important}
.landing-copy h1 span{background:none!important;color:var(--brand)!important;position:relative;display:inline-block}
.landing-copy h1 span::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:4px;background:#f2c640;border-radius:999px;transform:skewX(-18deg)}
.landing-copy>p{max-width:600px!important;font-size:16px!important;line-height:1.62!important;color:var(--muted)!important}
.hero-actions{margin-top:26px!important;gap:12px!important}
.hero-actions .btn{min-height:44px!important;padding-inline:22px!important}
.hero-text-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm);font-weight:800;color:var(--ink)}
.landing-trust{margin-top:24px!important;gap:28px!important;color:#8e96b3!important;font-weight:500}
.landing-trust li{position:relative;padding-left:0}
.product-gateway-section{margin-top:-6px!important;padding-top:0!important}
.product-gateway-grid{gap:18px!important}
.product-gateway-card{min-height:330px!important;padding:30px 30px 24px!important;border-radius:28px!important;box-shadow:var(--shadow)!important}
.product-gateway-card h2{font-size:clamp(2rem,3vw,3rem)!important;line-height:.98!important;max-width:500px}
.product-gateway-card p{max-width:500px;font-size:16px!important;line-height:1.6!important}
.product-chip{background:rgba(82,73,217,.1)!important;color:var(--brand-dark)!important;font-size:11px!important;letter-spacing:.11em!important;padding:7px 12px!important;border-radius:999px!important}
.product-gateway-card .gateway-meta{margin-top:auto!important;padding-top:24px!important;border-top:1px solid var(--line)!important}
.tagesgeld-gateway{background:linear-gradient(135deg,#12392f,#0d261f 52%,#134b39)!important;border-color:#19624d!important}
.tagesgeld-gateway .product-chip{background:rgba(25,208,160,.13)!important;color:#7cf0d0!important}
.tagesgeld-gateway .gateway-meta{border-top-color:rgba(255,255,255,.12)!important}
.top-rate-section{padding-top:34px!important}
.top-rate-section .section-heading .micro{color:#8c93af!important}
.top-rate-section .section-heading h2{font-size:clamp(2rem,3.7vw,3.7rem)!important;margin-bottom:0!important}
.top-rate-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
.top-rate-card{display:block!important;opacity:1!important;transform:none!important;padding:22px!important;border-radius:18px!important;border:1px solid var(--line)!important;background:var(--surface)!important;box-shadow:var(--shadow-sm)!important}
.top-rate-card>small{font-size:12px!important;color:#8f97b1!important}
.top-rate-card>strong{font-size:2.1rem!important;color:var(--brand-dark)!important}
.top-rate-card>span{font-size:13px!important;color:var(--muted)!important}
.sparkline{height:42px!important}
.sparkline i{border-radius:999px 999px 0 0!important;background:linear-gradient(180deg,rgba(25,196,154,.95),rgba(25,196,154,.08))!important}
html[data-theme=dark] .top-rate-card{background:#0e1532!important;border-color:#25305f!important}
html[data-theme=dark] .top-rate-section,.home-bank-section,.home-steps-section{background:transparent!important}

/* Compare */
.compare-hero{padding:42px 0 18px!important;border-bottom:0!important;background:transparent!important}
.compare-hero .eyebrow{background:transparent!important;padding:0!important;margin-bottom:10px!important;color:#8e95af!important}
.compare-hero h1{font-size:clamp(3rem,5vw,4.7rem)!important;line-height:.98!important;max-width:980px!important;color:var(--ink)!important}
.compare-hero p{font-size:16px!important;max-width:760px!important}
.compare-section{padding-top:8px!important}
.compare-layout{grid-template-columns:300px 1fr!important;gap:24px!important}
.filter-panel{top:96px!important;padding:18px!important;border-radius:24px!important;border:1px solid var(--line)!important;background:var(--surface)!important;box-shadow:var(--shadow-sm)!important}
.filter-block{padding-top:18px!important;margin-top:18px!important}
.filter-block>label{font-size:13px!important;color:#7f87a4!important}
.term-pills{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
.term-pills button,.country-pills button{border-radius:999px!important;padding:8px 12px!important;font-weight:750!important}
.amount-control output{font-size:2rem!important;color:var(--ink)!important}
.range-progress{accent-color:var(--brand)!important}
.live-filter-summary{border-radius:16px!important;background:var(--surface-2)!important;padding:14px 15px!important}
.results-panel{min-width:0}
.enhanced-results-head{align-items:center!important;padding:0 0 10px!important;margin-bottom:8px!important}
.enhanced-results-head .micro{font-size:13px!important;color:var(--muted)!important;letter-spacing:0!important;text-transform:none!important}
.enhanced-results-head h2{font-size:1.9rem!important;line-height:1.08!important}
.reset-filter-link{font-size:14px!important;color:var(--muted)!important}
.sort-control span{font-size:14px!important;color:var(--muted)!important}
.sort-control select{min-height:48px!important;border-radius:16px!important;border-color:var(--line)!important;background:var(--surface)!important;box-shadow:var(--shadow-sm)!important;padding-inline:15px 42px!important}
.offer-list{gap:0!important;border:1px solid var(--line)!important;border-radius:26px!important;background:var(--surface)!important;overflow:hidden;box-shadow:var(--shadow-sm)!important}
.compare-card{grid-template-columns:minmax(210px,1.35fr) .78fr .78fr .95fr 110px!important;gap:18px!important;padding:22px 24px!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.compare-card:first-child{border-top:0!important}
.compare-card:hover{transform:none!important;background:var(--surface-2)!important;box-shadow:none!important}
.compare-bank{gap:14px!important}
.compare-bank .bank-avatar{width:44px!important;height:44px!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(78,70,217,.14),rgba(25,196,154,.12))!important}
.compare-bank b{font-size:1.05rem!important}
.compare-bank small,.compare-term span,.compare-rate span,.compare-yield span{font-size:13px!important;color:var(--muted)!important}
.compare-rating{display:none!important}
.compare-term b,.compare-rate strong,.compare-yield b{font-size:1.08rem!important;color:var(--ink)!important}
.compare-rate strong{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--amber-soft)!important;color:#b26d00!important;font-size:1.02rem!important}
.compare-rate small{display:block;margin-top:6px!important;font-size:11px!important;color:#9c843d!important}
.compare-yield b{font-size:1.9rem!important;line-height:1}
.compare-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;justify-self:end}
.compare-actions .btn{min-width:84px!important;padding-inline:16px!important}
.empty-card{border-radius:24px!important;box-shadow:var(--shadow-sm)!important}
html[data-theme=dark] .offer-list{background:#0d1330!important;border-color:#202959!important}
html[data-theme=dark] .compare-card:hover{background:#11193d!important}
html[data-theme=dark] .compare-rate strong{color:#ffcf61!important;background:#3b2d15!important}

/* Dashboard and core cards */
.metric-grid article,.dashboard-explainer article,.deposit-row,.request-history-row,.profile-strip,.content-card,.panel,.bank-card,.selected-offer-card,.key-terms-card,.scenario-card,.notice-card,.support-ticket-card,.support-new-card,.ticket-reply-card,.verification-card{border-radius:20px!important;border-color:var(--line)!important;box-shadow:var(--shadow-sm)!important}
.gradient-card.purple-blue{background:linear-gradient(135deg,#0e1634,#14352b)!important}
.green-card{box-shadow:var(--shadow-sm)!important}

/* Login */
.auth-page.vontobel-auth{min-height:calc(100vh - 72px);padding:42px 0 84px!important;display:flex;align-items:flex-start}
.auth-page.vontobel-auth .auth-grid{grid-template-columns:minmax(0,420px)!important;justify-content:center!important;border:0!important;background:transparent!important;box-shadow:none!important}
.auth-page.vontobel-auth .auth-side{display:none!important}
.auth-card.vontobel-login-card{padding:34px 36px!important;border:1px solid var(--line)!important;border-radius:24px!important;background:var(--surface)!important;box-shadow:var(--shadow)!important;text-align:center}
.auth-brand{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-bottom:24px;font-size:18px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.auth-brand b{color:var(--emerald)}
.auth-card.vontobel-login-card h2{font-size:3rem!important;line-height:.95!important;margin-bottom:12px!important;color:var(--ink)!important}
.auth-card.vontobel-login-card>p{margin:0 0 20px!important;font-size:15px!important;color:var(--muted)!important}
.auth-card.vontobel-login-card form{text-align:left}
.auth-card.vontobel-login-card .field{margin-bottom:14px!important}
.auth-card.vontobel-login-card .field label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.auth-card.vontobel-login-card .field input{min-height:54px!important;border-radius:15px!important;border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--ink)!important;padding:0 16px!important;box-shadow:none!important}
.auth-card.vontobel-login-card .field input::placeholder{color:#8b93ad!important}
.auth-card.vontobel-login-card .btn{min-height:54px!important;border-radius:16px!important;font-size:15px!important}
/* Login auxiliary link */
.auth-card.vontobel-login-card .auth-bottom-link{margin:20px 0 0!important;text-align:center!important;color:var(--muted)!important}
.auth-card.vontobel-login-card .auth-bottom-link a{color:var(--brand)!important;font-weight:800!important}

/* Footer */
.site-footer{background:transparent!important;color:var(--muted)!important;border-top:1px solid var(--line)!important}
.site-footer .footer-brand,.site-footer b{color:var(--ink)!important}
.site-footer p,.site-footer small,.site-footer a,.copyright{color:var(--muted)!important}
.copyright{border-top-color:var(--line)!important}
html[data-theme=dark] .site-footer{background:#050916!important}

/* Mobile */
@media(max-width:1100px){
  .compare-layout{grid-template-columns:1fr!important}
  .filter-panel{position:relative!important;top:auto!important}
}
@media(max-width:820px){
  .header-inner{height:66px!important}
  .desktop-nav{display:none!important}
  .mobile-menu-button{display:grid!important}
  .hide-mobile{display:none!important}
  .landing-hero-grid{grid-template-columns:1fr!important;min-height:auto!important}
  .landing-hero-image{position:absolute!important;inset:0!important}
  .landing-copy{padding:42px 0 32px!important;max-width:100%!important}
  .landing-copy h1{font-size:clamp(2.5rem,11vw,4rem)!important}
  .landing-copy>p{max-width:100%!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .hero-actions .btn,.hero-text-link{width:100%!important}
  .product-gateway-grid{grid-template-columns:1fr!important}
  .product-gateway-card{min-height:0!important;padding:24px!important;border-radius:24px!important}
  .product-gateway-card h2{font-size:clamp(1.9rem,8vw,2.8rem)!important}
  .top-rate-grid{grid-template-columns:1fr 1fr!important}
  .compare-hero{padding:34px 0 16px!important}
  .compare-hero h1{font-size:clamp(2.3rem,10vw,3.5rem)!important}
  .enhanced-results-head{align-items:flex-start!important;flex-direction:column!important}
  .compare-card{grid-template-columns:1fr 1fr!important;padding:18px!important}
  .compare-bank{grid-column:1/-1!important}
  .compare-yield{grid-column:1/-1!important}
  .compare-actions{grid-column:1/-1!important;grid-template-columns:1fr 1fr!important;justify-self:stretch!important}
  .auth-page.vontobel-auth{padding-top:28px!important}
}
@media(max-width:560px){
  .container{width:calc(100% - 22px)!important}
  .header-inner{height:62px!important}
  .brand{font-size:16px!important}
  .landing-copy{padding:34px 0 26px!important}
  .landing-copy h1{font-size:clamp(2.25rem,12vw,3rem)!important}
  .landing-trust{display:grid!important;gap:8px!important}
  .top-rate-grid{grid-template-columns:1fr!important}
  .compare-card{grid-template-columns:1fr!important}
  .compare-term,.compare-rate,.compare-yield,.compare-actions{grid-column:1!important}
  .compare-actions{grid-template-columns:1fr!important}
  .auth-card.vontobel-login-card{padding:26px 20px!important}
  .auth-card.vontobel-login-card h2{font-size:2.5rem!important}
}