
:root{--bg:#06111f;--panel:#0b1b2d;--text:#eef6ff;--muted:#a8bed1;--blue:#21a1ff;--orange:#ff9b26;--line:#1a3550;--good:#6ee7a8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#030912,#071526);color:var(--text);line-height:1.6}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.wrap{width:min(1120px,92%);margin:auto}
header{position:sticky;top:0;z-index:30;background:#06111feF;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav{display:flex;align-items:center;gap:18px;min-height:70px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff}.brand img{width:38px;height:38px}
nav{display:flex;gap:13px;flex-wrap:wrap;margin-left:auto;font-size:.92rem}.lang{margin-left:12px;padding:8px 11px;border:1px solid var(--line);border-radius:10px}
.hero{min-height:570px;display:grid;align-items:center;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.hero .inner{max-width:720px;padding:80px 0}.eyebrow{color:var(--orange);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
h1{font-size:clamp(2.6rem,6vw,5.3rem);line-height:1.02;margin:.3em 0}h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-top:0}.lead{font-size:1.2rem;color:#d8e8f5}
.cta{display:inline-block;margin:10px 10px 0 0;padding:12px 18px;background:var(--blue);color:#00111f;font-weight:800;border-radius:10px}.cta.alt{background:var(--orange);color:#1b0d00}.cta.ghost{background:transparent;border:1px solid var(--line);color:#fff}
section{padding:64px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.card{background:linear-gradient(180deg,#0b1b2d,#081522);border:1px solid var(--line);border-radius:16px;padding:22px}.card h3{margin-top:0}.muted{color:var(--muted)}.price{font-size:2.2rem;font-weight:900}.badge{display:inline-block;padding:5px 9px;border:1px solid #2d6fa1;border-radius:999px;color:#bfe3ff;font-size:.8rem}
table{width:100%;border-collapse:collapse;background:#081522;border:1px solid var(--line);border-radius:14px;overflow:hidden}th,td{padding:14px;border-bottom:1px solid var(--line);text-align:left}th{background:#0e2238}
.notice{border-left:4px solid var(--orange);background:#111c29;padding:16px 18px;border-radius:8px}.good{border-left-color:var(--good)}
form{display:grid;gap:12px;max-width:700px}input,textarea,select{width:100%;padding:12px;border-radius:9px;border:1px solid var(--line);background:#07111d;color:#fff}button{padding:12px 18px;border:0;border-radius:9px;background:var(--blue);font-weight:800;cursor:pointer}
footer{border-top:1px solid var(--line);padding:38px 0;color:var(--muted);background:#040b12}.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}.small{font-size:.88rem}
@media(max-width:760px){nav{display:none}.hero{min-height:500px}.foot{grid-template-columns:1fr}h1{font-size:3rem}}

/* Eclipse One cinematic responsive refresh */
:root{--gold:#f5b544;--deep:#02070d}
body{background:radial-gradient(circle at 70% 0,#10283b 0,#040b12 34%,#010407 78%);overflow-x:hidden}
header{background:rgba(2,7,13,.76);border-bottom:1px solid rgba(245,181,68,.18)}
.brand img{filter:drop-shadow(0 0 12px rgba(245,181,68,.55))}
.hero{position:relative;min-height:76vh;background-position:center;background-size:cover;isolation:isolate}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:32%;background:linear-gradient(transparent,#030912);z-index:-1}.hero .inner{max-width:760px;text-shadow:0 2px 28px #000}.eyebrow{color:var(--gold)}
h1{letter-spacing:-.035em}h1 strong,.accent{color:var(--gold)}
.cta{background:linear-gradient(135deg,#ffd36a,#d98c20);color:#170c00;box-shadow:0 8px 30px rgba(245,181,68,.18)}.cta.alt{background:#0a1824;color:#fff;border:1px solid rgba(245,181,68,.45)}
.card{background:linear-gradient(180deg,rgba(11,27,45,.88),rgba(4,12,20,.94));border-color:rgba(245,181,68,.14);box-shadow:0 14px 42px rgba(0,0,0,.22);backdrop-filter:blur(8px);transition:transform .25s ease,border-color .25s ease}.card:hover{transform:translateY(-4px);border-color:rgba(245,181,68,.42)}
section{position:relative}footer{background:rgba(1,5,9,.96)}
@media(max-width:900px){.nav{gap:10px}.hero{min-height:650px;background-position:58% center}.hero .inner{padding:70px 0;max-width:70%}}
@media(max-width:760px){header{position:sticky}.nav{min-height:62px}.brand{font-size:.95rem}.brand img{width:32px;height:32px}.lang{margin-left:auto}.hero{min-height:620px;background-position:67% top}.hero .inner{max-width:100%;padding:310px 0 55px}.hero h1{font-size:clamp(2.45rem,12vw,3.65rem)}.lead{font-size:1.05rem}.wrap{width:min(92%,1120px)}section{padding:48px 0}.grid{grid-template-columns:1fr}.cta{width:100%;text-align:center;margin:8px 0}.foot{gap:14px}}
@media(max-width:430px){.hero{min-height:650px;background-position:64% top}.hero .inner{padding-top:300px}.hero h1{font-size:2.65rem}.card{padding:18px}}


/* Eclipse One cinematic responsive enhancement */
:root{
  --eg-bg:#02070d;--eg-panel:rgba(7,16,25,.78);--eg-gold:#ffb733;
  --eg-gold2:#ff8a00;--eg-blue:#4bc1ff;--eg-line:rgba(255,183,51,.22)
}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:
    radial-gradient(circle at 78% 18%, rgba(255,155,32,.11), transparent 25%),
    linear-gradient(180deg,#02070d,#06111b 45%,#02070d);
}
header{background:rgba(2,8,13,.72)!important;backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,183,51,.16)!important}
.brand img{filter:drop-shadow(0 0 12px rgba(255,172,36,.4))}
.hero{
  position:relative;isolation:isolate;min-height:68vh;
  background-position:center!important;background-size:cover!important;
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(1,6,11,.94) 0%,rgba(1,6,11,.70) 40%,rgba(1,6,11,.25) 72%,rgba(1,6,11,.35) 100%),
    linear-gradient(0deg,rgba(2,7,13,.95),transparent 35%);
}
.hero .inner{padding:clamp(72px,10vw,135px) 0;max-width:760px}
.hero h1{letter-spacing:-.035em;text-shadow:0 10px 45px rgba(0,0,0,.55)}
.eyebrow{color:var(--eg-gold)!important}
.cta{
  background:linear-gradient(135deg,var(--eg-gold),var(--eg-gold2))!important;
  color:#190d00!important;box-shadow:0 12px 36px rgba(255,139,0,.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(255,139,0,.3);text-decoration:none}
.cta.alt,.cta.ghost{background:rgba(5,15,24,.72)!important;color:#fff!important;border:1px solid rgba(255,183,51,.42)}
.card{
  background:linear-gradient(180deg,rgba(10,24,38,.86),rgba(4,12,20,.82))!important;
  border:1px solid rgba(255,183,51,.15)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.25);backdrop-filter:blur(12px);
  transition:transform .2s ease,border-color .2s ease
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,183,51,.38)!important}
.notice{background:rgba(15,24,34,.78)!important;border-left-color:var(--eg-gold)!important}
table{background:rgba(5,14,23,.84)!important;border-color:rgba(255,183,51,.18)!important}
th{background:rgba(13,30,45,.9)!important}
footer{background:#02070d!important;border-top:1px solid rgba(255,183,51,.14)!important}
.lang{border-color:rgba(255,183,51,.28)!important}
@media(max-width:900px){
  .hero{min-height:62vh;background-position:64% center!important}
  .hero:before{background:linear-gradient(90deg,rgba(1,6,11,.94),rgba(1,6,11,.72) 58%,rgba(1,6,11,.36))}
}
@media(max-width:760px){
  .wrap{width:min(94%,1120px)}
  header .nav{min-height:62px}
  nav{display:none!important}
  .hero{min-height:590px;background-position:68% center!important}
  .hero:before{background:linear-gradient(180deg,rgba(1,6,11,.40),rgba(1,6,11,.87) 40%,rgba(1,6,11,.98) 88%)}
  .hero .inner{padding:190px 0 58px;max-width:100%}
  .hero h1{font-size:clamp(2.5rem,12vw,4rem)}
  .lead{font-size:1.05rem}
  .cta{display:block;width:100%;text-align:center;margin:10px 0}
  section{padding:45px 0}
  .grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr!important}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

/* FIX: preserve each page's own cinematic background image */
.hero{
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}
@media(max-width:760px){
  .hero{
    background-size:cover !important;
    background-position:64% center !important;
  }
}


/* ============================================================
   Eclipse One FINAL cinematic design — clean backgrounds only
   ============================================================ */
:root{
  --final-bg:#010306;
  --final-panel:rgba(4,10,16,.82);
  --final-gold:#ffbf31;
  --final-gold2:#ff9700;
  --final-text:#f7fbff;
  --final-muted:#c4d0da;
  --final-line:rgba(255,191,49,.16);
}
html,body{background:#010306!important;color:var(--final-text)!important}
body{background-image:none!important}
body:before{display:none!important;content:none!important}

header{
  background:rgba(0,3,7,.91)!important;
  border-bottom:1px solid rgba(255,191,49,.12)!important;
  backdrop-filter:blur(18px)!important;
}
.nav{min-height:78px!important}
.brand{
  color:#fff!important;
  font-size:1.05rem!important;
  letter-spacing:-.01em;
}
.brand img{
  width:40px!important;height:40px!important;
  filter:drop-shadow(0 0 12px rgba(255,181,28,.62))!important;
}
nav{gap:24px!important;font-size:.91rem!important}
nav a{
  color:rgba(255,255,255,.88)!important;
  position:relative;
  padding:27px 0 23px;
  text-decoration:none!important;
  transition:color .18s ease;
}
nav a:hover{color:var(--final-gold)!important}
nav a.active{color:var(--final-gold)!important}
nav a.active:after{
  content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;
  background:var(--final-gold);border-radius:2px;
}
.lang{
  color:#fff!important;border:0!important;background:transparent!important;
  padding:8px 4px!important
}
.hero{
  min-height:calc(100vh - 78px)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  border-bottom:1px solid rgba(255,191,49,.08)!important;
  overflow:hidden;
}
.hero:before{
  content:""!important;
  position:absolute!important;inset:0!important;z-index:-1!important;
  background:
    radial-gradient(circle at 71% 46%,rgba(20,105,158,.06),transparent 31%),
    linear-gradient(90deg,rgba(0,2,5,.60) 0%,rgba(0,2,5,.35) 36%,rgba(0,2,5,.08) 67%,rgba(0,2,5,.12) 100%),
    linear-gradient(0deg,rgba(0,2,5,.80) 0%,transparent 34%)!important;
}
.hero:after{
  content:""!important;position:absolute!important;inset:auto 0 0!important;
  height:22%!important;background:linear-gradient(transparent,#010306)!important;z-index:-1!important
}
.hero .inner{
  max-width:760px!important;
  padding:clamp(110px,14vh,190px) 0 100px!important;
}
.eyebrow{color:var(--final-gold)!important;font-weight:900!important}
.hero h1{
  color:#fff!important;
  text-shadow:0 10px 55px rgba(0,0,0,.82)!important;
  letter-spacing:-.045em!important;
  max-width:760px
}
.lead{
  color:#f0f4f8!important;
  text-shadow:0 4px 24px rgba(0,0,0,.8)!important;
  max-width:740px
}
section{
  background:
    radial-gradient(circle at 75% 0,rgba(14,61,88,.10),transparent 27%),
    #010306!important;
}
.card{
  background:linear-gradient(180deg,rgba(9,18,27,.84),rgba(2,7,12,.91))!important;
  border:1px solid var(--final-line)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34)!important;
}
.card:hover{
  border-color:rgba(255,191,49,.42)!important;
  transform:translateY(-5px)!important
}
.cta{
  background:linear-gradient(135deg,#ffd35e,var(--final-gold2))!important;
  color:#170c00!important;border-radius:999px!important;padding:13px 22px!important
}
.cta.alt,.cta.ghost{
  background:rgba(4,11,18,.78)!important;color:#fff!important;
  border:1px solid rgba(255,191,49,.34)!important
}
footer{background:#000205!important}

@media(max-width:980px){
  nav{gap:13px!important;font-size:.83rem!important}
  .hero{min-height:720px!important;background-position:58% center!important}
  .hero .inner{max-width:70%!important}
}
@media(max-width:760px){
  .nav{min-height:64px!important}
  nav{display:none!important}
  .hero{
    min-height:690px!important;
    background-position:62% center!important;
  }
  .hero:before{
    background:
      linear-gradient(180deg,rgba(0,2,5,.18) 0%,rgba(0,2,5,.48) 43%,rgba(0,2,5,.95) 79%,#010306 100%)!important;
  }
  .hero .inner{
    max-width:100%!important;
    padding:330px 0 62px!important;
  }
  .hero h1{font-size:clamp(2.55rem,12vw,3.9rem)!important}
}
@media(max-width:430px){
  .hero{min-height:720px!important;background-position:60% center!important}
  .hero .inner{padding-top:345px!important}
}
