/* NEXTON site styles, after the "Solid State" design by HTML5 UP (html5up.net, CC BY 3.0) */
/* colours follow the Android app: deep navy, blue highlights, green-teal accents */
:root {
  --bg:#0b1a33; --bg1:#102549; --bg2:#13305c; --bg3:#173a6b; --bg4:#1d4680;
  --text:#ffffff; --muted:#a9c4dd; --line:rgba(169,196,221,.22);
  --accent:#2bd2a0; --accent2:#9be15d; --red:#ff8a8a; --amber:#ffc35c;
  --grad:linear-gradient(90deg, #9be15d, #2bd2a0);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background-color:var(--bg); color:var(--muted);
       font:15px/1.65 "Raleway", Helvetica, sans-serif; letter-spacing:.025em; }
a { color:var(--text); text-decoration:none; border-bottom:1px dotted var(--line); transition:color .2s, border-color .2s; }
a:hover { color:var(--accent); border-bottom-color:transparent; }
h1, h2, h3, h4 { color:var(--text); font-weight:800; text-transform:uppercase; letter-spacing:.1em; line-height:1.4; margin:0 0 1em; }
h2 { font-size:1.75em; }
h3 { font-size:1.1em; }
strong, b { color:var(--text); font-weight:700; }
p { margin:0 0 1.6em; }
.hidden { display:none !important; }

/* ---------- header / menu ---------- */
#header { position:fixed; top:0; left:0; right:0; z-index:100; height:5em; display:flex; align-items:center;
          justify-content:space-between; padding:0 1.5em; background:rgba(11,26,51,.95); transition:background .3s; }
#header.alt { background:transparent; }
#header h1 { margin:0; font-size:1.7em; font-weight:900; letter-spacing:.12em; }
#header h1 a { border:0; display:flex; align-items:center; gap:.45em; }
#header h1 img { width:1.7em; height:1.7em; border-radius:50%; box-shadow:0 0 18px rgba(155,225,93,.45); }
#header nav { display:flex; align-items:center; gap:1.5em; }
#header nav a { border:0; text-transform:uppercase; font-weight:800; font-size:.8em; letter-spacing:.1em; color:var(--text); }
#header nav a:hover { color:var(--accent); }
#header .menu-btn { display:none; background:none; border:0; color:var(--text); font:inherit; font-weight:800;
                    text-transform:uppercase; letter-spacing:.1em; font-size:.8em; cursor:pointer; }

/* ---------- angled section wrappers (the Solid State signature) ---------- */
.wrapper { position:relative; background:var(--bg1); margin:6.5em 0; }
.wrapper::before, .wrapper::after { content:""; position:absolute; left:0; width:100%; height:6.5em;
       background:inherit; z-index:0; }
.wrapper::before { top:-6.5em; clip-path:polygon(0 100%, 100% 0, 100% 100%); }
.wrapper::after { bottom:-6.5em; clip-path:polygon(0 0, 100% 0, 0 100%); }
.wrapper.alt::before { clip-path:polygon(0 0, 100% 100%, 0 100%); }
.wrapper.alt::after { clip-path:polygon(0 0, 100% 0, 100% 100%); }
.wrapper.style2 { background:var(--bg2); }
.wrapper.style3 { background:var(--bg3); }
.wrapper.style4 { background:var(--bg4); }
.wrapper > .inner { position:relative; z-index:1; max-width:68em; margin:0 auto; padding:3em 3em 1em; }

/* ---------- banner ---------- */
#banner { position:relative; padding:12em 0 9em; overflow:hidden;
          background:radial-gradient(circle at 75% 40%, #2d5b99 0%, #173a6b 40%, #0b1a33 85%); }
#banner::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:6.5em; background:var(--bg1);
                 clip-path:polygon(0 100%, 100% 0, 100% 100%); }
#banner .inner { max-width:68em; margin:0 auto; padding:0 3em; display:flex; align-items:center; gap:3em; position:relative; z-index:1; }
#banner .text { flex:1; }
#banner .logo { display:flex; align-items:center; gap:1em; margin-bottom:2.2em; }
#banner .logo .icon { width:5em; height:5em; border:2px solid var(--line); border-radius:50%; padding:.4em; }
#banner .logo .icon img { width:100%; height:100%; border-radius:50%; display:block; }
#banner h2 { font-size:3em; margin:0 0 .3em; }
#banner p { font-size:1.1em; max-width:30em; }
#banner .phone { flex:0 0 15em; }
.phone img { width:100%; display:block; border-radius:1.6em; border:6px solid #1b1d28; box-shadow:0 1.5em 3em rgba(0,0,0,.35); }

/* ---------- buttons ---------- */
.button, button.button { display:inline-flex; align-items:center; justify-content:center; height:3.4em; padding:0 2em;
       border:0; border-radius:5px; background:transparent; box-shadow:inset 0 0 0 2px var(--text); color:var(--text) !important;
       font:inherit; font-size:.8em; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
       white-space:nowrap; transition:background .2s, box-shadow .2s, color .2s; }
.button:hover { background:rgba(255,255,255,.075); box-shadow:inset 0 0 0 2px var(--accent); color:var(--accent) !important; }
.button.primary { background:var(--grad); color:var(--bg) !important; box-shadow:none; }
.button.primary:hover { background:var(--accent); color:var(--bg) !important; }
.button.fit { width:100%; }
.button:disabled { opacity:.35; cursor:default; background:transparent; box-shadow:inset 0 0 0 2px var(--text); color:var(--text) !important; }
.actions { display:flex; flex-wrap:wrap; gap:1em; padding:0; margin:0 0 2em; list-style:none; }

/* ---------- spotlights ---------- */
.spotlight > .inner { display:flex; align-items:center; gap:3em; }
.spotlight.alt > .inner { flex-direction:row-reverse; }
.spotlight .image { flex:0 0 13em; border:0; }
.spotlight .content { flex:1; }
.major { position:relative; padding-bottom:.9em; }
.major::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--line); }

/* ---------- features grid ---------- */
.features { display:grid; grid-template-columns:1fr 1fr; gap:2.5em; margin:0 0 3em; padding:0; list-style:none; }
.features article { background:rgba(255,255,255,.035); border-radius:5px; padding:2.2em; }
.features .ico { width:3.2em; height:3.2em; border-radius:50%; display:flex; align-items:center; justify-content:center;
                 box-shadow:inset 0 0 0 2px var(--line); margin-bottom:1.4em; color:var(--accent); }
.features p { margin:0; }

/* ---------- pricing ---------- */
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:2em; margin:3em 0 2em; }
.plan { border:2px solid var(--line); border-radius:8px; padding:2.4em 2em 2em; display:flex; flex-direction:column; background:rgba(11,26,51,.35); }
.plan.best { border-color:var(--accent); }
.plan .price { color:var(--text); font-size:2.6em; font-weight:800; letter-spacing:0; line-height:1.2; margin:.2em 0; }
.plan .price span { font-size:.38em; color:var(--muted); font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.plan ul { padding-left:1.1em; margin:1em 0 2em; flex:1; }
.plan { position:relative; }
.plan .off { position:absolute; top:-1.4em; right:1em; background:var(--grad); color:var(--bg); font-size:1.25em; font-weight:900;
             letter-spacing:.06em; text-transform:uppercase; padding:.45em 1em; border-radius:8px; line-height:1.2;
             box-shadow:0 .4em 1.2em rgba(43,210,160,.35); }
.plan .was { color:var(--muted); font-size:1.4em; font-weight:700; letter-spacing:0; text-decoration:line-through; text-decoration-color:var(--red); }

/* ---------- footer ---------- */
#footer { background:var(--bg); padding:6em 0 2em; }
#footer .inner { max-width:68em; margin:0 auto; padding:0 3em; display:grid; grid-template-columns:1.3fr 1fr; gap:4em; }
#footer ul.contact { list-style:none; padding:0; margin:0; }
#footer ul.contact li { margin-bottom:1.6em; }
#footer ul.contact h3 { font-size:.8em; margin:0 0 .3em; }
#footer .copyright { grid-column:1 / -1; font-size:.8em; border-top:1px solid var(--line); padding-top:2em; margin:0; }

/* ---------- forms ---------- */
label { display:block; color:var(--text); font-weight:800; font-size:.8em; letter-spacing:.1em; text-transform:uppercase; margin:1.4em 0 .7em; }
input, textarea { width:100%; height:2.9em; padding:0 1em; border:0; border-radius:5px; background:rgba(255,255,255,.075);
       color:var(--text); font:inherit; outline:0; box-shadow:inset 0 0 0 2px transparent; transition:box-shadow .2s; }
textarea { height:auto; padding:.8em 1em; resize:vertical; }
input:focus, textarea:focus { box-shadow:inset 0 0 0 2px var(--accent); }

@media (max-width:980px) {
  .plans { grid-template-columns:1fr; gap:3em; }
  #banner .inner, .spotlight > .inner, .spotlight.alt > .inner { flex-direction:column; text-align:center; }
  #banner .logo { justify-content:center; }
  #banner p { margin-left:auto; margin-right:auto; }
  .actions { justify-content:center; }
  .spotlight .major::after { left:25%; width:50%; }
}
@media (max-width:736px) {
  body { font-size:14px; }
  .wrapper { margin:4em 0; }
  .wrapper::before { top:-4em; height:4em; }
  .wrapper::after { bottom:-4em; height:4em; }
  .wrapper > .inner, #banner .inner, #footer .inner { padding-left:16px; padding-right:16px; }
  #banner { padding:8em 0 6em; }
  #banner h2 { font-size:2em; }
  #banner .phone { flex-basis:auto; width:11em; }
  .spotlight .image { flex-basis:auto; width:10em; }
  .features, .plans, #footer .inner { grid-template-columns:1fr; gap:1.5em; }
  #header nav a.opt { display:none; }
  #header { height:4em; }
  #header h1 { font-size:1.35em; }
}