:root{
  --ink:#2A2A2A;
  --accent:#4C77FF;
  --bg:#FFFFFF;
  --bg-soft:#F6F7FB;
  --border:#E6E8EF;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --container:1200px;
  --gutter:24px;
}
html {
  scroll-behavior: smooth;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}

/* Utilities */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.section{padding:64px 0}
.section-soft{background:var(--bg-soft)}
.section-title{font-size:32px;line-height:40px;margin:0 0 24px 0}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px;
  border:1px solid var(--border); text-decoration:none; font-weight:600;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-outline{background:#fff; color:var(--ink)}
.btn-ghost{background:transparent}

img{max-width:100%;display:block;border-radius:12px}
.logo-img{height:34px; width:auto; border-radius:0}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand-logo{height:34px; width:auto}
.brand-logo.small{height:28px; border-radius: 0;}

.brand-logo{
    height: 100px;
    width: 100px;
    border-radius: 15px

}

.brand-logo{
    height: 100px;
    width: 100px;
    border-radius: 15px:
}

.site-nav ul{display:flex; gap:16px; align-items:center; list-style:none; margin:0; padding:0}
.site-nav a{color:var(--ink); text-decoration:none; padding:10px 12px; border-radius:8px}
.site-nav a:hover{background:var(--bg-soft)}

.nav-toggle{
  display:none; background:none; border:0; padding:8px; cursor:pointer;
}
.nav-toggle-bar{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}

/* Mobile drawer */
.mobile-drawer{
  display:none; background:#fff; border-bottom:1px solid var(--border);
}
.mobile-drawer.open{display:block}
.mobile-drawer ul{list-style:none; margin:0; padding:12px var(--gutter)}
.mobile-drawer a{display:block; padding:12px; text-decoration:none; color:var(--ink); border-radius:8px}
.drawer-cta{margin-top:8px}

/* Hero */
.hero{padding:56px 0}
.hero-inner{display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center}
.hero-copy h1{font-size:48px; line-height:56px; margin:0 0 12px 0}
.hero-copy p{margin:0 0 16px 0; color:#444}
.hero-media img{box-shadow:var(--shadow)}

/* Cards */
.card-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transform:translateY(6px); transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.1)}
.card-media img{height:220px; width:100%; object-fit:cover}
.card-body{padding:16px}
.card-body h3{margin:0 0 6px 0}
.card-body p{margin:0 0 12px 0; color:#444}
.card-cta{font-weight:600; text-decoration:none; color:var(--accent)}

/* Benefits */
.benefits{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; list-style:none; margin:0; padding:0;
}
.benefits li{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:10px;
}
.benefit-icon{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; border-radius:100px; background:var(--bg-soft)}

/* Testimonials */
.testimonials{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.testimonial{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:var(--shadow);
}
.testimonial blockquote{margin:0 0 8px 0}

/* Gallery */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.gallery img{aspect-ratio:1 / 1; object-fit:cover}

/* CTA band */
.cta-band{background:var(--ink); color:#fff; padding:48px 0}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.cta-inner h2{margin:0}

/* Contact */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.contact-form{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow);
  display:grid; gap:12px;
}
.contact-form label{display:grid; gap:6px}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--border); outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(76,119,255,.12)}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:32px 0; background:#fff}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px; align-items:start}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer-links a{text-decoration:none; color:var(--ink)}
.footer-legal{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.footer-legal a{text-decoration:none; color:#555}

/* Reveal on scroll animation */
.reveal-on-scroll{
  opacity:0; transform:translateY(22px) scale(.98);
  transition:opacity .6s ease, transform .6s ease;
  will-change:transform, opacity;
}
.revealed{opacity:1; transform:translateY(0) scale(1)}



/* Hero rotating line */
.hero-line{margin:0 0 12px 0; font-size:48px; line-height:56px}
.hero-line .static{color:var(--ink)}
.hero-line .dynamic{
  color:var(--accent);
  display:inline-block;
  transition:opacity .28s ease, transform .28s ease;
  will-change:opacity, transform;
}

/* animation states */
.dynamic.is-out{opacity:0; transform:translateY(-8px)}
.dynamic.is-in{opacity:1; transform:translateY(0)}
/* Mobile size tweak */
@media (max-width:640px){
  .hero-line{font-size:36px; line-height:44px}
}

/* Responsive */
@media (max-width: 1024px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .cta-inner{flex-direction:column; text-align:center}
}
@media (max-width: 900px){
  .card-grid{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .site-nav{display:none}
  .nav-toggle{display:block}
  .hero-copy h1{font-size:36px; line-height:44px}
  .card-grid{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}