:root{
  --green:#8dc63f;
  --green-dark:#2f7d13;
  --green-light:#edf7da;
  --navy:#1b3a63;
  --navy-dark:#0d2747;
  --white:#ffffff;
  --text:#18304f;
  --muted:#5e6f82;
  --shadow:0 16px 40px rgba(20,48,79,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f8fbf2 0%,#ffffff 38%);
  line-height:1.6;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
main,section,header,footer,nav,div,article{min-width:0}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  padding:1rem clamp(1rem,4vw,4rem);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(27,58,99,.08);
}
.brand{
  display:flex;
  align-items:baseline;
  gap:.55rem;
  min-width:0;
  text-decoration:none;
  font-weight:900;
}
.brand-tux{font-size:1.75rem;color:var(--green-dark)}
.brand-name{font-size:1.25rem;color:var(--navy)}
nav{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.2rem);min-width:0}
nav a{text-decoration:none;font-weight:750;white-space:nowrap}
.nav-phone{background:var(--green);color:#fff;padding:.65rem 1rem;border-radius:999px}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  min-height:72vh;
  padding:clamp(2rem,6vw,6rem) clamp(1rem,5vw,5rem);
}
.hero h1,.section h2,.cta h2{
  margin:.3rem 0 1rem;
  color:var(--navy-dark);
  line-height:1.05;
}
.hero h1{font-size:clamp(2.7rem,6vw,5.7rem)}
.lead{font-size:clamp(1.08rem,2vw,1.38rem);max-width:720px;color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:var(--green-dark)}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.6rem 0 .8rem}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.95rem 1.35rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  max-width:100%;
  text-align:center;
}
.primary{background:var(--green);color:#fff;box-shadow:var(--shadow)}
.secondary{background:var(--navy);color:#fff}
.contact-note{font-weight:800;color:var(--navy)}
.hero-art img{
  width:100%;
  border-radius:2rem;
  box-shadow:var(--shadow);
  aspect-ratio:3/4;
  object-fit:contain;
  background:#edf7da;
}

.trust-strip{
  margin:0 clamp(1rem,5vw,5rem);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  padding:1.2rem;
  background:var(--navy);
  color:#fff;
  border-radius:1.5rem;
}
.trust-strip div{display:flex;flex-direction:column;gap:.2rem;padding:.5rem 1rem}
.trust-strip strong{color:#c9f18e;font-size:1.1rem}
.trust-strip span{font-size:.93rem}

.section{padding:clamp(4rem,8vw,7rem) clamp(1rem,6vw,6rem)}
.section.alt{background:var(--green-light)}
.section-heading{max-width:900px;margin-bottom:2rem}
.section h2,.cta h2{font-size:clamp(2rem,4vw,4rem)}
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
.card{
  background:#fff;
  border:1px solid #dce8cc;
  border-radius:1.5rem;
  padding:1.6rem;
  box-shadow:0 8px 30px rgba(20,48,79,.07);
}
.card h3{margin:.4rem 0 .6rem;color:var(--green-dark);font-size:1.35rem}
.icon{font-size:2rem}

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.checklist{padding:0;list-style:none;display:grid;gap:.7rem}
.checklist li{position:relative;padding-left:2rem;font-weight:700}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green-dark);font-weight:900}
.checklist.large li{font-size:1.1rem}

.logo-cloud{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.8rem;
}
.logo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:74px;
  padding:.85rem;
  border-radius:1rem;
  background:#fff;
  border:1px solid rgba(27,58,99,.1);
  box-shadow:0 8px 24px rgba(20,48,79,.06);
  font-weight:900;
  text-align:center;
  overflow-wrap:anywhere;
}
.firefox{border-top:4px solid #ff7139}
.chrome{border-top:4px solid #4285f4}
.thunderbird{border-top:4px solid #1d6fd8}
.libreoffice{border-top:4px solid #18a303}
.whatsapp{border-top:4px solid #25d366}
.signal{border-top:4px solid #3a76f0}
.telegram{border-top:4px solid #229ed9}
.spotify{border-top:4px solid #1db954}
.youtube{border-top:4px solid #ff0000}
.netflix{border-top:4px solid #e50914}
.dropbox{border-top:4px solid #0061ff}
.onedrive{border-top:4px solid #0078d4}
.steam{border-top:4px solid #171a21}
.chatgpt{border-top:4px solid #10a37f}
.claude{border-top:4px solid #d97757}
.google{border-top:4px solid #fbbc05}

.cta{
  margin:0 clamp(1rem,5vw,5rem) clamp(4rem,8vw,7rem);
  padding:clamp(2rem,5vw,4rem);
  border-radius:2rem;
  background:linear-gradient(135deg,var(--navy),var(--navy-dark));
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
}
.cta h2{color:#fff}
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap}
.big{font-size:clamp(1.15rem,2.4vw,1.7rem)}

footer{
  background:var(--navy-dark);
  color:#fff;
  padding:2rem clamp(1rem,5vw,5rem);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
footer a{text-decoration:none}
.mobile-callbar{display:none}

@media(max-width:1180px){
  nav a:not(.nav-phone){display:none}
  .logo-cloud{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .hero,.split{grid-template-columns:1fr}
  .hero-art{order:-1}
  .hero-art img{max-height:560px}
  .trust-strip,.cards{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .site-header{padding:.8rem 1rem}
  .brand-tux{font-size:1.45rem}
  .brand-name{font-size:1rem}
  .nav-phone{display:none}
  .hero{padding-top:1.2rem}
  .hero h1{font-size:clamp(2.25rem,11vw,3.4rem)}
  .hero-actions{flex-direction:column}
  .button{width:100%}
  .trust-strip,.cards,.logo-cloud{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:stretch}
  .cta-actions{flex-direction:column}
  .mobile-callbar{
    position:fixed;
    z-index:60;
    bottom:0;
    left:0;
    right:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#fff;
    box-shadow:0 -8px 25px rgba(0,0,0,.14);
  }
  .mobile-callbar a{
    text-align:center;
    padding:1rem;
    text-decoration:none;
    font-weight:900;
  }
  .mobile-callbar a:first-child{background:var(--green);color:#fff}
  .mobile-callbar a:last-child{background:var(--navy);color:#fff}
  footer{padding-bottom:5rem}
}