/* =========================================================
   LIGHT Design Studio — styles.css (clean & structured)
   ========================================================= */

/* ---------- 1) TOKENS / VARIABLES ---------- */
:root{
  --bg: #1C2733;
  --bg-soft: #243240;
  --accent: #19B5B0;
  --accent-soft: #ACE8E2;
  --accent-light: #2ED3CE;

  --white: #FFFFFF;

  --text-main: #0B1C2D;
  --text-muted: #5C6B78;

  --shadow-lg: 0 30px 80px rgba(0,0,0,.25);
  --shadow-md: 0 22px 44px rgba(0,0,0,.18);

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --line: rgba(255,255,255,.10);
}

/* ---------- 2) BASE / RESET ---------- */
*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--white);

  background:
  radial-gradient(circle at 15% 20%, rgba(43,184,179,.08), transparent 45%),
  radial-gradient(circle at 85% 80%, rgba(43,184,179,.10), transparent 50%),
  var(--bg);

  background-attachment: fixed;
}

img{ max-width: 100%; display: block; }

h1,h2,h3{ margin: 0 0 12px; }
p{ margin: 0 0 12px; }

a{ color: inherit; }

section{ padding: 80px 10%; }

/* ---------- 3) NAV / HEADER ---------- */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;

  background: rgba(28, 39, 51, 0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.18);

  transition: transform .22s ease;
  will-change: transform;
}

.nav-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 10%;
  transition: padding .18s ease;
}

/* Brand link should NOT look like a link */
/* ===== BRAND (logo + subline) ===== */
.brand{
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
  width: fit-content;
}
.brand:hover{ text-decoration: none; }
.brand:visited{ color: inherit; }

.brand-logo{
  height: 30px;          /* было 28 — чуть лучше читаемость */
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
}



.brand-sub{
  display: inline-block;
  width: fit-content;
  max-width: 210px;       /* = max-width logo */
  font-size: 8px;         /* меньше, чтобы не “переширять” */
  letter-spacing: 0.16em; /* меньше трекинг = меньше ширина */
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  white-space: nowrap;
}


@media (max-width: 900px){
  .brand-logo{ height: 28px; }
  .brand-sub{ font-size: 7px; letter-spacing: 0.14em; }
}


/* Desktop menu */
.menu a{
  position: relative;
  display: inline-flex;
  align-items: center;

  margin-left: 20px;
  padding: 10px 12px;
  border-radius: 12px;

  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.86);

  background: transparent;
  border: 1px solid transparent;

  overflow: hidden;          /* keep shine inside */
  isolation: isolate;        /* prevent shine bleeding to siblings */
  transform: translateZ(0);  /* Safari/Chrome render fix */

  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.menu a span{ position: relative; z-index: 2; }

.menu a::after{
  content:\"\" !important;
  position:absolute;
  inset:0;
  left:-140%;
  width:60%;
  height:100%;

  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-25deg);

  opacity: 0;               /* hidden until hover */
  pointer-events:none;
  z-index: 1;

  transition: left .6s ease, opacity .2s ease;
}

.menu a:hover{
  color: var(--white);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}

.menu a:hover::after{
  opacity: 1;
  left: 140%;
}


.menu a.active::after{ opacity: 0 !important; }

/* Active link */
.menu a.active,
.mobile-menu a.active{
  color: var(--white);
  border-color: rgba(25,181,176,0.55);
  box-shadow: 0 0 0 4px rgba(25,181,176,0.10);
}

/* Compact header (on scroll) */
.nav.is-compact .nav-inner{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Если тебе не нравится уменьшение — просто убери в CSS вот эти строки: */
.nav.is-compact .brand-logo{ height: 24px; }
.nav.is-compact .brand-sub{ opacity: 0.85; }

/* ---------- 4) MOBILE NAV (burger + dropdown) ---------- */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
}

.nav-toggle span{
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.88);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* dropdown container */
.mobile-menu{
  display: none;
  padding: 10px 10%;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(28, 39, 51, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-menu-link{
  display: block;
  padding: 18px 20px;
  margin-bottom: 14px;
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.mobile-menu-link:hover{
  transform: translateY(-2px);
  border-color: rgba(43,184,179,.35);
  background: rgba(255,255,255,.05);
  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    0 0 0 1px rgba(43,184,179,.18);
}

.mobile-menu-link:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}



.nav.is-open .nav-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2){ opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }


/* desktop: hide header on scroll down, show on scroll up */
@media (min-width: 901px){
  .nav.nav-hidden{
    transform: translateY(-100%);
  }
}


/* =========================
   PREMIUM HEADER REFINEMENT
========================= */

.nav{
  background: rgba(13, 24, 34, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,.16);
}

.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:20px;
}

/* elegant language switch */
/* ===== Language switch — Premium Capsule v2 ===== */

.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  margin-left:12px;

  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 18px rgba(0,0,0,.10);
}

.lang-switch a{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:40px;
  height:32px;
  padding:0 11px;

  border-radius:999px;
  text-decoration:none;

  font-size:11px;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1;

  color:rgba(255,255,255,.68);

  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.lang-switch a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}

.lang-switch a.active{
  color:#ffffff;
  background:linear-gradient(180deg, rgba(43,184,179,.22), rgba(43,184,179,.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(43,184,179,.22),
    0 6px 16px rgba(0,0,0,.16);
}



/* menu feels more premium */
.menu{
  display: flex;
  align-items: center;
}

.menu a{
  color: rgba(255,255,255,0.84);
  margin-left: 16px;
}

.menu a:hover{
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

/* =========================================
   MOBILE LANGUAGE SWITCH — CAPSULE v2
========================================= */

.mobile-lang{
  margin-top: 6px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 18px rgba(0,0,0,.10);
}



.mobile-lang a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 40px;
  height: 32px;
  padding: 0 11px;

  border-radius: 999px;
  text-decoration: none;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height: 1;

  color: rgba(255,255,255,.68);

  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.mobile-lang a:hover{
  color: #fff;
  background: rgba(255,255,255,.05);
}

.mobile-lang a.active{
  color: #ffffff;
  background: linear-gradient(180deg, rgba(43,184,179,.22), rgba(43,184,179,.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(43,184,179,.22),
    0 6px 16px rgba(0,0,0,.16);
}
.mobile-lang-wrap{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* =========================================
   DESKTOP / MOBILE VISIBILITY
========================================= */

@media (min-width: 901px){
  .mobile-lang{
    display: none;
  }
}

@media (max-width: 900px){
  .nav-right{
    gap: 10px;
  }

  .lang-switch{
    display: none;
  }
}


/* ---------- 5) BUTTONS ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  will-change: transform;
}

.btn-primary{
  background: var(--accent);
  color: var(--bg);
  border:1px solid rgba(255,255,255,0);
  box-shadow:0 10px 24px rgba(25,181,176,.25);
}


/* Glow pulse (subtle) */
@keyframes glowPulse{
  0%, 100% { box-shadow: 0 14px 35px rgba(25,181,176,.22); }
  50%      { box-shadow: 0 18px 45px rgba(25,181,176,.34); }
}
.btn-primary{ animation: glowPulse 2.4s ease-in-out infinite; }
.btn-primary:hover{
  animation: none;
  background: var(--white);
  transform: translateY(-2px);
}

.btn-ghost{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--white);
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.10);
  transform: translateY(-2px);
}

/* ---------- 6) HERO ---------- */
.hero{
  padding-top: 110px;
  padding-bottom: 110px;
  text-align: left;
}

@media (max-width: 768px) {
  .hero {
    padding: 110px 0 60px;
  }
}

.hero p{
  max-width:48ch;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 13px;
  margin-bottom: 18px;
}

.badge .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(25,181,176,.15);
  display: inline-block;
}

.hero h1{
  font-size: 54px;
  line-height: 1.05;
  margin-bottom: 18px;
}

.hero p{
  font-size: 18px;
  line-height: 1.6;
  max-width: 56ch;
  color: rgba(255,255,255,0.82);
}

.cta-row{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Proof pills */
.hero-proof{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.pill{
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 13px;
  color: rgba(255,255,255,0.86);
}
.pill b{ color: var(--white); }
.pill span{ color: rgba(255,255,255,0.70); }

.hero-note{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

/* Why card */
.hero-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
}

.hero-card h3{ margin: 0 0 10px; font-size: 16px; }
.hero-card p{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.76);
}



.mini-list{ display: grid; gap: 10px; margin-top: 14px; }

.mini-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}

.check{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: rgba(25,181,176,0.18);
  border: 1px solid rgba(25,181,176,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}
.check:before{ content: "✓"; color: var(--accent); font-weight: 900; font-size: 14px; }

.mini-item div{ font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.82); }
.mini-item b{ color: var(--white); }

/* ---------- 7) WHITE SECTIONS ---------- */
.white-section{
  background: var(--white);
  color: var(--text-main);
}

.white-section h2{ font-size: 34px; }

.white-section .sub{
  margin-top: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.services-head{ max-width: 780px; }

.cards{
  display: flex;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.card{
  background: var(--white);
  padding: 30px;
  border-radius: var(--radius-sm);
  width: 300px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid rgba(0,0,0,0.06);
}

.white-section .card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: rgba(25,181,176,0.45);
}

.service-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
}

.icon-badge{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(25,181,176,0.10);
  border: 1px solid rgba(25,181,176,0.25);
  color: var(--text-main);
}
.icon-badge svg{ width: 22px; height: 22px; }

.service-meta{
  margin-top: auto;
  font-size: 13px;
  color: rgba(11, 28, 45, 0.70);
  border-top: 1px solid rgba(11, 28, 45, 0.08);
  padding-top: 12px;
}

/* ---------- 8) PRICING ---------- */
.pricing{ text-align: center; }
.pricing h2{ font-size: 34px; }

.pricing{
  background:
    radial-gradient(900px 400px at 50% -200px, rgba(25,181,176,.08), transparent 60%),
    #ffffff;
}

.pricing-grid{
  display: flex;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.price-card{
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 30px;
  border-radius: var(--radius-lg);
  width: 300px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow: visible; /* чтобы MOST POPULAR не обрезался */
}

.plan-price{
  font-size: 28px;
  margin: 15px 0;
  color: var(--accent);
  font-weight: 900;
}

.features{
  list-style: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,0.86);
}
.features li{ margin-bottom: 10px; }


.price-card.popular{
  border:1px solid rgba(25,181,176,.45);
  box-shadow:
    0 25px 70px rgba(0,0,0,.30);
}

/* =================================
   GLASS BADGE (MOST POPULAR)
================================= */

.price-card.popular::before{

  content:"MOST POPULAR";

  position:absolute;
  top:3px;
  right:16px;

  padding:6px 12px;

  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;

  color:var(--accent);

  background:rgba(255,255,255,0.06);

  border:1px solid rgba(25,181,176,.45);

  border-radius:999px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    0 4px 12px rgba(0,0,0,.25);

  z-index:5;
}

.price-card > *{ position: relative; z-index: 2; }
.price-card::after{ z-index: 1; }  /* glow под текстом */

.price-card::after{
  border-radius: inherit;
}

.price-card.popular:hover{
  transform: translateY(-10px) scale(1.02);
}




.hosting{
  margin-top: 40px;
  font-size: 16px;
  color: rgba(255,255,255,0.80);
}
.hosting small{ color: rgba(255,255,255,0.65); }


.hosting-main{
font-size:18px;
font-weight:600;
margin-top:20px;
}

.hosting-speed{
margin-top:10px;
font-size:16px;
color:#0B1C2D;
font-weight:500;
}

.hosting-features{
font-size:14px;
color:#666;
}


/* ---------- 9) CONTACT ---------- */
.contact{ padding-top: 90px; padding-bottom: 90px; }

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact h2{ font-size: 34px; }

.contact-sub{
  margin: 12px 0 18px;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
  max-width: 60ch;
}

.contact-box{
  margin-top: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.contact-line{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 14px;
}
.contact-line:last-child{ border-bottom: none; }
.contact-line b{ color: var(--white); }
.contact-line span{ color: rgba(255,255,255,0.74); text-align: right; }

.form{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
}

.form label{
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 12px;
}

.form input,
.form textarea{
  width: 100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(28, 39, 51, 0.55);
  color: var(--white);
  outline: none;
  transition: 0.2s;
}

.form input:focus,
.form textarea:focus{
  border-color: rgba(25,181,176,0.55);
  box-shadow: 0 0 0 4px rgba(25,181,176,0.12);
}

.form-btn{ width: 100%; border: none; cursor: pointer; margin-top: 8px; }

.form-note{
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  line-height: 1.5;
}

.honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---------- 10) FOOTER ---------- */
footer{
  text-align: center;
  padding: 30px;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}

/* ---------- 11) REVEAL ANIMATION ---------- */
.fade-in{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

.fade-in.visible{
  opacity: 1;
  transform: translateY(0);
}


.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s ease,
    transform .8s ease;
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Варианты направления, если захочешь разнообразить */
.reveal-left{
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity .8s ease,
    transform .8s ease;
  will-change: opacity, transform;
}

.reveal-left.is-visible{
  opacity: 1;
  transform: translateX(0);
}

.reveal-right{
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity .8s ease,
    transform .8s ease;
  will-change: opacity, transform;
}

.reveal-right.is-visible{
  opacity: 1;
  transform: translateX(0);
}

/* Небольшая задержка для карточек */
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }
.reveal-delay-4{ transition-delay: .32s; }

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-left,
  .reveal-right{
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* ---------- 12) RESPONSIVE + MOBILE HEADER STRIP ---------- */
@media (max-width: 900px){
  section{ padding: 70px 6%; }
  .nav-inner{ padding: 16px 6%; }

  /* hide desktop menu, show burger */
  .menu{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .mobile-menu.is-open{ display: block; }

  /* iOS safe: fixed header on mobile so transform works consistently */
  .nav{
    position: fixed;
    left: 0; right: 0; top: 0;
  }

  /* push content under fixed header */
  body{ padding-top: 78px; }
  .hero{ padding-top: 50px; }

  .hero-grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .hero h1{ font-size: 40px; }
  .contact-grid{ grid-template-columns: 1fr; }

  /* Brand sizing on mobile */
  .brand-logo{ height: 24px; max-width: 170px; }
  .brand-sub{ font-size: 9px; letter-spacing: 0.20em; }

  /* thin strip on scroll-down */
  .nav.nav-hidden{
    transform: translateY(-46px); /* оставляем тонкую полоску */
  }

  /* hide inner content in thin strip to avoid “grey burger glimpse” */
  .nav.nav-hidden .nav-inner{
    opacity: 0;
    pointer-events: none;
  }

  /* but allow tap on strip to open menu: when hidden, show only burger area */
  .nav.nav-hidden .nav-toggle{
    display: inline-flex;
    position: absolute;
    right: 6%;
    top: 8px;
    opacity: 1;
    pointer-events: auto;
  }



  /* when menu open — always full header */
  .nav.is-open{
    transform: translateY(0) !important;
  }
  .nav.is-open .nav-inner{
    opacity: 1;
    pointer-events: auto;
  }
}




/* =========================================
   PREMIUM CARD HOVER (white + dark) — FIXED
   (Glow uses ::after so it doesn't break badges)
========================================= */

.card,
.price-card,
.hero-card{
  position: relative;
  overflow: hidden;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}

/* Glow overlay (now ::after) */
.card::after,
.price-card::after,
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      600px circle at var(--x,50%) var(--y,50%),
      rgba(25,181,176,.10),
      transparent 40%
    );

  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}

/* hover lift + glow */
.card:hover,
.price-card:hover,
.hero-card:hover{
  transform: translateY(-8px);
  box-shadow:
    0 30px 70px rgba(0,0,0,.25),
    0 0 0 1px rgba(25,181,176,.25);
}

.card:hover::after,
.price-card:hover::after,
.hero-card:hover::after{
  opacity:1;
}

/* white cards refinement */
.white-section .card:hover{
  border-color: rgba(25,181,176,.45);
}

/* dark cards refinement */
.price-card:hover,
.hero-card:hover{
  border-color: rgba(25,181,176,.45);
}

/* =========================================
   LUXURY BUTTON HOVER
========================================= */

.btn{
  position: relative;
  overflow: hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

/* lift + glow */
.btn:hover{

  transform: translateY(-2px);

  box-shadow:
    0 12px 28px rgba(0,0,0,.25),
    0 0 0 1px rgba(25,181,176,.25);
}

/* shine effect */
.btn::after{

  content:"";

  position:absolute;
  top:0;
  left:-120%;

  width:60%;
  height:100%;

  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );

  transform:skewX(-25deg);

  transition:left .6s ease;
}

/* move shine on hover */
.btn:hover::after{
  left:140%;
}

/* =========================================
   STUDIO-LEVEL FOOTER (premium)
========================================= */

/* =========================================
   FOOTER v2 — Glass + strong structure
   Paste at END of styles.css
========================================= */

.site-footer{
  padding: 70px 10% 34px;
  position: relative;
}

/* soft glow behind footer */
.site-footer::before{
  content:"";
  position:absolute;
  inset:-60px 0 -40px 0;
  background:
    radial-gradient(900px 420px at 20% 40%, rgba(25,181,176,.14), transparent 60%),
    radial-gradient(700px 360px at 80% 60%, rgba(255,255,255,.06), transparent 62%);
  pointer-events:none;
  z-index:0;
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* the glass “card” wrapper */
.footer-top{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  padding: 34px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* subtle “glass shine” */
.footer-top::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 35%, transparent 65%, rgba(255,255,255,.05));
  opacity:.55;
  pointer-events:none;
}

/* keep content above shine */
.footer-top > *{
  position: relative;
  z-index: 1;
}

/* LEFT brand */
.footer-brand{
  text-align: left;
  display: grid;
  gap: 12px;
  align-content: start;
}

/* mini logo row */
.footer-brand-head{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* square logo */
.footer-mark{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 44px;
  box-shadow: 
    0 6px 18px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08);
}

.footer-mark img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* для квадратного лого */
  display:block;
}

.footer-logo{
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 16px;
  margin: 0;
}

.footer-sub{
  margin: 2px 0 0;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}

.footer-text{
  margin: 0;
  max-width: 52ch;
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  font-size: 14px;
}

.footer-badges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.footer-pill{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}

/* RIGHT columns */
.footer-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-content: start;
  justify-items: start;
}

.footer-col{
  width: 100%;
  display: grid;
  gap: 10px;
  align-content: start;
  text-align: left; /* ключ: ничего не центрится */
}

.footer-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0 0 4px;
}

/* links */
.footer-col a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.84);
  font-weight: 650;
  line-height: 1.25;
  padding: 6px 0;
  transition: transform .2s ease, color .2s ease;
  width: fit-content;
}

.footer-col a:hover{
  color:#fff;
  transform:translateX(3px);
  text-shadow:0 0 12px rgba(25,181,176,.35);
}

/* “plain text rows” (address, schedule) */
.footer-note{
  display: block;
  padding: 6px 0;
  color: rgba(255,255,255,0.62);
  font-size: 13px;
  line-height: 1.35;
  text-align: left; /* фикс “прыжков” */
}

/* divider + bottom row */
.footer-bottom{
  margin-top: 18px;
  padding: 0 10%;
}

.footer-divider{
  max-width: 1200px;
  margin: 18px auto 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.footer-bottom-row{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.footer-copy{
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

/* CTA in footer (optional) */
.footer-cta{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.footer-cta:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(25,181,176,0.55);
}

/* Mobile */
@media (max-width: 900px){
  .site-footer{ padding: 56px 6% 28px; }

  .footer-top{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px;
  }

  .footer-cols{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-bottom{ padding: 0 6%; }

  .footer-bottom-row{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================================
   FOOTER — return premium background glow (override)
   (append override; safe)
   ========================================================= */
.site-footer{
  position: relative;
  overflow: visible;
}

/* stronger, softer glow behind footer area */
.site-footer::before{
  content:"";
  position:absolute;
  inset:-80px 0 -60px 0;
  background:
    radial-gradient(1000px 520px at 18% 35%, rgba(25,181,176,.18), transparent 62%),
    radial-gradient(820px 420px at 82% 60%, rgba(255,255,255,.08), transparent 66%),
    radial-gradient(900px 520px at 50% 110%, rgba(25,181,176,.10), transparent 60%);
  filter: blur(0.2px);
  pointer-events:none;
  z-index:0;
}

/* make the glass card pop slightly more */
.footer-top{
  position: relative;
  z-index: 1;
  box-shadow: 0 34px 110px rgba(0,0,0,.34);
}

/* more “air” between footer columns on mobile (Studio / Contact separation) */
@media (max-width: 900px){
  .footer-cols{ gap: 22px; }
  .footer-col{ gap: 12px; }
  .footer-title{ margin-top: 6px; }
}



/* =========================================================
   HERO — animated gradient background
   ========================================================= */

.hero,
.hero-section,
#hero {
  position: relative;
  overflow: hidden;
}

.hero::before,
.hero-section::before,
#hero::before {
  content: "";
  position: absolute;
  inset: -12% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 229, 255, 0.14), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(90, 130, 255, 0.12), transparent 28%),
    radial-gradient(circle at 62% 78%, rgba(0, 255, 200, 0.08), transparent 30%),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.05), transparent 24%);
  filter: blur(18px);
  animation: heroGradientFloat 18s ease-in-out infinite alternate;
  transform: translateZ(0);
}

.hero > *,
.hero-section > *,
#hero > * {
  position: relative;
  z-index: 1;
}

@keyframes heroGradientFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1.5%, -1.5%, 0) scale(1.03);
  }
  100% {
    transform: translate3d(-1.5%, 2%, 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-section::before,
  #hero::before {
    animation: none;
  }
}

/* =========================================================
   EXAMPLES SECTION
   ========================================================= */

.examples-section {
  position: relative;
  padding: 96px 0;
}

.examples-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 214, 255, 0.06), transparent 28%),
    radial-gradient(circle at 85% 75%, rgba(124, 92, 255, 0.06), transparent 26%);
  z-index: 0;
}

.examples-section .container {
  position: relative;
  z-index: 1;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.section-head .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
}

.section-head h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}

.section-head p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 17px;
  line-height: 1.75;
}

.examples-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
  align-items:stretch;
}

.example-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  backdrop-filter: blur(10px);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.example-card--featured {
  grid-column: span 1;
}

.example-preview {
  position: relative;
  min-height: 260px;
  padding: 22px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 35%);
}

.example-preview::after {
  content: "";
  position: absolute;
  inset: auto -30% -40% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.example-copy {
  padding: 22px 22px 24px;
}

.example-copy h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
}

.example-copy p {
  margin: 0;
  color: rgba(255,255,255,0.74);
  line-height: 1.75;
  font-size: 15.5px;
}

/* Featured card */
.preview-getfit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(140deg, rgba(20, 35, 50, 0.9), rgba(6, 18, 30, 0.92)),
    radial-gradient(circle at 80% 20%, rgba(0, 234, 255, 0.14), transparent 28%);
}

.preview-browser {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.preview-browser span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}

.preview-content h3 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.1;
}

.preview-content p {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.76);
  max-width: 440px;
  line-height: 1.7;
}


.preview-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(17,28,40,0.78);
  border:1px solid rgba(255,255,255,0.18);
  color:#F4F7FB;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}

.preview-badge--concept{
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.24);
  color:#FFFFFF;
}


.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-tags span{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.68);
  font-size:12px;
  font-weight:600;
  line-height:1;
  box-shadow:none;
}


/* Beauty branding concept */
.preview-beauty {
  background:
    linear-gradient(145deg, rgba(36, 42, 54, 0.92), rgba(20, 26, 38, 0.96)),
    radial-gradient(circle at 20% 20%, rgba(157, 232, 255, 0.10), transparent 32%);
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.mini-logo {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.14);
}

.mini-lines {
  flex: 1;
}

.mini-lines span {
  display: block;
  height: 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.mini-lines span:nth-child(1) { width: 72%; }
.mini-lines span:nth-child(2) { width: 52%; }
.mini-lines span:nth-child(3) { width: 38%; }

.palette-row {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.palette-row span {
  flex: 1;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
}

.palette-row span:nth-child(1) { background: #f6f0ea; }
.palette-row span:nth-child(2) { background: #d8c6b7; }
.palette-row span:nth-child(3) { background: #8ea4b8; }
.palette-row span:nth-child(4) { background: #2e3c49; }

.social-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.social-row div {
  height: 86px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
    radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 45%);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Restaurant concept */
.preview-restaurant {
  background:
    linear-gradient(150deg, rgba(23, 31, 43, 0.94), rgba(10, 16, 27, 0.96)),
    radial-gradient(circle at 75% 20%, rgba(0, 233, 255, 0.09), transparent 25%);
}

.site-wire {
  margin-top: 12px;
}

.hero-line {
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  margin-bottom: 12px;
}

.hero-line.long { width: 86%; }
.hero-line.mid { width: 68%; }
.hero-line.short { width: 42%; }

.site-box-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.site-box-row div {
  height: 110px;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
}

/* Social concept */
.preview-social {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(145deg, rgba(18, 28, 39, 0.94), rgba(10, 18, 29, 0.96)),
    radial-gradient(circle at 50% 15%, rgba(126, 229, 255, 0.10), transparent 30%);
}

.phone-mock {
  width: 170px;
  padding: 14px;
  border-radius: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.phone-head {
  width: 42%;
  height: 8px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
}

.phone-post.big {
  height: 130px;
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 42%);
  margin-bottom: 14px;
}

.phone-post-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.phone-post-row div {
  height: 70px;
  border-radius: 16px;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.09);
}

/* Responsive */
@media (max-width: 1100px) {
  .examples-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 767px) {
  .examples-section {
    padding: 72px 0;
  }

  .section-head {
    margin-bottom: 28px;
    text-align: left;
  }

  .section-head p {
    font-size: 15.5px;
    line-height: 1.7;
  }

  .examples-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .example-preview {
    min-height: 220px;
    padding: 18px;
  }

  .preview-content h3 {
    font-size: 24px;
  }

  .example-copy {
    padding: 18px 18px 20px;
  }

  .example-copy h3 {
    font-size: 20px;
  }
}

/* ===== Examples: real images ===== */

.example-preview--image {
  position: relative;
  min-height: 260px;
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}

.example-preview--image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
}

.example-card--featured .example-preview--image img {
  min-height: 340px;
}

.example-overlay {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.example-actions {
  margin-top: 18px;
}

.example-actions .btn,
.example-actions .btn-glass{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.example-actions .btn:hover,
.example-actions .btn-glass:hover{
  background:rgba(255,255,255,0.16);
  border-color:rgba(25,181,176,0.45);
  box-shadow:0 10px 28px rgba(0,0,0,.20);
  transform:translateY(-1px);
}

.btn-glass:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}





@media (max-width: 767px) {
  .example-preview--image img {
    min-height: 220px;
  }

  .example-card--featured .example-preview--image img {
    min-height: 250px;
  }

  .example-actions {
    margin-top: 16px;
  }
}
/* =========================================================
   POLISH UPDATE — services, examples, pricing, process, contact
   ========================================================= */

/* section kicker */
.section-kicker{
  display:inline-block;
  margin-bottom:12px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(11,28,45,0.10);
  background: rgba(25,181,176,0.08);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* services */
.services-section{
  position: relative;
}
.services-head{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.services-cards{
  justify-content: center;
  max-width: 1200px;
  margin: 34px auto 0;
}
.services-section .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,252,0.98));
  border: 1px solid rgba(11,28,45,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.services-section .service-card{
  min-height: 265px;
  border-radius: 18px;
}
.services-section .service-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(25,181,176,0.18));
}
.services-section .icon-badge{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(25,181,176,0.10);
}
.services-section .card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(0,0,0,.11);
}
.trust-strip{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  max-width: 1100px;
  margin: 26px auto 0;
}
.trust-chip{
  display:inline-flex;
  align-items:center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(11,28,45,0.10);
  background: #fff;
  color: rgba(11,28,45,0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

/* examples */
.examples-section .section-head{
  margin-bottom: 32px;
}

.example-preview--image{
  background: #0e1720;
}
.example-preview--image img{
  transition: transform .55s ease, filter .55s ease;
}
.example-card:hover .example-preview--image img{
  transform: scale(1.045);
  filter: saturate(1.02);
}
.example-preview--image::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(10,16,24,0.00) 35%, rgba(10,16,24,0.18) 100%);
  z-index: 1;
  pointer-events:none;
}
.example-overlay{
  z-index: 2;
}
.example-copy{
  position: relative;
  z-index: 2;
}

.example-card--featured .preview-badge{
  background:rgba(25,181,176,0.22);
  border-color:rgba(25,181,176,0.42);
}

/* pricing */
.pricing.white-section{
  text-align: center;
}
.pricing.white-section .pricing-grid{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
}
.pricing.white-section .price-card{
  background:#fff;
  border:1px solid rgba(11,28,45,0.08);
  color:var(--text-main);
  box-shadow:0 22px 50px rgba(0,0,0,.10);
}
.pricing.white-section .price-card:hover{
  transform: translateY(-8px);
  box-shadow:0 28px 60px rgba(0,0,0,.14);
}
.pricing.white-section .plan-price{
  color:var(--accent);
}
.pricing.white-section .features{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  color:var(--text-main);
  text-align:left;
}
.pricing.white-section .features li{
  position:relative;
  padding-left:18px;
  margin-bottom:12px;
  line-height:1.5;
}
.pricing.white-section .features li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(25,181,176,.12);
}
.pricing-btn{
  width:100%;
  margin-top:22px;
  min-height:50px;
  padding:0 18px;
}
.pricing.white-section .hosting{
  color:var(--text-main);
}
.pricing.white-section .hosting small{
  color:var(--text-muted);
}

/* process */
.process-section{
  position:relative;
  padding:90px 10%;
  background: linear-gradient(180deg, #162332 0%, #1b2a3b 100%);
  color:var(--white);
  overflow:hidden;
}
.process-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 30%, rgba(25,181,176,.14), transparent 28%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.05), transparent 24%);
  z-index:0;
}
.process-section > *{
  position:relative;
  z-index:1;
}
.process-head{
  max-width:760px;
  margin:0 auto 40px;
  text-align:center;
}
.process-eyebrow{
  display:inline-block;
  margin-bottom:12px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.82);
}
.process-head h2{
  margin:0 0 14px;
  font-size: clamp(28px, 4vw, 42px);
  line-height:1.1;
}
.process-sub{
  margin:0;
  color: rgba(255,255,255,.74);
  line-height:1.75;
  font-size:17px;
}
.process-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto;
}
.process-card{
  position:relative;
  min-height:100%;
  padding:26px 24px 24px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.process-card:hover{
  transform: translateY(-6px);
  border-color: rgba(25,181,176,.38);
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
.process-card:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-40px;

  width:80px;
  height:2px;

  background:linear-gradient(
    90deg,
    rgba(25,181,176,.15),
    rgba(25,181,176,.9),
    rgba(25,181,176,.15)
  );

  transform:translateY(-50%);
  border-radius:2px;

  animation:processLine 2.5s ease-in-out infinite;
}

@keyframes processLine{
  0%{ opacity:.2; transform:translateY(-50%) scaleX(.6); }
  50%{ opacity:1; transform:translateY(-50%) scaleX(1); }
  100%{ opacity:.2; transform:translateY(-50%) scaleX(.6); }
}



.process-card:not(:last-child)::before{
  content:"";
  position:absolute;
  top:50%;
  right:-6px;

  width:10px;
  height:10px;

  border-radius:50%;
  background:var(--accent);

  transform:translateY(-50%);
  box-shadow:0 0 12px rgba(25,181,176,.7);

  z-index:3;
}



.process-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  color:#b9f3ef;
  background: rgba(25,181,176,.12);
  border:1px solid rgba(25,181,176,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.process-icon svg{
  width:24px;
  height:24px;
}
.process-step{
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.56);
}
.process-card h3{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.2;
  color:var(--white);
}
.process-card p{
  margin:0 0 12px;
  color: rgba(255,255,255,.80);
  line-height:1.7;
  font-size:15px;
}
.process-card p:last-child{
  margin-bottom:0;
}

/* contact */
.white-section.contact-section{
  color: var(--text-main);
}
.white-section.contact-section .contact-sub{
  color: var(--text-muted);
}
.white-section.contact-section .contact-box{
  background:#fff;
  border:1px solid rgba(11,28,45,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}
.white-section.contact-section .form{
  background:#fff;
  border:1px solid rgba(11,28,45,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}
.white-section.contact-section .contact-line{
  align-items:flex-start;
}
.white-section.contact-section .contact-line b{
  color: var(--text-main);
}
.white-section.contact-section .contact-line span:last-child{
  color: var(--text-muted);
}
.contact-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.contact-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color: var(--accent);
  background: rgba(25,181,176,.10);
  border:1px solid rgba(25,181,176,.16);
  flex: 0 0 34px;
}
.contact-icon svg{
  width:18px;
  height:18px;
}

/* responsive */
@media (max-width: 1100px){
  .process-grid{
    grid-template-columns:1fr;
  }
  .process-card:not(:last-child)::after,
  .process-card:not(:last-child)::before{
    display:none;
  }
}
@media (max-width: 900px){
  .services-cards{
    gap:16px;
  }
}
@media (max-width: 767px){
  .section-divider{
    height: 54px;
  }
  .process-section{
    padding:72px 6%;
  }
  .process-head{
    text-align:left;
    margin-bottom:28px;
  }
  .process-sub{
    font-size:15.5px;
    line-height:1.7;
  }
  .process-card{
    padding:22px 18px 20px;
  }
  .process-card h3{
    font-size:21px;
  }
  .trust-strip{
    gap:8px;
  }
  .trust-chip{
    font-size: 10px;
    padding: 0 12px;
    min-height: 34px;
  }
}


/* =========================================================
   POLISH v2 — pricing / motion strip / process / contact
   ========================================================= */

/* pricing refinements */
.pricing.white-section{
  padding-bottom: 34px;
}
.pricing.white-section .price-card{
  padding-top: 38px;
}
.pricing.white-section .price-card.popular{
  padding-top: 52px;
}
.pricing.white-section .price-card.popular::before{
  top: 14px;
  right: 18px;
}
.pricing.white-section .price-card h3{
  margin-bottom: 14px;
}
.pricing.white-section .hosting{
  margin-top: 34px;
}

/* process: cleaner transition + staggered reveal */
.process-section{
  padding-top: 92px;
}
.process-head{
  margin-bottom: 34px;
}
.process-grid{
  position: relative;
  margin-top: 8px;
}
.process-card::before,
.process-card::after{
  display:none !important;
  content:none !important;
}
.process-card{
  z-index:1;
}
.process-grid-reveal{
  opacity: 0;
  transform: translateY(54px);
  transition: opacity .9s ease, transform .9s ease;
}
.process-grid-reveal.visible{
  opacity: 1;
  transform: translateY(0);
}
.process-grid-reveal .process-card{
  transition: transform .65s ease, opacity .65s ease, box-shadow .3s ease, border-color .3s ease;
}
.process-grid-reveal:not(.visible) .process-card{
  opacity: 0;
  transform: translateY(36px);
}
.process-grid-reveal.visible .process-card:nth-child(1){ transition-delay: .05s; }
.process-grid-reveal.visible .process-card:nth-child(2){ transition-delay: .14s; }
.process-grid-reveal.visible .process-card:nth-child(3){ transition-delay: .23s; }

/* contact form + icons */
.white-section.contact-section .form{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,250,0.96));
}
.white-section.contact-section .form input,
.white-section.contact-section .form textarea{
  background: #ffffff;
  color: var(--text-main);
  border: 1px solid rgba(11,28,45,0.14);
}
.white-section.contact-section .form input::placeholder,
.white-section.contact-section .form textarea::placeholder{
  color: rgba(11,28,45,0.42);
}
.white-section.contact-section .contact-icon{
  background: var(--accent);
  color: #ffffff;
  border-color: rgba(25,181,176,.42);
  box-shadow: 0 8px 20px rgba(25,181,176,.18);
}

/* services chips rename style slightly more premium */
.trust-chip{
  background: linear-gradient(180deg, #ffffff, #f8fbfb);
}




/* =========================================================
   FINAL TWEAKS — process reveal, contact labels, desktop header
   ========================================================= */
.white-section.contact-section .form label{
  display:block;
  font-size:13px;
  font-weight:600;
  color: var(--text-main);
  margin-bottom: 14px;
}
.white-section.contact-section .form input,
.white-section.contact-section .form textarea{
  background:#ffffff;
  color: var(--text-main);
}
.white-section.contact-section .form input::placeholder,
.white-section.contact-section .form textarea::placeholder{
  color: rgba(11,28,45,.42);
}
.white-section.contact-section .form textarea{
  min-height: 116px;
  resize: vertical;
}

@media (min-width: 901px){
  .nav.nav-hidden{
    transform: translateY(-100%);
  }
}

@media (max-width: 767px){
  .process-section{
    padding-top: 76px;
  }
  .process-head{
    margin-bottom: 24px;
  }
}


/* =========================================================
   MARCH 2026 UPDATE — header / process / contact mini-map
   ========================================================= */

/* process: two-stage reveal */
.process-head{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.process-head.visible{
  opacity: 1;
  transform: translateY(0);
}
.process-grid-reveal{
  opacity: 0;
  transform: translateY(52px);
  transition: opacity .9s ease, transform .9s ease;
}
.process-grid-reveal.visible{
  opacity: 1;
  transform: translateY(0);
}
.process-grid-reveal .process-card{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .65s ease, transform .65s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.process-grid-reveal.visible .process-card{
  opacity: 1;
  transform: translateY(0);
}
.process-grid-reveal.visible .process-card:nth-child(1){ transition-delay: .06s; }
.process-grid-reveal.visible .process-card:nth-child(2){ transition-delay: .16s; }
.process-grid-reveal.visible .process-card:nth-child(3){ transition-delay: .26s; }

/* elegant connectors */
.process-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.process-card{
  position: relative;
  overflow: hidden;
}
@media (min-width: 1101px){
  .process-card:not(:last-child)::after{
    content: "" !important;
    position: absolute;
    top: 78px;
    right: -34px;
    width: 40px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(25,181,176,.18) 0%, rgba(25,181,176,.65) 50%, rgba(172,232,226,.18) 100%);
    box-shadow: 0 0 12px rgba(25,181,176,.22);
    pointer-events: none;
    display: block !important;
  }
  .process-card:not(:last-child)::before{
    content: "" !important;
    position: absolute;
    top: 73px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #ACE8E2 0%, #19B5B0 55%, rgba(25,181,176,.15) 100%);
    box-shadow: 0 0 16px rgba(25,181,176,.35);
    pointer-events: none;
    z-index: 2;
    display: block !important;
  }
}
@media (max-width: 1100px){
  .process-grid{
    grid-template-columns: 1fr;
  }
  .process-card::before,
  .process-card::after{
    display: none !important;
  }
}



/* contact links */
.contact-value{
  color: var(--text-muted);
  text-align: right;
}
.contact-link{
  text-decoration: none;
  transition: color .22s ease, opacity .22s ease;
}
.contact-link:hover{
  color: var(--accent);
}

/* mini map card */
.mini-map-card{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  text-decoration: none;
  background: linear-gradient(180deg, #ffffff, #f7fbfb);
  border: 1px solid rgba(11,28,45,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.mini-map-card:hover{
  transform: translateY(-4px);
  border-color: rgba(25,181,176,.28);
  box-shadow: 0 24px 48px rgba(0,0,0,.10);
}
.mini-map-media{
  position: relative;
  min-height: 100px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 22%, rgba(25,181,176,.18), transparent 24%),
    linear-gradient(180deg, #eef7f6 0%, #e8f1f3 100%);
  border: 1px solid rgba(25,181,176,.12);
}
.mini-map-grid{
  position:absolute;
  inset:0;

  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

  background-size:40px 40px;

  animation:mapMove 20s linear infinite;
}

@keyframes mapMove{
  from{
    transform:translateX(0) translateY(0);
  }
  to{
    transform:translateX(-40px) translateY(-40px);
  }
}


.mini-map-road{
  position: absolute;
  background: rgba(255,255,255,.95);
  box-shadow: 0 1px 0 rgba(11,28,45,.04), 0 0 0 1px rgba(11,28,45,.03);
  border-radius: 999px;
}
.mini-map-road--one{
  width: 120px;
  height: 14px;
  left: 6px;
  top: 44px;
  transform: rotate(-12deg);
}
.mini-map-road--two{
  width: 14px;
  height: 88px;
  left: 56px;
  top: 6px;
  transform: rotate(9deg);
}
.mini-map-road--three{
  width: 68px;
  height: 12px;
  right: 4px;
  bottom: 20px;
  transform: rotate(26deg);
}
.mini-map-pin{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -72%);
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: linear-gradient(180deg, #19B5B0, #118e8a);
  box-shadow: 0 10px 22px rgba(25,181,176,.28);
  z-index: 2;
}
.mini-map-pin::after{
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  left: 6px;
  top: 6px;
}
.mini-map-copy{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mini-map-kicker{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.mini-map-copy strong{
  color: var(--text-main);
  font-size: 17px;
  line-height: 1.25;
}
.mini-map-copy span:last-child{
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 14px;
}
.mini-map-arrow{
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  align-self: start;
  margin-top: 4px;
}

@media (max-width: 767px){
  .mini-map-card{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .mini-map-media{
    min-height: 120px;
  }
  .mini-map-arrow{
    display: none;
  }
}

/* =========================================================
   FINAL HEADER / MOBILE MENU / PROCESS MOBILE FIX
   ========================================================= */

/* Single source of truth for header */
.nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform .22s ease, background .18s ease;
  will-change: transform;
}

.nav-inner{
  position: relative;
  z-index: 2;
}

.nav-toggle{
  position: relative;
  z-index: 5;
  pointer-events: auto;
  touch-action: manipulation;
}

.mobile-menu{
  display: none;
}

.mobile-menu.is-open{
  display: block;
}

@media (min-width: 901px){
  .nav.nav-hidden{
    transform: translateY(-100%);
  }
}

@media (max-width: 900px){
  .nav{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
  }

  body{
    padding-top: 78px;
  }

  .menu{
    display: none;
  }

  .nav-toggle{
    display: inline-flex;
  }

  .nav.nav-hidden{
    transform: translateY(-46px);
  }

  .nav.is-open{
    transform: translateY(0) !important;
  }

  .nav.nav-hidden .nav-inner{
    opacity: 1;
    pointer-events: auto;
  }

.mobile-menu{
  display: none;
  flex-direction: column;
}

.mobile-menu.is-open{
  display: flex;
}


}

/* Process: desktop connectors only */
@media (min-width: 1101px){
  .process-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    align-items: stretch;
  }

  .process-card{
    position: relative;
    overflow: visible;
  }

  .process-card{
  opacity: 0;
  transform: translateY(26px);
  transition: 
  opacity .7s cubic-bezier(.2,.65,.3,1),
  transform .7s cubic-bezier(.2,.65,.3,1);
}

.process-grid-reveal.visible .process-card{
  opacity: 1;
  transform: translateY(0);
}

.process-grid-reveal.visible .process-card:nth-child(1){
  transition-delay: .05s;
}

.process-grid-reveal.visible .process-card:nth-child(2){
  transition-delay: .18s;
}

.process-grid-reveal.visible .process-card:nth-child(3){
  transition-delay: .32s;
}

  .process-grid .process-card:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -34px;
    width: 34px;
    height: 2px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(25,181,176,.12) 0%, rgba(25,181,176,.95) 50%, rgba(25,181,176,.12) 100%);
    box-shadow: 0 0 14px rgba(25,181,176,.28);
    animation: processConnectorPulse 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
  }

  .process-grid .process-card:not(:last-child)::before{
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, #ACE8E2 0%, #19B5B0 58%, rgba(25,181,176,0) 100%);
    box-shadow: 0 0 18px rgba(25,181,176,.4);
    pointer-events: none;
    z-index: 3;
  }

  @keyframes processConnectorPulse{
    0%,100%{ opacity:.45; }
    50%{ opacity:1; }
  }
}

/* Process: mobile = stacked cards, no connectors */
@media (max-width: 900px){
  .process-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .process-card::before,
  .process-card::after{
    display: none !important;
    content: none !important;
  }
}


/* =========================================
   FINAL DESKTOP MENU SHINE
========================================= */
.menu::before,
.menu::after,
.menu a::before{
  content: none !important;
}

.menu a{
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  margin-left: 20px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.86);
  background: transparent !important;
  border: 1px solid transparent !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateZ(0);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease !important;
}

.menu a span{
  position: relative;
  z-index: 2;
}

.menu a::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  left: -140% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.30), transparent) !important;
  transform: skewX(-25deg) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: left .6s ease, opacity .2s ease !important;
}

.menu a:hover{
  color: var(--white) !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
  transform: translateY(-1px) !important;
}

.menu a:hover::after{
  opacity: 1 !important;
  left: 140% !important;
}

.menu a.active::after{
  opacity: 0 !important;
}



@media (min-width: 901px){
  .nav{
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
  }

  body{
    padding-top: 78px;
  }

  .nav.nav-hidden{
    transform: translateY(-100%) !important;
  }
}


.pricing-note{
  margin-top:14px;
  font-size:14px;
  color:rgba(0,0,0,0.65);
  font-weight:500;
}

.price-note{
  font-size:13px;
  color:rgba(0,0,0,0.55);
  margin-bottom:14px;
}


.footer-trust{
  margin-top:10px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
font-size:14px;
opacity:.8;
letter-spacing:.3px;
margin:14px 0 6px;
}

.trust-dot{
width:6px;
height:6px;
border-radius:50%;
background:#2bb8b3;
box-shadow:0 0 8px rgba(43,184,179,.6);
}


.hero-wave{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0.25;
 filter: drop-shadow(0 -2px 4px rgba(190, 245, 242, 0.22));


}

.hero-wave-wrap,
.hero-wave {
  pointer-events: none;
}



@media (max-width: 768px){
  .hero-wave{
    width: 100%;
    left: 0;
    bottom: 0;
    opacity: 0.32;
    animation: none;
    transform: scaleX(1.8) scaleY(1.9);
    transform-origin: bottom left;
  }
}

.hero {
background:
radial-gradient(
circle at 70% 40%,
rgba(25,181,176,0.15),
transparent 60%
),
#1C2733;
}