:root{
 --bg:#040b14;
 --bg2:#071423;
 --panel:#091a2d;
 --panel2:#0d2239;
 --panel3:#102942;
 --text:#f5f8fc;
 --muted:#93a8bd;
 --muted2:#bbc9d8;
 --line:rgba(162,194,224,.14);
 --line2:rgba(162,194,224,.25);
 --green:#3fe0a1;
 --green2:#75f0c0;
 --cyan:#3cc9f3;
 --red:#ff6179;
 --yellow:#ffc64d;
 --blue:#65aaff;
 --shadow:0 30px 90px rgba(0,0,0,.34);
}

*{box-sizing:border-box}

html{
 scroll-behavior:smooth;
 background:var(--bg)
}

body{
 margin:0;
 min-height:100vh;
 color:var(--text);
 background:
  radial-gradient(circle at 8% -10%,rgba(60,201,243,.16),transparent 33%),
  radial-gradient(circle at 94% 2%,rgba(63,224,161,.13),transparent 30%),
  linear-gradient(180deg,#071321 0%,#040b14 52%,#030911 100%);
 font-family:
  Inter,ui-sans-serif,system-ui,-apple-system,
  BlinkMacSystemFont,"Segoe UI",sans-serif;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
 overflow-x:hidden;
}

body:after{
 content:"";
 position:fixed;
 z-index:-1;
 width:400px;
 height:400px;
 left:-250px;
 top:45vh;
 border-radius:50%;
 background:rgba(63,224,161,.07);
 filter:blur(80px);
}

a{
 color:inherit;
 text-decoration:none
}

button,input,select,textarea{
 font:inherit
}

.sg-shell{
 width:min(1160px,calc(100% - 40px));
 margin:auto
}

/* ---------- NAV ---------- */

.sg-top{
 position:sticky;
 top:0;
 z-index:60;
 background:rgba(4,11,20,.76);
 backdrop-filter:blur(24px);
 -webkit-backdrop-filter:blur(24px);
 border-bottom:1px solid rgba(255,255,255,.055)
}

.sg-topin{
 min-height:76px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:22px
}

.sg-brand{
 display:flex;
 align-items:center;
 gap:12px;
 font-size:21px;
 font-weight:850;
 letter-spacing:-.025em
}

.sg-logo{
 width:43px;
 height:43px;
 border-radius:14px;
 display:grid;
 place-items:center;
 color:#02140d;
 background:linear-gradient(135deg,var(--green),var(--cyan));
 box-shadow:0 12px 35px rgba(60,201,243,.17)
}

.sg-logo svg{
 width:24px;
 height:24px
}

.sg-links{
 display:flex;
 align-items:center;
 gap:3px
}

.sg-links a{
 padding:10px 12px;
 border-radius:11px;
 color:var(--muted2);
 font-size:14px;
 font-weight:680;
 transition:.18s ease
}

.sg-links a:hover,
.sg-links a.active{
 color:#fff;
 background:rgba(255,255,255,.055)
}

.sg-nav-actions{
 display:flex;
 align-items:center;
 gap:9px
}

.sg-btn,
.btn,
button{
 min-height:46px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 padding:0 18px;
 border:1px solid var(--line2);
 border-radius:14px;
 color:var(--text);
 background:rgba(255,255,255,.035);
 font-weight:780;
 cursor:pointer;
 transition:
  transform .18s ease,
  border-color .18s ease,
  background .18s ease,
  box-shadow .18s ease
}

.sg-btn:hover,
.btn:hover,
button:hover{
 transform:translateY(-2px);
 border-color:rgba(63,224,161,.42);
 background:rgba(255,255,255,.065)
}

.sg-primary,
.btn:not(.secondary),
button[type=submit]{
 color:#03140d;
 border-color:transparent;
 background:linear-gradient(135deg,var(--green),var(--green2));
 box-shadow:0 12px 34px rgba(63,224,161,.16)
}

.sg-menu{
 display:none;
 position:relative
}

.sg-menu summary{
 width:44px;
 height:44px;
 border:1px solid var(--line2);
 border-radius:13px;
 list-style:none;
 display:grid;
 place-items:center;
 cursor:pointer
}

.sg-menu summary::-webkit-details-marker{
 display:none
}

.sg-menu summary svg{
 width:22px
}

.sg-menu-box{
 position:absolute;
 right:0;
 top:53px;
 width:255px;
 padding:9px;
 border:1px solid var(--line2);
 border-radius:18px;
 background:rgba(7,19,33,.98);
 box-shadow:var(--shadow)
}

.sg-menu-box a{
 display:block;
 padding:13px;
 color:var(--muted2);
 border-radius:10px;
 font-weight:700
}

.sg-menu-box a:hover{
 background:rgba(255,255,255,.055);
 color:#fff
}

/* ---------- HERO ---------- */

.sg-hero{
 padding:92px 0 76px
}

.sg-hero-grid{
 display:grid;
 grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
 gap:58px;
 align-items:center
}

.sg-kicker,
.pill{
 display:inline-flex;
 align-items:center;
 gap:7px;
 padding:8px 12px;
 border:1px solid rgba(63,224,161,.17);
 border-radius:999px;
 color:var(--green2);
 background:rgba(63,224,161,.085);
 text-transform:uppercase;
 letter-spacing:.065em;
 font-size:11px;
 font-weight:850
}

.sg-hero h1,
.hero h1{
 max-width:820px;
 margin:22px 0 24px;
 font-size:clamp(48px,6.4vw,80px);
 line-height:.97;
 letter-spacing:-.057em
}

.sg-gradient{
 color:transparent;
 background:linear-gradient(95deg,#fff 5%,#b5cadb 47%,#62ebb4 91%);
 -webkit-background-clip:text;
 background-clip:text
}

.sg-lead,
.lead{
 max-width:690px;
 margin:0;
 color:var(--muted2);
 font-size:clamp(18px,2vw,21px);
 line-height:1.65
}

.sg-actions{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin-top:30px
}

.sg-trust{
 display:flex;
 flex-wrap:wrap;
 gap:18px;
 margin-top:26px;
 color:var(--muted);
 font-size:13px
}

/* ---------- PREMIUM CARDS ---------- */

.sg-card,
.card{
 position:relative;
 overflow:hidden;
 border:1px solid var(--line);
 border-radius:22px;
 background:
  linear-gradient(180deg,rgba(15,37,61,.91),rgba(7,22,38,.94));
 box-shadow:0 22px 62px rgba(0,0,0,.20)
}

.sg-card:before{
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background:
  linear-gradient(120deg,rgba(255,255,255,.045),transparent 26%)
}

.sg-snapshot{
 padding:24px;
 box-shadow:var(--shadow)
}

.sg-snapshot-head{
 display:flex;
 justify-content:space-between;
 gap:15px;
 align-items:center;
 padding-bottom:18px;
 border-bottom:1px solid var(--line)
}

.sg-small{
 color:var(--muted);
 font-size:12px;
 font-weight:700
}

.sg-status{
 display:flex;
 align-items:center;
 gap:9px;
 font-size:13px;
 font-weight:850
}

.sg-dot{
 width:9px;
 height:9px;
 border-radius:50%;
 display:inline-block;
 flex:0 0 auto
}

.sg-red{
 background:var(--red);
 box-shadow:0 0 0 6px rgba(255,97,121,.11)
}

.sg-yellow{
 background:var(--yellow);
 box-shadow:0 0 0 6px rgba(255,198,77,.09)
}

.sg-green{
 background:var(--green);
 box-shadow:0 0 0 6px rgba(63,224,161,.09)
}

.sg-number{
 padding:26px 0 21px
}

.sg-number span{
 display:block;
 color:var(--muted);
 font-size:13px
}

.sg-number strong{
 display:block;
 margin-top:3px;
 font-size:51px;
 letter-spacing:-.05em
}

.sg-metrics{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px
}

.sg-metric{
 padding:15px;
 border:1px solid var(--line);
 border-radius:15px;
 background:rgba(255,255,255,.025)
}

.sg-metric span{
 display:block;
 margin-bottom:4px;
 color:var(--muted);
 font-size:11px
}

.sg-metric strong{
 font-size:17px
}

/* ---------- SECTIONS ---------- */

.sg-section{
 padding:84px 0
}

.sg-soft{
 background:
  linear-gradient(
   180deg,
   transparent,
   rgba(14,38,61,.23),
   transparent
  )
}

.sg-heading{
 max-width:780px;
 margin-bottom:38px
}

.sg-heading h2{
 margin:12px 0 14px;
 font-size:clamp(34px,4.8vw,54px);
 line-height:1.05;
 letter-spacing:-.045em
}

.sg-heading p{
 margin:0;
 color:var(--muted2);
 font-size:18px;
 line-height:1.66
}

.sg-grid3,
.grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:15px
}

.sg-grid2{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:15px
}

.sg-feature{
 min-height:220px;
 padding:24px
}

.sg-icon{
 width:47px;
 height:47px;
 display:grid;
 place-items:center;
 margin-bottom:27px;
 border-radius:14px;
 color:var(--green2);
 background:rgba(63,224,161,.08);
 border:1px solid rgba(63,224,161,.13)
}

.sg-icon svg{
 width:22px;
 height:22px
}

.sg-feature h3{
 margin:0 0 9px;
 font-size:20px;
 letter-spacing:-.02em
}

.sg-feature p,
.card p,
.muted{
 color:var(--muted);
 line-height:1.62
}

.sg-flow{
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:10px
}

.sg-step{
 min-height:175px;
 padding:21px;
 border:1px solid var(--line);
 border-radius:18px;
 background:rgba(255,255,255,.025)
}

.sg-step b{
 width:30px;
 height:30px;
 display:grid;
 place-items:center;
 margin-bottom:28px;
 border-radius:10px;
 color:#03140d;
 background:var(--green);
 font-size:11px
}

.sg-step strong{
 display:block;
 margin-bottom:6px
}

.sg-step span{
 color:var(--muted);
 font-size:13px;
 line-height:1.5
}

.sg-bands{
 display:grid;
 gap:11px
}

.sg-band{
 display:grid;
 grid-template-columns:auto 1fr;
 gap:16px;
 padding:20px
}

.sg-band h3{
 margin:0 0 6px
}

.sg-band p{
 margin:0;
 color:var(--muted);
 line-height:1.55
}

.sg-cta{
 padding:36px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
 background:
  radial-gradient(circle at 90% 20%,rgba(60,201,243,.12),transparent 32%),
  linear-gradient(140deg,rgba(63,224,161,.09),rgba(11,31,52,.96))
}

.sg-cta h2{
 margin:8px 0;
 font-size:32px;
 letter-spacing:-.035em
}

.sg-cta p{
 margin:0;
 color:var(--muted2)
}

/* ---------- SUBPAGES ---------- */

.sg-pagehero{
 padding:74px 0 38px
}

.sg-pagehero h1{
 max-width:900px;
 margin:15px 0;
 font-size:clamp(42px,6vw,67px);
 line-height:1;
 letter-spacing:-.052em
}

.sg-pagehero p{
 max-width:760px;
 color:var(--muted2);
 font-size:19px;
 line-height:1.66
}

.sg-content{
 padding:12px 0 82px
}

.sg-prose{
 max-width:860px
}

.sg-prose section{
 padding:25px 0;
 border-bottom:1px solid var(--line)
}

.sg-prose h2{
 margin:0 0 10px;
 font-size:24px;
 letter-spacing:-.025em
}

.sg-prose p,
.sg-prose li{
 color:var(--muted2);
 line-height:1.72
}

.sg-faq{
 display:grid;
 gap:10px
}

.sg-faq details{
 padding:0 20px;
 border:1px solid var(--line);
 border-radius:17px;
 background:rgba(255,255,255,.025)
}

.sg-faq summary{
 position:relative;
 padding:20px 32px 20px 0;
 list-style:none;
 cursor:pointer;
 font-weight:800
}

.sg-faq summary::-webkit-details-marker{
 display:none
}

.sg-faq summary:after{
 content:"+";
 position:absolute;
 right:0;
 top:16px;
 color:var(--green);
 font-size:25px
}

.sg-faq details[open] summary:after{
 content:"–"
}

.sg-faq p{
 margin:0;
 padding:0 0 20px;
 color:var(--muted);
 line-height:1.65
}

.sg-price{
 min-height:315px;
 display:flex;
 flex-direction:column;
 padding:27px
}

.sg-price-value{
 margin:22px 0 8px;
 font-size:42px;
 font-weight:900;
 letter-spacing:-.045em
}

.sg-price ul{
 flex:1;
 padding-left:20px;
 color:var(--muted2);
 line-height:1.8
}

/* ---------- EXISTING ACCOUNT / ADMIN ---------- */

.sg-page,
.page,
main{
 width:min(1160px,calc(100% - 40px));
 margin-left:auto;
 margin-right:auto
}

.sg-appbar,
.appbar{
 width:min(1160px,calc(100% - 40px));
 min-height:70px;
 margin:24px auto 0;
 padding:12px 14px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:15px;
 border:1px solid var(--line);
 border-radius:20px;
 background:rgba(10,27,45,.80);
 backdrop-filter:blur(18px)
}

.hero{
 width:min(1160px,calc(100% - 40px));
 margin:40px auto 0;
 padding:40px;
 border:1px solid var(--line);
 border-radius:28px;
 background:
  radial-gradient(circle at 90% 0%,rgba(63,224,161,.12),transparent 35%),
  linear-gradient(150deg,rgba(15,36,59,.96),rgba(7,21,36,.96));
 box-shadow:var(--shadow)
}

.grid{
 width:min(1160px,calc(100% - 40px));
 margin:18px auto
}

.card{
 padding:22px
}

.metric{
 font-size:36px;
 font-weight:900;
 letter-spacing:-.04em
}

.list,
.stack{
 display:grid;
 gap:11px
}

form,
.form{
 padding:23px;
 border:1px solid var(--line);
 border-radius:22px;
 background:rgba(8,24,41,.76)
}

label{
 display:grid;
 gap:8px;
 color:var(--muted2);
 font-weight:750
}

input,
textarea,
select{
 width:100%;
 min-height:50px;
 padding:12px 14px;
 color:var(--text);
 background:#061524;
 border:1px solid var(--line2);
 border-radius:14px;
 outline:none;
 transition:.18s ease
}

textarea{
 min-height:150px;
 resize:vertical
}

input:focus,
textarea:focus,
select:focus{
 border-color:rgba(63,224,161,.55);
 box-shadow:0 0 0 4px rgba(63,224,161,.07)
}

table{
 width:100%;
 border-collapse:separate;
 border-spacing:0;
 border:1px solid var(--line);
 border-radius:17px;
 overflow:hidden
}

th,
td{
 padding:13px 14px;
 text-align:left;
 border-bottom:1px solid var(--line)
}

th{
 color:var(--muted);
 font-size:12px;
 letter-spacing:.06em;
 text-transform:uppercase
}

tr:last-child td{
 border-bottom:0
}

/* Existing static contact route */
body > header{
 background:rgba(4,11,20,.78)!important;
 border-color:var(--line)!important;
 backdrop-filter:blur(20px)
}

body > footer{
 color:var(--muted)
}

/* ---------- FOOTER ---------- */

.sg-footer{
 margin-top:35px;
 padding:38px 0 48px;
 border-top:1px solid var(--line);
 color:var(--muted)
}

.sg-footerin{
 display:flex;
 justify-content:space-between;
 gap:20px;
 flex-wrap:wrap
}

.sg-footerlinks{
 display:flex;
 flex-wrap:wrap;
 gap:18px
}

/* ---------- MOTION ---------- */

@keyframes sg-enter{
 from{
  opacity:0;
  transform:translateY(14px)
 }
 to{
  opacity:1;
  transform:none
 }
}

.sg-animate{
 animation:sg-enter .65s cubic-bezier(.2,.75,.2,1) both
}

.sg-animate:nth-child(2){animation-delay:.05s}
.sg-animate:nth-child(3){animation-delay:.10s}
.sg-animate:nth-child(4){animation-delay:.15s}
.sg-animate:nth-child(5){animation-delay:.20s}
.sg-animate:nth-child(6){animation-delay:.25s}

@media(max-width:940px){
 .sg-links{display:none}
 .sg-menu{display:block}
 .sg-hero-grid{grid-template-columns:1fr}
 .sg-grid3,.grid{grid-template-columns:1fr 1fr}
 .sg-flow{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
 .sg-shell,
 .sg-page,
 .page,
 main,
 .sg-appbar,
 .appbar,
 .hero,
 .grid{
  width:calc(100% - 28px)
 }

 .sg-topin{min-height:68px}
 .sg-nav-actions > .sg-btn{display:none}

 .sg-brand{font-size:18px}
 .sg-logo{
  width:38px;
  height:38px;
  border-radius:12px
 }

 .sg-hero{
  padding:58px 0 45px
 }

 .sg-hero h1,
 .hero h1{
  font-size:clamp(42px,13vw,58px)
 }

 .sg-lead,.lead{
  font-size:17px
 }

 .sg-actions{
  display:grid;
  grid-template-columns:1fr
 }

 .sg-actions .sg-btn{
  width:100%
 }

 .sg-snapshot{
  padding:19px
 }

 .sg-number strong{
  font-size:42px
 }

 .sg-section{
  padding:62px 0
 }

 .sg-grid3,
 .sg-grid2,
 .grid,
 .sg-flow{
  grid-template-columns:1fr
 }

 .sg-feature{
  min-height:auto
 }

 .sg-cta{
  display:block;
  padding:25px
 }

 .sg-pagehero{
  padding:53px 0 28px
 }

 .sg-pagehero h1{
  font-size:43px
 }

 .hero{
  margin-top:22px;
  padding:24px 19px
 }

 .card,
 form,
 .form{
  padding:18px
 }

 table{
  display:block;
  overflow-x:auto;
  white-space:nowrap
 }
}

@media(prefers-reduced-motion:reduce){
 *{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
 }
}