/*
Theme Name: Bivety Domain Landing
Theme URI: https://example.com/
Author: Custom
Description: Lightweight reusable one-page WordPress landing theme for domain/company placeholder sites.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: bivety-domain
*/

:root {
  --primary: #ed1c24;
  --navy: #123f83;
  --blue: #4ba5e8;
  --text: #142033;
  --muted: #5d6b7d;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #f7fbff;
}

a { color: inherit; }

.site-main {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.98) 0 18%, rgba(234,245,255,.92) 52%, rgba(210,231,250,.9) 100%);
}

.tech-network,
.tech-network::before,
.tech-network::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tech-network {
  opacity: .55;
  background:
    linear-gradient(115deg, transparent 0 10%, rgba(73,148,214,.12) 10.1% 10.25%, transparent 10.3% 100%),
    linear-gradient(25deg, transparent 0 75%, rgba(73,148,214,.13) 75.1% 75.25%, transparent 75.3% 100%);
}

.tech-network::before {
  content: "";
  background:
    radial-gradient(circle at 7% 25%, rgba(47,137,205,.42) 0 5px, transparent 6px),
    radial-gradient(circle at 18% 39%, rgba(47,137,205,.36) 0 4px, transparent 5px),
    radial-gradient(circle at 83% 27%, rgba(47,137,205,.35) 0 5px, transparent 6px),
    radial-gradient(circle at 94% 16%, rgba(47,137,205,.3) 0 4px, transparent 5px),
    radial-gradient(circle at 87% 47%, rgba(47,137,205,.28) 0 4px, transparent 5px);
}

.container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 60px 0 90px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: clamp(18px, 2.1vw, 28px);
  letter-spacing: .28em;
  font-weight: 500;
  color: #182231;
}

.eyebrow-line {
  width: 68px;
  height: 4px;
  background: var(--primary);
  border-radius: 99px;
  margin: 0 auto 26px;
}

.brand-logo {
  width: min(310px, 68vw);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0 16px 35px rgba(20, 59, 102, .08);
}

.contact-card {
  width: min(720px, 100%);
  margin: 34px auto 34px;
  padding: 22px 30px;
  border: 1px solid rgba(20,63,110,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 18px 55px rgba(28,83,130,.14);
  backdrop-filter: blur(8px);
}

.contact-label {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: .18em;
  font-weight: 700;
  color: #56677a;
}

.whatsapp {
  text-decoration: none;
  font-size: clamp(21px, 3vw, 34px);
  font-weight: 800;
  color: #13243a;
}

.whatsapp:hover { color: #168c45; }

.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: min(950px, 100%);
  margin: 10px auto 0;
}

.service {
  padding: 18px 16px;
  border-right: 1px solid rgba(18,63,131,.2);
}

.service:last-child { border-right: 0; }

.service-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);
  border: 2px solid rgba(18,63,131,.18);
  background: rgba(255,255,255,.72);
  font-size: 21px;
  font-weight: 700;
}

.service h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .03em;
  color: #23466f;
}

.wave {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 180px;
  bottom: -55px;
  border-radius: 50% 50% 0 0;
  transform: rotate(-2deg);
  z-index: 1;
}

.wave.one {
  background: linear-gradient(180deg, rgba(83,169,231,.85), rgba(24,83,154,.95));
  bottom: -115px;
}

.wave.two {
  background: rgba(255,255,255,.75);
  bottom: -88px;
  height: 125px;
}

.wave.three {
  background: linear-gradient(180deg, rgba(19,65,132,.92), rgba(19,65,132,1));
  bottom: -155px;
  height: 175px;
}

.footer-note {
  position: absolute;
  bottom: 18px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
  color: rgba(255,255,255,.9);
  font-size: 12px;
}

@media (max-width: 760px) {
  .hero { padding: 40px 0 90px; }
  .eyebrow { letter-spacing: .16em; }
  .contact-card { padding: 20px 16px; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .service:nth-child(2) { border-right: 0; }
  .service:nth-child(-n+2) { border-bottom: 1px solid rgba(18,63,131,.15); }
  .brand-logo { width: min(270px, 75vw); }
}

@media (max-width: 430px) {
  .container { width: min(100% - 24px, 1120px); }
  .eyebrow { font-size: 16px; }
  .services { grid-template-columns: 1fr 1fr; }
  .service { padding: 14px 8px; }
  .service h3 { font-size: 11px; }
  .service-icon { width: 42px; height: 42px; font-size: 17px; }
}


/* WhatsApp contact icon */
.contact-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: left;
}

.whatsapp-icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}

.whatsapp-icon svg {
  display: block;
  width: 64px;
  height: 64px;
}

.contact-copy {
  min-width: 0;
}

.contact-copy .contact-label {
  margin-bottom: 6px;
}

@media (max-width: 520px) {
  .contact-card {
    gap: 12px;
    padding: 18px 14px;
  }

  .whatsapp-icon,
  .whatsapp-icon svg {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .whatsapp {
    font-size: 20px;
  }
}