/* Treu Vermostein — Swiss red / white visual system. */

:root{
  --bg:#0c0c0e;
  --surface:#161619;
  --surface-2:#1e1e22;
  --border:#2b2b30;
  --text:#f3f0e6;
  --text-muted:#a9a496;
  --accent:#dc1f34;
  --accent-hover:#f04456;
  --accent-tint:rgba(220,31,52,.14);
  --accent-tint-2:rgba(220,31,52,.07);
  --danger:#e06456;
  --success:#4fae7d;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.2);
  --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
  --shadow-lg:0 8px 16px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.55);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container-w:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,iframe,video,canvas{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-hover);}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;font-weight:700;letter-spacing:-.01em;overflow-wrap:break-word;word-break:break-word;hyphens:auto;}
h1{font-size:clamp(2.1rem,4vw,3.2rem);}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1em;color:var(--text);}
ul{margin:0;padding:0;list-style:none;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200;}
.skip-link:focus{left:0;}

.container{width:100%;max-width:var(--container-w);margin-inline:auto;padding-inline:clamp(16px,4vw,40px);}
.section{position:relative;padding:64px 0;overflow:hidden;}
.section--alt{background:var(--surface);}
.section--band{background:linear-gradient(180deg,var(--bg),#111113 60%,var(--bg));}

/* ---- decorative section backgrounds (design.md §13) ---- */
.bg-mesh{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(560px 320px at 12% 0%, var(--accent-tint), transparent 60%),
    radial-gradient(480px 300px at 90% 20%, var(--accent-tint-2), transparent 65%);
}
.bg-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M64 0H0V64' fill='none' stroke='%23dc1f34' stroke-opacity='0.08'/%3E%3C/svg%3E");
}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(12,12,14,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:box-shadow .2s ease,background .2s ease;}
.site-header.is-scrolled{box-shadow:var(--shadow-md);background:rgba(12,12,14,.98);}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);}
.brand__wordmark{font-weight:800;font-size:1.15rem;letter-spacing:-.01em;}
.main-nav{margin-left:8px;flex:1;}
.main-nav__list{display:flex;gap:4px;}
.main-nav__group{position:relative;}
.main-nav__trigger{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--text);font:inherit;font-weight:600;font-size:.95rem;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;}
.main-nav__trigger:hover,.main-nav__trigger:focus-visible{background:var(--accent-tint);color:var(--accent);}
.main-nav__trigger svg{width:16px;height:16px;transition:transform .15s ease;}
.main-nav__group.is-open .main-nav__trigger svg{transform:rotate(180deg);}
.main-nav__dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:8px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:50;}
.main-nav__group:last-child .main-nav__dropdown{left:auto;right:0;}
.main-nav__group.is-open .main-nav__dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.main-nav__dropdown a{display:block;padding:10px 12px;border-radius:8px;color:var(--text);font-size:.92rem;}
.main-nav__dropdown a:hover,.main-nav__dropdown a:focus-visible{background:var(--accent-tint);color:var(--accent);}
.site-header__actions{display:flex;align-items:center;gap:10px;}
.mobile-nav__trigger{display:none;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;}
.mobile-nav__icon-close{display:none;}
.mobile-nav__trigger[aria-expanded="true"] .mobile-nav__icon-menu{display:none;}
.mobile-nav__trigger[aria-expanded="true"] .mobile-nav__icon-close{display:block;}
.mobile-nav{border-bottom:1px solid var(--border);background:var(--bg);}
.mobile-nav .container{padding-block:12px;display:grid;gap:8px;}
.mobile-nav__group summary{cursor:pointer;padding:12px 4px;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mobile-nav__group summary::-webkit-details-marker{display:none;}
.mobile-nav__group summary .mobile-nav__caret{width:18px;height:18px;flex-shrink:0;color:var(--text-muted);transition:transform .15s ease;}
.mobile-nav__group[open] summary .mobile-nav__caret{transform:rotate(180deg);color:var(--accent);}
.mobile-nav__items{display:grid;gap:2px;padding:4px 4px 12px;}
.mobile-nav__items a{padding:8px 8px;border-radius:8px;color:var(--text-muted);}

/* ---- breadcrumbs ---- */
.breadcrumbs{border-bottom:1px solid var(--border);background:rgba(22,22,25,.90);backdrop-filter:blur(8px);}
.breadcrumbs__row{display:flex;gap:8px;align-items:center;padding:14px 0;font-size:.85rem;color:var(--text-muted);}
.breadcrumbs__row a{color:var(--text-muted);}
.breadcrumbs__row a:hover{color:var(--accent);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);color:#fff;}
.btn--secondary{background:transparent;border-color:var(--border);color:var(--text);}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent);}
.btn--sm{height:40px;padding:0 16px;font-size:.85rem;}
.btn--block{width:100%;}

/* ---- cards / icon badges ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:26px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(220,31,52,.52);}
.icon-badge{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.icon-badge svg{width:24px;height:24px;}

.eyebrow{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.section-head{max-width:680px;margin-bottom:36px;}
.section-head p{color:var(--text-muted);}

/* ---- illustrated section head: decorative motif filling blank side space ---- */
.section-head--illustrated{display:flex;gap:40px;align-items:center;flex-wrap:wrap-reverse;max-width:none;margin-bottom:36px;}
.section-head--illustrated .section-head__motif{width:150px;flex-shrink:0;opacity:.9;}
.section-head--illustrated .section-head__text{flex:1;min-width:280px;max-width:680px;}
.section-head--illustrated .section-head__text p{color:var(--text-muted);}
@media (max-width:768px){.section-head--illustrated .section-head__motif{display:none;}}

.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);}
table{width:100%;border-collapse:collapse;min-width:560px;}
thead th{background:var(--surface-2);text-align:left;padding:14px 16px;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
tbody td{padding:14px 16px;border-top:1px solid var(--border);font-size:.95rem;}
tbody tr:hover{background:var(--accent-tint-2);}
.mark-yes{color:var(--success);font-weight:800;}
.mark-no{color:var(--danger);font-weight:800;}

/* ---- steps ---- */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:step;}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;}
.step__num{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:.9rem;}

/* ---- FAQ ---- */
.faq-group{margin-bottom:28px;}
.faq-item{border-bottom:1px solid var(--border);padding:14px 0;}
.faq-item summary{cursor:pointer;font-weight:700;display:flex;justify-content:space-between;gap:12px;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item[open] summary{color:var(--accent);}
.faq-item p{margin-top:10px;color:var(--text-muted);}

/* ---- form block ---- */
.form-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:28px;}
.form-block__intro{color:var(--text-muted);margin-bottom:16px;}
.form-legal{margin-top:12px;font-size:.78rem;color:var(--text-muted);}
.form-legal a{color:var(--text-muted);text-decoration:underline;}

/* ---- Swiss wall background ---- */
.page-main--internal{
  background-image:linear-gradient(180deg,rgba(12,12,14,.84),rgba(12,12,14,.91)),url('/assets/images/ch-bg-wall.webp');
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
}
.page-main--internal .section--alt{background:rgba(22,22,25,.92);}

/* ---- hero ---- */
.hero{position:relative;padding:76px 0 64px;overflow:hidden;background:#0a0a0c;}
.hero__bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(110deg,rgba(8,8,10,.88),rgba(12,12,14,.69)),url('/assets/images/ch-bg-wall.webp');background-position:center;background-size:cover;}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;}
.hero__fallback{position:absolute;inset:0;background:
    radial-gradient(760px 420px at 82% -10%, rgba(220,31,52,.23), transparent 60%),
    radial-gradient(600px 380px at 0% 100%, rgba(220,31,52,.12), transparent 60%);
}
.hero__grid{position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%23dc1f34' stroke-opacity='0.10'/%3E%3C/svg%3E");}
.hero__row{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:
    "h1    form"
    "lede  form"
    "cta   form"
    "flags form"
    "links form";
  gap:16px 40px;align-items:start;
}
.hero__area-h1{grid-area:h1;margin-bottom:0;}
.hero__area-lede{grid-area:lede;}
.hero__area-cta{grid-area:cta;}
.hero__area-form{grid-area:form;}
.hero__area-flags{grid-area:flags;}
.hero__area-links{grid-area:links;}
.hero__form-col{position:relative;align-self:start;}
.hero__motif-bg{position:absolute;inset:-10% -10% -10% -10%;z-index:0;opacity:.16;pointer-events:none;overflow:hidden;}
.hero__motif-bg .motif-svg{width:100%;height:100%;}
.hero__form-col .form-block{position:relative;z-index:1;}
.hero__col h1{margin-bottom:16px;}
.hero__lede{font-size:1.08rem;color:var(--text-muted);max-width:52ch;margin-bottom:0;}
.hero__flags{display:flex;align-items:center;gap:14px;margin:22px 0 6px;flex-wrap:wrap;}
.hero__flags-label{font-size:.82rem;color:var(--text-muted);}
.hero__flag{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px 6px 8px;font-size:.82rem;}
.hero__flag .flag-emoji{font-size:1rem;}
.hero__reg-links{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.hero__reg-link{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 14px;font-size:.85rem;color:var(--text);}
.hero__reg-link:hover{border-color:var(--accent);color:var(--accent);}
.hero__note{margin-top:16px;font-size:.85rem;color:var(--text-muted);}
.hero__cta-line{font-size:.85rem;color:var(--accent);font-weight:700;margin-bottom:10px;}

.two-col-hero{position:relative;padding:64px 0;overflow:hidden;}
.two-col-hero__row{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;}
.two-col-hero h1{margin-bottom:14px;}
.two-col-hero p{color:var(--text-muted);max-width:56ch;}

/* ---- exchange logo row ---- */
.exchange-row{display:flex;flex-wrap:nowrap;gap:clamp(16px,4vw,40px);align-items:center;justify-content:space-between;padding:22px 0;}
.exchange-pill{display:flex;align-items:center;flex:1;justify-content:center;transition:transform .15s ease;}
.exchange-pill:hover{transform:translateY(-2px);}
.exchange-pill img{width:auto;height:clamp(28px,4vw,48px);max-width:100%;display:block;}

/* ---- reviews ---- */
.review-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow-sm);}
.review-card__top{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.review-card__avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-tint);}
.review-card__meta strong{display:block;}
.review-card__meta span{font-size:.82rem;color:var(--text-muted);}
.review-card__stats{display:flex;gap:16px;margin:12px 0;font-size:.85rem;}
.review-card__stats b{display:block;color:var(--accent);}
.review-card__body{color:var(--text-muted);font-size:.92rem;}
.review-disclaimer{margin-top:18px;font-size:.8rem;color:var(--text-muted);}

/* ---- map ---- */
.map-embed{max-width:100%;aspect-ratio:16/9;min-height:320px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.map-embed iframe{width:100%;height:100%;border:0;}

/* ---- company facts block ---- */
.fact-card{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;}
.fact-card svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;}

/* ---- calc section ---- */
.calc-section{position:relative;overflow:hidden;}
.calc-decor{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;}
.calc-full{width:100%;background:linear-gradient(160deg,#2b1a0e,#1c1108);border:1px solid #4a2f16;border-radius:var(--radius-lg,20px);box-shadow:var(--shadow-md);padding:clamp(24px,4vw,44px);}
.calc-full > *{width:100%;}
.calc-full .calc-widget{--calc-section-bg:transparent;--calc-section-padding:0px;--calc-section-radius:0px;}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--border);background:#0a0a0b;padding:56px 0 24px;}
.site-footer__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding-bottom:36px;}
.site-footer__brand .brand__wordmark{font-size:1.05rem;}
.site-footer__brand{display:grid;gap:10px;align-content:start;}
.site-footer__brand svg{width:32px;height:32px;}
.site-footer__tagline{color:var(--text-muted);font-size:.88rem;}
.site-footer__col h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:12px;}
.site-footer__col ul{display:grid;gap:8px;}
.site-footer__col a{color:var(--text);font-size:.88rem;}
.site-footer__col a:hover{color:var(--accent);}
.site-footer__disclaimer{border-top:1px solid var(--border);padding:24px 0;font-size:.82rem;color:var(--text-muted);}
.site-footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--text-muted);padding-top:8px;}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---- misc decorative SVG blocks ---- */
.motif-wrap{position:relative;}
.motif-svg{width:100%;height:auto;}

@media (max-width:960px){
  .main-nav,.site-header__actions .btn--primary{display:none;}
  .mobile-nav__trigger{display:inline-flex;}
  .two-col-hero__row{grid-template-columns:1fr;}
  .site-footer__top{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .company-block{grid-template-columns:1fr !important;}
  .hero__row{
    grid-template-columns:1fr;
    grid-template-areas:
      "h1"
      "form"
      "lede"
      "cta"
      "flags"
      "links";
  }
  .exchange-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .exchange-pill{justify-content:center;}
  .hero__flags{flex-direction:column;align-items:flex-start;gap:10px;}
  .hero__flags-row{display:flex;flex-wrap:nowrap;gap:8px;width:100%;}
  .hero__flag{flex:1;justify-content:center;white-space:nowrap;padding:6px 8px;}
  .hero__reg-links{flex-wrap:nowrap;gap:8px;}
  .hero__reg-link{flex:1;justify-content:center;padding:9px 8px;font-size:.78rem;white-space:nowrap;}
}
@media (max-width:640px){
  .site-footer__top{grid-template-columns:1fr;}
  .hero{padding-top:52px;}
  table{min-width:480px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---- phone country dropdown (intl-tel-input, shipped by _beacon's form
   widget) — override text colour only, via our own stylesheet, so it reads
   on its white dropdown surface; nothing in _beacon itself is touched. */
.iti{--iti-arrow-color:#1a1a1a;--iti-text-gray:#4a4a4a;}
.iti__dropdown-content,.iti__country-list{color:#1a1a1a;}
.iti__country{color:#1a1a1a;}
.iti__country .iti__country-name,.iti__country .iti__dial-code{color:#1a1a1a;}
.iti__search-input{color:#1a1a1a;}
.iti__search-input::placeholder{color:#6b6b6b;}
.iti__selected-country{color:#1a1a1a;}
.iti__selected-dial-code{color:#1a1a1a;}

/* Beacon form styling stays untouched; only its submit text is adapted here. */
.form-block input[type="submit"],.form-block button[type="submit"]{color:#fff!important;}