/* FOUNDEL top-page design practice.
   Visual references: BIRDY's blue/green energy and FlapNext's typographic contrast.
   The existing copy, section order, markup and links remain in index.html. */
:root {
  --ref-ink: #15212a;
  --ref-navy: #123a55;
  --ref-blue: #195b89;
  --ref-teal: #168a83;
  --ref-orange: #ed653c;
  --ref-line: #d8e2e7;
  --ref-soft: #f3f7f8;
}

html { scroll-behavior: smooth; }
body { color: var(--ref-ink); background: #fff; }
body, button, input, textarea { font-family: "Noto Sans JP", sans-serif; }
main h2, main h3 { letter-spacing: .01em; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ref-orange); outline-offset: 4px; }

/* BIRDY-style two-level header, with FlapNext's tighter typography. */
.site-header, .site-header.is-scrolled {
  border-bottom: 1px solid var(--ref-line);
  box-shadow: 0 9px 28px rgba(13, 52, 71, .05);
}
.header-top { max-width: 1340px; padding-top: 15px; padding-bottom: 14px; }
.site-header .brand img { width: 260px; }
.brand-caption { color: #61717a; font-size: 11px; letter-spacing: .04em; }
.header-link, .header-links .header-document {
  border-radius: 4px;
  min-height: 53px;
  padding: 13px 23px;
  font-size: 14px;
  letter-spacing: .01em;
}
.header-links .header-document { border-color: var(--ref-navy); color: var(--ref-navy); background: #fff; }
.header-links .header-document:hover { background: #edf5f5; }
.header-link--primary, .site-header .header-link--primary {
  background: var(--ref-orange);
  border-color: var(--ref-orange);
  color: #fff;
}
.header-link--primary:hover, .site-header .header-link--primary:hover { background: #d9522b; border-color: #d9522b; }
.site-header .desktop-nav, .site-header.is-scrolled .desktop-nav {
  border-top: 1px solid #edf1f2;
  min-height: 54px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .05em;
}
.site-header .desktop-nav a, .site-header.is-scrolled .desktop-nav a { transition: color .2s; }
.site-header .desktop-nav a:hover, .site-header.is-scrolled .desktop-nav a:hover { color: var(--ref-teal); }

/* Keep the current left-copy/right-art composition; make the hero more decisive. */
.shared-opening { background: #fff; }
.shared-opening__background {
  background-image:
    linear-gradient(92deg, #fff 0%, rgba(255,255,255,.98) 27%, rgba(255,255,255,.77) 48%, rgba(255,255,255,.10) 79%),
    url('assets/fv-meo-ai-google-colors.png');
  background-position: center, center 52%;
}
.shared-opening .clinic-fv { min-height: 638px; }
.clinic-fv .clinic-fv__copy { padding-top: 68px; padding-bottom: 68px; }
.clinic-fv h1 {
  max-width: 740px;
  color: var(--ref-ink);
  font-size: clamp(42px, 4vw, 60px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .015em;
}
.clinic-fv__tagline {
  display: inline-block;
  margin-top: 24px;
  margin-bottom: 17px;
  padding: 7px 11px 9px;
  background: linear-gradient(105deg, var(--ref-teal), var(--ref-blue));
  color: #fff;
  font-size: clamp(18px,1.5vw,22px);
  letter-spacing: .02em;
}
.clinic-fv__description { color: #283b45; font-size: 16px; font-weight: 500; line-height: 1.8; }
.preview-fv-actions { gap: 13px; margin-top: 26px; }
.preview-fv-actions .clinic-fv__cta,
.preview-fv-actions .preview-document-cta {
  border-radius: 5px;
  min-height: 78px;
  box-shadow: 0 6px 0 rgba(17,40,55,.15);
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.preview-fv-actions .clinic-fv__cta { background: var(--ref-orange); }
.preview-fv-actions .clinic-fv__cta:hover { background: #d9522b; transform: translateY(-2px); box-shadow: 0 8px 0 rgba(17,40,55,.15); }
.preview-fv-actions .preview-document-cta { border: 2px solid var(--ref-navy); background: #fff; color: var(--ref-navy); }
.preview-fv-actions .preview-document-cta:hover { background: #e9f3f4; }
.preview-fv-actions .clinic-fv__cta small { font-weight: 500; }
.preview-fv-actions .clinic-fv__cta strong { font-size: 17px; }

/* The existing intro card stays in place, with a clearer visual break. */
.shared-opening .company-intro { background: linear-gradient(#f8faf9,#eef4f4); padding-top: 0; padding-bottom: 72px; }
.shared-opening .company-intro__card {
  border: 1px solid #d7e4e3;
  border-top: 5px solid var(--ref-teal);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(14, 67, 74, .09);
  padding: 49px 54px;
}
.company-intro h2 { color: var(--ref-navy); font-size: clamp(23px,2vw,31px); font-weight: 700; letter-spacing: .015em; line-height: 1.55; }
.company-intro__copy > p { color: #344650; }
.shared-opening .company-intro__features {
  background: #eff6f6;
  border-left: 4px solid var(--ref-teal);
  border-radius: 0;
}
.company-intro__features h3 { color: var(--ref-navy); }

/* Metric cards: strong numbers, restrained surfaces. */
.results { background: #fff; }
.results::before, .results::after { border-radius: 0; transform: rotate(-18deg); opacity: .6; }
.results h2 { color: var(--ref-ink); font-size: clamp(27px,2.4vw,36px); letter-spacing: -.035em; }
.results h2::after { width: 78px; height: 5px; background: linear-gradient(90deg,var(--ref-teal),var(--ref-blue)); }
.results .cards { gap: 18px; }
.results .card { border-color: #d9e5e7; border-radius: 5px; box-shadow: 0 13px 35px rgba(18,58,85,.07); }
.results .card h3 { background: linear-gradient(105deg,var(--ref-navy),var(--ref-blue)); border-radius: 0; }
.results .card-content { background: linear-gradient(180deg,#f1f7f6,#fff 43%); }
.results .metric, .results .detail strong { color: var(--ref-teal); }
.results .arrow { background: var(--ref-navy); }

/* A darker problem section creates the rhythm missing from the original page. */
section.concerns { background: linear-gradient(135deg,#102c3f,#164b5c); color: #fff; }
.concerns h2 { color: #fff; }
.concerns h2::after { background: var(--ref-orange); }
.concern-card { border: 1px solid rgba(255,255,255,.18); border-radius: 4px; box-shadow: 0 12px 30px rgba(4,19,29,.16); }
.concern-card p { color: var(--ref-navy); }
.concern-icon { background: var(--ref-teal); }
.concern-icon::after { background: var(--ref-orange); }

.strengths-section { background: #fff; color: var(--ref-ink); }
.strengths-section::before { border-color: #e8f3f2; }
.strengths-header > p {
  color: var(--ref-teal);
  background: linear-gradient(100deg,var(--ref-teal),var(--ref-blue));
  -webkit-background-clip: text; background-clip: text;
}
.strengths-header h2 { color: var(--ref-ink); }
.strength-row { border-top-color: var(--ref-line); }
.strength-visual { border-radius: 5px 90px 5px 5px; }
.strength-row:nth-of-type(even) .strength-visual { border-radius: 90px 5px 5px 5px; }
.strength-number { color: var(--ref-teal); }
.strength-heading h3 { color: var(--ref-navy); }
.strength-description { color: #43525a; }

/* Keep comparison and service grids, replace the repeated blue cards. */
#comparison { background: #f5f8f7; color: var(--ref-ink); }
#comparison .comparison-inner::before { border-color: #e4eeeb; }
#comparison h2 { color: var(--ref-ink); }
#comparison h2::after { background: var(--ref-teal); }
#comparison thead th:nth-child(2) { background: var(--ref-navy); border-top-color: var(--ref-teal); }
#comparison tbody td.feature { color: var(--ref-navy); border-left-color: var(--ref-teal); border-right-color: var(--ref-teal); background: #eef7f5; }
#comparison tbody tr:last-child td.feature { border-bottom-color: var(--ref-teal); }

#services.service-catalog, #marketing-philosophy { background: #13364c; }
#services .catalog-en { color: #fff; }
#services .catalog-card { border-radius: 4px; border-color: #d8e4e5; box-shadow: 0 8px 20px rgba(0,0,0,.09); }
#services .catalog-icon { background: #e8f4f0; color: var(--ref-teal); }
#marketing-philosophy .philosophy-panel { border-radius: 5px; }
#marketing-philosophy h2 { color: var(--ref-navy); }
#marketing-philosophy .philosophy-symbol, #marketing-philosophy .philosophy-check { color: var(--ref-teal); }

#case-studies .cases-en { color: var(--ref-teal); }
#case-studies .case-card { border-radius: 5px; border-color: #d8e4e3; box-shadow: 0 10px 32px rgba(12,49,67,.08); }
#case-studies .case-top, #case-studies .case-chart figcaption { background: linear-gradient(105deg,var(--ref-navy),var(--ref-blue)); }
#case-studies .case-summary strong, #case-studies .case-after, #case-studies dd strong { color: var(--ref-teal); }
#case-studies .case-details { background: #edf6f4; }

.commit-section { background: linear-gradient(100deg,#edf5f3ee,#edf5f3dd),url('assets/promise-commitment.png') center/cover; }
.commit-section .commit-header .commit-en { background: none; color: var(--ref-teal); -webkit-text-fill-color: currentColor; }
.commit-list { border-radius: 5px; box-shadow: 0 20px 54px rgba(17,58,85,.1); }
.commit-list::before { background: linear-gradient(90deg,var(--ref-teal),var(--ref-blue)); }
.commit-row h3 { color: var(--ref-navy); }
.commit-num { color: var(--ref-teal); }
#not-promise { background: #eff3f3; }

#profile.founder-section { background: linear-gradient(115deg,#eef6f4,#fff 68%); }
#profile .founder-photo-wrap::before { background: radial-gradient(ellipse,#d7eee8 0%,#eaf6f2 45%,transparent 70%); }
#profile .founder-body h3 { color: var(--ref-navy); }

/* Consultation and download keep their original destinations. */
:is(#consult-banner,#profile-consult-banner,#promise-consult-banner) .banner-button,
#comparison .cta a,
.preview-footer-button.consult { background: var(--ref-orange); border-radius: 5px; }
.preview-footer-button.download { border-color: #fff; border-radius: 5px; color: var(--ref-navy); }
.faq-renewed { background: #f5f8f7; }
.faq-renewed h2 { color: var(--ref-navy); }

@media (max-width: 1000px) {
  .site-header .menu-button { background: var(--ref-navy); }
  .header-top { padding-top: 15px; padding-bottom: 15px; }
  .site-header .brand img { width: 210px; }
  .clinic-fv h1 { font-size: clamp(38px,5.4vw,54px); }
}
@media (max-width: 700px) {
  .site-header .brand img { width: 136px; }
  .site-header .header-links .header-document { min-height: 0; padding: 8px 10px; border-radius: 3px; }
  .shared-opening__background {
    background-image: linear-gradient(180deg,#fff,#edf5f3);
  }
  .shared-opening .clinic-fv { min-height: 0; }
  .shared-opening .clinic-fv::after {
    display: block;
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 250px;
    background: url('assets/fv-meo-ai-google-colors.png') right bottom / auto 250px no-repeat;
    z-index: 0;
    pointer-events: none;
  }
  .clinic-fv .clinic-fv__copy { padding-top: 46px; padding-bottom: 72px; }
  .clinic-fv h1 { font-size: clamp(30px,8.3vw,39px); line-height: 1.4; }
  .clinic-fv__tagline { padding: 6px 8px; font-size: 16px; }
  .clinic-fv__description { font-size: 13px; }
  .preview-fv-actions .clinic-fv__cta, .preview-fv-actions .preview-document-cta { border-radius: 4px; box-shadow: 0 4px 0 rgba(17,40,55,.14); }
  .shared-opening .company-intro__card { padding: 28px 22px; border-radius: 5px; }
  .company-intro h2 { font-size: 21px; }
  .results .cards { gap: 16px; }
  .strength-visual, .strength-row:nth-of-type(even) .strength-visual { border-radius: 5px 60px 5px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}