:root { color-scheme: dark; font-family: "Roboto", Arial, sans-serif; }
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #03130e; scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
body.setra-home-page { min-width: 320px; min-height: 100svh; margin: 0; overflow-x: hidden; color: #f8e4ad; background: #03130e; -webkit-font-smoothing: antialiased; }
.setra-home-background { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 10%, rgba(16, 91, 62, .37), transparent 28%), radial-gradient(ellipse at 50% 62%, rgba(2, 47, 32, .42), transparent 42%), #03130e url("../images/gold-login-circuit.svg") center top / cover no-repeat; }
.setra-home-background::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .17), transparent 18%, transparent 82%, rgba(0, 0, 0, .2)); }
.setra-home-background::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(0, 6, 4, .43) 100%); }
.setra-home-shell { position: relative; z-index: 1; width: min(100%, 580px); min-height: 100svh; margin: 0 auto; padding: clamp(34px, 7vw, 58px) clamp(22px, 5.5vw, 42px) 34px; }
.home-topbar { display: flex; align-items: center; justify-content: space-between; }
.home-brand { display: inline-flex; align-items: center; gap: 9px; color: #f4c969; text-decoration: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .72)); }
.home-brand-logo { width: clamp(64px, 16vw, 92px); height: auto; display: block; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .52); }
.home-splash-screen { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 28px; overflow: hidden; color: #f3ca6e; background: radial-gradient(ellipse at 50% 42%, rgba(16, 101, 66, .34), transparent 34%), radial-gradient(ellipse at 50% 100%, rgba(115, 17, 13, .2), transparent 38%), #020d09 url("../images/gold-login-circuit.svg") center / cover no-repeat; opacity: 1; visibility: visible; transition: opacity .7s ease, visibility .7s ease; }.home-splash-screen::before { content: ""; position: absolute; width: min(80vw, 440px); aspect-ratio: 1; border: 1px solid rgba(234, 189, 75, .26); border-radius: 50%; box-shadow: 0 0 0 25px rgba(13, 98, 65, .05), 0 0 40px rgba(238, 185, 69, .14), inset 0 0 40px rgba(239, 191, 82, .08); animation: homeSplashRing 4s ease-in-out infinite; }.home-splash-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }.home-splash-content { position: relative; z-index: 1; width: min(100%, 360px); display: grid; justify-items: center; }.home-splash-logo { width: min(70vw, 230px); height: auto; border-radius: 18px; box-shadow: 0 0 28px rgba(245, 196, 78, .28), 0 18px 35px rgba(0, 0, 0, .58); animation: homeSplashLogo 3.4s ease-in-out infinite; }.home-splash-progress { width: min(100%, 280px); height: 8px; margin-top: 24px; overflow: hidden; border: 1px solid rgba(246, 201, 88, .72); border-radius: 999px; background: rgba(1, 22, 14, .9); box-shadow: 0 0 9px rgba(255, 56, 49, .34), inset 0 0 8px rgba(0, 0, 0, .7); }.home-splash-progress > span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #bd7a1d, #ffe893 48%, #ee3e35 100%); box-shadow: 0 0 10px #ffe06c; animation: homeSplashProgress 20s linear forwards; }.home-splash-content p { margin: 15px 0 0; color: #e2c77e; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 6px #000; animation: homeSplashText 2.2s ease-in-out infinite; }body.home-splash-active { overflow: hidden; }@keyframes homeSplashLogo { 0%,100% { transform: translateY(0) scale(1); filter: brightness(1); } 50% { transform: translateY(-10px) scale(1.025); filter: brightness(1.12); } }@keyframes homeSplashRing { 0%,100% { transform: scale(.92) rotate(0deg); opacity: .56; } 50% { transform: scale(1.06) rotate(10deg); opacity: 1; } }@keyframes homeSplashProgress { from { width: 0; } to { width: 100%; } }@keyframes homeSplashText { 50% { opacity: .55; letter-spacing: .12em; } }
.language-indicator { width: clamp(59px, 15vw, 74px); height: clamp(59px, 15vw, 74px); display: grid; place-items: center; border: 1px solid #dba734; border-radius: 21px; color: #f3c65b; background: rgba(6, 31, 22, .54); box-shadow: 0 0 11px rgba(255, 56, 49, .19), inset 0 0 12px rgba(255, 218, 128, .04); }
.language-indicator svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; }
.home-heading { margin: clamp(51px, 12vw, 82px) 0 24px; text-align: center; }
.home-heading h1 { margin: 0; color: #f4c969; font-size: clamp(39px, 10vw, 58px); font-weight: 500; line-height: 1.03; letter-spacing: -.045em; text-shadow: 0 2px 0 #6b440d, 0 5px 12px rgba(0, 0, 0, .92); }
.home-heading > span { width: 76%; height: 2px; margin: 20px auto 15px; display: block; background: linear-gradient(90deg, transparent, #c87c20 30%, #ff3435 50%, #c87c20 70%, transparent); box-shadow: 0 0 7px #ff302f; }
.home-heading p { margin: 0; color: #fff8e8; font-size: clamp(17px, 4.2vw, 22px); line-height: 1.35; }
.growth-stage { position: relative; min-height: clamp(280px, 68vw, 375px); margin: 4px -4% 6px; display: grid; place-items: center; overflow: hidden; }
.growth-stage-logo { width: min(78%, 290px); height: auto; display: block; border-radius: 20px; box-shadow: 0 0 24px rgba(236, 193, 74, .2), 0 18px 36px rgba(0, 0, 0, .55); filter: saturate(1.05) contrast(1.03); }
.growth-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-bars path { fill: none; stroke: #d69a2a; stroke-opacity: .48; stroke-width: 1.25; }.chart-sparks { fill: #ffe780; filter: drop-shadow(0 0 3px #ffd649); }.green-wave { fill: none; stroke: url(#homeGreen); stroke-width: 5; opacity: .75; filter: url(#homeGlow); }.gold-wave { fill: none; stroke: url(#homeGold); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }.gold-arrow { fill: #ffe695; filter: url(#homeGlow); }
.growth-shield, .growth-wallet { position: absolute; z-index: 2; color: #f3c65b; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .75)) drop-shadow(0 0 4px rgba(255, 195, 55, .34)); }.growth-shield { top: 22%; left: 8%; width: clamp(68px, 17vw, 96px); }.growth-wallet { right: 9%; bottom: 12%; width: clamp(75px, 20vw, 104px); }.growth-shield svg, .growth-wallet svg { width: 100%; height: auto; display: block; fill: rgba(9, 42, 29, .88); stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.growth-shield svg path:last-child { fill: none; stroke: #ffe38a; stroke-width: 4.5; }
.home-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.feature-card { min-height: 167px; padding: 19px 7px 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border: 1px solid rgba(215, 166, 48, .72); border-radius: 21px; color: #f4c969; background: linear-gradient(145deg, rgba(11, 43, 30, .88), rgba(3, 19, 13, .82)); box-shadow: 0 0 9px rgba(255, 45, 47, .18), inset 0 0 18px rgba(255, 217, 119, .035); text-align: center; }.feature-card svg { width: 68px; height: 74px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255, 209, 92, .27)); }.feature-card strong { color: #e8bb55; font-size: clamp(16px, 4vw, 21px); font-weight: 500; }.feature-card::after { content: ""; width: 56%; height: 2px; background: linear-gradient(90deg, transparent, #ff3a36, transparent); box-shadow: 0 0 5px #ff3a36; }
.home-actions { margin-top: 31px; display: grid; gap: 16px; }.home-action { height: 69px; display: grid; place-items: center; border: 2px solid #efbc52; border-radius: 21px; color: #200e05; background: linear-gradient(105deg, #b67017 0%, #ffe799 32%, #d18c23 63%, #ffe394 100%); box-shadow: 0 0 13px rgba(255, 51, 51, .96), 0 9px 19px rgba(0, 0, 0, .4), inset 0 1px 7px rgba(255, 255, 255, .65); font-size: clamp(24px, 6.3vw, 31px); font-weight: 700; text-decoration: none; transition: transform .18s ease, filter .18s ease; }.home-action:hover, .home-action:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }.home-secondary-action { color: #eac35e; background: rgba(4, 27, 19, .8); box-shadow: 0 0 10px rgba(255, 51, 51, .35), inset 0 0 17px rgba(255, 211, 103, .03); font-weight: 500; }
.home-app-promo { width: max-content; max-width: 100%; min-height: 62px; margin: 30px auto; padding: 8px 24px; display: flex; align-items: center; justify-content: center; gap: 15px; border: 1px solid #a98b25; border-radius: 999px; color: #fff8e9; background: rgba(4, 29, 20, .75); box-shadow: inset 0 0 15px rgba(233, 198, 91, .04); font-size: clamp(17px, 4.25vw, 22px); }.play-symbol { width: 34px; height: 39px; flex: 0 0 34px; display: block; clip-path: polygon(0 0, 100% 50%, 0 100%, 20% 50%); background: linear-gradient(145deg, #16c4ed 0 31%, #40d171 31% 50%, #ffd230 50% 68%, #ee3443 68%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.home-app-promo[href]{text-decoration:none;transition:transform .18s ease,filter .18s ease}.home-app-promo[href]:hover{transform:translateY(-1px);filter:brightness(1.08)}.home-app-promo.is-disabled{opacity:.68}

/* Home content starts directly below the splash-free top edge. */
.setra-home-page .home-heading{margin-top:clamp(18px,5vw,34px)}
@media(max-width:374px){.setra-home-page .home-heading{margin-top:18px}}
.home-assurance { min-height: 93px; padding: 13px 14px; display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid #b77921; border-radius: 20px; color: #fff9e9; background: rgba(4, 29, 20, .82); box-shadow: 0 0 10px rgba(255, 51, 51, .22), inset 0 0 17px rgba(255, 211, 103, .035); }.home-assurance > span { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: clamp(12px, 3.25vw, 16px); line-height: 1.28; text-align: center; }.home-assurance svg { width: 35px; height: 39px; flex: 0 0 35px; fill: none; stroke: #f4c969; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.home-assurance > i { width: 1px; height: 46px; background: #b8892d; opacity: .8; }.home-footer { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 13px; color: #e6bb55; font-size: clamp(14px, 3.8vw, 18px); }.home-footer b { color: #c68d2b; font-size: .85em; }
@media (max-width: 374px) { .setra-home-shell { padding: 26px 16px 29px; } .home-heading { margin-top: 42px; } .growth-stage { min-height: 266px; } .feature-card { min-height: 145px; padding-top: 15px; border-radius: 18px; } .feature-card svg { width: 58px; height: 62px; } .home-actions { margin-top: 25px; gap: 13px; } .home-action { height: 61px; border-radius: 18px; } .home-app-promo { min-height: 56px; margin-block: 25px; padding-inline: 18px; } .home-assurance { min-height: 83px; padding-inline: 9px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-motion: reduce) { .home-splash-progress > span { animation-duration: 20s !important; } }