/* ==========================================================================
   Pointworks — Modern Mono redesign (body/sections only)
   Light-gray canvas · near-black ink · single electric-blue accent.
   HEROES ARE LEFT UNTOUCHED — the original slider + tech effects (defined in
   each page's inline <style>) render as before. Loaded LAST.
   ========================================================================== */

:root {
  --mm-bg:        #F4F4F5;
  --mm-surface:   #FFFFFF;
  --mm-ink:       #18181B;
  --mm-ink-soft:  #52525B;
  --mm-faint:     #A1A1AA;
  --mm-line:      #E4E4E7;
  --mm-accent:    #2563EB;
  --mm-accent-d:  #1D4ED8;
  --mm-accent-w:  #EFF4FF;
  --mm-radius:    14px;
  --mm-maxw:      1160px;
  --mm-display: "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

/* ---- 1. Canvas + kill templated dark/gradient backgrounds ---------------
   NOTE: hero classes (.pw-hero-carousel/.pw-slide/.pw-tech-*) are intentionally
   excluded so the original hero effects survive. -------------------------- */
html, body { background: var(--mm-bg) !important; }
body, .body-container-wrapper, #main-content, main,
.container-fluid, .row-fluid-wrapper, .row-fluid, .dnd-section,
[class*="-background-color"], [class*="-background-gradient"],
[class*="-background-layers"], .hero-section {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
body {
  color: var(--mm-ink) !important;
  font-family: var(--mm-display) !important;
  -webkit-font-smoothing: antialiased;
}

/* ---- 2. Typography baseline -------------------------------------------- */
h1, h2, h3, h4, h5 {
  color: var(--mm-ink) !important;
  font-family: var(--mm-display) !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}
a { color: var(--mm-accent); }
a:hover { color: var(--mm-accent-d); }

/* ---- 3. Header / navigation ------------------------------------------- */
.header-section, header, .header-section .container-fluid {
  background: rgba(244,244,245,0.85) !important;
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--mm-line) !important;
}
.mainmenu a, .hs-menu-item a, .header .hs-menu-item > a {
  color: var(--mm-ink) !important; font-weight: 600 !important; letter-spacing: -0.01em;
}
.mainmenu a:hover, .hs-menu-item a:hover { color: var(--mm-accent) !important; }
/* nav 문의하기 button — matches the hero "상담 문의하기" cyan CTA */
.header-btn .button, a.button[href="#contact"], a.button[href*="#contact"] {
  background: #4FC3F7 !important; border: 1px solid #4FC3F7 !important;
  color: #04121f !important; border-radius: 10px !important; font-weight: 800 !important; box-shadow: none !important;
}
.header-btn .button:hover, a.button[href*="#contact"]:hover { background: #00E5FF !important; border-color: #00E5FF !important; color: #04121f !important; }

/* ---- 4. about-us intro block (body content, not the hero) -------------- */
.intro-section { padding: clamp(56px, 8vw, 96px) 24px !important; }
.intro-container { max-width: var(--mm-maxw) !important; margin: 0 auto !important; text-align: left !important; }
.intro-english { color: var(--mm-accent) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.intro-tagline { color: var(--mm-ink) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }
.intro-text, .intro-text p { color: var(--mm-ink-soft) !important; font-weight: 400 !important; }

/* ---- 5. Section rhythm ------------------------------------------------- */
.pointworks-value-section, .logo-section, .business-section,
.form-section, .faq-section, .bottom-strip-section, .from-blog-section {
  padding: clamp(56px, 8vw, 96px) 24px !important;
}
.pointworks-value-section .container, .logo-section .container,
.business-section .container, .form-section .container,
.faq-section .container, .bottom-strip-section .container {
  max-width: var(--mm-maxw) !important; margin: 0 auto !important;
}
.section-header { text-align: left !important; margin-bottom: 40px !important; }
.section-header h2, .pointworks-value-section h2, .logo-section h2,
.business-section h2, .form-section h3, .faq-section h2 {
  font-size: clamp(28px, 3.6vw, 42px) !important; font-weight: 800 !important; letter-spacing: -0.03em !important;
}
.section-subtitle { color: var(--mm-ink-soft) !important; font-size: 17px !important; font-weight: 400 !important; }
.logo-section, .faq-section { background: var(--mm-surface) !important; border-block: 1px solid var(--mm-line); }

/* ---- 6. Cards --------------------------------------------------------- */
.value-card, .business-section .box, .business-section .item, .pointworks-value-section .value-card {
  background: var(--mm-surface) !important; border: 1px solid var(--mm-line) !important;
  border-radius: var(--mm-radius) !important; box-shadow: none !important;
  transition: border-color .15s ease;
}
.value-card:hover, .business-section .box:hover { border-color: var(--mm-accent) !important; }

/* simpler "Why Pointworks" cards — logo icon removed, small blue accent bar instead */
.pointworks-value-section .value-icon { display: none !important; }
.pointworks-value-section .value-card { padding: 30px 28px !important; text-align: left !important; }
.pointworks-value-section .value-card h3 {
  position: relative !important; padding-top: 20px !important; margin: 0 0 12px !important;
  font-size: 1.15rem !important; font-weight: 800 !important; color: var(--mm-ink) !important;
}
.pointworks-value-section .value-card h3::before {
  content: "" !important; position: absolute !important; top: 0; left: 0;
  width: 34px; height: 4px; background: var(--mm-accent); border-radius: 2px;
}
.pointworks-value-section .value-card p {
  color: var(--mm-ink-soft) !important; line-height: 1.7 !important; margin: 0 !important; font-size: 15px !important;
}
.business-section h3 { font-weight: 800 !important; }
.business-section .icon { color: var(--mm-accent) !important; }
.business-section .icon svg { fill: var(--mm-accent) !important; }

/* ---- 7. Forms --------------------------------------------------------- */
.form-section { background: var(--mm-surface) !important; border-block: 1px solid var(--mm-line); }
.contact-form input, .contact-form textarea, .emailjs-contact-form input, .emailjs-contact-form textarea {
  border: 1px solid var(--mm-line) !important; border-radius: 10px !important;
  background: var(--mm-bg) !important; color: var(--mm-ink) !important; box-shadow: none !important;
}
.contact-form input:focus, .contact-form textarea:focus,
.emailjs-contact-form input:focus, .emailjs-contact-form textarea:focus {
  border-color: var(--mm-accent) !important; outline: 2px solid var(--mm-accent-w) !important;
}
.contact-form label, .emailjs-contact-form label { color: var(--mm-ink-soft) !important; font-weight: 600 !important; }
.submit-btn, .form-section .button {
  background: var(--mm-accent) !important; color: #fff !important; border: 1px solid var(--mm-accent) !important;
  border-radius: 10px !important; font-weight: 700 !important; box-shadow: none !important;
}
.submit-btn:hover { background: var(--mm-accent-d) !important; }
.green-box { background: var(--mm-accent) !important; }

/* contact section (#contact) — distinct blue dot-grid pattern + simpler card */
.form-section#contact {
  background-color: var(--mm-bg) !important;
  background-image: radial-gradient(rgba(37,99,235,0.16) 1.3px, transparent 1.4px) !important;
  background-size: 22px 22px !important;
  border-block: 1px solid var(--mm-line) !important;
}
.form-section#contact .green-box { display: none !important; }
.form-section#contact .container, .form-section#contact .cover { background: transparent !important; box-shadow: none !important; }
.form-section#contact .form-cover {
  background: var(--mm-surface) !important; border: 1px solid var(--mm-line) !important;
  border-radius: 16px !important; padding: 28px !important;
  box-shadow: 0 18px 50px -28px rgba(0,0,0,.28) !important;
}
.form-section#contact .left-part h3, .form-section#contact .left-part h3 span { color: var(--mm-ink) !important; font-weight: 800 !important; }
.form-section#contact .left-part p, .form-section#contact .left-part span { color: var(--mm-ink-soft) !important; }

/* ---- 8. Buttons (leftover template buttons; hero btn excluded) -------- */
.button, a.button, button.button, .button-one a {
  background: var(--mm-accent) !important; color: #fff !important;
  border-color: var(--mm-accent) !important; border-radius: 10px !important; box-shadow: none !important;
}
.button:hover, a.button:hover { background: var(--mm-accent-d) !important; }

/* ---- 9. FAQ ----------------------------------------------------------- */
.faq-section .faq-item, .faq-section .accordion-item, .faq-section details {
  background: var(--mm-bg) !important; border: 1px solid var(--mm-line) !important;
  border-radius: 10px !important; box-shadow: none !important;
}

/* ---- 10. Bottom CTA strip (bright) ----------------------------------- */
.bottom-strip-section, .bottom-strip-gray {
  background: var(--mm-accent-w) !important; border-radius: 0 !important;
  border-block: 1px solid var(--mm-line) !important;
}
.bottom-strip-section h2, .bottom-strip-section h3 { color: var(--mm-ink) !important; }
.bottom-strip-section p { color: var(--mm-ink-soft) !important; }
.bottom-strip-section .button, .bottom-strip-section a.button { background: var(--mm-accent) !important; color: #fff !important; }

/* ---- 11. Footer ------------------------------------------------------ */
.footer-section, footer {
  background: var(--mm-surface) !important; color: var(--mm-ink-soft) !important; border-top: 1px solid var(--mm-line) !important;
}
.footer-section a, footer a { color: var(--mm-ink-soft) !important; }
.footer-section a:hover, footer a:hover { color: var(--mm-accent) !important; }
.footer-section h3, .footer-section h4, footer h3, footer h4 { color: var(--mm-ink) !important; }

/* #contact form — compact + vertically aligned to the left text */
.form-section#contact .cover { display:flex !important; align-items:center !important; gap:48px !important; flex-wrap:wrap; }
.form-section#contact .left-part, .form-section#contact .right-part { flex:1 1 320px !important; }
.form-section#contact .form-cover { padding:22px !important; }
.form-section#contact .contact-form .form-group { margin-bottom:9px !important; }
.form-section#contact .contact-form label { display:block; margin:0 0 3px !important; font-size:13px !important; line-height:1.2 !important; }
.form-section#contact .contact-form input { padding:9px 12px !important; }
.form-section#contact .contact-form textarea { padding:9px 12px !important; height:54px !important; min-height:54px !important; }
.form-section#contact .submit-btn { padding:11px 20px !important; margin-top:6px !important; }