:root{--ssp-orange:#ff6b00;--ssp-cyan:#20d9ff;--ssp-gold:#d9a441;--ssp-violet:#9b6cff;--ssp-ink:#05080d;--ssp-panel:#0c121b}
body{background:radial-gradient(circle at 84% 14%,rgba(255,107,0,.12),transparent 30%),radial-gradient(circle at 20% 45%,rgba(32,217,255,.06),transparent 34%),var(--ssp-ink)}
.header{background:rgba(3,6,10,.78);backdrop-filter:blur(22px);border-bottom-color:rgba(255,107,0,.22)}
.hero{min-height:92vh;padding-top:110px;overflow:hidden}
.hero:before{content:"SSP";position:absolute;right:-1vw;top:10vh;font-size:clamp(12rem,30vw,34rem);font-weight:900;line-height:.8;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.035);pointer-events:none}
.hero .copy{position:relative;z-index:2}
.hero .copy h1{font-size:clamp(3.5rem,6.7vw,7.8rem);line-height:.83;letter-spacing:-.07em;max-width:970px;text-shadow:0 18px 60px rgba(0,0,0,.55)}
.hero .copy h1 span{background:linear-gradient(90deg,#ff5a00,#ffad49 48%,#e4e8ee 95%);-webkit-background-clip:text;color:transparent}
.hero .copy>p{max-width:720px;font-size:clamp(1rem,1.35vw,1.28rem);line-height:1.75;color:#aeb8c7}
.hero .eyebrow{color:#ff8b35;letter-spacing:.22em}
.hero .badges span{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.ecosystem-deck{position:relative;padding:clamp(80px,9vw,150px) max(5vw,24px);border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(7,11,17,.3),rgba(7,11,17,.92))}
.ecosystem-heading{display:grid;grid-template-columns:minmax(250px,.7fr) 1.4fr;gap:24px 64px;max-width:1450px;margin:0 auto 52px;align-items:end}
.ecosystem-heading span{grid-column:1/-1;color:var(--ssp-orange);font-size:.72rem;font-weight:900;letter-spacing:.24em}
.ecosystem-heading h2{margin:0;color:#f4f7fb;font-size:clamp(2.1rem,4vw,4.6rem);line-height:.98;letter-spacing:-.055em}
.ecosystem-heading p{margin:0;color:#99a5b6;font-size:1.05rem;line-height:1.7;max-width:620px}
.ecosystem-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1450px;margin:auto}
.ecosystem-card{--accent:var(--ssp-orange);position:relative;min-height:390px;padding:30px;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:#eef3fa;background:linear-gradient(155deg,rgba(18,26,38,.95),rgba(7,11,17,.97));border:1px solid rgba(255,255,255,.09);border-radius:24px;transition:.35s ease;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.ecosystem-card:before{content:"";position:absolute;inset:auto -30% -45% 10%;height:75%;background:radial-gradient(circle,var(--accent),transparent 67%);opacity:.12;transition:.35s}
.ecosystem-card:after{content:"";position:absolute;left:30px;right:30px;top:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.ecosystem-card:hover{transform:translateY(-10px);border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 36px 90px rgba(0,0,0,.42)}
.ecosystem-card:hover:before{opacity:.2;transform:scale(1.08)}
.ecosystem-card i{margin-left:auto;font-style:normal;font-size:.75rem;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:7px 9px;border-radius:999px}
.ecosystem-card small{margin-top:54px;color:var(--accent);font-weight:800;letter-spacing:.14em}
.ecosystem-card h3{font-size:clamp(2rem,3.2vw,3.7rem);margin:14px 0 18px;letter-spacing:-.06em}
.ecosystem-card p{color:#9ca8b8;line-height:1.65;margin:0 0 32px}
.ecosystem-card b{margin-top:auto;color:#f5f7fa;font-size:.82rem;letter-spacing:.04em}
.ecosystem-card.kigan{--accent:var(--ssp-cyan)}.ecosystem-card.amaruk{--accent:var(--ssp-gold)}.ecosystem-card.labs{--accent:var(--ssp-violet)}
.services{background:rgba(5,9,14,.82);border-block-color:rgba(255,255,255,.06)}
.search-solutions,.platform{position:relative}.search-solutions:before,.platform:before{content:"";position:absolute;inset:10% 5%;background:radial-gradient(circle at 50% 0,rgba(255,107,0,.08),transparent 60%);pointer-events:none}
@media(max-width:1080px){.ecosystem-cards{grid-template-columns:repeat(2,1fr)}.ecosystem-heading{grid-template-columns:1fr}.ecosystem-heading span{grid-column:auto}}
@media(max-width:680px){.hero{padding-top:90px}.hero .copy h1{font-size:clamp(3rem,15vw,5.2rem)}.ecosystem-cards{grid-template-columns:1fr}.ecosystem-card{min-height:330px}.ecosystem-heading{margin-bottom:34px}}