:root{
  --blue:#0b4a63;
  --dark:#052b3c;
  --cyan:#55d7ff;
  --ice:#eaf9ff;
  --white:#ffffff;
  --muted:#617680;
  --shadow:0 25px 80px rgba(3,42,60,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--dark);
  background:
    radial-gradient(circle at 10% 0%, rgba(85,215,255,.40), transparent 32rem),
    radial-gradient(circle at 90% 20%, rgba(210,246,255,.95), transparent 28rem),
    linear-gradient(180deg,#f9fdff 0%,#ecf9fe 48%,#ffffff 100%);
  overflow-x:hidden;
}

.cold-bg{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.cold-bg span{
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  background:rgba(11,74,99,.14);
  animation:fall 16s linear infinite;
}
.cold-bg span:nth-child(1){left:8%;animation-delay:0s}
.cold-bg span:nth-child(2){left:27%;animation-delay:3s;width:7px;height:7px}
.cold-bg span:nth-child(3){left:52%;animation-delay:6s}
.cold-bg span:nth-child(4){left:76%;animation-delay:1s;width:8px;height:8px}
.cold-bg span:nth-child(5){left:91%;animation-delay:8s}
@keyframes fall{from{top:-8%;transform:translateX(0)}to{top:110%;transform:translateX(80px)}}

.header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 6vw;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(11,74,99,.09);
}
.logo img{width:164px;display:block;mix-blend-mode:multiply}
nav{display:flex;gap:20px;flex-wrap:wrap}
nav a{color:var(--blue);text-decoration:none;font-weight:800;font-size:14px}
nav a:hover{color:#0297ca}

.hero{
  min-height:88vh;
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:45px;align-items:center;
  padding:74px 6vw 60px;
}
.tag{
  margin:0 0 13px;
  color:#0297ca;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:13px;
}
h1,h2,h3{letter-spacing:-.045em}
h1{margin:0;color:var(--blue);font-size:clamp(42px,6vw,78px);line-height:.96}
h2{margin:0;font-size:clamp(32px,4vw,55px);line-height:1.04}
h3{margin:0 0 12px;font-size:24px}
.subtitle{
  max-width:760px;
  margin:28px 0;
  color:var(--muted);
  font-size:20px;
  line-height:1.65;
}
.actions{display:flex;gap:13px;flex-wrap:wrap}
.actions.center{justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 22px;border-radius:999px;
  text-decoration:none;font-weight:900;border:1px solid transparent;
}
.btn.primary{background:linear-gradient(135deg,var(--blue),#079bd0);color:white;box-shadow:0 14px 35px rgba(11,74,99,.25)}
.btn.light{background:white;color:var(--blue);border-color:rgba(11,74,99,.14)}
.btn.outline{background:rgba(255,255,255,.45);color:var(--blue);border-color:rgba(11,74,99,.18)}

.freezer{
  min-height:440px;
  border-radius:44px;
  background:
    radial-gradient(circle at top,rgba(255,255,255,.98),rgba(228,249,255,.78) 50%,rgba(205,242,255,.5)),
    linear-gradient(140deg,rgba(255,255,255,.85),rgba(85,215,255,.22));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.freezer:after{
  content:"";
  position:absolute;inset:-25%;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.95) 50%,transparent 64%);
  animation:shine 5s ease-in-out infinite;
}
@keyframes shine{0%,100%{transform:translateX(-35%) rotate(8deg)}50%{transform:translateX(35%) rotate(8deg)}}
.thermo{
  position:absolute;left:40px;bottom:42px;z-index:2;
}
.thermo strong{display:block;color:var(--blue);font-size:105px;line-height:.9;letter-spacing:-.08em}
.thermo span{color:var(--muted);font-size:21px;font-weight:700}
.ice{
  position:absolute;z-index:2;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(85,215,255,.38));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 48px rgba(11,74,99,.14);
}
.ice-1{width:130px;height:130px;right:48px;top:45px;animation:float 5s ease-in-out infinite}
.ice-2{width:88px;height:88px;left:54px;top:140px;animation:float 6.5s ease-in-out infinite reverse}
.ice-3{width:60px;height:60px;right:155px;bottom:110px;animation:float 5.8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-22px) rotate(-6deg)}}
.mist{
  position:absolute;inset:auto -20% 0 -20%;height:120px;z-index:1;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.85),transparent 70%);
  filter:blur(8px);animation:mist 5s ease-in-out infinite;
}
@keyframes mist{0%,100%{transform:translateX(-20px)}50%{transform:translateX(20px)}}

.about,.section,.work{position:relative;z-index:2;padding:82px 6vw}
.about{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
.about-card,.numbers,.service,.contact-card,.quote{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(11,74,99,.09);
  border-radius:32px;
  box-shadow:0 18px 55px rgba(3,42,60,.08);
}
.about-card{padding:44px}
.about-card p,.service p,.contact-card p,.quote p{color:var(--muted);font-size:17px;line-height:1.65}
.numbers{padding:28px;display:grid;gap:15px}
.numbers div{
  padding:24px;border-radius:24px;background:rgba(234,249,255,.75);
}
.numbers strong{display:block;color:#0297ca;font-size:34px}
.numbers span{display:block;color:var(--blue);font-weight:800;margin-top:6px}

.section-head{max-width:900px;margin-bottom:36px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service{padding:30px}
.service span{
  display:grid;place-items:center;width:58px;height:58px;
  border-radius:19px;background:var(--ice);color:var(--blue);
  font-size:30px;margin-bottom:20px;
}

.work-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.work-list div{
  padding:24px;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(232,249,255,.75));
  border:1px solid rgba(11,74,99,.09);
  color:var(--blue);
  font-weight:900;
  box-shadow:0 15px 40px rgba(3,42,60,.07);
}

.quote{
  position:relative;z-index:2;
  margin:20px 6vw 35px;
  padding:54px 24px;
  text-align:center;
  background:linear-gradient(135deg,var(--blue),#078ebc);
  color:white;
  overflow:hidden;
}
.quote p{color:rgba(255,255,255,.82)}
.quote .btn.primary{background:white;color:var(--blue)}
.quote .btn.light{background:rgba(255,255,255,.16);color:white;border-color:rgba(255,255,255,.25)}

.contacts{padding-top:60px}
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.contact-card{padding:28px}
.contact-card a{
  display:block;color:var(--blue);font-size:18px;font-weight:900;
  text-decoration:none;margin:10px 0;
}
.contact-card a:hover{text-decoration:underline}
.map{margin-top:22px;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(11,74,99,.09)}
.map iframe{width:100%;height:360px;border:0;display:block}

.float-menu{
  position:fixed;right:18px;bottom:18px;z-index:30;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}
.float-menu a{
  background:var(--blue);color:white;text-decoration:none;font-weight:900;
  padding:13px 15px;border-radius:999px;box-shadow:0 14px 35px rgba(11,74,99,.25);
  font-size:13px;
}

footer{
  position:relative;z-index:2;
  padding:45px 6vw;text-align:center;color:var(--muted);
}
footer img{width:150px;mix-blend-mode:multiply}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease, transform .75s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:1000px){
  .grid,.contact-grid{grid-template-columns:repeat(2,1fr)}
  .work-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  .header{align-items:flex-start;flex-direction:column}
  .logo img{width:140px}
  nav{gap:14px}
  .hero,.about{grid-template-columns:1fr;padding-top:44px}
  .freezer{min-height:330px}
  .thermo strong{font-size:76px}
  .grid,.contact-grid,.work-list{grid-template-columns:1fr}
  .section,.about,.work{padding:60px 5vw}
  .float-menu{left:12px;right:12px}
  .float-menu a{flex:1;text-align:center}
}