/* ============================================
   HOSTGATE — "Serene Dark"
   
   Calm. Spacious. Confident.
   One font: Sora. One accent: soft teal.
   Generous whitespace. Minimal motion.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

:root {
  /* Palette — warm darks */
  --bg-0: #0F0F12;
  --bg-1: #161620;
  --bg-2: #1D1D28;
  --bg-3: #252530;
  --bg-hover: #2A2A38;

  /* Accent — soft teal / mint */
  --accent: #5CC8AA;
  --accent-hover: #7ADAC0;
  --accent-muted: rgba(92, 200, 170, 0.10);
  --accent-border: rgba(92, 200, 170, 0.25);
  --accent-glow: 0 0 32px rgba(92, 200, 170, 0.08);

  /* Warm gold — sparingly used */
  --gold: #E8B44A;

  /* Type scale */
  --font: 'Sora', system-ui, sans-serif;
  --t-white: #E8E8EC;
  --t-light: #C0C0C8;
  --t-gray: #8F8F9D;
  --t-muted: #5A5A68;
  --t-faint: #3E3E4A;

  /* Borders */
  --border: rgba(255,255,255, 0.06);
  --border-hover: var(--accent-border);

  /* Shadows */
  --shadow: 0 8px 32px rgba(0,0,0,0.25);

  /* Radii — generous, soft */
  --r: 14px;
  --r-lg: 20px;
  --r-sm: 10px;
  --r-xs: 6px;

  /* Max width */
  --mw: 1140px;

  /* Timing — slow, calm */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 0.4s;

  /* Compat */
  --colorBlue: var(--accent);
  --colorGrey: var(--t-gray);
  --colorLightBlue: var(--bg-1);
  --mainText: var(--t-white);
  --greyText: var(--t-gray);
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--t-light);
  background: var(--bg-0);
  min-height: 100vh;
  overflow-x: hidden;
  letter-spacing: 0.01em;
}
img { max-width:100%; height:auto; border:0; display:block; }
ol, ul { list-style:none; }
a { color: var(--accent); text-decoration:none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-hover); }
a:visited { color: var(--accent); }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--t-white);
}
p { color: var(--t-gray); line-height:1.8; }
strong, b { font-weight:600; color: var(--t-white); }

.f18 { font-size:18px; }
.semiB { font-weight:600; }
.container { min-height:100vh; display:flex; flex-direction:column; }
.sides { flex:1; }


/* ╔══════════════════════════════════╗
   ║         TOP NAV BAR             ║
   ╚══════════════════════════════════╝ */
nav.top-nav {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  height: 38px;
  display: flex;
}
nav.top-nav ul {
  padding: 0 24px; display:flex; align-self:center;
  font-size:11px; font-weight:400; width:100%; gap:12px;
  color: var(--t-muted);
}
@media(min-width:1200px) { nav.top-nav ul { width:var(--mw); margin:0 auto; padding:0; } }
@media(min-width:450px) { nav.top-nav ul { justify-content:flex-start; } }
nav.top-nav ul li:nth-child(1) { margin-right:0; }
@media(min-width:450px) { nav.top-nav ul li:nth-child(1) { margin-right:auto; } }
nav.top-nav ul li a {
  color:var(--t-muted); display:inline-flex; align-items:center;
  height:38px; transition: color var(--dur);
}
nav.top-nav ul li a:hover { color:var(--accent); }
nav.top-nav ul li a:after { display:none; }
nav.top-nav ul li:nth-child(2),nav.top-nav ul li:nth-child(3),nav.top-nav ul li:nth-child(4) { display:none; }
@media(min-width:750px) { nav.top-nav ul li:nth-child(2),nav.top-nav ul li:nth-child(3),nav.top-nav ul li:nth-child(4) { display:block; } }
nav.top-nav ul li:nth-child(2) { padding-left:18px; background:url(../images/lock-white.png) center left no-repeat; background-size:10px auto; }
nav.top-nav ul li:nth-child(3) { padding-left:22px; background:url(../images/tech-white.png) center left no-repeat; background-size:13px auto; }
nav.top-nav ul li:nth-child(4) { padding-left:22px; background:url(../images/cart-white.png) center left no-repeat; background-size:13px auto; }
.seo-onBlue h1 { font-size:11px; font-weight:400; color:var(--t-muted); letter-spacing:0; }


/* ╔══════════════════════════════════╗
   ║        MAIN HEADER              ║
   ╚══════════════════════════════════╝ */
header#headernav {
  position:sticky; top:0; z-index:1000;
  background: rgba(15, 15, 18, 0.75);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}
.main-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; min-height:60px;
}
@media(min-width:1200px) { .main-header { max-width:var(--mw); margin:0 auto; padding:0; } }
.main-header > a > img { filter:brightness(0) invert(1); height:22px; width:auto; opacity:0.9; }

nav.main-nav { display:none; }
@media(min-width:1050px) { nav.main-nav { display:block; } }
nav.main-nav > ul { display:flex; align-items:center; gap:0; }
nav.main-nav > ul > li > a {
  color:var(--t-gray); font-size:13px; font-weight:400;
  padding:8px 16px; border-radius:var(--r-sm);
  transition: all var(--dur) var(--ease);
}
nav.main-nav > ul > li > a:hover {
  color:var(--t-white); background: rgba(255,255,255,0.04);
}

/* Badge */
.newbadge {
  display:inline-block; background:var(--accent); color:var(--bg-0);
  font-size:9px; font-weight:700; padding:2px 6px; border-radius:4px;
  margin-left:6px; letter-spacing:0.06em; text-transform:uppercase;
}

/* Dropdowns */
nav.main-nav > ul > li.drop { position:relative; }
nav.main-nav > ul > li.drop > ul {
  display:none; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  min-width:290px; background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r); padding:8px; box-shadow:var(--shadow); z-index:1001;
}
nav.main-nav > ul > li.drop:hover > ul {
  display:block; animation:dd-in 0.25s var(--ease);
}
@keyframes dd-in {
  from { opacity:0; transform:translateX(-50%) translateY(-4px); }
  to { opacity:1; transform:translateX(-50%) translateY(0); }
}
nav.main-nav > ul > li.drop > ul > li > a {
  display:flex; flex-direction:column; padding:10px 14px; border-radius:var(--r-sm);
  transition:background var(--dur); background:none; padding-left:14px;
}
nav.main-nav > ul > li.drop > ul > li > a:hover { background:rgba(255,255,255,0.04); }
.drop-title { font-size:13px; font-weight:500; color:var(--t-white); }
.drop-dsc { font-size:11px; color:var(--t-muted); margin-top:2px; }
.drop-dsc b { color:var(--accent); font-weight:600; }
.host-1,.host-2,.host-3,.host-4,.host-5,.host-6,.host-7,
.server-1,.server-2,.server-3,.aboutus,.terms,.careers { background-image:none !important; padding-left:14px !important; }

/* Phone & Chat */
.main-phone a { color:var(--t-muted); font-weight:500; font-size:13px !important; }
.main-phone a:hover { color:var(--accent); }
.main-phone.ml { margin-left:16px; }
.main-phone.mm { display:none; }

.live-chat-btn {
  background:var(--accent); color:var(--bg-0); border:none;
  padding:7px 18px; border-radius:var(--r-sm);
  font-weight:600; font-size:12px; cursor:pointer; margin-left:14px;
  transition: all var(--dur) var(--ease);
}
.live-chat-btn:hover {
  background:var(--accent-hover);
  box-shadow: var(--accent-glow);
}


/* ╔══════════════════════════════════╗
   ║         MOBILE NAV              ║
   ╚══════════════════════════════════╝ */
nav.menu-toggle { display:none; }
@media(max-width:1049px) { nav.menu-toggle { display:block; } .main-phone.ml { display:none; } }
.burger { display:block; width:20px; height:1.5px; background:var(--t-gray); margin:5px 0; border-radius:1px; transition:all 0.3s; }
input.burger { position:absolute; width:30px; height:30px; opacity:0; cursor:pointer; z-index:10; -webkit-appearance:none; }
input.burger:checked ~ .menu-mobile { display:block; }
input.burger:checked ~ .b1 { transform:rotate(45deg) translate(5px,5px); }
input.burger:checked ~ .b2 { opacity:0; }
input.burger:checked ~ .b3 { transform:rotate(-45deg) translate(5px,-5px); }
.menu-mobile {
  display:none; position:fixed; top:98px; left:0; width:100%; height:calc(100vh - 98px);
  background:var(--bg-0); overflow-y:auto; z-index:999; padding:28px;
}
.menu-mobile dt { padding:16px 0; border-bottom:1px solid var(--border); }
.menu-mobile dt a { color:var(--t-white); font-size:15px; font-weight:500; }
.menu-mobile dd { display:none; padding-bottom:10px; }
.menu-mobile dt.arrow.active + dd { display:block; }
.mm-sub-el a { display:flex; flex-direction:column; padding:10px 16px; border-radius:var(--r-sm); background:none; }
.mm-sub-el a:hover { background:rgba(255,255,255,0.03); }
.main-phone.mm { margin-top:28px; padding-top:28px; border-top:1px solid var(--border); display:block; }
.main-phone.mm a { font-size:22px; font-weight:600; color:var(--accent); }
.main-phone.mm span { font-size:12px; color:var(--t-muted); }


/* ╔══════════════════════════════════╗
   ║           HERO                  ║
   ╚══════════════════════════════════╝ */
.index-header-container {
  background: var(--bg-0);
  padding: 80px 24px 60px;
  position: relative;
}
/* Gentle gradient orb — barely there */
.index-header-container::before {
  content:''; position:absolute; width:800px; height:800px;
  top:-300px; right:-200px; border-radius:50%;
  background: radial-gradient(circle, rgba(92,200,170,0.04) 0%, transparent 70%);
  pointer-events:none;
}

.index-header {
  max-width:var(--mw); margin:0 auto;
  display:flex; align-items:center; gap:80px;
  position:relative; z-index:1;
}
.ih-details { flex:1; }
.ih-details hgroup { margin-bottom:36px; }
.ih-details .domains {
  font-size:12px; font-weight:500; color:var(--accent);
  letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:16px; display:block;
}
.ih-details h2 {
  font-size:34px; font-weight:600; line-height:1.3;
  color:var(--t-white); max-width:500px; letter-spacing:-0.02em;
}

/* Domain search */
.ih-domains { display:flex; gap:0; margin-bottom:20px; max-width:480px; }
.form__group { flex:1; }
.form__group.field { position:relative; }
.form__field {
  width:100%; padding:14px 18px; font-size:14px;
  font-family:var(--font); color:var(--t-white);
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r) 0 0 var(--r); border-right:none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.form__field:focus {
  border-color:var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
  outline:none;
}
.form__field::placeholder { color:var(--t-faint); font-size:13px; }
.form__label { display:none; }

#domaincheck button, .ih-domains button, .domainbutton {
  background:var(--accent); color:var(--bg-0); border:none;
  padding:14px 28px; font-size:13px; font-weight:600;
  font-family:var(--font); cursor:pointer;
  border-radius:0 var(--r) var(--r) 0;
  transition: all var(--dur) var(--ease);
  white-space:nowrap; letter-spacing:0.02em;
}
#domaincheck button:hover, .ih-domains button:hover {
  background:var(--accent-hover);
  box-shadow: var(--accent-glow);
}

/* TLD badges */
.ih-prices { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; margin-bottom:14px; }
.ih-prices span {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r-xs); padding:6px 14px;
  font-size:13px; font-weight:500; color:var(--t-muted);
  transition: all var(--dur);
}
.ih-prices span:hover { border-color:var(--border-hover); color:var(--accent); }
.ih-prices span sup { color:var(--accent); font-size:11px; font-weight:600; margin-left:3px; }

.ih-banner { display:none; }
@media(min-width:900px) {
  .ih-banner { display:block; flex-shrink:0; }
  .ih-banner img { max-width:320px; opacity:0.85; filter:drop-shadow(0 16px 40px rgba(0,0,0,0.3)); }
}


/* ╔══════════════════════════════════╗
   ║        TAB SLIDER               ║
   ╚══════════════════════════════════╝ */
.tab-slider--nav { width:100%; margin-bottom:28px; margin-top:48px; }
.tab-slider--tabs {
  display:flex !important; margin:0 auto; padding:0; list-style:none;
  position:relative; overflow:hidden;
  background:var(--bg-2) !important; border:1px solid var(--border) !important;
  min-height:48px; user-select:none; width:100%; max-width:940px;
  border-radius:var(--r) !important;
}
.tab-slider--tabs:after {
  content:""; width:50%; background:var(--accent) !important; height:100%;
  position:absolute; top:0; left:0; transition:all 0.35s var(--ease);
  border-radius:var(--r);
}
.tab-slider--tabs.slide:after { left:50%; }
.tab-slider--trigger {
  font-size:13px; line-height:24px; font-weight:600;
  color:var(--t-muted) !important; text-align:center;
  padding:12px 15px; position:relative; z-index:2; cursor:pointer;
  display:inline-block; transition:color 0.3s; user-select:none;
  width:49%; letter-spacing:0.02em;
}
.tab-slider--trigger.active { color:var(--bg-0) !important; }
.tab-slider--body { margin-bottom:20px; }


/* ╔══════════════════════════════════╗
   ║     PRICING PACKAGES            ║
   ╚══════════════════════════════════╝ */
.packages { max-width:var(--mw); margin:0 auto; }
.packages h3 { text-align:center; margin-bottom:36px; }
.packages h3 span { color:var(--t-gray); font-weight:400; font-size:14px; line-height:1.8; }
.packages h3 b { color:var(--accent); }
.dynamicpacks { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; padding:10px; }
.dynamicpacks.frontpage { max-width:var(--mw); margin:0 auto; }

.dynamicpacks .anual, .dynamicpacks .bianual, .dynamicpacks .trianual,
div.anual, div.bianual, div.trianual {
  display:flex !important; flex-wrap:wrap !important;
  justify-content:center !important; gap:14px !important; width:100% !important;
}

ul.package {
  background:var(--bg-2) !important; border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important; padding:32px 22px 24px !important;
  flex:0 1 200px !important; min-width:170px !important; max-width:210px !important;
  text-align:center !important; position:relative !important; overflow:hidden !important;
  transition: all var(--dur) var(--ease) !important;
}
ul.package:hover {
  transform:translateY(-2px) !important; border-color:var(--border-hover) !important;
  box-shadow: var(--accent-glow) !important; background:var(--bg-hover) !important;
}
ul.package li:nth-child(3) img, ul.package li img[src*="anual-"],
ul.package li img[src*="wp"] { display:none !important; }

ul.package > li:first-child > span:first-child b {
  font-size:16px !important; color:var(--t-white) !important; font-weight:600 !important;
}
ul.package > li:first-child > span:last-child {
  font-size:11px !important; color:var(--t-muted) !important; display:block !important; margin-top:4px !important;
}
ul.package > li:nth-child(2) span { font-size:13px !important; color:var(--t-muted) !important; }
ul.package > li:nth-child(2) span b {
  font-size:32px !important; color:var(--accent) !important; font-weight:700 !important;
}
ul.package > li:nth-child(2) span .euro {
  font-size:15px !important; vertical-align:super !important; color:var(--accent) !important;
}

/* Order buttons */
ul.package a.ordernow, ul.package .ordernow button, ul.package button.ordernow,
a.ordernow, button.ordernow, .ordernow button {
  display:inline-block !important; background:var(--accent) !important;
  color:var(--bg-0) !important; border:none !important;
  padding:9px 22px !important; border-radius:var(--r-sm) !important;
  font-weight:600 !important; font-size:12px !important;
  font-family:var(--font) !important; cursor:pointer !important;
  transition:all var(--dur) var(--ease) !important;
  text-decoration:none !important; margin-top:14px !important;
}
ul.package a.ordernow:hover, ul.package .ordernow button:hover, ul.package button.ordernow:hover {
  background:var(--accent-hover) !important; box-shadow:var(--accent-glow) !important;
}

li.popular {
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  background:var(--accent) !important; color:var(--bg-0) !important;
  font-size:9px !important; font-weight:700 !important; padding:3px 0 !important;
  letter-spacing:0.1em !important; text-transform:uppercase !important;
  margin:0 !important; border-radius:0 !important;
}
ul.package:has(li.popular) {
  padding-top:42px !important; border-color:var(--border-hover) !important;
  background:rgba(92,200,170,0.03) !important;
}

/* Legacy pricing */
.theading span { font-size:13px; color:var(--t-muted); }
.theading span b { color:var(--accent); }
.thprice { font-size:14px !important; padding:12px 0; }
.thprice b { font-size:28px; color:var(--accent) !important; font-weight:700; }
.thprice sup { font-size:14px; vertical-align:top; }
.innersplit {
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--r); padding:20px 16px; transition:all var(--dur);
}
.innersplit:hover { border-color:var(--border-hover); box-shadow:var(--accent-glow); transform:translateY(-2px); }


/* ╔══════════════════════════════════╗
   ║      FEATURES / onBlue          ║
   ╚══════════════════════════════════╝ */
.onBlue { background:var(--bg-1); padding:80px 24px; }
.onBlue article { max-width:var(--mw); margin:0 auto; }
.onBlue h3 {
  text-align:center; font-size:26px; font-weight:600;
  margin-bottom:52px; letter-spacing:-0.02em;
}
.onBlue h3 span {
  display:block; font-weight:400; font-size:14px;
  color:var(--t-gray); margin-top:16px; line-height:1.8;
}
.onBlue h3 b { color:var(--accent); }

ul.features {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}
ul.features li, ul.features menu li {
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
  border-radius:var(--r); padding:28px 22px;
  transition:all var(--dur) var(--ease);
}
ul.features li:hover, ul.features menu li:hover {
  transform:translateY(-2px); border-color:var(--border-hover);
  background:rgba(255,255,255,0.04);
}
ul.features li span, ul.features menu li span {
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:500; color:var(--t-white); margin-bottom:10px;
}
ul.features li i, ul.features menu li i {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--accent-muted); flex-shrink:0;
}
ul.features li i img, ul.features menu li i img {
  filter:brightness(0) saturate(100%) invert(72%) sepia(30%) saturate(600%) hue-rotate(115deg) brightness(95%) contrast(90%);
  width:18px; height:18px;
}
ul.features li p, ul.features menu li p { font-size:13px; color:var(--t-muted); line-height:1.7; }
ul.features a { text-decoration:none !important; }
ul.features menu { display:contents; }


/* ╔══════════════════════════════════╗
   ║     PROCESS / onWhite           ║
   ╚══════════════════════════════════╝ */
.onWhite { background:var(--bg-0); padding:80px 24px; }
.onWhite article, article.w1000, .w1000 { max-width:var(--mw); margin:0 auto; }
.onWhite h3 {
  text-align:center; font-size:26px; font-weight:600;
  margin-bottom:52px; letter-spacing:-0.02em;
}
.onWhite h3 span {
  display:block; font-weight:400; font-size:14px;
  color:var(--t-gray); margin-top:16px; line-height:1.8;
}
.onWhite h3 b { color:var(--accent); }

ul.process {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px;
}
ul.process li {
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:28px 24px; transition:all var(--dur) var(--ease);
}
ul.process li:hover { transform:translateY(-2px); border-color:var(--border-hover); }
ul.process li i {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-muted); margin-bottom:18px; position:relative;
}
ul.process li i img {
  filter:brightness(0) saturate(100%) invert(72%) sepia(30%) saturate(600%) hue-rotate(115deg) brightness(95%) contrast(90%);
  width:20px; height:20px;
}
ul.process li i span {
  position:absolute; top:-5px; right:-5px;
  background:var(--accent); color:var(--bg-0);
  width:20px; height:20px; border-radius:50%;
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
ul.process li > span { font-size:15px; font-weight:600; color:var(--t-white); display:block; margin-bottom:8px; }
ul.process li p { font-size:13px; color:var(--t-muted); line-height:1.7; }


/* ╔══════════════════════════════════╗
   ║     "DE CE HOSTGATE"            ║
   ╚══════════════════════════════════╝ */
.display-area1 { margin-top:20px; }
.da1-content {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:12px;
}
.da1-content li {
  display:flex; gap:16px; padding:22px;
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
  border-radius:var(--r); transition:all var(--dur);
}
.da1-content li:hover { border-color:var(--border-hover); background:rgba(255,255,255,0.04); }
.da1-content li i {
  flex-shrink:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-muted); border-radius:10px;
}
.da1-content li i img {
  filter:brightness(0) saturate(100%) invert(72%) sepia(30%) saturate(600%) hue-rotate(115deg) brightness(95%) contrast(90%);
  width:18px; height:18px;
}
.da1-content li span { font-size:14px; font-weight:600; color:var(--t-white); display:block; margin-bottom:4px; }
.da1-content li p { font-size:13px; color:var(--t-muted); line-height:1.7; }


/* ╔══════════════════════════════════╗
   ║       TESTIMONIALS              ║
   ╚══════════════════════════════════╝ */
.testimonials { padding:80px 24px; background:var(--bg-0); overflow:hidden; }
.testimonials article { max-width:var(--mw); margin:0 auto; }
.swiper { padding-bottom:50px; }
.swiper.small { display:none; }
@media(max-width:768px) { .swiper.big { display:none; } .swiper.small { display:block; } }

.testimonial {
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:28px 24px; min-height:140px; transition:all var(--dur);
  overflow:hidden; word-wrap:break-word;
}
.testimonial:hover { border-color:var(--border-hover); }
.testimonial .client { margin-bottom:12px; }
.testimonial .client span { font-size:15px; font-weight:600; color:var(--accent); }
.testimonial p { font-size:13px; color:var(--t-gray); font-style:italic; line-height:1.8; }

.swiper-button-prev,.swiper-button-next {
  color:var(--accent) !important; width:36px !important; height:36px !important;
  background:var(--bg-2); border:1px solid var(--border); border-radius:50%;
}
.swiper-button-prev::after,.swiper-button-next::after { font-size:14px !important; }
.swiper-pagination-bullet { background:var(--t-faint) !important; opacity:0.5; }
.swiper-pagination-bullet-active { background:var(--accent) !important; opacity:1; }
:root { --swiper-theme-color:var(--accent) !important; }


/* ╔══════════════════════════════════╗
   ║       INTERNAL PAGES            ║
   ╚══════════════════════════════════╝ */
.services { padding:48px 24px; }
.box { max-width:var(--mw); margin:0 auto; }
h2.internalseo { font-size:28px; font-weight:600; color:var(--t-white); }
#thehead { background-color:var(--bg-1) !important; padding:48px 24px !important; }
.mobile { padding:0 24px; }


/* ╔══════════════════════════════════╗
   ║          FOOTER                 ║
   ╚══════════════════════════════════╝ */
.page-footer-container {
  background:var(--bg-1); border-top:1px solid var(--border);
  padding:72px 24px 48px;
}
ul.page-footer {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:40px; max-width:var(--mw); margin:0 auto;
}
ul.page-footer > li { display:flex; flex-direction:column; gap:6px; }
ul.page-footer > li > span {
  font-size:12px; font-weight:600; color:var(--t-gray); letter-spacing:0.06em;
  text-transform:uppercase; margin-bottom:10px;
}
ul.page-footer > li > a { color:var(--t-muted); font-size:13px; transition:color var(--dur); padding:3px 0; }
ul.page-footer > li > a:hover { color:var(--accent); }
#footerlogo { filter:brightness(0) invert(1); opacity:0.7; margin-bottom:16px; }
.footer-social ul { display:flex; gap:12px; margin-top:16px; }
.footer-social li a img { filter:brightness(0) invert(1); opacity:0.3; transition:opacity var(--dur); width:16px; }
.footer-social li a:hover img { opacity:0.7; }
.footer-phone { font-weight:600; font-size:18px; color:var(--accent) !important; }
.footer-mail { color:var(--t-muted) !important; }
.footer-mail:hover { color:var(--accent) !important; }
.opensans { font-family:var(--font); }
.page-footer-social { background:var(--bg-0); border-top:1px solid var(--border); padding:20px; text-align:center; }
.page-footer-social span { color:var(--t-faint); font-size:12px; }


/* ╔══════════════════════════════════╗
   ║      BRANDS / CTA / MISC       ║
   ╚══════════════════════════════════╝ */
#brands { margin-top:24px; }
#brands img { filter:brightness(0) invert(1); opacity:0.15; transition:opacity var(--dur); }
#brands:hover img { opacity:0.3; }

.calltoaction, .calltoaction a, .calltoaction a:visited, .calltoaction:visited {
  cursor:pointer; border:0; background:var(--accent) !important; color:var(--bg-0) !important;
  padding:10px 22px; display:inline-block; font-size:12px; font-weight:600;
  font-family:var(--font); text-align:center; border-radius:var(--r-sm);
  transition:all var(--dur); text-decoration:none;
}
.calltoaction:hover { background:var(--accent-hover) !important; box-shadow:var(--accent-glow); }
a.nohover { color:var(--accent) !important; }
a.nohover:hover { color:var(--accent-hover) !important; }

#anual,#bianual,#trianual {
  background:var(--bg-2); border:1px solid var(--border); color:var(--t-muted);
  padding:10px 22px; border-radius:var(--r-sm); cursor:pointer;
  font-weight:500; font-size:13px; transition:all var(--dur);
}
#anual.active,#bianual.active,#trianual.active {
  background:var(--accent); color:var(--bg-0); border-color:var(--accent);
}

/* Tables */
table { width:100%; border-collapse:collapse; font-family:var(--font); }
th { background:var(--bg-2); color:var(--t-white); font-weight:600; font-size:12px; }
td,th { padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); color:var(--t-gray); font-size:13px; }
.thetable { background:var(--bg-2) !important; border:1px solid var(--border) !important; border-radius:var(--r) !important; overflow:hidden !important; }
.thetable .badges td div { background:var(--accent) !important; color:var(--bg-0) !important; font-weight:700 !important; }

/* Forms */
form { max-width:480px; margin:0 auto; }
form input[type="text"],form input[type="email"],form textarea {
  width:100%; padding:13px 16px; font-size:14px; font-family:var(--font); color:var(--t-white);
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r); margin-bottom:12px;
  transition:border-color var(--dur), box-shadow var(--dur);
}
form input[type="text"]:focus,form input[type="email"]:focus,form textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); outline:none;
}
form input::placeholder,form textarea::placeholder { color:var(--t-faint); font-size:13px; }
form textarea { min-height:120px; resize:vertical; }
form input[type="submit"],#thesubmit {
  width:100%; background:var(--accent); color:var(--bg-0); border:none; padding:13px;
  font-size:13px; font-weight:600; font-family:var(--font);
  border-radius:var(--r); cursor:pointer; transition:all var(--dur);
}
form input[type="submit"]:hover,#thesubmit:hover { background:var(--accent-hover); box-shadow:var(--accent-glow); }

.full { display:flex; flex-wrap:wrap; gap:40px; }
.left,.right { flex:1; min-width:280px; }

.animate-on-scroll { opacity:0; transform:translateY(16px); transition:opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }

.topBefore { padding:20px 0; }
.onBlue p, .onWhite p { max-width:var(--mw); margin-left:auto; margin-right:auto; }
#cookiePopup, .accept-cookies, .accept-cookies-container { display:none !important; }

@media(max-width:900px) {
  .index-header { flex-direction:column; text-align:center; gap:40px; }
  .ih-details h2 { max-width:none; }
  .ih-domains { max-width:none; }
  .ih-prices { justify-content:center; }
}
@media(max-width:600px) {
  .ih-details h2 { font-size:26px; }
  h2.internalseo { font-size:22px; }
  .onBlue h3, .onWhite h3 { font-size:22px; }
}
@media(max-width:768px) { ul.package { flex:0 1 100% !important; max-width:280px !important; } }
@media(max-width:480px) { ul.package { max-width:100% !important; } }
@media all and (max-width:500px) { table,thead,tbody,th,td,tr { display:block; } }