@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Fraunces:opsz,wght@9..144,700;9..144,800&display=swap');

:root{
  --navy:#061529;
  --ink:#10213a;
  --teal:#13b8a9;
  --mint:#c8fff4;
  --aqua:#56e8e1;
  --cream:#fff8ea;
  --sun:#ffd15c;
  --coral:#ff5f7a;
  --violet:#b96bff;
  --muted:#62738c;
  --line:rgba(16,33,58,.12);
  --glass:rgba(255,255,255,.72);
  --shadow:0 24px 70px rgba(13,61,88,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Outfit,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 13% 16%, rgba(86,232,225,.36), transparent 23rem),
    radial-gradient(circle at 87% 12%, rgba(255,209,92,.28), transparent 28rem),
    radial-gradient(circle at 75% 80%, rgba(185,107,255,.16), transparent 28rem),
    linear-gradient(180deg,#f6ffff 0%,#fff9ed 50%,#f4fcff 100%);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 42px));margin-inline:auto}
.header{
  position:sticky;top:0;z-index:20;
  background:rgba(246,255,255,.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(16,33,58,.08);
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.02em}
.brand img{width:46px;height:46px;border-radius:17px;box-shadow:0 12px 34px rgba(19,184,169,.26)}
.menu{display:flex;align-items:center;gap:10px}
.menu a{font-weight:800;color:#36506d;padding:11px 14px;border-radius:999px}
.menu a:hover{background:#fff;color:var(--teal)}
.play{background:var(--navy)!important;color:#fff!important;box-shadow:0 14px 38px rgba(6,21,41,.18)}
.hero{position:relative;padding:72px 0 54px;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:620px;
  background:url("assets/home-harmony-banner.png") center/cover no-repeat;
  opacity:.14;filter:saturate(1.2);mask-image:linear-gradient(#000,transparent 82%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center}
.badge{display:inline-flex;gap:10px;align-items:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:#08796f;background:#dcfff8;border:1px solid rgba(19,184,169,.2);padding:10px 14px;border-radius:999px}
h1,h2,h3,p{margin-top:0}
h1{font-family:Fraunces,serif;font-size:clamp(54px,8vw,112px);line-height:.9;letter-spacing:-.045em;margin:20px 0 22px}
.lead{font-size:20px;line-height:1.75;color:#4c6079;max-width:650px}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:20px;padding:16px 22px;font-weight:900;transition:.25s ease}
.btn:hover{transform:translateY(-3px)}
.btn.primary{background:linear-gradient(135deg,var(--teal),var(--aqua));color:#062231;box-shadow:0 18px 44px rgba(19,184,169,.28)}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.hero-device{position:relative;min-height:520px}
.banner-card{position:absolute;inset:22px 0 auto 0;margin:auto;width:92%;border-radius:34px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(1deg);animation:drift 7s ease-in-out infinite}
.banner-card img{height:360px;width:100%;object-fit:cover}
.icon-orbit{position:absolute;left:18px;bottom:28px;width:158px;height:158px;border-radius:38px;background:rgba(255,255,255,.82);padding:15px;box-shadow:var(--shadow);animation:float 5s ease-in-out infinite}
.icon-orbit img{border-radius:27px}
.metric-strip{position:absolute;right:2px;bottom:50px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:rgba(255,255,255,.83);border:1px solid var(--line);backdrop-filter:blur(12px);border-radius:26px;padding:13px;box-shadow:var(--shadow)}
.metric-strip b{display:block;font-size:25px}.metric-strip span{font-size:12px;color:var(--muted);font-weight:800}
.section{padding:78px 0}
.section-title{display:grid;grid-template-columns:.8fr 1fr;gap:28px;align-items:end;margin-bottom:34px}
.kicker{font-size:13px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:#0a8a80}
.title{font-family:Fraunces,serif;font-size:clamp(40px,6vw,76px);line-height:.96;letter-spacing:-.035em;margin-bottom:0}
.section-title p{color:var(--muted);font-size:18px;line-height:1.72;margin:0}
.company-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.statement{background:var(--navy);color:white;border-radius:38px;padding:36px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.statement:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(86,232,225,.18);right:-100px;top:-100px}
.statement h2{font-family:Fraunces,serif;font-size:clamp(38px,5.6vw,72px);line-height:.98;letter-spacing:-.04em;position:relative}
.statement p{color:#d5e4ef;line-height:1.8;font-size:18px;position:relative}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mini{background:var(--glass);border:1px solid var(--line);border-radius:30px;padding:24px;min-height:190px;box-shadow:0 18px 55px rgba(9,62,76,.08)}
.mini strong{font-size:22px}.mini p{color:var(--muted);line-height:1.65}
.product-show{display:grid;grid-template-columns:.94fr 1.06fr;gap:34px;align-items:center}
.screens{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.screen{border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line);transform:translateY(24px);opacity:0;transition:.7s ease}
.screen.visible{transform:none;opacity:1}
.screen img{width:100%;height:510px;object-fit:cover;object-position:top}
.product-copy{background:#fff;border:1px solid var(--line);border-radius:38px;padding:36px;box-shadow:var(--shadow)}
.product-copy h2{font-family:Fraunces,serif;font-size:clamp(38px,5vw,68px);line-height:1;letter-spacing:-.035em}
.product-copy p{color:#5b6c82;line-height:1.78;font-size:18px}
.feature-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.feature-tags span{background:#e6fff9;color:#08796f;border:1px solid rgba(19,184,169,.18);border-radius:999px;padding:10px 13px;font-weight:900}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service{background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:30px;padding:26px;box-shadow:0 18px 54px rgba(9,62,76,.08)}
.service i{font-style:normal;width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--sun),#fff4be);display:grid;place-items:center;font-weight:900;margin-bottom:22px}
.service h3{font-size:22px;margin-bottom:10px}
.service p{color:var(--muted);line-height:1.65;margin-bottom:0}
.contact-zone{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-card{border-radius:38px;padding:34px;border:1px solid var(--line);background:rgba(255,255,255,.76);box-shadow:var(--shadow)}
.contact-card.dark{background:linear-gradient(135deg,#081c33,#062b3a);color:white}
.contact-card h2{font-family:Fraunces,serif;font-size:clamp(36px,5vw,64px);line-height:1}
.contact-card p{color:#5b6c82;line-height:1.85;font-size:17px}
.contact-card.dark p{color:#d4e8ef}
.footer{background:#061529;color:white;padding:44px 0 28px;margin-top:64px}
.footer-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:24px}
.footer p,.footer a{color:#b6c5d5;line-height:1.8;font-size:14px}
.footer a:hover{color:#fff}.footer h4{margin:0 0 12px}
.footer-bottom{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;color:#8fa1b6;font-size:13px}
.reveal{opacity:0;transform:translateY(28px);transition:.75s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes drift{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@media(max-width:940px){
  .menu{display:none}
  .hero-grid,.section-title,.company-layout,.product-show,.contact-zone,.footer-grid{grid-template-columns:1fr}
  .hero-device{min-height:420px}
  .banner-card{position:relative;width:100%;inset:auto}
  .banner-card img{height:240px}
  .icon-orbit,.metric-strip{position:relative;left:auto;right:auto;bottom:auto;margin-top:16px}
  .mini-grid,.screens,.services{grid-template-columns:1fr}
  .screen img{height:auto}
  .footer-bottom{flex-direction:column}
}