/* Final dark-surface polish for footer, typography and public landing dialogs. */

/* Typography hierarchy for a moving multicolor background.
   Supporting copy moves close to the old headline brightness, while display
   headlines use a restrained ice-mint accent. Pretendard Variable is retained
   for Korean legibility and tuned with lighter display weight/tighter tracking. */
:root{
  --muted:#c7d2d9;
  --soft:#a8b6c0;
  --gray:#bac6ce;
  --display:#b8ead7;
  --display-cool:#9fd8ef;
}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-weight:430;
  letter-spacing:-.012em;
  font-feature-settings:"kern" 1,"liga" 1;
}
/* Keep the SEORAM wordmark typography identical in header, splash and footer;
   each placement may still retain its own size and color. */
.nav .brand__en,
.splash__brand .en,
.foot .brand{
  font-family:inherit;
  font-weight:430!important;
  letter-spacing:-.012em!important;
  font-style:normal;
}
.splash__brand,.hero h1,.sec-head h2,.cta h2{
  color:var(--display)!important;
  font-weight:615!important;
  letter-spacing:-.04em!important;
  line-height:1.12;
  text-shadow:0 2px 18px rgba(0,0,0,.48),0 0 34px rgba(87,190,151,.075);
}
.splash__brand .en{
  color:#dce6eb!important;
}
.hero h1 .hl{
  color:var(--display-cool)!important;
  text-shadow:0 2px 16px rgba(0,0,0,.46),0 0 28px rgba(98,185,224,.12)!important;
}
.splash__title{color:#e1e8ec!important;font-weight:450}
.splash__scroll{color:#b4c0c8!important}
.hero p.lead{color:#d9e2e7!important;font-weight:440}
.hero__trust{color:#b5c1c9!important}
.hero__trust b{color:#edf3f6!important}
.stat span{color:#bbc6cd!important}
.stat b{color:#f2f6f8!important}
.sec-head p,.feat p,.step p,.integ p,.howlight p,.cta p{color:#ccd7de!important}
.feat h3,.step h4,.integ h4,.howlight h4{color:#eef4f7!important;font-weight:590}
.feat li{color:#e0e8ec!important}
.price-name,.price-vat,.price-note{color:#aab8c2!important}
.price-desc,.price-ent{color:#d3dce1!important}
.price-tier .t-name small{color:#a2b0ba!important}
.splash__title,.hero p.lead,.hero__trust,.stat span,.sec-head p,.feat p,.feat li,.cta p{
  text-shadow:0 2px 14px rgba(0,0,0,.42);
}

/* Footer: override the legacy inline colors from landing-base.php. */
.foot{
  background:linear-gradient(180deg,rgba(5,11,16,.78) 0%,rgba(3,7,10,.88) 100%);
  color:#a9b6bf;
  border-top:1px solid rgba(255,255,255,.065);
  backdrop-filter:blur(9px);
}
.foot .brand{color:#edf3f6!important}
.foot a{color:#bac6cd}
.foot a:hover{color:#f4f7f9}
.foot__in>div:first-child>div:last-child{color:#a9b5be!important}
.foot>.wrap:last-child{
  border-top-color:rgba(255,255,255,.075)!important;
  color:#96a5af!important;
}
.foot>.wrap:last-child>div,
.foot>.wrap:last-child>div span{
  color:#9aa9b3!important;
}
.foot>.wrap:last-child>div:last-child{color:#8798a3!important}

/* Dialog backdrop and shell */
.modal{
  background:rgba(1,5,8,.82);
  backdrop-filter:blur(18px) saturate(120%);
}
.modal__box{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(520px 220px at 12% 0%,rgba(68,112,133,.11),transparent 68%),
    linear-gradient(180deg,rgba(15,28,38,.985),rgba(8,18,26,.99));
  color:#dbe5ea;
  border:1px solid rgba(219,235,243,.13);
  box-shadow:0 42px 130px rgba(0,0,0,.66),0 1px 0 rgba(255,255,255,.035) inset;
}
.modal__box::before{
  content:"";
  position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(112,192,160,.42),rgba(129,164,184,.25),transparent);
  pointer-events:none;
}
.modal__box h3,.dform label,.dok h3{color:#f0f5f7}
.modal__box p,.dok p{color:#96a6b1}
.modal__hint{color:#748692}
.modal__hint code{
  background:rgba(255,255,255,.055);
  color:#aebdc6;
  border:1px solid rgba(255,255,255,.055);
}
.modal__hint a{color:#7ac6a8!important}

/* Access field */
.field{
  background:#07131b;
  border-color:rgba(211,230,239,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.018) inset;
}
.field:focus-within{
  border-color:rgba(105,197,162,.48);
  box-shadow:0 0 0 3px rgba(82,168,134,.09);
}
.field input{
  background:transparent;
  color:#edf4f7;
  caret-color:#79c6a8;
}
.field .sfx{
  background:#0c1a24;
  color:#80929e;
  border-left-color:rgba(211,230,239,.10);
}

/* Demo form */
.dform input,.dform textarea{
  background:#07131b;
  color:#edf4f7;
  border-color:rgba(211,230,239,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.018) inset;
}
.dform input:focus,.dform textarea:focus{
  border-color:rgba(105,197,162,.52);
  box-shadow:0 0 0 3px rgba(82,168,134,.09);
}
.dform input::placeholder,.dform textarea::placeholder,.field input::placeholder{color:#566a77}
.dform .req{color:#78c8a9}
.dmsg.err{
  background:rgba(168,63,70,.12);
  color:#efafb4;
  border:1px solid rgba(214,94,103,.24);
}

/* Dialog actions must not inherit light-theme assumptions. */
.modal .btn--primary{
  background:#eef5f7;
  color:#071017;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 9px 28px rgba(0,0,0,.25);
}
.modal .btn--primary:hover{background:#fff;color:#050b10}
.modal .btn--ghost{
  background:rgba(255,255,255,.035);
  color:#cbd6dc;
  border:1px solid rgba(218,235,243,.13);
  box-shadow:none;
}
.modal .btn--ghost:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
  border-color:rgba(105,197,162,.35);
}
.modal .btn:disabled{opacity:.52;cursor:wait;transform:none}
.dok__ic{filter:saturate(.68)}

/* Continuous Astra-style shard canvas: section surfaces are translucent so the
   same full-screen information field remains visible from hero to footer. */
.hero{
  background:
    radial-gradient(900px 560px at 75% 38%,rgba(52,88,108,.065),transparent 70%),
    linear-gradient(180deg,rgba(7,17,24,.28),rgba(7,17,24,.12))!important;
}
.stats{
  background:rgba(7,17,24,.38)!important;
  backdrop-filter:blur(7px)!important;
}
.section--tint{
  background:linear-gradient(180deg,rgba(12,23,31,.34),rgba(8,18,25,.18))!important;
}
.cta{
  background:
    radial-gradient(760px 420px at 50% 0%,rgba(58,128,101,.10),transparent 72%),
    linear-gradient(180deg,rgba(6,15,21,.24),rgba(3,9,13,.58))!important;
}

@media(max-width:600px){
  .modal{padding:14px}
  .modal__box{padding:23px 20px;border-radius:16px}
  .foot__in{gap:20px}
  .splash__brand,.hero h1,.sec-head h2,.cta h2{letter-spacing:-.032em!important}
}