:root{
  --bg:#0b1020;
  --card:#121a33;
  --muted:#8ba3c7;
  --brand:#2ea6ff;
  --brand-2:#00d4aa;
  --text:#eaf2ff;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:22px;
}
html, body { height:100%; scroll-behavior:smooth; }
body {
    margin: 0;
    font-family: "Trebuchet MS", Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
    /*background: radial-gradient(1200px 800px at 20% 10%, #0e1430 0%, #0b1020 55%, #090d19 100%);*/
    background: radial-gradient(80em 50em at 20% 10%, #1b5876 0%, #0b1020ed 55%, #090d19 100%) no-repeat;
    background-color: #090d19;
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand); }
button { font-family: "Trebuchet MS", Tahoma, Verdana, "Segoe UI", Arial, sans-serif; font-size: 16px}
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
h3.faq { color: #2ea6ff}
/* Header */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(12px); background:rgba(9,13,25,.55); border-bottom:1px solid rgba(255,255,255,.06); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand { display:flex; gap:10px; /*align-items:center;*/ font-weight:800; letter-spacing:.2px; }
.logo { width:32px; height:32px; border-radius:10px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 6px 16px rgba(0,212,170,.25); }
.slogan { font-size:14px; color:var(--muted); font-weight:600; font-variant: small-caps;}
.site-header nav a { color:var(--text); text-decoration:none; opacity:.9; margin-left:18px; }
.site-header nav a:hover { opacity:1; }
.btn { display:inline-flex; gap:10px; align-items:center; padding:12px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(135deg, rgba(46,166,255,.12), rgba(0,212,170,.10)); color:var(--text); text-decoration:none; box-shadow:var(--shadow); }
.btn:hover{ transform: translateY(-1px); }

/* Hero */
.hero { padding:2em 0 0; position:relative; background: url('/images/laptop.png') no-repeat padding-box;
    background-position: bottom right;background-size: 23em;}
.hero h1 { font-size: clamp(28px, 4vw, 48px); line-height:1.15; margin:0 0 14px; }
h1:focus { outline: none;}
.hero p { font-size: clamp(16px, 2.1vw, 18px); color:var(--muted); max-width:30em; }
.cta { display:flex; gap:14px; margin-top:20px; flex-wrap:wrap; }
.pill{ /*display:inline-flex;*/ display:block; align-items:center; gap:8px; font-size:13px; color:#bcd0f7; border:1px solid rgba(255,255,255,.10); padding:8px 12px; border-radius:10px; /*margin-bottom:14px;*/ background:rgba(255,255,255,.03); }

/* Sections */
section {
    padding: 2em 0;
}
.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.card{ grid-column: span 12; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }

  .card.sm-6{grid-column: span 6} 
  .card.sm-4{grid-column:span 4}

.card h3{ margin:0 0 8px; font-size:20px; }
.muted{ color:var(--muted); }
.icon{ width:34px; height:34px; display:inline-grid; place-items:center; border-radius:10px; background:linear-gradient(135deg, rgba(46,166,255,.22), rgba(0,212,170,.22)); border:1px solid rgba(255,255,255,.10); margin-right:10px; }
.list{ margin:10px 0 0 0; padding-left:18px; }
.list li{ margin:6px 0; }

/* Services */
p.services { font-size: clamp(16px, 2.1vw, 20px); color:var(--muted); margin: 1em 10px;}
p.services2 { font-size: 20px; font-weight: 600; color:#19bbd9; margin: 0 10px;}

/* Pricing */
.price{ font-size:28px; font-weight:800; }
.plan{ position:relative; overflow:hidden; }
.badge{ position:absolute; top:14px; right:14px; font-size:12px; padding:6px 10px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#06111f; font-weight:800; }

/* Testimonials */
.quote{ font-style:italic; color:#cbe0ff; }
.who{ color:#9bb2da; font-size:14px; }

/* FAQ */
.grid-2{ display:grid; gap:18px; }
details{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:14px 16px; }
details summary{ cursor:pointer; font-weight:700; }
details + details{ margin-top:10px; }

/* Contact */
form{ display:grid; gap:12px; }
input, textarea, .input, input[type="email"]{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0e1530; color:var(--text); }
input::placeholder, textarea::placeholder{ color:#9ab0d6; }
.small{ font-size:13px; color:#9ab0d6; }
.emailMsg { font-size:20px; color: #13c0ce; }
/* Footer */
.site-footer{ padding:36px 0 64px; color:#99b3df; border-top:1px solid rgba(255,255,255,.05); }
.footer-grid{ display:grid; gap:18px; }
.footer-grid .right{ text-align:right; }


/* responsive sections */
@media (max-width: 955px) {
  .hero { background-size: 20em; }
  }

@media(min-width:860px){ .grid-2{ grid-template-columns:1fr 1fr; } }

@media (max-width: 760px) {
  .hero { background: none; }
  .hero h1 { font-size: clamp(24px, 5vw, 36px); }
  .hero p { font-size: clamp(14px, 3vw, 18px); }
  .cards { grid-template-columns: repeat(6, 1fr); }
  .card { grid-column: span 6; }
    .devices {display: none}
}
@media (max-width: 600px) {
  .hero { background: none; }
  .hero h1 { font-size: clamp(20px, 6vw, 32px); }
  .hero p { font-size: clamp(12px, 4vw, 16px); }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .card { grid-column: span 4; }
    .devices {display: none}
}
@media (max-width: 400px) {
  .hero { background: none; }
  .hero h1 { font-size: clamp(18px, 7vw, 28px); }
  .hero p { font-size: clamp(12px, 5vw, 14px); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card { grid-column: span 2; }
    .devices {display: none}
}