/* ============================================================
   InsurScale 360 — Landing page styles
   ============================================================ */

:root{
  --brand:#071C52; --brand-deep:#041443; --accent:#0036B4; --accent-hover:#1643B8;
  --positive:#36B54E; --negative:#B3122A; --ink:#0B1226; --text:#475569; --muted:#7A8699;
  --bg:#FFFFFF; --surface:#F7F9FB; --surface-2:#EEF2F7; --line:#E5E8EE;
  --serif:'Lora',Georgia,serif; --grotesk:'Inter',system-ui,-apple-system,sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--grotesk);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
section[id]{ scroll-margin-top:84px; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
img,svg{ max-width:100%; }
::selection{ background:#0036B4; color:#fff; }

.page-wrap{ font-family:var(--grotesk); color:var(--ink); overflow-x:hidden; }

/* ---------- Keyframes & animation utilities ---------- */
@keyframes arcDraw{ to{ stroke-dashoffset:0; } }
@keyframes dotPop{ 0%{opacity:0;transform:scale(0);} 60%{opacity:1;transform:scale(1.5);} 100%{opacity:1;transform:scale(1);} }
@keyframes dotGlow{ 0%,100%{opacity:.55;} 50%{opacity:1;} }
@keyframes hubPulse{ 0%{transform:scale(.6);opacity:.7;} 100%{transform:scale(2.4);opacity:0;} }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes flow{ to{ stroke-dashoffset:-680; } }

.is-arc{ stroke-dasharray:480; stroke-dashoffset:480; animation:arcDraw 1.1s ease forwards; }
.is-dot{ opacity:0; transform-box:fill-box; transform-origin:center; animation:dotPop .55s cubic-bezier(.34,1.4,.6,1) forwards; }
.is-dot-glow{ animation:dotGlow 3.2s ease-in-out infinite; }
.is-flow{ stroke-dasharray:24 656; stroke-dashoffset:0; animation:flow 2.4s linear infinite; }
.is-marquee-track{ animation:marquee 52s linear infinite; }
.is-marquee-track-rev{ animation:marquee 60s linear infinite reverse; }

/* ---------- Reveal on scroll ---------- */
/* JS adds .reveal-init then .is-visible; without JS content stays fully visible */
[data-reveal].reveal-init{ opacity:0; transform:translateY(14px); transition:opacity .5s ease-out, transform .5s ease-out; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-nav.scrolled{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  border-bottom-color:var(--line);
}
.nav-inner{ max-width:1240px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }

.logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-.02em; color:#fff; transition:color .3s ease; }
.site-nav.scrolled .logo{ color:#0B1226; }
/* logo image: black source, shown white over the dark hero / black on the scrolled white nav */
.logo-img{ height:32px; width:auto; display:block; filter:brightness(0) invert(1); transition:filter .3s ease; }
.site-nav.scrolled .logo-img{ filter:none; }
.footer-logo-img{ height:30px; width:auto; display:block; filter:brightness(0) invert(1); }

.nav-desktop{ display:flex; align-items:center; gap:34px; }
.nav-links{ display:flex; align-items:center; gap:30px; font-size:15px; font-weight:500; }
.nav-links a, .nav-login{ color:rgba(255,255,255,.82); transition:color .2s; }
.site-nav.scrolled .nav-links a, .site-nav.scrolled .nav-login{ color:rgba(11,18,38,.7); }
.nav-links a:hover, .nav-login:hover{ color:#fff; }
.site-nav.scrolled .nav-links a:hover, .site-nav.scrolled .nav-login:hover{ color:#0036B4; }
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav-login{ font-size:15px; font-weight:600; }

.nav-burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:none; }
.nav-burger span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.site-nav.scrolled .nav-burger span{ background:#0B1226; }
body.menu-open .nav-burger span{ background:#fff; }
body.menu-open .nav-burger .b1{ transform:translateY(7px) rotate(45deg); }
body.menu-open .nav-burger .b2{ opacity:0; }
body.menu-open .nav-burger .b3{ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu overlay */
.mobile-menu{ position:fixed; inset:0; z-index:99; background:var(--brand-deep); padding:96px 24px 32px; display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:transform .3s ease; visibility:hidden; }
body.menu-open .mobile-menu{ transform:none; visibility:visible; }
.mobile-menu a{ font-family:var(--serif); font-size:30px; color:#fff; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-menu .mm-login{ font-family:var(--grotesk); font-size:17px; font-weight:600; color:rgba(255,255,255,.7); padding:22px 0 8px; border-bottom:none; }
.mobile-menu .mm-cta{ font-family:var(--grotesk); margin-top:8px; text-align:center; background:var(--accent); color:#fff; font-weight:600; font-size:17px; padding:16px; border-radius:999px; border-bottom:none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; border-radius:999px; cursor:pointer; transition:background .2s, box-shadow .2s, transform .2s; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); box-shadow:0 6px 24px rgba(0,54,180,.4); transform:translateY(-1px); }
.btn-ghost{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s; }
.btn-ghost:hover{ background:rgba(255,255,255,.16); }

/* plan buttons */
.plan-btn{ width:100%; color:#fff; font-weight:600; font-size:16px; padding:14px; border-radius:999px; transition:background .2s, box-shadow .2s; }
.plan-btn.primary{ background:var(--accent); }
.plan-btn.primary:hover{ background:var(--accent-hover); box-shadow:0 6px 24px rgba(0,54,180,.4); }
.plan-btn.ghost{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); }
.plan-btn.ghost:hover{ background:rgba(255,255,255,.16); }

/* carousel arrows */
.carousel-arrow{ width:42px; height:42px; border-radius:999px; border:1px solid var(--line); background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--ink); transition:border-color .2s; }
.carousel-arrow:hover{ border-color:var(--muted); }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-item .faq-answer{ display:none; }
.faq-item.open .faq-answer{ display:block; }
.faq-item .faq-icon{ transition:transform .25s; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:880px){
  .nav-desktop{ display:none !important; }
  .nav-burger{ display:flex !important; }
  .hero-grid{ grid-template-columns:1fr !important; gap:44px !important; }
  .hero-grid > div:last-child{ max-width:380px !important; margin:0 auto; }
  .three-grid{ grid-template-columns:1fr !important; }
  .panel-grid{ grid-template-columns:1fr !important; gap:40px !important; }
  .panel-grid > .panel-visual{ order:0 !important; }
  .stat-grid{ grid-template-columns:1fr 1fr !important; row-gap:32px !important; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; gap:32px !important; }
}
@media (min-width:561px) and (max-width:880px){
  .three-grid{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:560px){
  .stat-grid{ grid-template-columns:1fr 1fr !important; }
  .footer-grid{ grid-template-columns:1fr !important; }
  .testi-slide{ padding:40px 28px !important; }
  .compare-grid{ font-size:13px; }
}

/* ============================================================
   Pricing — animated price + discount chip
   ============================================================ */
.plan-price{ display:inline-block; transition:transform .25s cubic-bezier(.34,1.4,.6,1), color .25s ease; }
.intro-note{ display:inline-block; font-size:13px; font-weight:700; color:var(--positive); background:rgba(54,181,78,.12); padding:7px 13px; border-radius:999px; margin-bottom:22px; }
.plan-price.price-pop{ transform:scale(1.14); }
.plan-price.price-pop.on-dark{ color:#8FE3A2; }
.plan-price.price-pop.on-light{ color:var(--positive); }

.discount-chip{ display:inline-flex; align-items:center; gap:5px; transition:transform .2s ease, background .2s ease; }
.discount-chip.active{ background:rgba(54,181,78,.28); }
@keyframes chipPulse{ 0%{ transform:scale(1); } 35%{ transform:scale(1.22); } 100%{ transform:scale(1); } }
.discount-chip.pulse{ animation:chipPulse .55s ease; }
.discount-check{ display:none; }
.discount-chip.active .discount-check{ display:inline; }

/* ============================================================
   Comparison — "the hook" (elevated winner column + reveal)
   ============================================================ */
.cmp-section{ background:var(--bg); background-image:radial-gradient(1000px 460px at 80% 4%, rgba(0,54,180,.05), transparent 60%); padding:112px 24px; }
.cmp-wrap{ max-width:1120px; margin:0 auto; }
/* one unified rounded card; the winner is a highlighted column inside it */
.cmp{
  position:relative; margin-top:56px;
  border:1px solid var(--line); border-radius:18px; background:var(--bg);
  box-shadow:0 16px 50px rgba(0,54,180,.10);
}
.cmp-badge{
  position:absolute; top:0; right:14.7%; transform:translate(50%,-55%);
  background:linear-gradient(135deg, var(--accent), #1643B8); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  padding:9px 18px; border-radius:999px; white-space:nowrap; z-index:5;
  box-shadow:0 10px 26px rgba(0,54,180,.45); display:inline-flex; align-items:center; gap:7px;
}

.cmp-row{ position:relative; display:flex; align-items:stretch; }
.cmp-cell{
  flex:1 1 0; padding:20px 30px; font-size:15.5px; line-height:1.5;
  display:flex; align-items:flex-start; gap:13px; border-bottom:1px solid var(--line);
}
.cmp-row:last-child .cmp-cell{ border-bottom:none; }
.cmp-label{ flex:1.4 1 0; align-items:center; font-weight:700; font-size:16.5px; color:var(--ink); transition:color .2s ease; }
.cmp-without{ background:var(--surface); color:var(--text); transition:background .2s ease; }
.cmp-with{
  color:var(--ink); font-weight:600;
  background:rgba(0,54,180,.05);
}

/* rounded outer corners via the corner cells (no overflow:hidden, so the badge can overhang) */
.cmp-header .cmp-label{ border-top-left-radius:18px; }
.cmp-row:last-child .cmp-label{ border-bottom-left-radius:18px; }
.cmp-with-head{ border-top-right-radius:18px; }
.cmp-row:last-child .cmp-with{ border-bottom-right-radius:18px; }

/* crisp SVG icon chips */
.cmp-cell .ic{
  flex:none; width:26px; height:26px; border-radius:999px; margin-top:1px; font-size:0;
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
}
.cmp-without .ic{
  background-color:rgba(179,18,42,.1);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23B3122A'%20stroke-width='3'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E");
}
.cmp-with .ic{
  background-color:var(--positive); box-shadow:0 3px 8px rgba(54,181,78,.4);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2013l4%204L19%207'/%3E%3C/svg%3E");
  transition:transform .2s cubic-bezier(.34,1.4,.6,1);
}

/* header row */
.cmp-header .cmp-cell{ align-items:center; gap:9px; font-weight:700; font-size:16px; border-bottom:none; padding-top:23px; padding-bottom:23px; }
.cmp-header .cmp-label, .cmp-header .cmp-without-head{ border-bottom:1px solid var(--line); }
.cmp-header .cmp-label{ background:transparent; }
.cmp-without-head{ background:var(--surface); color:var(--negative); }
.cmp-with-head{
  color:#fff; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(135deg, var(--accent), #1643B8);
  position:relative; overflow:hidden;
}
.cmp-with-head::after{
  content:''; position:absolute; top:0; left:-65%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); animation:cmpSheen 5.5s ease-in-out infinite;
}
@keyframes cmpSheen{ 0%{ left:-65%; } 24%,100%{ left:140%; } }

/* row hover */
.cmp-row:not(.cmp-header):hover .cmp-label{ color:var(--accent); }
.cmp-row:not(.cmp-header):hover .cmp-without{ background:rgba(179,18,42,.06); }
.cmp-row:not(.cmp-header):hover .cmp-with .ic{ transform:scale(1.22) rotate(-4deg); }

/* staggered reveal of data rows */
.cmp-row.cmp-anim{ opacity:0; transform:translateY(14px); transition:opacity .5s ease-out, transform .5s ease-out; }
.cmp-row.cmp-anim.in{ opacity:1; transform:none; }

.cmp-cta{ text-align:center; margin-top:50px; }

@media (max-width:760px){
  .cmp-section{ padding:84px 20px; }
  .cmp-cell{ padding:15px 14px; font-size:12.5px; gap:9px; }
  .cmp-label{ font-size:13px; }
  .cmp-cell .ic{ width:20px; height:20px; font-size:11px; }
  .cmp-header .cmp-cell{ font-size:12px; }
  .cmp-badge{ font-size:10.5px; padding:6px 13px; }
}

/* ============================================================
   Confetti canvas
   ============================================================ */
.confetti-canvas{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .cmp-glow{ animation:none; }
  .cmp-with-head::after{ animation:none; display:none; }
  .cmp-row.cmp-anim{ opacity:1 !important; transform:none !important; }
  .plan-price{ transition:none; }
  html{ scroll-behavior:auto; }
  .is-arc{ animation:none; stroke-dashoffset:0; }
  .is-dot{ animation:none; opacity:1; }
  .is-dot-glow{ animation:none; opacity:1; }
  .is-flow{ animation:none; stroke-dasharray:none; opacity:.55; }
  .is-marquee-track, .is-marquee-track-rev{ animation:none; }
  .hub-pulse{ display:none; }
  [data-reveal].reveal-init{ opacity:1 !important; transform:none !important; }
  .cat-card:hover{ transform:none; }
}

/* ============================================================
   ROI mechanism (+25 % / −25 %)
   ============================================================ */
.mech-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:16px; margin-top:50px; }
.mech-step{ background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:30px 26px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.mech-ico{ width:54px; height:54px; border-radius:14px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:25px; margin:0 auto 18px; }
.mech-step h3{ font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px; color:var(--ink); }
.mech-step p{ font-size:14.5px; line-height:1.55; color:var(--text); margin:0; }
.mech-arrow{ display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--accent); font-weight:700; }
.mech-eq{ margin-top:40px; text-align:center; font-size:17px; color:var(--text); }
.mech-eq strong{ color:var(--ink); font-weight:700; }
.mech-eq .accent{ color:var(--accent); font-weight:700; }
@media (max-width:820px){
  .mech-flow{ grid-template-columns:1fr; }
  .mech-arrow{ transform:rotate(90deg); padding:2px 0; }
}

/* ============================================================
   App categories grid (suite breadth)
   ============================================================ */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:22px; }
.cat-card{ background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:30px 28px; transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s; }
.cat-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(7,28,82,.1); border-color:#cfd8e6; }
.cat-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.cat-icon{ width:52px; height:52px; border-radius:14px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:26px; }
.cat-count{ font-size:12px; font-weight:700; color:var(--accent); background:rgba(0,54,180,.08); padding:6px 12px; border-radius:999px; white-space:nowrap; }
.cat-name{ font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0 0 9px; }
.cat-sub{ font-size:14.5px; color:var(--text); margin:0; line-height:1.55; }
.cat-card-cta{ background:linear-gradient(160deg, var(--brand), var(--brand-deep)); border-color:transparent; display:flex; flex-direction:column; justify-content:center; }

/* ============================================================
   Anti-wrapper ("Kein ChatGPT mit deinem Logo")
   ============================================================ */
.wrap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:46px; align-items:stretch; }
.wrap-card{ border-radius:16px; padding:32px 30px; }
.wrap-bad{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.13); }
.wrap-good{ background:#fff; border:2px solid var(--accent); box-shadow:0 24px 70px rgba(0,0,0,.35); }
.wrap-kicker{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0 0 18px; }
.wrap-bad .wrap-kicker{ color:#FF9AA8; }
.wrap-good .wrap-kicker{ color:var(--accent); }
.wrap-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.wrap-list li{ display:flex; gap:11px; font-size:15px; line-height:1.5; }
.wrap-list .ic{ flex:none; width:22px; height:22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; margin-top:1px; }
.wrap-bad .wrap-list{ color:rgba(255,255,255,.78); }
.wrap-bad .ic{ background:rgba(179,18,42,.22); color:#FF9AA8; }
.wrap-good .wrap-list{ color:var(--ink); }
.wrap-good .ic{ background:var(--positive); color:#fff; }
.wrap-price{ margin-top:22px; padding-top:18px; border-top:1px solid; font-size:14px; font-weight:600; }
.wrap-bad .wrap-price{ border-top-color:rgba(255,255,255,.12); color:#fff; }
.wrap-good .wrap-price{ border-top-color:var(--line); color:var(--accent); }
@media (max-width:820px){ .wrap-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Founder / "Von Praktikern gebaut"
   ============================================================ */
.founder-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:60px; align-items:center; }
.founder-photo{ position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:radial-gradient(120% 90% at 50% 0%, #11224d, #04102f 70%); box-shadow:0 30px 80px rgba(0,0,0,.4); }
.founder-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.founder-badge{ position:absolute; left:18px; bottom:18px; right:18px; background:rgba(4,16,43,.78); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; }
.founder-badge .num{ font-family:var(--serif); font-size:27px; font-weight:600; color:#fff; line-height:1; }
.founder-badge .lab{ font-size:12.5px; color:rgba(255,255,255,.7); line-height:1.35; }
.founder-tag{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#7FA0FF; background:rgba(127,160,255,.12); border:1px solid rgba(127,160,255,.2); padding:7px 14px; border-radius:999px; margin-bottom:22px; }
.founder-quote{ margin:26px 0 0; padding:20px 24px; background:rgba(255,255,255,.05); border-left:3px solid var(--accent); border-radius:0 12px 12px 0; font-family:var(--serif); font-size:18px; line-height:1.5; color:#fff; }
.founder-sign{ margin-top:14px; font-size:14px; color:rgba(255,255,255,.6); }
.ao-points{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:13px; }
.ao-points li{ display:flex; gap:12px; font-size:15.5px; line-height:1.5; color:rgba(255,255,255,.85); }
.ao-points .ic{ flex:none; width:24px; height:24px; border-radius:999px; background:var(--positive); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-top:1px; }
@media (max-width:880px){
  .founder-grid{ grid-template-columns:1fr; gap:40px; }
  .founder-photo{ max-width:360px; margin:0 auto; width:100%; }
}

/* ============================================================
   Feature-panel function tags (Außendienst / Innendienst)
   ============================================================ */
.fn-tag{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; border-radius:999px; margin-bottom:16px; }
.fn-tag::before{ content:''; width:7px; height:7px; border-radius:999px; background:currentColor; }
.fn-tag.aussen{ color:var(--accent); background:rgba(0,54,180,.09); }
.fn-tag.aussen.on-dark{ color:#7FA0FF; background:rgba(127,160,255,.14); }
.fn-tag.innen{ color:#1B7A43; background:rgba(54,181,78,.14); }
.fn-tag.innen.on-dark{ color:#8FE3A2; background:rgba(54,181,78,.16); }

/* ============================================================
   Feature gallery (interactive Innen/Außen switcher)
   ============================================================ */
.fg-section{ padding:104px 56px; }
.fg{ margin-top:46px; outline:none; }
.fg-frame{ position:relative; border:1px solid var(--line); border-radius:20px; box-shadow:0 22px 60px rgba(7,28,82,.12); background:var(--brand); }
.fg-viewport{ overflow:hidden; border-radius:20px; }
.fg-track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.fg-slide{ flex:0 0 100%; min-width:0; display:grid; grid-template-columns:0.92fr 1.08fr; align-items:stretch; }
.fg-copy{ min-width:0; background:var(--brand); color:#fff; padding:52px 48px; display:flex; flex-direction:column; justify-content:center; }
.fg-copy .eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#7FA0FF; margin-bottom:16px; }
.fg-copy h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,2.8vw,2.5rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 18px; }
.fg-copy p{ font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.78); margin:0 0 22px; }
.fg-copy ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.fg-copy li{ display:flex; gap:11px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.85); }
.fg-copy li .c{ color:var(--positive); font-weight:700; flex:none; }
.fg-visual{ min-width:0; background:var(--surface); padding:44px 40px; display:flex; align-items:center; justify-content:center; }
.fg-visual .mock{ width:100%; max-width:460px; }
.fg-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:999px; background:#fff; box-shadow:0 6px 20px rgba(7,28,82,.2); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--ink); transition:box-shadow .2s, transform .2s; }
.fg-arrow:hover{ box-shadow:0 9px 26px rgba(7,28,82,.28); }
.fg-prev{ left:-48px; }
.fg-next{ right:-48px; }
.fg-prev:hover{ transform:translateY(-50%) scale(1.06); }
.fg-next:hover{ transform:translateY(-50%) scale(1.06); }
.fg-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.fg-tab{ font-size:13.5px; font-weight:600; color:var(--text); background:var(--bg); border:1px solid var(--line); padding:9px 16px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s, border-color .2s, box-shadow .2s; }
.fg-tab:hover{ border-color:var(--muted); }
.fg-tab.active{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 4px 14px rgba(0,54,180,.25); }
@media (max-width:860px){
  .fg-section{ padding:84px 20px; }
  .fg-slide{ grid-template-columns:1fr; }
  .fg-copy{ padding:34px 26px; }
  .fg-visual{ padding:26px; }
  .fg-arrow{ display:none; }
  .fg-tab{ font-size:12.5px; padding:8px 13px; }
}
@media (prefers-reduced-motion: reduce){ .fg-track{ transition:none; } }