/* AVITECH — style.css */
/* ============================================================
   AVITECH — Design tokens
   ============================================================ */
:root{
  --bg:            #F8FAFC;
  --bg-soft:       #FFFFFF;
  --bg-tint:       #EEF4FA;
  --navy:          #0F172A;
  --navy-deep:     #0A4D8C;
  --blue:          #0077C8;
  --blue-bright:   #0082C8;
  --blue-sky:      #29ABE2;
  --gold:          #F59E0B;
  --gold-soft:     #FFB800;
  --orange:        #F2994A;
  --text:          #1E293B;
  --text-muted:    #64748B;
  --line:          #E2E8F0;

  --grad-blue:  linear-gradient(135deg,#0A4D8C 0%,#0082C8 55%,#29ABE2 100%);
  --grad-energy:linear-gradient(135deg,#F59E0B 0%,#F2994A 50%,#FFB800 100%);
  --grad-mix:   linear-gradient(120deg,#0A4D8C 0%,#0082C8 40%,#F59E0B 100%);

  --shadow-text: 0px 2px 4px rgba(15,23,42,.06);
  --shadow-sm:   0 1px 2px rgba(15,23,42,.05), 0 2px 6px rgba(15,23,42,.04);
  --shadow-md:   0 4px 14px rgba(15,23,42,.07), 0 10px 30px rgba(10,77,140,.06);
  --shadow-lg:   0 10px 30px rgba(15,23,42,.09), 0 24px 60px rgba(10,77,140,.10);
  --shadow-glow: 0 12px 34px rgba(0,119,200,.25);

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;
  --header-h: 76px;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.65; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ color:var(--navy); line-height:1.15; margin:0 0 .5em; letter-spacing:-.03em; text-shadow:var(--shadow-text); }
p{ margin:0 0 1em; }
::selection{ background:rgba(0,119,200,.16); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }
.section{ padding:72px 0; position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); background:rgba(0,119,200,.08);
  border:1px solid rgba(0,119,200,.16); padding:7px 14px; border-radius:999px; margin-bottom:18px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--grad-energy); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.h2{ font-size:clamp(27px,4.6vw,44px); font-weight:800; }
.lead{ color:var(--text-muted); font-size:clamp(15px,2.1vw,18px); max-width:62ch; }
.grad-text{ background:var(--grad-blue); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.grad-gold{ background:var(--grad-energy); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.section-head{ margin-bottom:44px; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--grad-blue);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-md); border:0; cursor:pointer;
  font-weight:700; font-size:15.5px; letter-spacing:-.01em; color:#fff;
  background:var(--btn-bg); background-size:180% 180%;
  box-shadow:var(--shadow-glow); position:relative; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-position .6s var(--ease);
  will-change:transform;
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(0,119,200,.32); background-position:100% 0; }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(-1px); }
.btn--gold{ --btn-bg:var(--grad-energy); box-shadow:0 12px 34px rgba(245,158,11,.32); }
.btn--gold:hover{ box-shadow:0 18px 42px rgba(245,158,11,.4); }
.btn--wa{ --btn-bg:linear-gradient(135deg,#25D366 0%,#12a44f 100%); box-shadow:0 12px 30px rgba(37,211,102,.32); }
.btn--ghost{
  --btn-bg:transparent; color:var(--navy-deep); border:1.5px solid rgba(10,77,140,.22);
  background:rgba(255,255,255,.7); backdrop-filter:blur(8px); box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{ border-color:var(--blue); box-shadow:var(--shadow-md); }
.btn--sm{ padding:11px 18px; font-size:14px; border-radius:12px; }
.btn--block{ width:100%; }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(248,250,252,.72); backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck{ background:rgba(255,255,255,.9); border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(15,23,42,.05); }
.header__inner{ display:flex; align-items:center; gap:20px; width:100%; }
.logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.logo svg,
.logo img{ height:42px; width:42px; flex-shrink:0; }
.logo__text{ display:flex; flex-direction:column; line-height:1; }
.logo__name{ font-size:23px; font-weight:900; letter-spacing:-.02em; color:var(--navy-deep); }
.logo__name span{ color:var(--blue-sky); }
.logo__tag{ font-size:8.2px; font-weight:700; letter-spacing:.16em; color:var(--text-muted); margin-top:4px; white-space:nowrap; }

.nav{ display:none; margin-inline-start:auto; gap:4px; }
.nav a{
  position:relative; padding:9px 14px; border-radius:10px; font-size:15px; font-weight:600; color:var(--text);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:5px; height:2px; border-radius:2px;
  background:var(--grad-energy); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--navy-deep); background:rgba(0,119,200,.06); }
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); }
.header__cta{ display:none; align-items:center; gap:14px; margin-inline-start:auto; }
.header__phone{ font-weight:800; font-size:15.5px; color:var(--navy-deep); white-space:nowrap; display:flex; align-items:center; gap:7px; }
.header__phone svg{ width:17px; height:17px; }

.burger{
  margin-inline-start:auto; width:44px; height:44px; display:grid; place-items:center; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:12px; cursor:pointer; box-shadow:var(--shadow-sm);
}
.burger i{ display:block; width:19px; height:2px; border-radius:2px; background:var(--navy-deep); transition:transform .3s var(--ease), opacity .25s; }
.burger i+i{ margin-top:4.5px; }
.burger.is-open i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px); border-bottom:1px solid var(--line);
  padding:14px 20px 26px; display:grid; gap:4px;
  transform:translateY(-115%); transition:transform .45s var(--ease); box-shadow:var(--shadow-lg);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ padding:13px 12px; border-radius:12px; font-weight:600; font-size:16.5px; border-bottom:1px solid var(--line); }
.mobile-menu a:last-of-type{ border-bottom:0; }
.mobile-menu .btn{ margin-top:12px; }

/* ---------- Floating WhatsApp ---------- */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:95;
  display:flex; align-items:center; gap:0; overflow:hidden;
  height:58px; padding:0 16px; border-radius:999px; color:#fff; font-weight:700; white-space:nowrap;
  background:linear-gradient(135deg,#25D366,#12a44f); box-shadow:0 10px 30px rgba(18,164,79,.4);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), gap .4s var(--ease);
  will-change:transform;
}
.fab svg{ width:27px; height:27px; flex-shrink:0; }
.fab span{ max-width:0; opacity:0; transition:max-width .45s var(--ease), opacity .3s var(--ease); overflow:hidden; }
.fab:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 40px rgba(18,164,79,.5); gap:10px; }
.fab:hover span{ max-width:190px; opacity:1; }
.fab::before{
  content:''; position:absolute; inset:0; border-radius:999px; border:2px solid rgba(37,211,102,.55);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.8 } 70%{ transform:scale(1.35); opacity:0 } 100%{ opacity:0 } }

/* ---------- Hero ---------- */
.hero{
  position:relative; padding-top:calc(var(--header-h) + 44px); padding-bottom:66px;
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(41,171,226,.16), transparent 62%),
    radial-gradient(760px 430px at 6% 8%, rgba(245,158,11,.11), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, var(--bg) 100%);
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.9; }
.hero__grid{ display:grid; gap:44px; align-items:center; }
.hero h1{ font-size:clamp(31px,6.2vw,58px); font-weight:900; letter-spacing:-.035em; margin-bottom:20px; }
.hero__sub{ font-size:clamp(15.5px,2.3vw,19px); color:var(--text-muted); max-width:56ch; margin-bottom:30px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:38px; }
.hero__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:560px; }
.stat{
  background:rgba(255,255,255,.72); border:1px solid rgba(226,232,240,.9); backdrop-filter:blur(10px);
  border-radius:var(--r-md); padding:15px 14px; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat b{ display:block; font-size:clamp(21px,3.4vw,29px); font-weight:900; letter-spacing:-.04em; line-height:1.1; }
.stat small{ font-size:12.2px; color:var(--text-muted); font-weight:600; line-height:1.35; display:block; margin-top:5px; }

/* Hero visual card */
.hero__visual{ position:relative; }
.power-card{
  position:relative; border-radius:var(--r-xl); padding:26px; overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(238,244,250,.86));
  border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-lg); backdrop-filter:blur(14px);
}
.power-card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px;
  background:var(--grad-mix); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none;
}
.power-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.power-card__title{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.live-dot{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:#16A34A; }
.live-dot i{ width:8px; height:8px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:blip 2s infinite; }
@keyframes blip{ 0%{ box-shadow:0 0 0 0 rgba(22,163,74,.5) } 70%{ box-shadow:0 0 0 9px rgba(22,163,74,0) } 100%{ box-shadow:0 0 0 0 rgba(22,163,74,0) } }
#wave-canvas{ width:100%; height:132px; border-radius:var(--r-md); background:rgba(255,255,255,.6); border:1px solid var(--line); }
.power-card__metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.metric{ text-align:center; padding:11px 6px; border-radius:12px; background:rgba(255,255,255,.75); border:1px solid var(--line); }
.metric b{ display:block; font-size:18px; font-weight:900; color:var(--navy-deep); letter-spacing:-.03em; }
.metric small{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); will-change:transform,opacity; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ---------- Marquee (trust bar) ---------- */
.trustbar{ border-block:1px solid var(--line); background:#fff; padding:18px 0; overflow:hidden; }
.marquee{ display:flex; gap:56px; width:max-content; animation:slide 32s linear infinite; }
.trustbar:hover .marquee{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%) } }
.marquee span{ font-size:15px; font-weight:800; letter-spacing:.02em; color:var(--text-muted); display:flex; align-items:center; gap:10px; white-space:nowrap; }
.marquee span::before{ content:''; width:7px; height:7px; border-radius:2px; background:var(--grad-energy); transform:rotate(45deg); }

/* ---------- Brand cards ---------- */
.brands{ background:linear-gradient(180deg,var(--bg) 0%,#fff 100%); }
.grid{ display:grid; gap:20px; }
.brand-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px 24px; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  will-change:transform;
}
.brand-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad-blue);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.brand-card::after{
  content:''; position:absolute; width:230px; height:230px; right:-90px; top:-90px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,119,200,.10),transparent 68%); opacity:0; transition:opacity .45s var(--ease);
}
.brand-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(0,119,200,.28); }
.brand-card:hover::before{ transform:scaleX(1); }
.brand-card:hover::after{ opacity:1; }
.brand-card--gold::before{ background:var(--grad-energy); }
.brand-card__logo{
  height:52px; display:flex; align-items:center; margin-bottom:14px;
  font-size:25px; font-weight:900; letter-spacing:-.045em; color:var(--navy-deep);
}
.brand-card__logo em{ font-style:normal; color:var(--gold); }
.brand-card__country{
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:12px; display:flex; align-items:center; gap:7px;
}
.brand-card p{ font-size:14.6px; color:var(--text-muted); margin-bottom:16px; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{
  font-size:12.2px; font-weight:700; padding:6px 11px; border-radius:8px;
  background:rgba(0,119,200,.07); color:var(--blue); border:1px solid rgba(0,119,200,.14);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.brand-card:hover .tag{ background:rgba(0,119,200,.12); }
.tag--gold{ background:rgba(245,158,11,.09); color:#B45309; border-color:rgba(245,158,11,.22); }
.brand-card:hover .tag--gold{ background:rgba(245,158,11,.16); }

/* ---------- Services ---------- */
.services{ background:#fff; }
.svc{
  position:relative; background:linear-gradient(160deg,#fff,#FBFDFF);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px;
  box-shadow:var(--shadow-sm); overflow:hidden; height:100%;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  will-change:transform;
}
.svc::after{
  content:''; position:absolute; inset:auto -40% -60% -40%; height:200px; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,119,200,.10),transparent 70%);
  transform:translateY(40px); opacity:0; transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.svc:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(0,119,200,.26); }
.svc:hover::after{ transform:translateY(0); opacity:1; }
.svc__icon{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--grad-blue); box-shadow:0 8px 22px rgba(0,119,200,.28); position:relative;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.svc:hover .svc__icon{ transform:translateY(-3px) rotate(-5deg) scale(1.06); }
.svc__icon svg{ width:27px; height:27px; stroke:#fff; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.svc--gold .svc__icon{ background:var(--grad-energy); box-shadow:0 8px 22px rgba(245,158,11,.3); }
.svc h3{ font-size:19.5px; font-weight:800; margin-bottom:9px; }
.svc p{ font-size:14.6px; color:var(--text-muted); margin-bottom:14px; }
.svc ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.svc li{ position:relative; padding-left:24px; font-size:14px; color:var(--text); font-weight:500; }
.svc li::before{
  content:''; position:absolute; left:0; top:7px; width:13px; height:13px; border-radius:4px;
  background:var(--grad-energy); opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Calculator + Form ---------- */
.contact{ background:linear-gradient(180deg,#fff 0%,var(--bg-tint) 100%); }
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:28px 24px; box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.panel--calc::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad-energy);
}
.panel--form::before{
  content:''; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad-blue);
}
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.4px; font-weight:700; color:var(--navy); margin-bottom:7px; }
.field label span{ color:var(--text-muted); font-weight:500; }
.input, select.input, textarea.input{
  width:100%; padding:13px 15px; border-radius:12px; border:1.5px solid var(--line);
  background:#fff; font-size:15.4px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  -webkit-appearance:none; appearance:none;
}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:17px; padding-right:40px;
}
.input:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,119,200,.12); }
textarea.input{ resize:vertical; min-height:96px; }
.field-row{ display:grid; gap:16px; }
.range-wrap{ display:flex; align-items:center; gap:14px; }
input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:99px; background:var(--line); outline:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%; cursor:pointer;
  background:var(--grad-energy); border:3px solid #fff; box-shadow:0 3px 10px rgba(245,158,11,.45);
  transition:transform .2s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.15); }
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; cursor:pointer; border:3px solid #fff;
  background:#F59E0B; box-shadow:0 3px 10px rgba(245,158,11,.45);
}
.range-val{ min-width:82px; text-align:right; font-weight:900; font-size:17px; color:var(--navy-deep); letter-spacing:-.02em; }
.calc-result{
  margin-top:20px; border-radius:var(--r-md); padding:20px; color:#fff; position:relative; overflow:hidden;
  background:var(--grad-blue); box-shadow:var(--shadow-glow);
}
.calc-result::after{
  content:''; position:absolute; width:200px; height:200px; right:-60px; bottom:-90px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.4),transparent 65%);
}
.calc-result h4{ color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.85; margin-bottom:6px; text-shadow:none; font-weight:700; }
.calc-result .big{ font-size:clamp(30px,6vw,42px); font-weight:900; letter-spacing:-.04em; line-height:1.05; }
.calc-result .big em{ font-style:normal; font-size:.45em; opacity:.8; font-weight:700; margin-left:4px; }
.calc-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; position:relative; }
.calc-meta div{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); border-radius:11px; padding:10px 12px; }
.calc-meta b{ display:block; font-size:16.5px; font-weight:800; }
.calc-meta small{ font-size:11px; opacity:.82; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.calc-note{ font-size:12.6px; color:var(--text-muted); margin-top:12px; }
.form-note{ font-size:12.4px; color:var(--text-muted); margin-top:12px; }
.form-note a{ color:var(--blue); text-decoration:underline; }
.form-msg{
  display:none; margin-top:14px; padding:13px 15px; border-radius:12px; font-size:14.4px; font-weight:600;
  background:rgba(22,163,74,.09); border:1px solid rgba(22,163,74,.25); color:#15803D;
}
.form-msg.is-visible{ display:block; }
.contact-info{ display:grid; gap:12px; margin-top:22px; }
.ci{
  display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:14px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ci:hover{ transform:translateX(4px); box-shadow:var(--shadow-md); }
.ci__ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--grad-blue); flex-shrink:0; }
.ci__ic svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ci small{ display:block; font-size:11.6px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.ci b{ font-size:16px; font-weight:800; color:var(--navy-deep); letter-spacing:-.02em; }

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:#CBD5E1; padding:56px 0 26px; position:relative; overflow:hidden; }
.footer::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-mix);
}
.footer h4{ color:#fff; font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; text-shadow:none; }
.footer a{ color:#CBD5E1; transition:color .25s var(--ease), transform .25s var(--ease); display:inline-block; }
.footer a:hover{ color:var(--gold-soft); }
.footer__grid{ display:grid; gap:34px; }
.footer__brand .logo__name{ color:#fff; }
.footer__brand .logo__name span{ color:var(--blue-sky); }
.footer__brand .logo__tag{ color:#94A3B8; }
.footer__desc{ font-size:14.2px; color:#94A3B8; margin-top:16px; max-width:44ch; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:14.6px; }
.footer__seo{
  margin-top:38px; padding-top:24px; border-top:1px solid rgba(203,213,225,.14);
  font-size:12.6px; line-height:1.75; color:#7C8CA5;
}
.footer__bottom{
  margin-top:20px; padding-top:18px; border-top:1px solid rgba(203,213,225,.14);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.8px; color:#7C8CA5;
}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .section{ padding:88px 0; }
  .field-row{ grid-template-columns:1fr 1fr; }
  .grid--2{ grid-template-columns:repeat(2,1fr); }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  :root{ --header-h:84px; }
  .container{ padding-inline:32px; }
  .section{ padding:104px 0; }
  .nav{ display:flex; }
  .burger{ display:none; }
  .header__cta{ display:flex; margin-inline-start:0; }
  .hero__grid{ grid-template-columns:1.05fr .95fr; gap:52px; }
  .grid--4{ grid-template-columns:repeat(4,1fr); }
  .grid--services{ grid-template-columns:repeat(2,1fr); }
  .contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
  .footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1.1fr; }
  .panel{ padding:34px 32px; }
  .logo svg,
  .logo img{ height:48px; width:48px; }
  .logo__name{ font-size:26px; }
  .logo__tag{ font-size:9px; }
}
@media (min-width:1120px){
  .grid--services{ grid-template-columns:repeat(4,1fr); }
}