/* ============================================================
   Fusosya — single page
   Palet diambil langsung dari logo:
   teal #015B66 / #016D77 · deep #04424F · hijau #7ABE2B
   ============================================================ */

:root{
  --ink:#07303a;
  --ink-soft:#4c6b73;
  --teal-900:#04303a;
  --teal-800:#04424f;
  --teal-700:#015b66;
  --teal-600:#016d77;
  --teal-100:#e2f0f1;
  --teal-50:#f2f8f8;
  --green:#7abe2b;
  --green-dark:#649c22;
  --green-soft:#f0f8e5;
  --white:#ffffff;
  --line:#e2ecec;
  --radius:20px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(4,48,58,.06), 0 4px 12px rgba(4,48,58,.05);
  --shadow-md:0 2px 4px rgba(4,48,58,.05), 0 12px 32px rgba(4,48,58,.09);
  --shadow-lg:0 24px 64px rgba(4,48,58,.16);
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--white);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{margin:0; line-height:1.15; letter-spacing:-.025em; font-weight:800}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px}
.section{padding:104px 0}

/* ---------- typography helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-600);
}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--green)}
.eyebrow--light{color:#9fd4d8}
.eyebrow--light::before{background:var(--green)}
.h-sec{font-size:clamp(30px,4.2vw,46px)}
.lead{font-size:clamp(16.5px,1.6vw,19px); color:var(--ink-soft); max-width:58ch}
.muted{color:var(--ink-soft)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  font-weight:700; font-size:15.5px; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg{width:17px; height:17px; flex:none}
.btn-primary{background:var(--teal-700); color:#fff; box-shadow:0 6px 18px rgba(1,91,102,.28)}
.btn-primary:hover{background:var(--teal-800); transform:translateY(-2px); box-shadow:0 12px 26px rgba(1,91,102,.34)}
.btn-green{background:var(--green); color:#123006; box-shadow:0 6px 18px rgba(122,190,43,.32)}
.btn-green:hover{background:var(--green-dark); color:#fff; transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--teal-800); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal-600); background:var(--teal-50); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--teal-800)}
.btn-light:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.22)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.34)}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px)}
.btn-sm{padding:11px 20px; font-size:14.5px}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(4,48,58,.06); background:rgba(255,255,255,.92)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:34px; width:auto}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  padding:9px 14px; border-radius:999px; font-size:15px; font-weight:600; color:var(--ink-soft);
  transition:color .16s ease, background .16s ease;
}
.nav-links a:hover{color:var(--teal-700); background:var(--teal-50)}
.nav-links a.is-active{color:var(--teal-800); background:var(--teal-100)}
.nav-links a.btn{display:none} /* CTA di dalam menu hanya tampil di mobile */
.nav-cta{display:flex; align-items:center; gap:10px}

/* ---------- language switcher ---------- */
.lang{
  display:inline-flex; align-items:center; gap:2px; flex:none;
  background:var(--teal-50); border:1px solid var(--line); border-radius:999px; padding:3px;
}
.lang button{
  border:0; background:transparent; padding:6px 13px; border-radius:999px;
  font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--ink-soft);
  transition:background .18s ease, color .18s ease;
}
.lang button:hover{color:var(--teal-700)}
.lang button[aria-pressed="true"]{background:var(--teal-700); color:#fff}

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  background:#fff; align-items:center; justify-content:center; color:var(--teal-800);
}
.nav-toggle svg{width:22px; height:22px}
.nav-toggle .icon-close{display:none}
body.nav-open .nav-toggle .icon-close{display:block}
body.nav-open .nav-toggle .icon-open{display:none}

/* ---------- hero ---------- */
.hero{position:relative; padding:calc(var(--nav-h) + 78px) 0 96px; overflow:hidden}
.hero::before{
  content:""; position:absolute; z-index:0; width:820px; height:820px; right:-260px; top:-330px;
  background:radial-gradient(circle at center, rgba(1,109,119,.16), rgba(1,109,119,0) 62%);
  border-radius:50%;
}
.hero::after{
  content:""; position:absolute; z-index:0; width:640px; height:640px; left:-280px; bottom:-320px;
  background:radial-gradient(circle at center, rgba(122,190,43,.16), rgba(122,190,43,0) 62%);
  border-radius:50%;
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,60px); margin:20px 0 22px; letter-spacing:-.035em}
.hero h1 .accent{
  color:var(--teal-700);
  background:linear-gradient(180deg, transparent 66%, rgba(122,190,43,.34) 66%);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-note{display:flex; align-items:center; gap:10px; margin-top:26px; font-size:14.5px; color:var(--ink-soft)}
.hero-note .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(122,190,43,.2); flex:none}

/* hero visual */
.hero-visual{position:relative; min-height:440px}
.mock-dash{
  position:relative; z-index:2; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:18px; width:100%;
}
.mock-bar{display:flex; align-items:center; gap:6px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.mock-bar i{width:9px; height:9px; border-radius:50%; background:#dfe9ea; display:block}
.mock-bar i:first-child{background:#f2b8b8}
.mock-bar span{margin-left:10px; font-size:11.5px; font-weight:600; color:#9db3b6; letter-spacing:.02em}
.mock-body{padding-top:16px}
.mock-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.mock-kpi{background:var(--teal-50); border-radius:var(--radius-sm); padding:11px 12px}
.mock-kpi b{display:block; font-size:16px; color:var(--teal-800); letter-spacing:-.02em}
.mock-kpi small{font-size:10.5px; color:var(--ink-soft); font-weight:600}
.mock-chart{display:flex; align-items:flex-end; gap:8px; height:118px; padding:12px; background:var(--teal-50); border-radius:var(--radius-sm)}
.mock-chart span{flex:1; border-radius:5px 5px 3px 3px; background:linear-gradient(180deg,var(--teal-600),var(--teal-700)); animation:grow 1.1s cubic-bezier(.2,.8,.25,1) backwards}
.mock-chart span.g{background:linear-gradient(180deg,#9ad246,var(--green))}
.mock-rows{margin-top:14px; display:grid; gap:8px}
.mock-row{display:flex; align-items:center; gap:10px}
.mock-row u{flex:none; width:26px; height:26px; border-radius:8px; background:var(--teal-100); text-decoration:none}
.mock-row em{height:8px; border-radius:99px; background:#eef4f4; display:block}
.mock-row em.w1{width:44%} .mock-row em.w2{width:62%} .mock-row em.w3{width:34%}
.mock-row s{margin-left:auto; height:8px; width:40px; border-radius:99px; background:var(--green-soft); text-decoration:none}

.mock-phone{
  position:absolute; z-index:3; right:-8px; bottom:-34px; width:186px; padding:9px;
  background:#0d2b31; border-radius:30px; box-shadow:var(--shadow-lg);
}
.mock-phone-screen{
  background:linear-gradient(170deg,#8ecb3c,#5da51f 58%,#3d7d18);
  border-radius:23px; padding:16px 13px; color:#fff; text-align:center; min-height:236px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
}
.mock-phone-screen .badge{
  font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.22); padding:4px 10px; border-radius:99px;
}
.mock-phone-screen .q{font-size:26px; font-weight:800; letter-spacing:-.02em}
.mock-phone-opts{display:grid; gap:6px; width:100%; margin-top:4px}
.mock-phone-opts b{
  background:rgba(255,255,255,.92); color:#2c5a10; border-radius:11px; padding:8px;
  font-size:14px; font-weight:800;
}
.mock-phone-opts b.on{background:#fff; color:#1f4a08; box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.mock-stars{font-size:13px; letter-spacing:2px}

.float-chip{
  position:absolute; z-index:4; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 14px;
  box-shadow:var(--shadow-md); font-size:13px; font-weight:700; color:var(--teal-800);
}
.float-chip svg{width:16px; height:16px; color:var(--green); flex:none}
.float-chip--a{left:-26px; top:34px; animation:float 6s ease-in-out infinite}
.float-chip--b{left:-14px; bottom:24px; animation:float 6s ease-in-out infinite .8s}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes grow{from{height:6px!important; opacity:0}}

/* ---------- logo strip ---------- */
.strip{border-block:1px solid var(--line); background:var(--teal-50)}
.strip-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; padding:26px 0}
.strip-inner span{
  font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7b979b;
}

/* ---------- section head ---------- */
.sec-head{max-width:720px; margin-bottom:56px}
.sec-head .h-sec{margin:16px 0 18px}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head--center .lead{margin-inline:auto}
.sec-head--center .eyebrow::before{display:none}

/* ---------- products ---------- */
.product{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  border-radius:28px; padding:52px; border:1px solid var(--line); background:#fff;
  box-shadow:var(--shadow-sm);
}
.product + .product{margin-top:32px}
.product--flip .product-media{order:-1}
.product-tag{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.product-tag--erp{background:var(--teal-100); color:var(--teal-800)}
.product-tag--esde{background:var(--green-soft); color:#4a7a15}
.product h3{font-size:clamp(26px,3vw,34px); margin:18px 0 14px}
.product h3 small{display:block; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-600); margin-bottom:6px}
.product > div > .muted{max-width:46ch}
.feat-list{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin:26px 0 30px}
.feat-list li{display:flex; align-items:flex-start; gap:10px; font-size:15px; font-weight:600; color:var(--ink)}
.feat-list li svg{width:19px; height:19px; flex:none; margin-top:2px; color:var(--green)}
.product-actions{display:flex; flex-wrap:wrap; gap:10px}

/* ---------- tombol store (Google Play / App Store) ---------- */
.store-btns{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 14px}
.store{
  display:inline-flex; align-items:center; gap:12px; padding:9px 20px 9px 16px;
  border:1.5px solid var(--ink); border-radius:14px; background:var(--ink); color:#fff;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.store:hover{background:var(--teal-800); border-color:var(--teal-800); transform:translateY(-2px); box-shadow:0 12px 26px rgba(4,48,58,.28)}
.store:focus-visible{outline:3px solid var(--green); outline-offset:2px}
.store svg{width:24px; height:24px; flex:none}
.store span{display:grid; text-align:left; line-height:1.25}
.store small{font-size:10.5px; font-weight:600; letter-spacing:.05em; opacity:.78}
.store b{font-size:16px; font-weight:800; letter-spacing:-.015em}

/* tombol unduh langsung — dibedakan warnanya karena ini satu-satunya aksi yang aktif */
.store--dl{background:var(--green); border-color:var(--green); color:#123006}
.store--dl:hover{background:var(--green-dark); border-color:var(--green-dark); color:#fff; box-shadow:0 12px 26px rgba(122,190,43,.34)}
.store--dl small{opacity:.7}
.store-note{display:flex; align-items:flex-start; gap:8px; margin-bottom:24px; font-size:13.5px; color:var(--ink-soft)}
.store-note svg{width:15px; height:15px; flex:none; margin-top:3px; color:var(--green-dark)}

/* ---------- modal "segera hadir" ---------- */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px}
.modal-backdrop{position:absolute; inset:0; background:rgba(4,48,58,.58); backdrop-filter:blur(3px); animation:modalFade .2s ease}
.modal-box{
  position:relative; z-index:1; width:100%; max-width:420px; text-align:center;
  background:#fff; border-radius:24px; padding:40px 32px 30px; box-shadow:var(--shadow-lg);
  animation:modalPop .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes modalFade{from{opacity:0}}
@keyframes modalPop{from{opacity:0; transform:translateY(14px) scale(.96)}}
.modal-x{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; border-radius:10px;
  background:transparent; color:var(--ink-soft); display:grid; place-items:center;
  transition:background .16s ease, color .16s ease;
}
.modal-x:hover{background:var(--teal-50); color:var(--teal-800)}
.modal-x svg{width:19px; height:19px}
.modal-ico{
  width:64px; height:64px; border-radius:20px; margin:0 auto 20px; display:grid; place-items:center;
  background:var(--green-soft); color:var(--green-dark);
}
.modal-ico svg{width:30px; height:30px}
.modal-box h3{font-size:24px; margin-bottom:12px}
.modal-box p{color:var(--ink-soft); font-size:15.5px; margin-bottom:26px}
.modal-box p strong{color:var(--teal-700); font-weight:800}
.modal-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}

/* ---------- kotak perintah clone ---------- */
.clone{margin-top:24px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.clone-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 14px; background:var(--teal-50); border-bottom:1px solid var(--line);
  font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.clone-head .stack{font-size:12px; font-weight:700; letter-spacing:.01em; text-transform:none; color:var(--teal-600)}
.clone-cmd{display:flex; align-items:center; gap:10px; padding:12px 14px}
.clone-cmd code{
  flex:1; min-width:0; overflow-x:auto; white-space:nowrap; padding-bottom:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13px; color:var(--teal-800);
}
.clone-cmd code::-webkit-scrollbar{height:4px}
.clone-cmd code::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.clone-copy{
  flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:9px;
  background:#fff; color:var(--ink-soft); display:grid; place-items:center;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.clone-copy:hover{color:var(--teal-700); border-color:var(--teal-600); background:var(--teal-50)}
.clone-copy svg{width:16px; height:16px}
.clone-copy .ico-check{display:none; color:var(--green)}
.clone-copy.is-copied{border-color:var(--green); background:var(--green-soft)}
.clone-copy.is-copied .ico-check{display:block}
.clone-copy.is-copied .ico-copy{display:none}

/* product media */
.product-media{position:relative}
.panel{border-radius:22px; padding:26px; box-shadow:var(--shadow-md); position:relative; overflow:hidden}
.panel--erp{background:linear-gradient(155deg,var(--teal-800),var(--teal-600))}
.panel--esde{background:linear-gradient(155deg,#2f6a12,#7abe2b)}
.panel::after{
  content:""; position:absolute; width:280px; height:280px; right:-90px; top:-110px; border-radius:50%;
  background:rgba(255,255,255,.09);
}
.panel-card{position:relative; z-index:1; background:#fff; border-radius:16px; padding:16px}
.panel-card + .panel-card{margin-top:12px}
.panel-title{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.panel-title b{font-size:14.5px; color:var(--teal-800)}
.panel-title span{font-size:11px; font-weight:700; color:var(--ink-soft); background:var(--teal-50); padding:3px 9px; border-radius:99px; white-space:nowrap}
.mini-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.mini{display:flex; align-items:center; gap:9px; background:var(--teal-50); border-radius:11px; padding:10px 11px}
.mini svg{width:18px; height:18px; color:var(--teal-600); flex:none}
.mini small{font-size:11px; font-weight:700; color:var(--teal-800); line-height:1.25}
.progress{display:grid; gap:11px}
.progress-item span{display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:5px}
.progress-item span i{font-style:normal}
.progress-track{height:8px; border-radius:99px; background:#eef4f4; overflow:hidden}
.progress-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal-600),var(--teal-700))}
.progress-fill.g{background:linear-gradient(90deg,#9ad246,var(--green))}
/* ---------- kartu logo produk (ERP & Esde) ---------- */
.app-card{text-align:center; padding:22px 16px 18px}
.app-card img{
  /* max-height + width:auto, bukan height tetap: kalau kartu menyempit di layar
     kecil, gambar mengecil proporsional dan tidak gepeng */
  display:block; max-height:128px; max-width:100%; width:auto; height:auto;
  margin:0 auto 15px;
  /* drop-shadow (bukan box-shadow) supaya bayangan mengikuti bentuk alpha logo */
  filter:drop-shadow(0 5px 12px rgba(4,48,58,.16));
}
.app-card .app-sub{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:12px}
.app-meta{display:flex; flex-wrap:wrap; gap:5px; justify-content:center}
.app-meta span{
  font-size:10.5px; font-weight:800; letter-spacing:.02em; color:#4a7a15;
  background:var(--green-soft); padding:3px 9px; border-radius:99px;
}

.grade-chips{display:flex; flex-wrap:wrap; gap:7px; position:relative; z-index:1; margin-top:12px}
.grade-chips b{
  background:rgba(255,255,255,.92); color:#3c6d13; border-radius:10px; padding:7px 13px;
  font-size:12.5px; font-weight:800;
}

/* ---------- why / values ---------- */
.why{background:var(--teal-50); border-block:1px solid var(--line)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:#cfe2e3}
.card-ico{
  width:46px; height:46px; border-radius:14px; background:var(--teal-100); color:var(--teal-700);
  display:grid; place-items:center; margin-bottom:18px;
}
.card-ico svg{width:23px; height:23px}
.card-ico--green{background:var(--green-soft); color:var(--green-dark)}
.card h4{font-size:19px; margin-bottom:9px}
.card p{font-size:15px; color:var(--ink-soft); line-height:1.6}

/* ---------- services ---------- */
.svc{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.svc-item{background:#fff; padding:30px 24px}
.svc-item b{display:block; font-size:17px; margin-bottom:8px; letter-spacing:-.02em}
.svc-item p{font-size:14.5px; color:var(--ink-soft); line-height:1.6}
.svc-item .n{font-size:12px; font-weight:800; color:var(--green); letter-spacing:.1em; display:block; margin-bottom:14px}

/* ---------- CTA ---------- */
.cta{position:relative; overflow:hidden; background:linear-gradient(140deg,var(--teal-900),var(--teal-700) 62%,var(--teal-600)); color:#fff}
.cta::after{
  content:""; position:absolute; width:520px; height:520px; right:-160px; bottom:-260px; border-radius:50%;
  background:radial-gradient(circle,rgba(122,190,43,.34),transparent 66%);
}
.cta .wrap{position:relative; z-index:1}
.cta-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.cta h2{font-size:clamp(28px,3.8vw,42px); margin:16px 0 16px}
.cta p{color:#c2dfe1; font-size:17px; max-width:48ch}
.cta-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.contact-card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:30px; backdrop-filter:blur(6px)}
.contact-card h4{font-size:16px; margin-bottom:20px; color:#fff}
.contact-list{display:grid; gap:16px}
.contact-list li{display:flex; align-items:flex-start; gap:13px}
.contact-list svg{width:19px; height:19px; color:var(--green); flex:none; margin-top:3px}
.contact-list small{display:block; font-size:12px; color:#9fc4c7; font-weight:600; letter-spacing:.04em}
.contact-list b{font-size:15.5px; font-weight:700; color:#fff; overflow-wrap:anywhere}
.contact-list a:hover b{text-decoration:underline}

/* ---------- footer ---------- */
.site-footer{background:var(--teal-900); color:#a9c7cb; padding:64px 0 28px; font-size:15px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand img{height:34px; margin-bottom:18px; filter:brightness(0) invert(1)}
.foot-brand p{max-width:34ch; font-size:14.5px; line-height:1.65}
.foot-col b{display:block; color:#fff; font-size:14px; letter-spacing:.02em; margin-bottom:16px}
.foot-col li + li{margin-top:10px}
.foot-col a{font-size:14.5px; transition:color .16s ease}
.foot-col a:hover{color:var(--green)}
.foot-bottom{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding-top:24px; font-size:13.5px}
.foot-bottom span{color:#7fa1a6}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:72px}
  .hero-visual{max-width:520px; margin-inline:auto; min-height:0}
  .product{grid-template-columns:1fr; gap:38px; padding:38px}
  .product--flip .product-media{order:0}
  .cta-grid{grid-template-columns:1fr; gap:36px}
  .svc{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:880px){
  body{font-size:16px}
  .section{padding:76px 0}
  .nav-toggle{display:flex}
  .nav-cta > .btn{display:none}
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line); padding:14px 24px 22px;
    box-shadow:0 20px 40px rgba(4,48,58,.1);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  }
  body.nav-open .nav-links{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:13px 14px; font-size:16px}
  .nav-links a.btn{display:flex; margin-top:10px; width:100%; color:#fff; background:var(--teal-700)}
  .cards{grid-template-columns:1fr}
  .feat-list{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding-inline:18px}
  .hero{padding-top:calc(var(--nav-h) + 48px); padding-bottom:72px}
  .product{padding:26px 20px}
  .svc{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr; gap:28px}
  .mock-phone{width:150px; right:-4px; bottom:-24px}
  .float-chip--a{left:-8px} .float-chip--b{left:-4px}
  .hero-actions .btn, .cta-actions .btn{flex:1 1 100%}
  .brand img{height:30px}
  .lang button{padding:6px 10px; font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
}