*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f8fb;color:#0f172a;line-height:1.65}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}body.nav-open{overflow:hidden}
:root{--surface:#fff;--surface-2:#eef4fb;--surface-3:#fff8e8;--muted:#5d6c7c;--muted-2:#64748b;--primary:#f59e0b;--primary-dark:#d97706;--dark:#091424;--border:#dde6f1;--radius:26px;--shadow:0 18px 42px rgba(15,23,42,.09);--shadow-2:0 20px 48px rgba(15,23,42,.12)}
.container{width:min(92%,1200px);margin:0 auto}
.topbar{background:var(--dark);color:#fff;font-size:.95rem}
.topbar-inner{display:flex;justify-content:space-between;gap:16px;padding:10px 0;flex-wrap:wrap}

.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:82px;flex-wrap:nowrap;position:relative}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.12rem;min-width:0;position:relative;z-index:82}
.brand-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#fde68a);flex:0 0 auto}
.brand-logo{width:88px;height:68px;border-radius:0px;object-fit:contain;flex:0 0 auto}
.nav-links{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-weight:700;align-items:center;margin:0 auto;}
.nav-links a{transition:color .2s ease}
.nav-links a:hover{color:#111827}
.header-cta{margin-left:auto}
.nav-toggle{display:none;border:0;background:#0f172a;color:#fff;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer;position:relative;z-index:82;margin-left:auto}
.nav-mobile-cta{display:none}
.nav-overlay{display:none}

.hero{padding:108px 0 92px;background-size:cover;background-position:center;color:#fff}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center;min-height:82vh}
.hero-copy{max-width:760px}
.hero-copy h1{font-size:clamp(2.5rem,5vw,5.4rem);line-height:1.02;margin:14px 0 18px;letter-spacing:-.03em}
.hero-copy p{font-size:1.14rem;color:rgba(255,255,255,.9);max-width:720px}
.hero-badge,.eyebrow{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;font-size:.92rem;font-weight:700}
.hero-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14)}
.eyebrow.dark{background:#fff3d4;color:#7c4a00}
.eyebrow.light{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);color:#fff}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:999px;font-weight:800;border:0;cursor:pointer;text-align:center;font-size:1rem}
.btn-primary{background:var(--primary);color:#111827}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-secondary,.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.38);color:#fff}
.cta-dark{color:#111827;border-color:#c7d2e0}

.trust-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.trust-pill{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);font-weight:700}
.hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.metric-card{padding:18px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.metric-card strong{display:block;margin-bottom:6px;font-size:1rem}
.metric-card span{display:block;color:rgba(255,255,255,.84);font-size:.95rem}

.glass{background:rgba(255,255,255,.12);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-2)}
.hero-card{padding:30px;border-radius:30px}
.hero-card-head h3{margin:10px 0 6px;font-size:1.55rem}
.hero-card-head p{margin:10px 0 0;color:rgba(255,255,255,.86);font-size:.98rem}
.notice{padding:12px 14px;border-radius:14px;margin:12px 0;font-weight:700}
.notice.success{background:rgba(22,163,74,.18);border:1px solid rgba(22,163,74,.25)}
.inquiry-form{display:grid;gap:12px;margin-top:14px}
.inquiry-form input,.inquiry-form select,.inquiry-form textarea{width:100%;padding:14px 15px;border-radius:16px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font:inherit}
.inquiry-form textarea{min-height:118px}

.section{padding:98px 0}
.section-strong{padding:108px 0}
.section-soft{background:linear-gradient(180deg,#fff9ec,#f7fbff)}
.section.alt{background:var(--surface-2)}
.section-head{text-align:center;max-width:860px;margin:0 auto 52px}
.section-head h2{margin:12px 0 10px;font-size:clamp(2rem,3vw,3.25rem);line-height:1.18;letter-spacing:-.02em}
.section-head p{color:var(--muted);font-size:1.02rem}

.card-grid,.gallery-grid,.feature-grid,.steps-grid,.audience-grid,.faq-list{display:grid;gap:22px}
.card-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-grid.three,.gallery-grid,.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps-grid,.audience-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.faq-list{grid-template-columns:repeat(2,minmax(0,1fr))}

.content-card,.pricing-card,.cta-panel,.gallery-card,.estimator-card,.feature-card,.step-card,.audience-card,.faq-card{background:var(--surface);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow)}
.content-card,.pricing-card,.cta-panel,.estimator-card,.feature-card,.step-card,.audience-card,.faq-card{padding:28px}
.elevated{transform:translateY(0);transition:transform .2s ease, box-shadow .2s ease}
.elevated:hover,.feature-card:hover,.step-card:hover,.audience-card:hover,.faq-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.card-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(59,130,246,.08));font-size:1.4rem;margin-bottom:18px}
.content-card h3,.feature-card h3,.step-card h3,.audience-card h3,.faq-card h3{margin:0 0 10px;font-size:1.18rem}
.content-card p,.feature-card p,.step-card p,.audience-card p,.faq-card p{margin:0;color:var(--muted-2)}

.step-no{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#f59e0b,#fde68a);font-weight:900;color:#111827;margin-bottom:14px}

.pricing-card{position:relative;display:flex;flex-direction:column}
.featured{border:2px solid rgba(245,158,11,.38);background:linear-gradient(180deg,#fffdf8,#fff)}
.pricing-badge{position:absolute;top:16px;right:16px;background:var(--primary);padding:7px 10px;border-radius:999px;font-size:.8rem;font-weight:800}
.pricing-price{font-size:2.1rem;font-weight:900;margin:14px 0 14px}
.pricing-card p{color:var(--muted-2);flex:1}
.pricing-btn{margin-top:18px;width:100%}

.estimator-wrap{display:grid;grid-template-columns:.96fr 1.04fr;gap:28px;align-items:start}
.estimator-copy{padding-top:10px}
.estimator-copy p{color:var(--muted-2);font-size:1rem}
.benefit-list{margin:18px 0 0;padding-left:20px;color:#334155}
.benefit-list li{margin-bottom:8px}
.premium{background:linear-gradient(180deg,#fff,#fff9ee)}
.result-card{margin-bottom:18px;padding:20px;border:1px solid #fde7b2;background:linear-gradient(180deg,#fffdf7,#fff7e8);border-radius:22px}
.result-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.result-head h3{margin:0;font-size:1.26rem}
.result-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:#0f172a;color:#fff;font-size:.85rem;font-weight:800}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.result-item{padding:15px;border-radius:18px;background:#fff;border:1px solid #eee7d7}
.result-item span{display:block;color:#6b7280;font-size:.9rem;margin-bottom:4px}
.result-item strong{display:block;font-size:1.03rem;color:#111827}
.result-item.highlight{background:#fff3d4;border-color:#f6d78e}
.result-note{margin:14px 0 0;color:#5b6470}
.form-stack{display:grid;gap:14px}
.split-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-stack label{display:grid;gap:8px;font-weight:700;color:#23324a}
.form-stack input,.form-stack select,.form-stack textarea{width:100%;padding:14px 15px;border-radius:16px;border:1px solid #ccd9e8;font:inherit;background:#fff;color:#0f172a;min-width:0}

.gallery-card{overflow:hidden;margin:0}
.gallery-card img{width:100%;height:320px;object-fit:cover}
.gallery-card figcaption{padding:16px 18px;font-weight:700}

.cta-panel{display:flex;justify-content:space-between;gap:22px;align-items:center;background:linear-gradient(135deg,#fff8e7,#fff);padding:34px}
.site-footer{background:var(--dark);color:rgba(255,255,255,.86);padding:34px 0 92px}
.footer-wrap{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.footer-brand strong{display:block;margin-bottom:6px}
.footer-contact{display:grid;gap:6px;text-align:right}
.mobile-cta-bar{display:none}

@media (max-width:1180px){
  .hero-grid,.estimator-wrap{grid-template-columns:1fr}
  .card-grid.four,.steps-grid,.audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid.three,.gallery-grid,.feature-grid,.faq-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-metrics{grid-template-columns:1fr 1fr}
  .hero{padding:92px 0 78px}
  .hero-grid{min-height:auto}
}

@media (max-width:820px){
  .section,.section-strong{padding:78px 0}
  .hero{padding:76px 0 58px}
  .hero-card,.content-card,.pricing-card,.cta-panel,.estimator-card,.feature-card,.step-card,.audience-card,.faq-card{padding:24px}
  .cta-panel{flex-direction:column;align-items:flex-start}
  .footer-wrap,.topbar-inner{flex-direction:column;align-items:flex-start}
  .footer-contact{text-align:left}
  .desktop-only{display:none}
  .nav{min-height:72px;flex-wrap:nowrap}
  .nav-toggle{display:inline-flex}
  .header-cta{display:none}
  .nav-links{position:absolute;top:100%;left:12px;right:12px;width:auto;height:auto;max-height:calc(100vh - 110px);background:#fff;z-index:81;box-shadow:0 18px 40px rgba(15,23,42,.16);padding:14px;display:flex;flex-direction:column;align-items:stretch;gap:6px;transform:translateY(-10px);opacity:0;pointer-events:none;transition:all .22s ease;overflow:auto;border-radius:20px;border:1px solid #e8eef7}
  .nav-links.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a{width:100%;padding:14px 12px;border-bottom:1px solid #edf2f7;color:#0f172a;font-weight:700}
  .nav-links a:last-child{border-bottom:0}
  .nav-mobile-cta{display:flex!important;align-items:center;justify-content:center;margin-top:8px;border-radius:14px;background:var(--primary);color:#111827;font-weight:800}
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.35);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:80}
  .nav-overlay.is-open{opacity:1;pointer-events:auto}
  .result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .container{width:min(94%,1200px)}
  .hero-copy h1{font-size:2.3rem}
  .hero-copy p{font-size:1rem}
  .card-grid.four,.card-grid.three,.gallery-grid,.split-two,.feature-grid,.steps-grid,.audience-grid,.faq-list,.result-grid,.hero-metrics{grid-template-columns:1fr}
  .btn,.hero-actions .btn{width:100%}
  .brand{font-size:1rem}
  .brand-logo,.brand-mark{width:42px;height:42px}
  .section-head{margin-bottom:34px}
  .gallery-card img{height:240px}
  .hero-card{padding:20px}
  .result-card{padding:16px}
  .mobile-cta-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:80;background:#0f172a;border-top:1px solid rgba(255,255,255,.1)}
  .mobile-cta-bar a{display:flex;align-items:center;justify-content:center;padding:14px 12px;color:#fff;font-weight:800}
  .mobile-cta-bar a:first-child{background:var(--primary);color:#111827}
}
.hero-copy h1 {
    font-size: clamp(2.5rem,5vw,3.4rem);
    line-height: 1.02;
    margin: 14px 0 18px;
    letter-spacing: -.03em;
}

.nav-links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    color: var(--muted);
    font-weight: 700;
    align-items: center;
    margin: 0 auto;
}
