/* ================================================================
   GALAXYWEB AG — main_hero.css
   Hero Variants — NO conflicts with main.css
   Uses: gw-label, gw-label-white, gw-h2, gw-h2-white, gw-sub,
         gw-sub-white, btn-*, hs-val, hs-lbl, hero-h1, hero-sub,
         hero-stats, hero-stat, container (1180px)
   ALL layout classes use gh- prefix to avoid conflicts.
   ================================================================ */

/* ═══ HERO SECTION WRAPPER ═══ */
.gh-section{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;padding:100px 0 80px}
/* Override main.css .hero bg/padding only when used as gh-section */
.gh-section.hero{background:transparent;padding:100px 0 80px}

/* Size variants for hero-h1 (main.css defines base hero-h1) */
.gh-h1-xl{font-size:clamp(36px,5.5vw,72px)!important}
.gh-h1-lg{font-size:clamp(32px,4.5vw,58px)!important}

/* Dark mode hero-h1 override (main.css only does light) */
.aurora .hero-h1,.gh-section.aurora .hero-h1{color:#fff}
.aurora .hero-h1 em,.gh-section.aurora .hero-h1 em{color:var(--blue-brand)}

/* Dark mode hero-sub override */
.aurora .hero-sub{color:rgba(255,255,255,.42)}

/* Dark mode hero-stats override (main.css has border-top + light colors) */
.aurora .hero-stats{border-top-color:rgba(255,255,255,.1)}
.aurora .hero-stat{border-right-color:rgba(255,255,255,.1)}
.aurora .hs-val{color:#fff}
.aurora .hs-lbl{color:rgba(255,255,255,.3)}

/* CTA row */
.gh-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}

/* Scroll indicator */
.gh-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px}
.gh-scroll span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.2)}
.gh-scroll i{display:block;width:1px;height:32px;background:linear-gradient(180deg,rgba(0,120,200,.5),transparent);animation:ghScroll 2s ease-in-out infinite}
@keyframes ghScroll{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* Variant labels */
.gh-vlbl{text-align:center;padding:20px 0 0;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
body.dark .gh-vlbl{color:rgba(255,255,255,.18)}
.gh-divider{border:none;height:2px;margin:0;background:var(--border)}
body.dark .gh-divider{background:rgba(255,255,255,.06)}

/* Fade-in */
.gh-fade{opacity:0;transform:translateY(20px);animation:ghFade .6s ease forwards}
@keyframes ghFade{to{opacity:1;transform:translateY(0)}}
.gh-fade:nth-child(1){animation-delay:.1s}.gh-fade:nth-child(2){animation-delay:.22s}.gh-fade:nth-child(3){animation-delay:.34s}.gh-fade:nth-child(4){animation-delay:.46s}.gh-fade:nth-child(5){animation-delay:.58s}

/* BG decorative */
.gh-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
.gh-glow-blue{width:650px;height:650px;background:rgba(0,120,200,.06);top:-25%;right:-12%}
.gh-glow-green{width:400px;height:400px;background:rgba(16,185,129,.04);bottom:-20%;left:-8%}
body:not(.dark) .gh-glow-blue{background:rgba(0,120,200,.03)}


/* ═══ 1: CENTERED ═══ */
.gh-centered .container{text-align:center;display:flex;flex-direction:column;align-items:center}
.gh-centered .hero-sub{max-width:620px}
.gh-centered .hero-stats,.gh-centered .gh-cta{justify-content:center}
.gh-centered .hero-stats{border-top:none;padding-top:0}

/* ═══ 2: SPLIT + ORBIT ═══ */
.gh-split .container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.gh-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px}
.gh-orb{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;overflow:hidden}
body.dark .gh-orb{background:radial-gradient(circle,rgba(0,120,200,.15),rgba(0,120,200,.03));border:2px solid rgba(0,120,200,.2);box-shadow:0 0 50px rgba(0,120,200,.1)}
body:not(.dark) .gh-orb{background:radial-gradient(circle,rgba(0,120,200,.06),rgba(0,120,200,.01));border:2px solid rgba(0,120,200,.12);box-shadow:0 0 40px rgba(0,120,200,.05)}
.gh-orb img{width:55%;height:55%;object-fit:contain}
body.dark .gh-orb img{filter:brightness(0) invert(1);opacity:.65}
body:not(.dark) .gh-orb img{opacity:.5}
.gh-orb::before{content:'';position:absolute;inset:-24px;border-radius:50%;border:1.5px dashed rgba(0,120,200,.2);animation:ghSpin 25s linear infinite}
.gh-orb::after{content:'';position:absolute;inset:-55px;border-radius:50%;border:1px solid rgba(0,120,200,.08)}
@keyframes ghSpin{to{transform:rotate(360deg)}}
.gh-dot{position:absolute;width:7px;height:7px;border-radius:50%;z-index:3}
.gh-dot-1{background:var(--blue);box-shadow:0 0 8px rgba(0,120,200,.5);top:-8px;left:50%;animation:ghDot 7s linear infinite}
.gh-dot-2{background:#7c3aed;box-shadow:0 0 8px rgba(124,58,237,.5);top:50%;right:-8px;animation:ghDot 7s linear infinite 1.75s}
.gh-dot-3{background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.5);bottom:-8px;left:50%;animation:ghDot 7s linear infinite 3.5s}
.gh-dot-4{background:#d97706;box-shadow:0 0 8px rgba(217,119,6,.5);top:50%;left:-8px;animation:ghDot 7s linear infinite 5.25s}
@keyframes ghDot{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.15);opacity:.8}}

/* Float cards — pointer-events:none = no hover reaction */
.gh-fc{position:absolute;border-radius:var(--rl);padding:14px 18px;display:flex;align-items:center;gap:10px;pointer-events:none}
body.dark .gh-fc{background:rgba(11,20,38,.85);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 28px rgba(0,0,0,.4)}
body:not(.dark) .gh-fc{background:#fff;border:1.5px solid var(--border);box-shadow:0 8px 28px rgba(0,30,80,.07)}
.gh-fc-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.gh-fci-b{background:rgba(0,120,200,.12);border:1px solid rgba(0,120,200,.2)}
.gh-fci-p{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2)}
.gh-fci-g{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.2)}
.gh-fci-r{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.2)}
.gh-fc-name{font-size:12px;font-weight:700}
body.dark .gh-fc-name{color:#fff}body:not(.dark) .gh-fc-name{color:var(--text)}
.gh-fc-sub{font-size:10px}body.dark .gh-fc-sub{color:rgba(255,255,255,.35)}body:not(.dark) .gh-fc-sub{color:var(--muted)}
.gh-fc-price{font-size:11px;font-weight:800;margin-left:auto;padding-left:10px}
body.dark .gh-fc-price{color:var(--sky)}body:not(.dark) .gh-fc-price{color:var(--blue-d)}
.gh-fc-1{top:0;right:0;animation:ghFl 6s ease-in-out infinite}
.gh-fc-2{top:28%;left:-5%;animation:ghFl 6s ease-in-out infinite 1s}
.gh-fc-3{bottom:22%;right:0;animation:ghFl 6s ease-in-out infinite 2s}
.gh-fc-4{bottom:0;left:12%;animation:ghFl 6s ease-in-out infinite 4s}
.gh-fc-5{top:56%;left:0;animation:ghFl 6s ease-in-out infinite 3s}
.gh-fc-6{top:8%;left:8%;animation:ghFl 6s ease-in-out infinite 5s}
@keyframes ghFl{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ═══ 3: TYPOGRAPHIC ═══ */
.gh-typo{min-height:78vh}.gh-typo .container{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gh-typo-h1{font-size:clamp(42px,7vw,96px);font-weight:900;letter-spacing:-.05em;line-height:1.02;margin-bottom:24px}
body.dark .gh-typo-h1{color:#fff}body:not(.dark) .gh-typo-h1{color:var(--text)}
.gh-typo-h1 em{font-style:normal;background:linear-gradient(135deg,var(--blue-dd),var(--blue),var(--blue-brand));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gh-typo-sub{display:block;font-size:.6em;letter-spacing:-.03em;background:none!important}
body.dark .gh-typo-sub{-webkit-text-fill-color:rgba(255,255,255,.25)}
body:not(.dark) .gh-typo-sub{-webkit-text-fill-color:var(--muted)}

/* ═══ 4: STATS GRID ═══ */
.gh-nums{min-height:85vh}.gh-nums .container{text-align:center;display:flex;flex-direction:column;align-items:center}
.gh-nums-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;width:100%;max-width:900px}
.gh-num-card{padding:32px 18px;border-radius:var(--rl);text-align:center;transition:transform .3s,box-shadow .3s}
body.dark .gh-num-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
body:not(.dark) .gh-num-card{background:#fff;border:1.5px solid var(--border);box-shadow:0 4px 20px rgba(0,30,80,.06)}
.gh-num-card:hover{transform:translateY(-4px)}
.gh-nv{font-size:42px;font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:6px}
body.dark .gh-nv{color:var(--sky)}body:not(.dark) .gh-nv{color:var(--blue-d)}
.gh-nv-g{color:#6ee7b7!important}.gh-nv-p{color:#c4b5fd!important}.gh-nv-a{color:#fcd34d!important}
body:not(.dark) .gh-nv-g{color:#059669!important}body:not(.dark) .gh-nv-p{color:#7c3aed!important}body:not(.dark) .gh-nv-a{color:#d97706!important}
.gh-nl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
body.dark .gh-nl{color:rgba(255,255,255,.4)}body:not(.dark) .gh-nl{color:var(--muted)}
.gh-nd{font-size:10.5px;margin-top:6px}body.dark .gh-nd{color:rgba(255,255,255,.25)}body:not(.dark) .gh-nd{color:var(--muted);opacity:.7}

/* ═══ 5: PRODUCTS ═══ */
.gh-prods{min-height:88vh}.gh-prods .container{text-align:center;display:flex;flex-direction:column;align-items:center}
.gh-prod-row{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;justify-content:center}
.gh-prod{padding:16px 18px;border-radius:var(--rl);display:flex;align-items:center;gap:12px;min-width:200px;transition:all .3s}
body.dark .gh-prod{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
body:not(.dark) .gh-prod{background:#fff;border:1.5px solid var(--border);box-shadow:0 4px 16px rgba(0,30,80,.06)}
.gh-prod:hover{transform:translateY(-3px)}
.gh-pn{font-size:13px;font-weight:800;text-align:left}body.dark .gh-pn{color:#fff}body:not(.dark) .gh-pn{color:var(--text)}
.gh-ps{font-size:10px;text-align:left}body.dark .gh-ps{color:rgba(255,255,255,.35)}body:not(.dark) .gh-ps{color:var(--muted)}
.gh-pp{font-size:11px;font-weight:800;margin-left:auto;padding-left:10px;white-space:nowrap}
body.dark .gh-pp{color:#6ee7b7}body:not(.dark) .gh-pp{color:#059669}
.gh-live{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:100px;margin-bottom:14px}
body.dark .gh-live{background:rgba(16,185,129,.12);color:#6ee7b7;border:1px solid rgba(16,185,129,.2)}
body:not(.dark) .gh-live{background:#d1fae5;color:#047857;border:1px solid #a7f3d0}
.gh-live::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:ghLive 2s ease-in-out infinite}
@keyframes ghLive{0%,100%{opacity:.4}50%{opacity:1}}

/* ═══ 6: DOMAIN CENTERED ═══ */
.gh-domain{min-height:78vh}.gh-domain .container{text-align:center;display:flex;flex-direction:column;align-items:center}
.gh-search-box{display:flex;max-width:560px;width:100%;margin-bottom:20px}
.gh-search-input{flex:1;padding:16px 22px;border-radius:var(--rl) 0 0 var(--rl);font-size:15px;font-family:var(--font);outline:none;transition:border-color .2s}
body.dark .gh-search-input{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);color:#fff}
body.dark .gh-search-input::placeholder{color:rgba(255,255,255,.25)}
body:not(.dark) .gh-search-input{background:#fff;border:1.5px solid var(--border);color:var(--text);box-shadow:0 4px 20px rgba(0,30,80,.06)}
body:not(.dark) .gh-search-input::placeholder{color:var(--muted)}
.gh-search-input:focus{border-color:var(--blue)}
.gh-search-btn{padding:16px 28px;border:none;border-radius:0 var(--rl) var(--rl) 0;background:linear-gradient(135deg,var(--blue-dd),var(--blue));color:#fff;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer}
.gh-tlds{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gh-tld{padding:6px 14px;border-radius:var(--r);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
body.dark .gh-tld{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.45)}
body:not(.dark) .gh-tld{background:#fff;border:1.5px solid var(--border);color:var(--muted)}
.gh-tld:hover{border-color:rgba(0,120,200,.3)}
.gh-tld strong{font-weight:900}body.dark .gh-tld strong{color:#fff}body:not(.dark) .gh-tld strong{color:var(--text)}

/* ═══ 7: MIGRATION ═══ */
.gh-mig{min-height:85vh}.gh-mig .container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.gh-mig-steps{display:flex;flex-direction:column;gap:16px}
.gh-mig-step{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:var(--rl);transition:all .3s}
body.dark .gh-mig-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
body:not(.dark) .gh-mig-step{background:#fff;border:1.5px solid var(--border);box-shadow:0 4px 16px rgba(0,30,80,.05)}
.gh-mig-step:hover{transform:translateX(4px)}
.gh-mig-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0}
.gh-mn-1{background:rgba(0,120,200,.12);color:var(--sky);border:1.5px solid rgba(0,120,200,.25)}
.gh-mn-2{background:rgba(139,92,246,.12);color:#c4b5fd;border:1.5px solid rgba(139,92,246,.25)}
.gh-mn-3{background:rgba(245,158,11,.12);color:#fcd34d;border:1.5px solid rgba(245,158,11,.25)}
.gh-mn-4{background:rgba(16,185,129,.12);color:#6ee7b7;border:1.5px solid rgba(16,185,129,.25)}
.gh-mig-step h4{font-size:13px;font-weight:800;margin-bottom:2px}
body.dark .gh-mig-step h4{color:#fff}body:not(.dark) .gh-mig-step h4{color:var(--text)}
.gh-mig-step p{font-size:11px}body.dark .gh-mig-step p{color:rgba(255,255,255,.35)}body:not(.dark) .gh-mig-step p{color:var(--muted)}

/* ═══ 8: SOCIAL PROOF ═══ */
.gh-trust{min-height:88vh}.gh-trust .container{text-align:center;display:flex;flex-direction:column;align-items:center}
.gh-trust-logos{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:48px;opacity:.3}
.gh-trust-logos span{font-size:18px;font-weight:900;letter-spacing:-.02em}
body.dark .gh-trust-logos span{color:#fff}body:not(.dark) .gh-trust-logos span{color:var(--text)}
.gh-quote{max-width:640px;margin-bottom:24px}
.gh-quote p{font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.6;font-style:italic}
body.dark .gh-quote p{color:rgba(255,255,255,.65)}body:not(.dark) .gh-quote p{color:var(--text);opacity:.7}
.gh-author{display:flex;align-items:center;gap:10px;justify-content:center}
.gh-ava{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900}
body.dark .gh-ava{background:rgba(0,120,200,.12);border:2px solid rgba(0,120,200,.25);color:var(--sky)}
body:not(.dark) .gh-ava{background:rgba(0,120,200,.08);border:2px solid rgba(0,120,200,.15);color:var(--blue)}
.gh-author-name{font-size:14px;font-weight:800}body.dark .gh-author-name{color:#fff}body:not(.dark) .gh-author-name{color:var(--text)}
.gh-author-role{font-size:11px}body.dark .gh-author-role{color:rgba(255,255,255,.35)}body:not(.dark) .gh-author-role{color:var(--muted)}

/* ═══ 9: COMPARISON (split: text left, table right) ═══ */
.gh-compare{min-height:85vh}.gh-compare .container{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.gh-vs-table{border-radius:var(--rl);overflow:hidden}
body.dark .gh-vs-table{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
body:not(.dark) .gh-vs-table{background:#fff;border:1.5px solid var(--border);box-shadow:0 8px 32px rgba(0,30,80,.07)}
.gh-vs-head{display:grid;grid-template-columns:1fr 1fr;gap:0}
.gh-vs-head-cell{padding:16px 24px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
body.dark .gh-vs-head-cell{border-bottom:1px solid rgba(255,255,255,.06)}
body:not(.dark) .gh-vs-head-cell{border-bottom:1.5px solid var(--border)}
.gh-vs-head-old{color:#f87171}
body.dark .gh-vs-head-old{background:rgba(239,68,68,.06)}
body:not(.dark) .gh-vs-head-old{background:rgba(239,68,68,.03)}
.gh-vs-head-new{color:#10b981}
body.dark .gh-vs-head-new{background:rgba(16,185,129,.06)}
body:not(.dark) .gh-vs-head-new{background:rgba(16,185,129,.03)}
.gh-vs-row{display:grid;grid-template-columns:1fr 1fr;gap:0}
body.dark .gh-vs-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.04)}
body:not(.dark) .gh-vs-row:not(:last-child){border-bottom:1px solid rgba(0,0,0,.04)}
.gh-vs-cell{padding:14px 24px;display:flex;align-items:center;gap:10px;font-size:13px}
body.dark .gh-vs-cell:first-child{border-right:1px solid rgba(255,255,255,.04)}
body:not(.dark) .gh-vs-cell:first-child{border-right:1px solid rgba(0,0,0,.04)}
.gh-vs-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:900}
.gh-vs-icon-x{background:rgba(239,68,68,.1);color:#f87171}
.gh-vs-icon-ok{background:rgba(16,185,129,.1);color:#10b981}
body.dark .gh-vs-cell-old{color:rgba(255,255,255,.35)}
body:not(.dark) .gh-vs-cell-old{color:var(--muted)}
body.dark .gh-vs-cell-new{color:rgba(255,255,255,.7)}
body:not(.dark) .gh-vs-cell-new{color:var(--text)}

/* ═══ 10: DASHBOARD ═══ */
.gh-dash .container{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.gh-mock{border-radius:var(--rl);padding:20px;position:relative}
body.dark .gh-mock{background:rgba(11,20,38,.85);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.4)}
body:not(.dark) .gh-mock{background:#fff;border:1.5px solid var(--border);box-shadow:0 20px 60px rgba(0,30,80,.08)}
.gh-mock::before{content:'';position:absolute;top:0;left:0;right:0;height:36px;border-radius:var(--rl) var(--rl) 0 0}
body.dark .gh-mock::before{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
body:not(.dark) .gh-mock::before{background:var(--bg);border-bottom:1px solid var(--border)}
.gh-mock-dots{position:absolute;top:12px;left:16px;display:flex;gap:6px}.gh-mock-dots span{width:8px;height:8px;border-radius:50%}
.gmd-r{background:#f87171}.gmd-y{background:#fbbf24}.gmd-g{background:#34d399}
.gh-mock-body{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gh-mock-card{border-radius:var(--r);padding:14px}
body.dark .gh-mock-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
body:not(.dark) .gh-mock-card{background:var(--bg);border:1px solid var(--border)}
.gh-mc-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
body.dark .gh-mc-label{color:rgba(255,255,255,.3)}body:not(.dark) .gh-mc-label{color:var(--muted)}
.gh-mc-val{font-size:24px;font-weight:900}body.dark .gh-mc-val{color:var(--sky)}body:not(.dark) .gh-mc-val{color:var(--blue-d)}
.gh-mc-g{color:#6ee7b7!important}.gh-mc-p{color:#c4b5fd!important}.gh-mc-a{color:#fcd34d!important}
body:not(.dark) .gh-mc-g{color:#059669!important}body:not(.dark) .gh-mc-p{color:#7c3aed!important}body:not(.dark) .gh-mc-a{color:#d97706!important}
.gh-bar{height:4px;border-radius:2px;margin-top:10px;overflow:hidden}
body.dark .gh-bar{background:rgba(255,255,255,.06)}body:not(.dark) .gh-bar{background:rgba(0,30,80,.06)}
.gh-bar-fill{height:100%;border-radius:2px}
.ghb-b{background:var(--blue);width:78%}.ghb-g{background:#10b981;width:92%}.ghb-p{background:#7c3aed;width:45%}.ghb-a{background:#d97706;width:60%}

/* ═══ 11: MARQUEE ═══ */
.gh-marquee{min-height:90vh}.gh-marquee .container{text-align:center;display:flex;flex-direction:column;align-items:center}
.gh-mq-wrap{width:100vw;overflow:hidden;margin:48px -24px 0;position:relative}
.gh-mq-wrap{-webkit-mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)}
.gh-mq-track{display:flex;gap:48px;animation:ghMq 25s linear infinite;width:max-content;padding:20px 0}
.gh-mq-item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:var(--rl);white-space:nowrap;flex-shrink:0}
body.dark .gh-mq-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
body:not(.dark) .gh-mq-item{background:#fff;border:1.5px solid var(--border);box-shadow:0 2px 12px rgba(0,30,80,.04)}
.gh-mq-item strong{font-size:14px;font-weight:800}body.dark .gh-mq-item strong{color:#fff}body:not(.dark) .gh-mq-item strong{color:var(--text)}
.gh-mq-item span{font-size:11px}body.dark .gh-mq-item span{color:rgba(255,255,255,.35)}body:not(.dark) .gh-mq-item span{color:var(--muted)}
@keyframes ghMq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══ 12: ASYMMETRIC ═══ */
.gh-asym{min-height:90vh}.gh-asym .container{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;padding-bottom:40px}
.gh-asym-right{display:flex;flex-direction:column;gap:12px;align-self:center}
.gh-pill-row{display:flex;gap:8px;flex-wrap:wrap}
.gh-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--rl);font-size:11px;font-weight:700;transition:border-color .2s}
body.dark .gh-pill{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:rgba(255,255,255,.5)}
body:not(.dark) .gh-pill{border:1.5px solid var(--border);background:#fff;color:var(--muted)}
.gh-pill:hover{border-color:rgba(0,120,200,.25)}
.gh-pill-dot{width:6px;height:6px;border-radius:50%}
.ghpd-b{background:var(--blue)}.ghpd-g{background:var(--green)}.ghpd-p{background:var(--purple)}.ghpd-r{background:#ef4444}
.gh-metric{padding:20px 24px;border-radius:var(--rl)}
body.dark .gh-metric{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
body:not(.dark) .gh-metric{background:#fff;border:1.5px solid var(--border);box-shadow:0 4px 16px rgba(0,30,80,.05)}
.gh-metric-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.gh-m-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
body.dark .gh-m-label{color:rgba(255,255,255,.4)}body:not(.dark) .gh-m-label{color:var(--muted)}
.gh-m-val{font-size:20px;font-weight:900}body.dark .gh-m-val{color:var(--sky)}body:not(.dark) .gh-m-val{color:var(--blue-d)}

/* ═══ 13: DOMAIN SPLIT ═══ */
.gh-ds .container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.gh-ds-right{display:flex;justify-content:flex-end}
.gh-ds-card{border-radius:var(--rl);padding:28px;width:100%;max-width:480px}
body.dark .gh-ds-card{background:rgba(11,20,38,.85);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.35)}
body:not(.dark) .gh-ds-card{background:#fff;border:1.5px solid var(--border);box-shadow:0 20px 60px rgba(0,30,80,.08)}
.gh-ds-head{font-size:13px;font-weight:800;margin-bottom:16px;text-transform:uppercase;letter-spacing:.05em}
body.dark .gh-ds-head{color:#fff}body:not(.dark) .gh-ds-head{color:var(--text)}
.gh-ds-input-row{display:flex;gap:0;margin-bottom:14px}
.gh-ds-input{flex:1;padding:14px 18px;border-radius:var(--rl) 0 0 var(--rl);font-size:15px;font-family:var(--font);outline:none;transition:border-color .2s}
body.dark .gh-ds-input{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);color:#fff}
body.dark .gh-ds-input::placeholder{color:rgba(255,255,255,.25)}
body:not(.dark) .gh-ds-input{background:var(--bg);border:1.5px solid var(--border);color:var(--text)}
body:not(.dark) .gh-ds-input::placeholder{color:var(--muted)}
.gh-ds-input:focus{border-color:var(--blue)}
.gh-ds-tld{padding:14px 18px;border-left:none;border-radius:0 var(--rl) var(--rl) 0;font-size:15px;font-weight:800;font-family:var(--font);cursor:pointer;white-space:nowrap}
body.dark .gh-ds-tld{background:rgba(0,120,200,.1);border:1.5px solid rgba(0,120,200,.2);color:var(--sky)}
body:not(.dark) .gh-ds-tld{background:rgba(0,120,200,.06);border:1.5px solid rgba(0,120,200,.12);color:var(--blue)}
.gh-ds-btn{width:100%;padding:14px;border:none;border-radius:var(--r);background:linear-gradient(135deg,var(--blue-dd),var(--blue));color:#fff;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:box-shadow .2s;margin-bottom:18px}
.gh-ds-btn:hover{box-shadow:0 8px 28px rgba(0,120,200,.32)}
.gh-ds-div{height:1px;margin-bottom:16px}body.dark .gh-ds-div{background:rgba(255,255,255,.06)}body:not(.dark) .gh-ds-div{background:var(--border)}
.gh-ds-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
body.dark .gh-ds-title{color:rgba(255,255,255,.35)}body:not(.dark) .gh-ds-title{color:var(--muted)}
.gh-ds-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.gh-ds-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:var(--r);transition:border-color .2s}
body.dark .gh-ds-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
body:not(.dark) .gh-ds-item{background:var(--bg);border:1px solid var(--border)}
.gh-ds-item:hover{border-color:rgba(0,120,200,.25)}
.gh-ds-name{font-size:13px;font-weight:800}body.dark .gh-ds-name{color:#fff}body:not(.dark) .gh-ds-name{color:var(--text)}
.gh-ds-price{font-size:10px;font-weight:600}body.dark .gh-ds-price{color:rgba(255,255,255,.35)}body:not(.dark) .gh-ds-price{color:var(--muted)}
.gh-ds-foot{font-size:10px;text-align:center}body.dark .gh-ds-foot{color:rgba(255,255,255,.25)}body:not(.dark) .gh-ds-foot{color:var(--muted)}


/* ═══ HERO WAVES — Decorative animated background waves ═══
   Usage: Add two SVG elements inside .hero section:
   <svg class="gh-wave gh-wave-1" viewBox="0 0 800 200" ...>
   <svg class="gh-wave gh-wave-2" viewBox="0 0 800 200" ...>
   Requires parent .hero to have overflow:hidden + position:relative (main.css does this)
   ═══════════════════════════════════════════════════════ */
.gh-wave {
  position: absolute;
  bottom: 0; left: 0;
  width: 200%; height: 110px;
  pointer-events: none; z-index: 0;
}
.gh-wave-1 {
  color: rgba(0,40,80,.07);
  animation: ghWave1 7s ease-in-out infinite;
}
.gh-wave-2 {
  color: rgba(0,40,80,.18);
  height: 80px;
  animation: ghWave2 9s ease-in-out infinite;
}
@keyframes ghWave1 {
  0% { transform: translateX(-10%); }
  50% { transform: translateX(-40%); }
  100% { transform: translateX(-10%); }
}
@keyframes ghWave2 {
  0% { transform: translateX(-35%); }
  50% { transform: translateX(-5%); }
  100% { transform: translateX(-35%); }
}
/* Dark mode */
body.dark .gh-wave-1 { color: rgba(255,255,255,.025); }
body.dark .gh-wave-2 { color: rgba(255,255,255,.06); }

/* Responsive */
@media(max-width:768px){
  .gh-wave { display: none; }
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){.gh-split .container,.gh-mig .container,.gh-dash .container,.gh-asym .container,.gh-ds .container,.gh-compare .container{grid-template-columns:1fr}.gh-visual{min-height:320px}.gh-nums-grid{grid-template-columns:repeat(2,1fr)}.gh-vs-table{overflow-x:auto}.gh-ds-right{justify-content:center}.gh-ds-card{max-width:100%}}
@media(max-width:640px){.gh-section{min-height:auto;padding:100px 0 60px}.hero-stats{flex-wrap:wrap}.gh-nums-grid{grid-template-columns:1fr 1fr;gap:10px}.gh-prod-row{flex-direction:column;align-items:stretch}.gh-prod{min-width:0}.gh-search-box{flex-direction:column}.gh-search-input,.gh-search-btn{border-radius:var(--rl)}.gh-ds-grid{grid-template-columns:1fr 1fr}.gh-fc{position:static!important;transform:none!important;animation:none!important}.gh-visual{flex-direction:column;gap:12px;min-height:auto}.gh-orb,.gh-dot{display:none}}

/* ═══════════════════════════════════════════════════════════════
   HERO PHOTO VARIANT — home.css → main_hero.css
   Wiederverwendbar auf beliebigen Seiten via home.css + main_hero.css
   ════════════════════════════════════════════════════════════════ */

/* Foto-Hintergrund rechts, links nach weiss ausblenden */
.hero-photo {
  position: absolute; top: 0; right: 0; width: 62%; height: 100%; z-index: 0;
  /* Für Produktion in main_hero.css ersetzen durch:
     background: url('/img/hero-bg.jpg') center center / cover no-repeat; */
  background: url('/img/home/hero-bg.webp') center center / cover no-repeat;
}
/* Horizontaler Verlauf: links weiss → rechts transparent */
.hero-photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    #fff 0%,rgba(255,255,255,.97) 12%,rgba(255,255,255,.82) 28%,
    rgba(255,255,255,.42) 48%,rgba(255,255,255,.08) 68%,transparent 85%);
}
.hero-photo::after { display: none; }
.hero::after       { display: none; }
.hero-photo-lines  { display: none; }

/* Hero Grid — 2-spaltig: Text links, Card rechts */
.hero-grid { display: grid; grid-template-columns: 1fr 430px; gap: 64px; align-items: center; }

/* Chip-Badge links oben */
.hero-chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  color: var(--blue-d); background: rgba(0,152,239,.07); border: 1.5px solid rgba(0,152,239,.16);
  padding: 7px 16px; border-radius: 100px; margin-bottom: 26px;
}

/* Subtext */
.hero-p   { font-size: 16.5px; color: var(--muted); line-height: 1.75; max-width: 500px; margin-bottom: 34px; }

/* Stats-Label (main.css hat .hs-lbl — .hs-label ist Alias) */
.hs-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* Rating-Badges (hosttest.ch / Trustpilot) */
.hero-ratings { display: flex; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.rating-badge {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 18px;
  box-shadow: 0 1px 3px rgba(0,40,100,.08), 0 4px 12px rgba(0,40,100,.05);
  transition: border-color .18s, box-shadow .18s;
  text-decoration: none; color: inherit;
}
.rating-badge:hover {
  box-shadow: 0 4px 16px rgba(0,40,100,.10), 0 1px 4px rgba(0,40,100,.06);
  border-color: rgba(0,152,239,.28);
}
.rb-platform { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.rb-count    { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rb-extra    { font-size: 11px; color: var(--green); font-weight: 700; margin-top: 2px; }
.rb-sep      { width: 1px; height: 38px; background: var(--border); flex-shrink: 0; }
.rb-icon     { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rb-tp { background: #00b67a; } .rb-ht { background: var(--blue); } .rb-sh { background: #1a3a6b; }
.rb-tp svg,.rb-ht svg,.rb-sh svg { width: 18px; height: 18px; fill: #fff; }

/* Hero-Card Ergänzungen (main.css hat hc-row/hc-icon, dies sind zusätzliche) */
.hc-info  { flex: 1; }
.hc-name  { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.2; }
.hc-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }
.hc-price { font-size: 12.5px; font-weight: 800; color: var(--blue-d); white-space: nowrap; margin-left: auto; }
.hci-indigo { background: #eef2ff; } .hci-indigo svg { stroke: #4338ca; }

/* Responsive: Foto + Grid auf Mobile */
@media(max-width:740px) {
  .hero-photo { display: none; }
  .hero-grid  { grid-template-columns: 1fr; }
  .hero-card  { max-width: 480px; }
}