:root{
  --navy:#102a43;
  --navy-2:#0a1d2e;
  --teal:#1c7c7d;
  --gold:#d3a84b;
  --cream:#f7f4ee;
  --light:#f4f7f9;
  --text:#17212b;
  --muted:#667483;
  --line:#d8e0e7;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
}
a{text-decoration:none;color:inherit}
.container{width:min(1120px,calc(100% - 36px));margin:auto}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #e7edf2;
}
.nav{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-copy{display:flex;flex-direction:column;gap:2px}
.brand-copy strong{font-size:16px;letter-spacing:.03em}
.brand-copy small{font-size:11px;color:var(--muted)}
.main-nav{display:flex;gap:30px;font-size:14px;font-weight:700}
.main-nav a:hover{color:var(--teal)}
.nav-cta{
  padding:12px 16px;
  border-radius:9px;
  background:var(--navy);
  color:white;
  font-size:13px;
  font-weight:700;
}

.invoice-logo{
  width:48px;height:44px;
  border-radius:10px;
  background:#fff;
  border:2px solid var(--teal);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 5px 16px rgba(16,42,67,.12);
}
.invoice-logo .mark-lines{
  color:var(--teal);
  font-size:24px;
  font-weight:800;
  line-height:20px;
  letter-spacing:-4px;
  transform:scaleX(1.2);
}
.invoice-logo .mark-text{
  margin-top:3px;
  color:var(--teal);
  font-size:7px;
  font-weight:800;
  letter-spacing:.09em;
}
.invoice-logo.large{width:110px;height:92px;border-radius:18px;border-width:3px}
.invoice-logo.large .mark-lines{font-size:54px;line-height:42px}
.invoice-logo.large .mark-text{font-size:12px;margin-top:7px}
.invoice-logo.xl{width:180px;height:150px;border-radius:26px;border-width:4px}
.invoice-logo.xl .mark-lines{font-size:82px;line-height:64px}
.invoice-logo.xl .mark-text{font-size:16px;margin-top:10px}
.invoice-logo.small{width:42px;height:38px}
.invoice-logo.small .mark-lines{font-size:20px}
.invoice-logo.small .mark-text{font-size:6px}

.hero{
  position:relative;
  min-height:650px;
  background:
    radial-gradient(circle at 75% 25%,rgba(28,124,125,.2),transparent 28%),
    radial-gradient(circle at 20% 70%,rgba(211,168,75,.18),transparent 30%),
    linear-gradient(135deg,#f7f4ee 0%,#ffffff 50%,#edf5f5 100%);
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  width:500px;height:500px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--navy));
  right:-190px;top:-160px;
  opacity:.08;
}
.hero-grid{
  position:relative;
  z-index:2;
  min-height:650px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  color:var(--teal);
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}
.eyebrow.dark{color:var(--teal)}
.eyebrow.light{color:#d9c07f}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:68px;
  line-height:1;
  margin:16px 0 22px;
  color:var(--navy);
}
.hero h1 span{color:var(--teal)}
.hero-copy>p{
  font-size:18px;
  line-height:1.7;
  color:#5b6977;
  max-width:650px;
}
.hero-actions{display:flex;gap:12px;margin-top:30px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:10px;
  font-size:14px;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--gold);color:var(--navy)}
.btn-secondary{background:#fff;border-color:#d5dde5;color:var(--navy)}
.hero-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:44px;
}
.hero-points div{
  padding-top:14px;
  border-top:1px solid #d7dee5;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hero-points strong{font-size:13px}
.hero-points span{font-size:11px;color:#7a8794;line-height:1.4}

.showcase-card{
  background:#fff;
  border:1px solid #e4e9ee;
  border-radius:26px;
  padding:34px;
  box-shadow:0 28px 70px rgba(16,42,67,.14);
  min-height:390px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.showcase-card:after{
  content:"";
  position:absolute;
  width:220px;height:220px;
  background:linear-gradient(135deg,var(--gold),var(--teal));
  border-radius:50%;
  right:-90px;bottom:-100px;
  opacity:.12;
}
.showcase-logo{position:relative;z-index:1}
.showcase-copy{position:relative;z-index:1}
.showcase-copy small{color:var(--teal);font-size:10px;font-weight:800;letter-spacing:.15em}
.showcase-copy h2{font-family:Georgia,serif;font-size:34px;margin:10px 0}
.showcase-copy p{color:var(--muted);line-height:1.6}
.showcase-copy a{font-weight:800;color:var(--navy)}

.category-ribbon{background:var(--navy);color:#fff}
.ribbon-grid{
  min-height:64px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  text-align:center;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}

.section{padding:86px 0}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:34px;
}
.section-head h2,.about-copy h2,.contact-grid h2,.why h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:44px;
  line-height:1.12;
  margin:8px 0 0;
  color:var(--navy);
}
.section-head p{max-width:470px;color:var(--muted);line-height:1.6}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  border:1px solid #e2e7ec;
  border-radius:18px;
  padding:28px;
  background:#fff;
  transition:.2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(16,42,67,.09)}
.card.featured{background:#fbfaf4;border-color:#dec98e}
.icon{font-size:38px}
.card h3{font-size:21px;margin:18px 0 9px}
.card p{color:var(--muted);line-height:1.55;min-height:48px}
.card a{font-size:13px;font-weight:800;color:var(--teal)}

.why{padding:80px 0;background:linear-gradient(135deg,var(--navy),#0d1e2d);color:#fff}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}
.why h2{color:#fff}
.why-list{display:grid;gap:20px}
.why-list div{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:16px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.why-list span{color:#d8be78;font-weight:800}
.why-list p{margin:0;color:#dce5ec;line-height:1.6}

.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.about-visual{
  min-height:400px;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(28,124,125,.96),rgba(16,42,67,.96));
  display:grid;
  place-items:center;
  box-shadow:0 22px 50px rgba(16,42,67,.14);
}
.about-copy p{color:var(--muted);line-height:1.75;font-size:16px}
.business-details{
  margin-top:26px;
  display:grid;
  gap:12px;
}
.business-details div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 16px;
  background:var(--light);
  border-left:4px solid var(--teal);
}
.business-details span{color:var(--muted)}

.contact-section{background:#f5f7f9}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}
.contact-grid>div>p{color:var(--muted);line-height:1.7;max-width:500px}
.contact-highlight{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px;
  background:#fff;
  border-radius:14px;
  border:1px solid #e1e7ed;
}
.contact-highlight strong{color:var(--navy)}
.contact-highlight span{color:var(--muted);font-size:14px}
.contact-card{
  background:#fff;
  border-radius:18px;
  padding:26px;
  box-shadow:0 18px 50px rgba(16,42,67,.08);
  display:grid;
  gap:16px;
}
.contact-card label{display:grid;gap:7px;font-size:13px;font-weight:700}
.contact-card input,.contact-card select,.contact-card textarea{
  width:100%;
  padding:12px 13px;
  border:1px solid #d7e0e7;
  border-radius:10px;
  font:inherit;
  font-size:14px;
  background:#fff;
}
.contact-card textarea{resize:vertical}
.contact-card small{color:#8794a1;line-height:1.4}

footer{background:#091824;color:#c7d1da}
.footer{
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:13px;
}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand>div{display:flex;flex-direction:column;gap:4px}
.footer-brand strong{color:#fff}

@media(max-width:880px){
  .main-nav{display:none}
  .hero-grid,.why-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
  .hero{min-height:auto;padding:68px 0}
  .hero-grid{min-height:auto}
  .hero h1{font-size:52px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .ribbon-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:16px 0}
  .showcase-card{max-width:580px}
  .section-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .nav-cta{display:none}
  .hero h1{font-size:42px}
  .hero-actions{flex-direction:column}
  .hero-points{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .section{padding:64px 0}
  .section-head h2,.about-copy h2,.contact-grid h2,.why h2{font-size:35px}
  .footer{flex-direction:column;align-items:flex-start;justify-content:center}
}


.btn-whatsapp{
  background:#25D366;
  color:#0b2d1a;
  border:none;
}
.btn-whatsapp:hover{
  filter:brightness(.96);
}
.whatsapp-direct{
  margin-top:8px;
  display:inline-flex;
  width:max-content;
  padding:10px 14px;
  border-radius:9px;
  background:#25D366;
  color:#0b2d1a;
  font-size:13px;
  font-weight:800;
}