:root{ --accent: #ff4500; --max-width:1200px; --header-height:64px; }
/* ===== Global ===== */
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html,body{height:100%}
body{background:#f7f7f7;color:#111;line-height:1.6;transition:background .3s,color .3s;scroll-padding-top:var(--header-height)}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:0 16px;width:100%}

/* ===== Header ===== */
header{background:#fff;position:fixed;inset:0 0 auto 0;height:var(--header-height);z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.nav-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:12px}
.logo{font-size:clamp(1.1rem,2.8vw,1.8rem);font-weight:800;color:var(--accent)}
.logo img {max-width: 140px; height: auto; display: block;}
nav{display:flex;gap:18px;align-items:center}
nav a{color:#222;font-weight:600;padding:8px 6px;border-radius:6px;transition:color .15s,background .15s}
nav a:hover{color:var(--accent);background:rgba(255,69,0,.04)}
#menuBtn{display:none;cursor:pointer;font-size:1.6rem;background:transparent;border:none}
#mobileMenu{display:none;flex-direction:column}

/* make anchor navigation not hidden under fixed header */
section{padding:calc(var(--header-height) + 40px) 0}

/* ===== Hero ===== */
.hero, .policy-hero, .content-hero{padding:calc(var(--header-height) + 40px) 16px 60px;text-align:center;background:#fff}
.hero h1, .policy-hero h1, .content-hero h1{font-size:clamp(1.6rem,5vw,3rem);margin-bottom:12px;line-height:1.05}
.hero p, .policy-hero p.lead, .content-hero p{font-size:clamp(.95rem,1.6vw,1.2rem);max-width:700px;margin:0 auto 18px;opacity:.85}
.cta{background:var(--accent);color:#fff;padding:12px 26px;font-weight:700;border-radius:10px;display:inline-block;transition:transform .12s,background .12s}
.cta:hover{transform:translateY(-2px);background:#e03e00}

/* ===== Sections ===== */
section{padding:60px 16px}
h2.section-title{text-align:center;font-size:clamp(1.6rem,3.5vw,2.5rem);margin-bottom:40px}

/* ===== Features ===== */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.feature{background:#fff;padding:22px;border-radius:14px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.06);transition:transform .25s}
.feature:hover{transform:translateY(-6px)}
.feature .emoji{font-size:42px;margin-bottom:12px}
.feature h3{color:var(--accent);font-size:1.15rem;margin-bottom:8px}

/* ===== Services ===== */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.service{background:#fff;padding:18px;border-radius:12px;box-shadow:0 6px 15px rgba(0,0,0,.05);border-left:4px solid var(--accent)}
.service h3{color:var(--accent);margin-bottom:8px;font-size:1.1rem}

/* ===== Clients ===== */
.clients{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}
.clients img{max-width:120px;width:100%;height:auto;object-fit:contain}

/* ===== Pricing ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.plan{background:#fff;padding:18px;border-radius:12px;text-align:center;box-shadow:0 6px 15px rgba(0,0,0,.05)}
.plan h3{color:var(--accent);font-size:1.15rem;margin-bottom:10px}
.plan p.price{font-size:1.6rem;font-weight:700;margin-bottom:10px}
.plan ul{list-style:none;margin-bottom:12px;padding-left:18px;text-align:left}
.plan ul li::before{content:"✔ ";color:var(--accent)}

/* ===== Contact Form ===== */
.contact-form{width:100%;max-width:720px;margin:0 auto;background:#fff;padding:20px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.contact-form input,.contact-form textarea{width:100%;padding:12px;margin-bottom:12px;border:1px solid #ddd;border-radius:8px}
.contact-form button{background:var(--accent);color:#fff;padding:10px 18px;border:none;font-weight:700;border-radius:8px;cursor:pointer}
.contact-form button:hover{background:#e03e00}

/* Feedback messages for form */
.feedback{max-width:720px;margin:12px auto 18px;padding:12px;border-radius:8px;text-align:center;font-weight:600}
.feedback.success{background:#e6ffef;color:#046734;border:1px solid #b6efcf}
.feedback.warning{background:#fff6e6;color:#7a4b00;border:1px solid #f3d9a5}
.feedback.error{background:#fff0f0;color:#7a1f1f;border:1px solid #f5c6cb}

/* Policy / Terms specific */
.breadcrumb{font-size:.95rem;color:#666;margin:10px 0}
.breadcrumb a{color:var(--accent)}
.policy-grid, .content-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.policy-section, .content-main .card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.04);margin-bottom:14px}
.policy-section h2, .content-main h2{margin-bottom:10px;color:var(--accent)}
.policy-section ul{list-style:disc inside}
.policy-section ul li{text-decoration:none}
.policy-section ul li a{ text-decoration: none; color: inherit; }
.policy-aside .card, .content-aside .card{background:#fff;padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.04);margin-bottom:14px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.btn.small{padding:8px 12px;font-size:.95rem}

details{background:transparent;border-radius:8px;padding:8px}
details[open]{background:linear-gradient(180deg,rgba(255,69,0,.03),transparent)}
summary{cursor:pointer;font-weight:600;padding:8px;border-radius:8px;list-style:none;outline:none}
summary::-webkit-details-marker{display:none}
details p{margin:8px 0 0;color:#333}

/* Footer Styling */
footer{background:#0b1220;color:#fff;padding:50px 16px 30px;font-size:.95rem}
.footer-container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;max-width:var(--max-width);margin:0 auto}
.footer-brand h3{font-size:1.5rem;color:var(--accent);margin-bottom:8px}
.footer-brand p{margin-bottom:12px;opacity:.85}
.footer-socials a{font-size:1.2rem;margin-right:12px;color:#ffb8a1;transition:transform .15s,color .15s}
.footer-socials a:hover{transform:scale(1.15);color:var(--accent)}
.footer-links h4,.footer-contact h4{font-size:1.05rem;margin-bottom:12px;color:var(--accent)}
.footer-links ul{list-style:none;padding:0}
.footer-links ul li{margin-bottom:8px}
.footer-links ul li a,.footer-contact a{color:#fff;text-decoration:none;opacity:.95}
.footer-links ul li a:hover,.footer-contact a:hover{color:#ffb8a1}
.footer-bottom{text-align:center;margin-top:30px;border-top:1px solid rgba(255,255,255,.06);padding-top:18px;font-size:.85rem;opacity:.75}

/* Mobile tweaks */
@media (max-width:1024px){
  :root{--header-height:64px}
}

@media (max-width:768px){
  nav{display:none}
  #menuBtn{display:block}
  #mobileMenu{display:none;position:absolute;left:0;right:0;top:var(--header-height);background:#fff;padding:12px 16px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
  #mobileMenu.open{display:flex}
  #mobileMenu a{padding:10px 6px;border-radius:8px}
  .hero{padding:calc(var(--header-height) + 28px) 12px 40px}
  .policy-hero{padding:16px;margin-top:74px}
  .policy-section{padding:14px}
  .policy-grid{gap:16px}
  .policy-aside{order:2}
  .policy-aside .card{padding:12px}
  .btn{width:100%;text-align:center}
  .btn.small{width:auto}
  body{font-size:15px}
}

@media (max-width:420px){
  .logo{font-size:1.1rem}
  .hero h1{font-size:1.5rem}
  .cta{padding:10px 16px}
}