@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');
  :root {
  --blue:#087f91;
  --orange:#ff6847;
  --yellow:#cfe95b;
  --cream:#f4fbfb;
  --navy:#173f50;
  --gray:#607582;
  --line:#d5e5e8;
  --cyan:#29c6bd;
  --white:#fff
}
  * {
  box-sizing:border-box
}
  html {
  scroll-behavior:smooth
}
  body {
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font:500 15px/1.5 Manrope,sans-serif;
  background-image:linear-gradient(rgba(8,127,145,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(8,127,145,.035) 1px,transparent 1px);
  background-size:32px 32px
}
  h1,h2,h3,p {
  margin:0
}
  h1,h2 {
  font-family:'Playfair Display',serif;
  font-weight:700;
  letter-spacing:-.03em
}
  a {
  color:inherit;
  text-decoration:none
}
  .section-shell {
  width:min(1120px,calc(100% - 40px));
  margin:auto
}
  .site-header {
  width:min(1120px,calc(100% - 40px));
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 0
}
  .brand img {
  display:block;
  width:190px;
  height:48px;
  object-fit:contain;
  object-position:left center
}
  .main-nav {
  display:flex;
  align-items:center;
  gap:24px;
  color:var(--gray);
  font-size:13px
}
  .main-nav a:hover {
  color:var(--blue)
}
  .nav-highlight {
  color:var(--blue);
  font-weight:800;
  border-bottom:2px solid var(--yellow);
  padding-bottom:3px
}
  .hero {
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:74px;
  align-items:center;
  padding:80px 0 106px
}
  .tag {
  display:inline-block;
  padding:7px 11px;
  border-radius:4px;
  background:var(--yellow);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
  .hero h1 {
  font-size:clamp(3.7rem,7vw,6.4rem);
  line-height:.92;
  margin:20px 0 24px
}
  .hero h1 em {
  color:var(--blue);
  font-style:normal
}
  .hero-copy>p {
  max-width:470px;
  color:var(--gray);
  font-size:16px
}
  .actions {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:30px;
  flex-wrap:wrap
}
  .button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:47px;
  padding:0 18px;
  border-radius:5px;
  border:1px solid var(--navy);
  font:800 13px Manrope,sans-serif;
  cursor:pointer
}
  .button-primary {
  color:white;
  background:var(--blue);
  border-color:var(--blue);
  box-shadow:4px 4px 0 var(--navy)
}
  .button-primary:hover {
  background:var(--navy)
}
  .button-light {
  background:white
}
  .hero-art {
  position:relative;
  height:470px
}
  .art-panel {
  position:absolute;
  inset:0 25px 24px 0;
  background:var(--blue);
  border:2px solid var(--navy);
  border-radius:48% 4px 4px 4px;
  box-shadow:10px 10px 0 var(--yellow);
  padding:30px;
  color:white;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
  .art-panel strong {
  font:700 2.2rem/1 'Playfair Display',serif
}
  .art-label {
  font-size:.76rem
}
  .art-badge {
  position:absolute;
  z-index:2;
  right:12px;
  top:60px;
  width:108px;
  height:108px;
  padding:25px 12px;
  border-radius:50%;
  background:var(--orange);
  border:2px solid var(--navy);
  color:white;
  text-align:center;
  font-size:11px;
  font-weight:800;
  line-height:1.15;
  transform:rotate(10deg)
}
  .web-services {
  padding:78px 0 88px;
  background:#f7faff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
  .web-hero {
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:55px;
  align-items:center;
  padding:38px 46px 42px;
  border:1px solid #dbe5f3;
  border-radius:10px;
  background:linear-gradient(120deg,#fafdff,#edf4ff);
  overflow:hidden;
  position:relative
}
  .web-hero:after {
  content:' {
}
  ';
  position:absolute;
  right:22px;
  bottom:-34px;
  color:rgba(8,127,145,.07);
  font:800 14rem/.8 monospace;
  letter-spacing:-.2em
}
  .web-copy,.server-art {
  position:relative;
  z-index:1
}
  .web-copy h2 {
  max-width:560px;
  margin:17px 0 12px;
  font-size:clamp(2.7rem,5vw,4.8rem);
  line-height:.94
}
  .web-copy>p {
  max-width:475px;
  color:var(--gray)
}
  .web-benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:30px
}
  .web-benefits div {
  display:grid;
  gap:5px
}
  .web-benefits b {
  color:var(--blue);
  font-size:.85rem
}
  .web-benefits span {
  color:var(--gray);
  font-size:.73rem;
  line-height:1.45
}
  .server-art {
  min-height:285px;
  display:grid;
  place-items:center
}
  .server {
  position:relative;
  width:180px;
  height:165px;
  border-radius:9px;
  background:linear-gradient(120deg,#246979,#173f50);
  border:4px solid #4ba5ad;
  box-shadow:16px 17px 0 rgba(8,127,145,.16),0 20px 32px rgba(23,63,80,.18)
}
  .server:before,.server:after {
  content:'';
  position:absolute;
  left:20px;
  right:20px;
  height:29px;
  border-radius:4px;
  background:#194b5b;
  border:1px solid #68bbc0
}
  .server:before {
  top:25px
}
  .server:after {
  top:72px
}
  .server i {
  position:absolute;
  right:31px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan)
}
  .server i:nth-child(1) {
  top:34px
}
  .server i:nth-child(2) {
  top:49px
}
  .server i:nth-child(3) {
  top:81px
}
  .domain-pill {
  position:absolute;
  right:8%;
  top:16px;
  padding:10px 15px;
  border-radius:7px;
  background:white;
  color:var(--blue);
  font-weight:800;
  box-shadow:0 8px 20px rgba(23,63,80,.12)
}
  .domain-pill.secondary {
  right:3%;
  top:75px;
  color:var(--navy);
  font-size:.8rem
}
  .uptime {
  position:absolute;
  bottom:9px;
  right:12%;
  padding:12px 16px;
  border-radius:7px;
  background:white;
  box-shadow:0 8px 20px rgba(23,63,80,.12);
  font-size:.72rem
}
  .uptime b {
  display:block;
  color:var(--navy);
  font-size:.95rem
}
  .domain-search {
  margin-top:26px;
  padding:24px;
  border:1px solid #cbdceb;
  border-radius:9px;
  background:white;
  box-shadow:0 8px 20px rgba(23,63,80,.05)
}
  .domain-search h3 {
  font-size:1.1rem;
  margin-bottom:6px
}
  .domain-search>p {
  color:var(--gray);
  font-size:.8rem;
  margin-bottom:15px
}
  .domain-form {
  display:grid;
  grid-template-columns:1fr 105px auto;
  gap:9px
}
  .domain-form input,.domain-form select {
  min-height:46px;
  padding:0 12px;
  border:1px solid #cbd6e6;
  border-radius:5px;
  background:#f8fbff;
  color:var(--navy);
  font:600 .85rem Manrope,sans-serif
}
  .domain-form input:focus,.domain-form select:focus {
  outline:2px solid rgba(8,127,145,.25);
  border-color:var(--blue)
}
  .domain-status {
  display:none;
  margin-top:14px;
  padding:13px;
  border-radius:5px;
  font-size:.8rem
}
  .domain-status.show {
  display:block
}
  .domain-status.available {
  background:#eaf9ed;
  color:#14723a;
  border:1px solid #b8e3c2
}
  .domain-status.taken {
  background:#fff0ed;
  color:#a63c2b;
  border:1px solid #ffc2b6
}
  .domain-status.unknown {
  background:#fff8df;
  color:#796118;
  border:1px solid #f0d879
}
  .domain-report {
  display:none;
  margin-top:10px
}
  .domain-report.show {
  display:inline-flex
}
  .domain-search>small {
  display:block;
  margin-top:10px;
  color:var(--gray);
  font-size:.7rem
}
  .web-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:14px
}
  .web-card,.catalog-grid article {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  padding:20px 18px;
  border:1px solid #dbe5f3;
  border-radius:8px;
  background:white;
  box-shadow:0 6px 16px rgba(23,63,80,.04)
}
  .web-card>strong {
  color:var(--blue);
  font-size:2rem;
  line-height:1
}
  .web-card:nth-child(2)>strong,.web-card:nth-child(4)>strong {
  color:#f4b938
}
  .web-card h3 {
  font-size:.85rem;
  margin-bottom:6px
}
  .web-card p,.catalog-grid p {
  color:var(--gray);
  font-size:.7rem;
  line-height:1.45
}
  .web-card a {
  display:inline-block;
  margin-top:8px;
  color:var(--blue);
  font-size:.68rem;
  font-weight:800
}
  .catalog {
  padding:74px 0 92px;
  background:rgba(255,255,255,.62);
  border-top:1px solid var(--line)
}
  .section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:35px;
  margin-bottom:30px
}
  .section-heading h2 {
  max-width:560px;
  font-size:clamp(2.6rem,5vw,4.6rem);
  line-height:.94
}
  .section-heading>p {
  max-width:430px;
  color:var(--gray)
}
  .catalog-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
  .catalog-grid article {
  display:block;
  padding:0
}
  .catalog-visual {
  height:142px;
  margin:20px 20px 0;
  display:grid;
  place-items:center;
  background:#edf3fb;
  color:var(--blue);
  font-size:4.5rem
}
  .catalog-grid article>div:last-child {
  padding:24px 20px 26px
}
  .catalog-grid small {
  display:block;
  margin-bottom:11px;
  color:var(--blue);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase
}
  .catalog-grid h3 {
  font-size:1.02rem;
  margin-bottom:8px
}
  .band {
  background:var(--navy);
  color:white;
  border-top:3px solid var(--cyan);
  border-bottom:3px solid var(--cyan)
}
  .stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:29px 0
}
  .stats>div {
  padding-left:25px;
  border-left:1px solid rgba(255,255,255,.22)
}
  .stats>div:first-child {
  padding-left:0;
  border-left:0
}
  .stats b {
  display:block;
  color:var(--yellow);
  font:700 2rem 'Playfair Display',serif
}
  .stats span {
  color:#bccfd2;
  font-size:12px
}
  .services {
  padding:100px 0
}
  .service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}
  .service-grid article {
  min-height:190px;
  padding:25px;
  border:1px solid var(--line);
  background:white;
  position:relative
}
  .service-grid article:nth-child(2) {
  background:var(--yellow);
  border-color:var(--yellow)
}
  .service-grid article:nth-child(3) {
  background:var(--blue);
  border-color:var(--navy);
  color:white
}
  .service-grid article>b {
  font:700 2rem 'Playfair Display',serif;
  color:var(--orange)
}
  .service-grid article:nth-child(3)>b {
  color:var(--yellow)
}
  .service-grid h3 {
  margin:30px 0 9px;
  font-size:18px
}
  .service-grid p {
  color:var(--gray);
  font-size:13px
}
  .service-grid article:nth-child(3) p {
  color:#d8f1f1
}
  .diagnostic {
  padding:100px 0;
  background:#eaf5f6;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
  .diagnostic-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:60px;
  align-items:center
}
  .diagnostic-grid h2,.contact h2 {
  margin-top:18px;
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:.94
}
  .diagnostic-grid>div>p,.contact-grid>div>p {
  max-width:430px;
  margin-top:19px;
  color:var(--gray)
}
  .wizard {
  background:white;
  padding:27px;
  box-shadow:0 18px 35px rgba(23,63,80,.08)
}
  .wizard-step {
  display:none
}
  .wizard-step.active {
  display:block
}
  .wizard-step>small,.wizard-result>small {
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em
}
  .wizard h3 {
  font-size:20px;
  margin:8px 0 19px
}
  .options {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px
}
  .options button {
  border:1px solid var(--line);
  background:var(--cream);
  padding:14px;
  text-align:left;
  border-radius:4px;
  cursor:pointer;
  font:700 13px Manrope;
  color:var(--navy)
}
  .options button:hover,.options button.selected {
  border-color:var(--blue);
  background:#e8f8f8;
  color:var(--blue)
}
  .wizard-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px
}
  .progress {
  width:110px;
  height:4px;
  background:#e5eeee
}
  .progress i {
  display:block;
  width:33%;
  height:100%;
  background:var(--orange);
  transition:width .25s
}
  .wizard-result {
  display:none
}
  .wizard-result.open {
  display:block
}
  .wizard-result p {
  padding:14px;
  margin:15px 0;
  background:#e8f8f8;
  border-left:3px solid var(--blue);
  font-size:13px
}
  .contact {
  padding:74px 0;
  background:var(--navy);
  color:white
}
  .contact-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:end
}
  .contact-grid>div>p {
  color:#c4d6d9
}
  .contact-details {
  display:grid;
  gap:14px;
  padding:24px;
  background:#22586a;
  border:1px solid #4a8991;
  border-radius:8px
}
  .contact-details small {
  display:block;
  color:var(--yellow);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:3px
}
  .contact-details a {
  color:white
}
  .contact-details a:hover {
  color:var(--cyan)
}
  footer {
  padding:28px 0;
  color:var(--gray);
  font-size:12px;
  border-top:1px solid var(--line)
}
  +@media(max-width:800px) {
  .section-shell,.site-header {
  width:min(100% - 28px,600px)
}
  .main-nav a:not(.nav-highlight) {
  display:none
}
  .hero {
  grid-template-columns:1fr;
  gap:35px;
  padding:55px 0 70px
}
  .hero-art {
  height:330px
}
  .web-hero,.diagnostic-grid,.contact-grid {
  display:block
}
  .web-hero {
  padding:28px 22px
}
  .server-art {
  min-height:240px
}
  .web-benefits {
  grid-template-columns:repeat(2,1fr)
}
  .web-cards,.catalog-grid {
  grid-template-columns:repeat(2,1fr)
}
  .section-heading {
  display:block
}
  .section-heading>p {
  margin-top:18px
}
  .stats {
  grid-template-columns:1fr;
  gap:18px
}
  .stats>div {
  padding:0 0 0 14px;
  border-left:2px solid var(--yellow)
}
  .services,.diagnostic {
  padding:65px 0
}
  .service-grid {
  grid-template-columns:1fr
}
  .diagnostic-grid .wizard,.contact-details {
  margin-top:28px
}
  .contact-grid {
  width:min(100% - 28px,600px)
}
  .contact {
  padding:65px 0
}
}
@media(max-width:430px) {
  .site-header {
  padding:16px 0
}
  .brand img {
  width:150px;
  height:40px
}
  .hero h1 {
  font-size:3.5rem
}
  .actions .button,.web-actions .button {
  width:100%
}
  .web-benefits,.web-cards,.catalog-grid {
  grid-template-columns:1fr
}
  .domain-form {
  grid-template-columns:1fr 92px
}
  .domain-form .button {
  grid-column:1/-1;
  width:100%
}
  .options {
  grid-template-columns:1fr
}
}