/* SEORAM dark technical landing theme
 * Loaded after the original landing CSS so the underlying page stays intact.
 * Product screenshots deliberately remain bright: they are the product surface,
 * while the dark shell represents the automation/data layer around it.
 */
:root{
  --navy:#8aa7cb;
  --navy-d:#eaf2fb;
  --navy-h:#a8c3e3;
  --green:#58b894;
  --green-d:#78c8a9;
  --accent:#69c5a2;
  --gray-d:#d6dde4;
  --gray:#9aa7b2;
  --gray-bg:rgba(13,24,33,.72);
  --ink:#eef4f8;
  --muted:#a9b5bf;
  --soft:#7f8e9a;
  --bg:#071017;
  --bg2:#0a141d;
  --bg3:#101c26;
  --line:rgba(214,230,240,.10);
  --line2:rgba(214,230,240,.17);
  --radius:18px;
  --shadow:0 24px 80px rgba(0,0,0,.36),0 2px 0 rgba(255,255,255,.03) inset;
  --shadow-sm:0 14px 42px rgba(0,0,0,.24);
}

html{background:#071017;color-scheme:dark}
body{
  color:var(--ink);
  background:
    radial-gradient(1000px 680px at 12% 14%,rgba(35,85,112,.12),transparent 66%),
    radial-gradient(820px 620px at 88% 38%,rgba(36,105,79,.09),transparent 68%),
    linear-gradient(180deg,#061018 0%,#08121a 35%,#071017 100%);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 82%);
}
::selection{background:rgba(87,184,148,.28);color:#fff}

.nav{
  background:rgba(6,15,22,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:none;
  backdrop-filter:saturate(125%) blur(18px);
}
.brand{color:#f3f7fa}
.brand__en{color:#85929d}
.nav__links a{color:#9fabb5}
.nav__links a:hover{color:#fff}
.nav--over{background:linear-gradient(180deg,rgba(4,10,15,.78),rgba(4,10,15,.15));border-bottom-color:transparent;backdrop-filter:blur(4px)}
.nav--over .brand__en{color:#86939d}
.nav--over .nav__links a{color:#b7c2ca}
.nav--over .nav__links a:hover{color:#fff}

.btn{border-radius:10px;letter-spacing:-.01em}
.btn--primary{
  background:#eff5f8;color:#071017;
  box-shadow:0 8px 28px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.65) inset;
}
.btn--primary:hover{background:#fff;color:#071017;transform:translateY(-1px)}
.btn--ghost{
  background:rgba(255,255,255,.035);color:#d9e2e8;border:1px solid rgba(255,255,255,.13)
}
.btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(105,197,162,.45);color:#fff}
.btn--light{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16)}
.btn--light:hover{background:rgba(255,255,255,.10)}
.btn--white{background:#eef4f7;color:#071017}

.eyebrow{color:#71c4a3;font-weight:700;letter-spacing:.13em}
.eyebrow.gray{color:#8e9ba6}

.splash{
  background:transparent;
  min-height:100svh;
}
.splash__bg{
  background:
    radial-gradient(ellipse at 50% 48%,rgba(28,55,72,.34),transparent 46%),
    radial-gradient(ellipse at 70% 22%,rgba(31,88,67,.15),transparent 43%),
    linear-gradient(180deg,#040a0f 0%,#071119 62%,#08131b 100%);
  animation:none;
}
.splash__video,.splash__img{filter:saturate(.55) contrast(1.06);opacity:.24}
.splash__overlay{
  background:
    radial-gradient(ellipse at center,rgba(7,16,23,.10),rgba(5,12,18,.60) 72%),
    linear-gradient(180deg,rgba(3,8,12,.28),rgba(5,13,19,.72));
}
.splash__content{max-width:980px}
.splash__brand{
  color:#f4f7f8;
  font-weight:690;
  letter-spacing:-.045em;
  font-size:clamp(48px,8.4vw,96px);
  text-shadow:0 16px 60px rgba(0,0,0,.42);
}
.splash__brand .en{font-weight:450;color:#8f9ba5;opacity:1;letter-spacing:.025em}
.splash__title{color:#b8c4cc;font-size:clamp(17px,2.2vw,25px);font-weight:430;letter-spacing:-.02em}
.splash__scroll{color:#7f8d97;opacity:.86}
.splash__mouse{border-color:rgba(218,230,236,.38)}
.splash__mouse i{background:#b7c9d3}

.hero,.section,.stats,.cta,.foot{position:relative;background:transparent}
.hero{
  background:
    radial-gradient(820px 520px at 78% 38%,rgba(51,87,106,.10),transparent 68%),
    linear-gradient(180deg,rgba(8,18,26,.50),rgba(8,18,26,.20));
  border-top:1px solid rgba(255,255,255,.035);
}
.hero__in{padding-top:92px;padding-bottom:92px}
.hero h1{color:#f2f6f8;font-weight:660;letter-spacing:-1.5px;font-size:clamp(36px,4.1vw,54px)}
.hero h1 .hl{background:none;color:#8ad2b5;text-shadow:0 0 34px rgba(83,184,146,.13);padding:0}
.hero p.lead{color:#aebac3;font-size:16px;line-height:1.75}
.hero__trust{color:#7f8c96}
.hero__trust b{color:#c6d0d6}

.hero__art .frame,.feat__media .shot{
  position:relative;
  background:#f7f9fa;
  border:1px solid rgba(235,244,248,.23);
  box-shadow:
    0 34px 90px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.035),
    0 0 68px rgba(67,110,130,.10);
}
.hero__art .frame{border-radius:17px;transform:perspective(1400px) rotateY(-2.25deg) rotateX(.8deg);transform-origin:center left}
.hero__art .frame::after,.feat__media .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.feat__media .shot{border-radius:16px;transition:transform .35s ease,box-shadow .35s ease}
.feat:hover .feat__media .shot{transform:translateY(-3px);box-shadow:0 38px 94px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.05)}

.stats{
  background:rgba(10,20,29,.63);
  border-color:rgba(255,255,255,.075);
  backdrop-filter:blur(10px);
}
.stat b{color:#e9f0f4;font-weight:720}
.stat span{color:#8f9ca6}

.section{padding:106px 0}
.section--tint{
  background:linear-gradient(180deg,rgba(13,24,33,.62),rgba(10,20,28,.34));
  border-top:1px solid rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.035);
}
.sec-head{max-width:720px;margin-bottom:32px}
.sec-head h2{color:#f1f5f7;font-size:clamp(30px,3.5vw,43px);font-weight:640;letter-spacing:-1.15px}
.sec-head p{color:#9eabb5;line-height:1.75}

.feat{padding:64px 0;gap:72px}
.feat + .feat{border-top:1px solid rgba(255,255,255,.07)}
.feat h3{color:#edf3f6;font-size:24px;font-weight:620;letter-spacing:-.55px}
.feat p{color:#9eabb5;line-height:1.74}
.feat li{color:#cbd4da}
.feat li svg{color:#65bd9c}
.feat__icon{
  background:rgba(154,189,205,.055)!important;
  border:1px solid rgba(172,209,224,.11);
  color:#9fc0d4!important;
  border-radius:13px;
}
.feat .eyebrow{color:#6fbf9f!important}

.step,.integ .card,.price-card,.promo-card,.howlight{
  background:linear-gradient(180deg,rgba(18,31,42,.72),rgba(11,22,31,.78));
  border:1px solid rgba(210,231,240,.11);
  box-shadow:0 20px 60px rgba(0,0,0,.20),0 1px 0 rgba(255,255,255,.025) inset;
  backdrop-filter:blur(14px);
}
.step:hover,.integ .card:hover,.price-card:hover{
  border-color:rgba(105,197,162,.20);
  transform:translateY(-2px);
  transition:.25s ease;
}
.step .n{
  background:rgba(127,166,190,.12)!important;color:#cfe0e9;
  border:1px solid rgba(169,204,222,.14);font-weight:650
}
.step h4,.integ h4,.howlight h4{color:#e8eef2}
.step p,.integ p,.howlight p{color:#99a6b0}
.howlight{border-left:1px solid rgba(105,197,162,.26)}
.howlight__icon{filter:saturate(.6)}

.integ .logo{
  background:#f4f6f7;border-radius:12px;padding:10px 14px;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
}
.integ .logo img{max-width:100%;max-height:100%;object-fit:contain}

.price-card{color:#dbe4e9}
.price-card.featured{border-color:rgba(105,197,162,.38);box-shadow:0 25px 80px rgba(0,0,0,.30),0 0 50px rgba(59,146,111,.055)}
.price-badge{background:#377d65;color:#effaf6}
.price-name,.price-vat,.price-note{color:#83919c}
.price-amt,.price-tier .t-name,.price-tier .t-amt{color:#edf3f6}
.price-desc,.price-ent{color:#bac5cc}
.price-tier{border-color:rgba(255,255,255,.08)}
.price-tier .t-name small{color:#778690}
.price-scope{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);color:#cdd7dd}
.price-ent a{color:#79c6a8}
.price-cond{background:rgba(63,139,108,.10);color:#94cdb7;border:1px solid rgba(105,197,162,.11)}
.promo-card h4{color:#dce5ea}
.promo-card.promo-trial::before{background:#5db394}
.promo-card.promo-migrate::before{background:#708da7}
.promo-card.promo-migrate h4 .tag,.promo-card.promo-trial h4 .tag{background:rgba(255,255,255,.06);color:#aebbc5}

.cta{
  background:
    radial-gradient(700px 360px at 50% 0%,rgba(58,128,101,.15),transparent 70%),
    linear-gradient(180deg,rgba(8,18,26,.35),rgba(4,11,16,.88));
  border-top:1px solid rgba(255,255,255,.065);
}
.cta__in{padding-top:96px;padding-bottom:96px}
.cta h2{font-size:clamp(30px,3.5vw,44px);font-weight:620;letter-spacing:-1px}
.cta p{color:#9eabb4}
.foot{background:#050b10;color:#7f8b95;border-color:rgba(255,255,255,.06)}
.foot a{color:#aab7c0}.foot a:hover{color:#dfe7ec}
.foot .brand{color:#dbe4e9}

.ph{
  background:repeating-linear-gradient(135deg,#111d26,#111d26 14px,#0d1720 14px,#0d1720 28px);
  color:#778792;border:1px solid rgba(255,255,255,.07)
}
.ph__t{color:#a5b2bb}.ph__s{color:#72818c}

.modal{background:rgba(2,7,10,.76);backdrop-filter:blur(12px)}
.modal__box{background:#f7f9fa;color:#202a31;box-shadow:0 40px 120px rgba(0,0,0,.58)}
.modal__box h3,.dform label,.dok h3{color:#10243f}
.modal__box p,.dok p{color:#566069}
.dform input,.dform textarea,.field{background:#fff;color:#222a31}

.reveal{transform:translateY(12px);transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1)}

@media(max-width:900px){
  .hero__art .frame{transform:none}
  .section{padding:76px 0}
  .feat{gap:28px;padding:44px 0}
}
@media(max-width:600px){
  body::before{background-size:44px 44px;opacity:.18}
  .splash__brand{letter-spacing:-.035em}
  .hero__in{padding-top:58px;padding-bottom:62px}
  .sec-head h2{font-size:30px}
  .feat h3{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .feat__media .shot,.step,.integ .card,.price-card{transition:none!important}
}