:root{
  --primary: #FF6A4D;       /* primary (from logo orange) */
  --primary-700: #e45737;
  --accent: #ff8e6b;
  --bg: #F7E6EA;           /* soft background tone from logo */
  --hero-light: linear-gradient(135deg, rgba(255,106,77,0.12), rgba(255,166,140,0.06));
  --text: #222228;
  --muted: #6b6b6b;
  --glass: rgba(255,255,255,0.6);
  --error: #b23;
  --success: #2ecc71;
  --radius: 12px;
  --max-width: 1100px;
  --container-padding: 1.25rem;
  --shadow-sm: 0 6px 18px rgba(17,17,17,0.06);
  --shadow-lg: 0 30px 60px rgba(17,17,17,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.35), transparent 10%),
    radial-gradient(800px 400px at 90% 90%, rgba(255,255,255,0.40), transparent 10%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Container */
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.25rem var(--container-padding);
}

/* Header */
.site-header{
  position: sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.40));
  border-bottom: 1px solid rgba(34,34,40,0.05);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--text);
}
.logo{height:48px;width:48px;object-fit:contain;border-radius:10px}
.brand-text{font-weight:700;font-size:1.05rem;letter-spacing:0.2px}
.brand .small{height:30px;width:30px;border-radius:8px}

/* Navigation */
.site-nav{
  display:flex;
  gap:1rem;
  align-items:center;
}
.site-nav a{
  color:var(--text);
  text-decoration:none;
  padding:0.5rem 0.6rem;
  border-radius:8px;
  transition: background .18s, color .18s;
  font-weight:600;
}
.site-nav a:hover{background:rgba(34,34,40,0.04)}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem 1rem;
  border-radius:10px;
  border: none;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:white;box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;border:1px solid rgba(34,34,40,0.06);color:var(--text)}
.btn-outline{background:transparent;border:1px solid rgba(34,34,40,0.08);color:var(--text)}

/* Mobile nav toggle */
.nav-toggle{display:none;background:transparent;border:0;padding:.35rem;border-radius:8px}
.hamburger, .hamburger::before, .hamburger::after{
  display:block;width:22px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:transform .18s ease, opacity .18s ease;
}
.hamburger::before, .hamburger::after{content:"";position:absolute;left:0}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}
.nav-toggle.open .hamburger{background:transparent}
.nav-toggle.open .hamburger::before{transform:rotate(45deg);top:0}
.nav-toggle.open .hamburger::after{transform:rotate(-45deg);top:0}

/* Hero */
.hero{
  padding:3.5rem 0;
  background: var(--hero-light), linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.30));
  border-bottom-left-radius:24px;
  border-bottom-right-radius:24px;
  box-shadow: var(--shadow-lg);
}
.hero-inner{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero-copy{flex:1;min-width:280px;max-width:640px}
.hero h1{font-size:clamp(1.6rem, 3.6vw, 2.6rem);margin:0 0 .6rem}
.lead{color:var(--muted);margin:0 0 1rem}
.hero-ctas{display:flex;gap:.75rem}

/* Mock art */
.hero-art{min-width:260px;display:flex;align-items:center;justify-content:center}
.mock-card{
  width:280px;border-radius:16px;padding:1rem;background:linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.5));
  border:1px solid rgba(34,34,40,0.04);box-shadow:var(--shadow-sm)
}
.mock-header{display:flex;gap:.5rem;margin-bottom:.75rem}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot-red{background:#ff5a5f}
.dot-yellow{background:#ffbd2e}
.dot-green{background:#2ecc71}
.mock-body{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.stat{background:rgba(34,34,40,0.02);padding:.6rem;border-radius:10px;text-align:center}
.stat-number{font-weight:800;color:var(--primary);font-size:1.05rem}
.stat-label{font-size:.8rem;color:var(--muted)}

/* Sections */
.section-title{font-size:1.25rem;margin:0 0 .35rem}
.section-lead{color:var(--muted);margin:0 0 1rem}

/* Grid utilities */
.grid{display:grid;gap:1rem}
.features-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.feature{background:rgba(255,255,255,0.55);padding:1.2rem;border-radius:12px;border:1px solid rgba(34,34,40,0.03)}
.feature-icon{font-size:1.6rem;margin-bottom:.5rem}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 360px;gap:1rem;align-items:start}
.cta-card{background:linear-gradient(180deg,white,rgba(255,255,255,0.9));padding:1rem;border-radius:12px;box-shadow:var(--shadow-sm);border:1px solid rgba(34,34,40,0.03)}

/* Pricing */
.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.price-card{background:rgba(255,255,255,0.8);padding:1.2rem;border-radius:12px;border:1px solid rgba(34,34,40,0.04)}
.price-card-popular{transform:translateY(-6px);box-shadow: var(--shadow-lg);border:1px solid rgba(34,34,40,0.06)}
.price{font-size:1.6rem;font-weight:800;color:var(--primary)}

/* Contact */
.contact-form{background:rgba(255,255,255,0.7);padding:1rem;border-radius:12px;border:1px solid rgba(34,34,40,0.03)}
.form-grid{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
.form-grid label{display:flex;flex-direction:column;font-weight:600;font-size:.9rem;color:var(--muted)}
.form-grid label.full{grid-column:1 / -1}
.form-grid input, .form-grid textarea{margin-top:.5rem;padding:.6rem;border-radius:8px;border:1px solid rgba(34,34,40,0.06);background:transparent}
.form-actions{display:flex;gap:.5rem;align-items:center}
.form-result{margin-top:.6rem;color:var(--muted)}

/* Footer */
.site-footer{padding:1.25rem 0;border-top:1px solid rgba(34,34,40,0.04);margin-top:2rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-left{display:flex;align-items:center;gap:.6rem}
.footer-right{text-align:right}
.footer-nav a{margin-left:.75rem;color:var(--muted);text-decoration:none}

/* Responsive */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .hero-inner{padding-bottom: .6rem}
  .site-nav{position:fixed;right:16px;top:64px;background:var(--bg);box-shadow:var(--shadow-sm);padding:1rem;border-radius:12px;flex-direction:column;display:none}
  .site-nav.open{display:flex}
  .nav-toggle{display:inline-flex}
  .header-inner{gap:.5rem}
  .logo{height:40px;width:40px}
  .site-footer .footer-right{text-align:left}
  .form-grid{grid-template-columns:1fr}
}