/* =========================================
   DreamAcross Custom CSS
   Paste this entire file into:
   Appearance → Additional CSS
   ========================================= */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

/* === CSS VARIABLES === */
:root {
  --da-accent: #2563EB;
  --da-accent-light: #DBEAFE;
  --da-accent-dark: #1D4ED8;
  --da-text: #1E293B;
  --da-text-secondary: #475569;
  --da-text-muted: #94A3B8;
  --da-bg: #FFFFFF;
  --da-bg-light: #F8FAFC;
  --da-border: #E2E8F0;
}

/* === GLOBAL === */
body {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;
  color: var(--da-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* === HEADER === */
.site-header,
.ast-primary-header {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--da-border) !important;
  box-shadow: none !important;
}

.site-title,
.ast-site-title-wrap a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--da-text) !important;
}

/* Nav links */
.ast-header-sections-navigation a,
.main-navigation a,
.ast-nav-menu a {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;
  color: var(--da-text-secondary) !important;
  font-weight: 450 !important;
  font-size: 0.9rem !important;
  transition: color 0.2s !important;
}

.ast-header-sections-navigation a:hover,
.main-navigation a:hover,
.ast-nav-menu a:hover {
  color: var(--da-accent) !important;
}

/* === HERO SECTION === */
/* Apply to a Cover block or Group block with class "da-hero" */
.da-hero {
  padding: 120px 2rem 80px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.da-hero h1,
.da-hero .wp-block-heading {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;
  font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: var(--da-text) !important;
}

/* Accent color for highlighted words - wrap in a span or use Mark block */
.da-hero mark,
.da-hero .has-accent-color,
.da-accent {
  color: var(--da-accent) !important;
  background: none !important;
}

.da-hero p {
  font-size: 1.15rem !important;
  color: var(--da-text-secondary) !important;
  line-height: 1.7 !important;
  font-weight: 350 !important;
  max-width: 520px !important;
}

/* Hero badge - use a paragraph with class "da-badge" */
.da-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--da-accent-light) !important;
  color: var(--da-accent) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 1rem !important;
  border-radius: 100px !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 1rem !important;
  width: fit-content !important;
}

/* === BUTTONS === */
.da-hero .wp-block-button__link,
.wp-block-button__link.da-btn-primary {
  background: var(--da-accent) !important;
  color: white !important;
  padding: 0.85rem 1.75rem !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;
  transition: all 0.25s !important;
  border: none !important;
}

.da-hero .wp-block-button__link:hover,
.wp-block-button__link.da-btn-primary:hover {
  background: var(--da-accent-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3) !important;
}

.wp-block-button__link.da-btn-secondary,
.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--da-text) !important;
  padding: 0.85rem 1.75rem !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--da-border) !important;
  font-weight: 500 !important;
  font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;
  transition: all 0.25s !important;
}

.wp-block-button__link.da-btn-secondary:hover,
.is-style-outline .wp-block-button__link:hover {
  border-color: var(--da-accent) !important;
  color: var(--da-accent) !important;
}

/* === JOURNEY CARDS === */
/* Use Group blocks with class "da-card" */
.da-card {
  background: var(--da-bg-light) !important;
  border: 1px solid var(--da-border) !important;
  border-radius: 20px !important;
  padding: 2.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.da-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--da-accent), #F97316, #10B981);
}

/* Journey step rows */
.da-step {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1rem !important;
  border-radius: 12px !important;
  background: white !important;
  border: 1px solid var(--da-border) !important;
  margin-bottom: 0.75rem !important;
  transition: all 0.3s !important;
}

.da-step:hover {
  border-color: var(--da-accent) !important;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08) !important;
  transform: translateX(4px);
}

/* === SERVICES SECTION === */
.da-services {
  padding: 80px 0 !important;
  background: var(--da-bg-light) !important;
}

/* Section labels */
.da-label {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--da-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.5rem !important;
}

/* Section titles */
.da-section-title {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  color: var(--da-text) !important;
  letter-spacing: -0.02em !important;
}

/* Service cards */
.da-service-card {
  background: white !important;
  border: 1px solid var(--da-border) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  transition: all 0.3s !important;
  position: relative !important;
  overflow: hidden !important;
}

.da-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--da-accent);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.da-service-card:hover::before {
  transform: scaleX(1);
}

.da-service-card:hover {
  border-color: var(--da-accent) !important;
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.08) !important;
  transform: translateY(-3px);
}

.da-service-card h3 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

.da-service-card p {
  font-size: 0.88rem !important;
  color: var(--da-text-secondary) !important;
  line-height: 1.6 !important;
}

/* === BLOG / INSIGHTS PREVIEW === */
.da-blog-card {
  border: 1px solid var(--da-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
  background: white !important;
}

.da-blog-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
  transform: translateY(-3px);
}

.da-blog-tag {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--da-accent) !important;
  background: var(--da-accent-light) !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 6px !important;
  margin-bottom: 0.5rem !important;
}

/* === CTA SECTION === */
.da-cta {
  background: var(--da-text) !important;
  color: white !important;
  text-align: center !important;
  padding: 80px 2rem !important;
}

.da-cta h2,
.da-cta .wp-block-heading {
  color: white !important;
}

.da-cta p {
  color: rgba(255,255,255,0.65) !important;
}

.da-cta .wp-block-button__link {
  background: white !important;
  color: var(--da-text) !important;
  font-weight: 600 !important;
}

.da-cta .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,255,255,0.2) !important;
}

.da-cta .is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: white !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* === STATS ROW === */
.da-stats {
  display: flex !important;
  gap: 2.5rem !important;
  margin-top: 1.5rem !important;
}

.da-stat-number {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--da-text) !important;
  letter-spacing: -0.02em !important;
  display: block !important;
}

.da-stat-label {
  font-size: 0.8rem !important;
  color: var(--da-text-muted) !important;
  font-weight: 400 !important;
}

/* === FOUNDER STORY === */
.da-story {
  padding: 80px 0 !important;
  background: white !important;
}

.da-story h2 {
  font-size: clamp(1.75rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
}

.da-story p {
  font-size: 1rem !important;
  color: var(--da-text-secondary) !important;
  line-height: 1.8 !important;
}

.da-story-image img {
  border-radius: 20px !important;
  width: 100% !important;
  object-fit: cover !important;
}

.da-story-image {
  border-radius: 20px !important;
  overflow: hidden !important;
  min-height: 300px !important;
  background: linear-gradient(135deg, var(--da-accent-light), #E0E7FF) !important;
}

.da-highlight {
  background: var(--da-accent-light) !important;
  border-left: 3px solid var(--da-accent) !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0 10px 10px 0 !important;
  margin: 1.5rem 0 !important;
}

.da-highlight {
  background: var(--da-accent-light) !important;
  border-left: 4px solid var(--da-accent) !important;
  padding: 1.5rem 1.75rem !important;
  border-radius: 0 12px 12px 0 !important;
  margin: 2rem 0 !important;
}

/* === NUMBERS BAR === */
.da-numbers {
  padding: 60px 0 !important;
  background: var(--da-accent) !important;
  color: white !important;
}

.da-numbers .wp-block-column {
  text-align: center !important;
}

.da-num-value {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: white !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}

.da-num-label {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.8) !important;
}

/* === TARGET AUDIENCE === */
.da-audience {
  padding: 80px 0 !important;
}

.da-audience-card {
  display: flex !important;
  gap: 1.25rem !important;
  padding: 1.5rem !important;
  border: 1px solid var(--da-border) !important;
  border-radius: 14px !important;
  background: white !important;
  transition: all 0.3s !important;
}

.da-audience-card:hover {
  border-color: var(--da-accent) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06) !important;
}

.da-audience-card h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
}

.da-audience-card p {
  font-size: 0.85rem !important;
  color: var(--da-text-secondary) !important;
  line-height: 1.5 !important;
}

/* === BLOG PREVIEW === */
.da-blog-section {
  padding: 80px 0 !important;
  background: var(--da-bg-light) !important;
}

.da-blog-card {
  border: 1px solid var(--da-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.3s !important;
  background: white !important;
}

.da-blog-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
  transform: translateY(-3px);
}

.da-blog-tag {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--da-accent) !important;
  background: var(--da-accent-light) !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 6px !important;
  margin-bottom: 0.5rem !important;
}

/* === TESTIMONIAL === */
.da-testimonial {
  padding: 80px 0 !important;
  text-align: center !important;
}

.da-quote-mark {
  font-size: 4rem !important;
  color: var(--da-accent-light) !important;
  line-height: 1 !important;
  margin-bottom: 0.5rem !important;
}

.da-quote-text {
  font-size: 1.2rem !important;
  color: var(--da-text) !important;
  line-height: 1.8 !important;
  font-style: italic !important;
  max-width: 700px !important;
  margin: 0 auto 1.5rem !important;
}

.da-quote-author {
  font-size: 0.9rem !important;
  color: var(--da-text-muted) !important;
}

/* === FOOTER === */
.site-footer,
.ast-footer {
  border-top: 1px solid var(--da-border) !important;
  background: var(--da-bg-light) !important;
}

.site-footer a,
.ast-footer a {
  color: var(--da-text-muted) !important;
  transition: color 0.2s !important;
}

.site-footer a:hover,
.ast-footer a:hover {
  color: var(--da-accent) !important;
}

/* === GENERAL TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;
  color: var(--da-text) !important;
  letter-spacing: -0.02em !important;
}

p, li, span {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;
}

/* === RESPONSIVE === */
@media (max-width: 782px) {
  .da-hero {
    padding: 80px 1.25rem 60px !important;
  }

  .da-stats {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
  }

  .da-card {
    padding: 1.5rem !important;
  }
}

.ast-separate-container .ast-article-post {
    width: 100%;
}