/*
  BLUE Symphony 3DCG / VFX page
  作成日: 2026-07-23
  用途: WordPress / Elementor 追加CSS
*/

:root {
  --dvfx-navy: #03132d;
  --dvfx-deep: #072451;
  --dvfx-blue: #0669d8;
  --dvfx-cyan: #39c7e7;
  --dvfx-gold: #c7a25a;
  --dvfx-gold-soft: #e6d5ad;
  --dvfx-ink: #102440;
  --dvfx-muted: #60718a;
  --dvfx-bg: #f3f7fc;
  --dvfx-ice: #edf8fb;
  --dvfx-warm: #faf7ef;
  --dvfx-white: #fff;
  --dvfx-line: rgba(20, 58, 112, .15);
  --dvfx-shadow: 0 24px 64px rgba(5, 27, 63, .14);
  --dvfx-radius: 28px;
}

.bs-dvfx {
  color: var(--dvfx-ink);
  background: var(--dvfx-white);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.85;
  letter-spacing: .02em;
  overflow: hidden;
}

.bs-dvfx *,
.bs-dvfx *::before,
.bs-dvfx *::after { box-sizing: border-box; }

.bs-dvfx img { display: block; width: 100%; height: auto; }

.bs-dvfx a { color: inherit; }

.dvfx-container {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
}

.dvfx-section { padding: 104px 0; }

.dvfx-eyebrow {
  margin: 0 0 14px;
  color: var(--dvfx-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.dvfx-section-head { max-width: 820px; margin: 0 0 44px; }

.dvfx-section-head h2,
.dvfx-split h2,
.dvfx-asset-layout h2,
.dvfx-security-grid h2 {
  margin: 0 0 20px;
  color: var(--dvfx-navy);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.3;
  letter-spacing: -.025em;
}

.dvfx-section-head > p:last-child,
.dvfx-split > div > p,
.dvfx-asset-layout > div > p,
.dvfx-security-grid > div > p {
  margin: 0;
  color: var(--dvfx-muted);
  font-size: 16px;
}

.dvfx-section-head--light h2,
.dvfx-section-head--light .dvfx-eyebrow { color: var(--dvfx-white); }

.dvfx-section-head--light > p:last-child { color: rgba(255,255,255,.74); }

.dvfx-card-kicker {
  margin: 0 0 10px;
  color: var(--dvfx-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.dvfx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 25px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.dvfx-btn:hover { transform: translateY(-2px); }

.dvfx-btn--primary {
  color: #fff;
  background: var(--dvfx-blue);
  box-shadow: 0 14px 34px rgba(6,105,216,.28);
}

.dvfx-btn--primary:hover { background: #085bb9; }

.dvfx-btn--secondary {
  color: #fff;
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.08);
}

.dvfx-btn--dark { color: #fff !important; background: var(--dvfx-navy); }

.dvfx-btn--media {
  color: #fff;
  border-color: rgba(223,197,139,.62);
  background: rgba(199,162,90,.14);
}

.dvfx-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.dvfx-cta-row--center { justify-content: center; }

/* Hero */
.dvfx-hero {
  position: relative;
  min-height: 790px;
  padding: 104px 0 80px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 16%, rgba(40,152,227,.28), transparent 31%),
    radial-gradient(circle at 14% 82%, rgba(199,162,90,.13), transparent 27%),
    linear-gradient(135deg, #020e22 0%, #05214a 58%, #071a37 100%);
}

.dvfx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(86,153,225,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86,153,225,.08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to right, transparent, #000 45%, #000);
}

.dvfx-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr);
  gap: 58px;
  align-items: center;
}

.dvfx-hero .dvfx-eyebrow { color: var(--dvfx-cyan); }

.dvfx-hero h1 {
  margin: 0;
  font-size: clamp(48px, 6.5vw, 82px);
  line-height: 1.14;
  letter-spacing: -.05em;
}

.dvfx-hero__name {
  margin: 22px 0 8px;
  color: var(--dvfx-gold-soft);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .09em;
}

.dvfx-hero__lead {
  margin: 0;
  max-width: 610px;
  color: rgba(255,255,255,.89);
  font-size: 18px;
  line-height: 1.9;
}

.dvfx-definition {
  margin-top: 24px;
  padding: 20px 22px;
  border-left: 2px solid var(--dvfx-cyan);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(6px);
}

.dvfx-definition p {
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  line-height: 1.75;
}

.dvfx-definition p + p { margin-top: 6px; }

.dvfx-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.dvfx-hero__facts li {
  position: relative;
  padding-left: 16px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

.dvfx-hero__facts li::before {
  content: "";
  position: absolute;
  top: .82em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dvfx-gold);
}

.dvfx-motion {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 32px;
  background: #03142d;
  box-shadow: 0 34px 90px rgba(0,0,0,.42);
}

.dvfx-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -110px 90px rgba(0,12,30,.55);
}

.dvfx-motion__scene {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.07);
  animation: dvfxScene 15s infinite;
}

.dvfx-motion__scene--2 { animation-delay: 5s; }
.dvfx-motion__scene--3 { animation-delay: 10s; }

.dvfx-motion__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dvfx-motion__scene figcaption {
  position: absolute;
  z-index: 5;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.dvfx-motion__scene figcaption span { color: var(--dvfx-gold-soft); font-size: 11px; }

.dvfx-motion__note {
  position: absolute;
  z-index: 6;
  left: 22px;
  bottom: 22px;
  max-width: 240px;
  margin: 0;
  color: rgba(255,255,255,.65);
  font-size: 10px;
  line-height: 1.6;
}

@keyframes dvfxScene {
  0% { opacity: 0; transform: scale(1.07); }
  5% { opacity: 1; }
  28% { opacity: 1; transform: scale(1); }
  34% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}

/* Glance */
.dvfx-glance {
  padding: 96px 0 104px;
  color: #fff;
  background: #061b3c;
}

.dvfx-glance__grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: repeat(2, minmax(230px, 1fr));
  gap: 16px;
}

.dvfx-glance__card {
  position: relative;
  min-height: 250px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: #0a244d;
}

.dvfx-glance__card--wide { grid-row: 1 / 3; min-height: 516px; }

.dvfx-glance__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.dvfx-glance__card:hover img { transform: scale(1.025); }

.dvfx-glance__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(1,14,35,.9), rgba(1,14,35,0) 60%);
}

.dvfx-glance__card figcaption {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 22px;
}

.dvfx-glance__card figcaption span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--dvfx-gold-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.dvfx-glance__card figcaption strong { display: block; font-size: 22px; }
.dvfx-glance__card figcaption small { display: block; margin-top: 4px; color: rgba(255,255,255,.68); }

.dvfx-image-note {
  margin: 18px 0 0;
  color: rgba(255,255,255,.58);
  font-size: 11px;
}

/* Problem and statement */
.dvfx-section--problem {
  background:
    radial-gradient(circle at 85% 10%, rgba(53,191,224,.13), transparent 24%),
    var(--dvfx-ice);
}

.dvfx-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.dvfx-problem-grid article {
  min-height: 138px;
  padding: 24px;
  border: 1px solid rgba(35,124,172,.17);
  border-top: 3px solid var(--dvfx-cyan);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
}

.dvfx-problem-grid article:nth-child(3n+2) { border-top-color: var(--dvfx-blue); }
.dvfx-problem-grid article:nth-child(3n) { border-top-color: var(--dvfx-gold); }

.dvfx-problem-grid span { color: var(--dvfx-blue); font-size: 11px; font-weight: 900; }
.dvfx-problem-grid p { margin: 12px 0 0; font-weight: 800; line-height: 1.65; }

.dvfx-statement {
  max-width: 900px;
  margin: 56px auto 0;
  padding: 38px 46px;
  border: 1px solid var(--dvfx-line);
  border-radius: 24px;
  text-align: center;
  background: #fff;
  box-shadow: 0 16px 46px rgba(12,64,104,.09);
}

.dvfx-statement p { margin: 0; color: var(--dvfx-muted); }
.dvfx-statement strong { display: block; margin: 10px 0; color: var(--dvfx-navy); font-size: clamp(20px,3vw,30px); line-height: 1.55; }

/* Definition */
.dvfx-section--definition { background: var(--dvfx-warm); }

.dvfx-split {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
  gap: 58px;
  align-items: center;
}

.dvfx-split > div > p + p { margin-top: 16px; }

.dvfx-audience {
  padding: 34px;
  border: 1px solid rgba(151,116,48,.2);
  border-radius: var(--dvfx-radius);
  background: rgba(255,255,255,.78);
  box-shadow: var(--dvfx-shadow);
}

.dvfx-audience h3 { margin: 0 0 16px; font-size: 25px; }
.dvfx-audience ul { margin: 0; padding-left: 1.3em; }
.dvfx-audience li + li { margin-top: 8px; }

/* Capabilities */
.dvfx-section--capabilities { background: #fff; }

.dvfx-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.dvfx-capability-grid article {
  position: relative;
  min-height: 220px;
  padding: 30px 28px;
  overflow: hidden;
  border: 1px solid var(--dvfx-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(6,31,74,.07);
}

.dvfx-capability-grid article::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -44px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(44,176,222,.08);
}

.dvfx-capability-grid article:nth-child(2n)::after { background: rgba(199,162,90,.1); }
.dvfx-capability-grid span { color: var(--dvfx-blue); font-size: 12px; font-weight: 900; }
.dvfx-capability-grid h3 { margin: 16px 0 10px; font-size: 23px; }
.dvfx-capability-grid p { margin: 0; color: var(--dvfx-muted); font-size: 14px; }
.dvfx-center-cta { margin-top: 40px; text-align: center; }

/* Tables */
.dvfx-section--industries { background: var(--dvfx-bg); }

.dvfx-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--dvfx-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 15px 44px rgba(6,31,74,.07);
}

.dvfx-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.dvfx-table th, .dvfx-table td { padding: 19px 22px; border-bottom: 1px solid var(--dvfx-line); text-align: left; vertical-align: middle; }
.dvfx-table thead th { color: #fff; background: var(--dvfx-navy); font-size: 13px; }
.dvfx-table tbody th { width: 27%; color: var(--dvfx-navy); background: #f7faff; font-size: 14px; }
.dvfx-table tbody td { color: #4f607b; font-size: 14px; }
.dvfx-table tbody tr:last-child th, .dvfx-table tbody tr:last-child td { border-bottom: 0; }
.dvfx-area-note { margin: 20px 0 0; color: var(--dvfx-muted); font-size: 13px; }

/* Reuse */
.dvfx-section--reuse {
  color: #fff;
  background:
    radial-gradient(circle at 50% 50%, rgba(49,170,226,.22), transparent 30%),
    linear-gradient(135deg,#03132d,#072c5d);
}

.dvfx-reuse-flow {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 42px;
  align-items: center;
}

.dvfx-reuse-flow__core {
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle, rgba(32,135,220,.45), rgba(6,35,78,.8));
  box-shadow: 0 0 0 18px rgba(55,173,223,.05), 0 24px 80px rgba(0,0,0,.28);
}

.dvfx-reuse-flow__core span { color: var(--dvfx-gold-soft); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.dvfx-reuse-flow__core strong { margin-top: 8px; font-size: 27px; }

.dvfx-reuse-flow ul {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dvfx-reuse-flow li {
  position: relative;
  padding: 17px 18px 17px 42px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}

.dvfx-reuse-flow li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 19px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--dvfx-cyan);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Asset value */
.dvfx-section--asset { background: var(--dvfx-warm); }

.dvfx-asset-layout {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 54px;
  align-items: center;
}

.dvfx-asset-layout > figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--dvfx-shadow);
}

.dvfx-asset-layout > figure img { min-height: 560px; object-fit: cover; }

.dvfx-asset-layout > figure figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  padding: 9px 12px;
  color: rgba(255,255,255,.78);
  border-radius: 10px;
  font-size: 10px;
  background: rgba(2,17,41,.72);
  backdrop-filter: blur(7px);
}

.dvfx-asset-steps { margin: 26px 0; }
.dvfx-asset-audience { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin: 24px 0 8px; }
.dvfx-asset-audience article { padding: 18px 20px; border: 1px solid rgba(139,107,51,.2); border-radius: 14px; background: rgba(255,255,255,.72); }
.dvfx-asset-audience h3 { margin: 0 0 7px; color: var(--dvfx-navy); font-size: 15px; }
.dvfx-asset-audience p { margin: 0; color: var(--dvfx-muted); font-size: 12px; line-height: 1.8; }
.dvfx-asset-steps article { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px 0; border-top: 1px solid rgba(139,107,51,.2); }
.dvfx-asset-steps article:last-child { border-bottom: 1px solid rgba(139,107,51,.2); }
.dvfx-asset-steps span { grid-row: 1 / 3; color: var(--dvfx-gold); font-size: 12px; font-weight: 900; }
.dvfx-asset-steps h3 { margin: 0 0 4px; font-size: 19px; }
.dvfx-asset-steps p { margin: 0; color: var(--dvfx-muted); font-size: 13px; }
.dvfx-caution { padding: 15px 18px; border-left: 3px solid var(--dvfx-gold); background: rgba(255,255,255,.7); font-size: 12px !important; }
.dvfx-section--asset .dvfx-btn--dark,
.dvfx-section--asset .dvfx-btn--dark:visited { color: #061d3e !important; border-color: #c89d45; background: #ead18d; box-shadow: 0 12px 28px rgba(111,77,21,.16); }
.dvfx-section--asset .dvfx-btn--dark:hover { color: #061d3e !important; background: #dfbd68; }

/* Compare */
.dvfx-section--compare { background: #fff; }
.dvfx-table--compare tbody tr:first-child th, .dvfx-table--compare tbody tr:first-child td { background: #eef6ff; }
.dvfx-table--compare tbody tr:first-child th { color: #fff; background: var(--dvfx-deep); box-shadow: inset 0 -3px var(--dvfx-gold); }

/* Proof */
.dvfx-section--proof { color: #fff; background: linear-gradient(135deg,#061833,#092b59); }
.dvfx-proof-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.dvfx-proof-grid article { position: relative; min-height: 300px; padding: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.055); }
.dvfx-proof-grid article::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(44,186,229,.08); }
.dvfx-proof-grid article:nth-child(2)::after { background: rgba(199,162,90,.1); }
.dvfx-proof-grid > article > span { display: block; margin: 28px 0 12px; color: var(--dvfx-gold-soft); font-size: 13px; font-weight: 900; }
.dvfx-proof-grid h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.5; }
.dvfx-proof-grid > article > p:last-child { margin: 0; color: rgba(255,255,255,.68); font-size: 14px; }
.dvfx-proof-grid .dvfx-card-kicker { color: var(--dvfx-cyan); }

/* Pricing */
.dvfx-section--delivery { background: var(--dvfx-bg); }
.dvfx-price-intro { margin: -18px 0 22px; color: var(--dvfx-muted); font-size: 14px; font-weight: 700; }
.dvfx-price-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.dvfx-terms-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 18px; }
.dvfx-price-card { padding: 30px; border: 1px solid var(--dvfx-line); border-radius: 24px; background: #fff; box-shadow: 0 16px 42px rgba(5,28,67,.07); }
.dvfx-price-grid .dvfx-price-card { min-height: 330px; border-top: 5px solid var(--dvfx-navy); }
.dvfx-price-card--featured { color: var(--dvfx-navy); border-color: rgba(8,50,105,.2); background: linear-gradient(145deg,#fff,#f3f7fc); box-shadow: 0 18px 46px rgba(3,28,67,.12); }
.dvfx-price-card--featured .dvfx-card-kicker { color: var(--dvfx-blue); }
.dvfx-price-card--estimate { border-color: rgba(199,162,90,.38); border-top-color: var(--dvfx-gold) !important; background: linear-gradient(145deg,#fff,#faf7ef); }
.dvfx-price-card--estimate .dvfx-card-kicker { color: #8d692a; }
.dvfx-price-category { display: inline-block; margin-right: 9px; padding: 5px 8px; color: #fff; border-radius: 999px; background: var(--dvfx-navy); font-size: 10px; letter-spacing: .08em; }
.dvfx-price-card--estimate .dvfx-price-category { color: #071e3f; background: #e8cd8b; }
.dvfx-price-card h3 { margin: 0 0 16px; font-size: 22px; }
.dvfx-price { margin: 0 0 18px; color: #8d692a; }
.dvfx-price strong { font-size: 58px; line-height: 1; }
.dvfx-price small { font-size: 12px; }
.dvfx-price-card ul { margin: 0; padding-left: 1.2em; color: var(--dvfx-muted); font-size: 13px; }
.dvfx-price-card li + li { margin-top: 7px; }
.dvfx-period { margin: 20px 0 12px; color: var(--dvfx-blue); }
.dvfx-period strong { font-size: 28px; }
.dvfx-price-card > p:last-child { color: var(--dvfx-muted); font-size: 13px; }
.dvfx-estimate { margin: 22px 0 14px; color: var(--dvfx-navy); font-size: clamp(28px,4vw,42px); font-weight: 900; line-height: 1.2; }
.dvfx-price-note { margin: 20px 0 0; color: var(--dvfx-muted); font-size: 12px; }

/* Flow */
.dvfx-section--flow { background: #fff; }
.dvfx-flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.dvfx-flow li { display: flex; gap: 18px; min-height: 150px; padding: 24px; border: 1px solid var(--dvfx-line); border-radius: 18px; background: linear-gradient(145deg,#fff,#f7faff); }
.dvfx-flow li > span { flex: 0 0 auto; color: var(--dvfx-blue); font-size: 12px; font-weight: 900; }
.dvfx-flow h3 { margin: 0 0 7px; font-size: 18px; }
.dvfx-flow p { margin: 0; color: var(--dvfx-muted); font-size: 13px; }

/* Security */
.dvfx-section--security { background: var(--dvfx-ice); }
.dvfx-security-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 52px; align-items: start; }
.dvfx-security-cards { display: grid; gap: 12px; }
.dvfx-security-cards article { padding: 24px 26px; border: 1px solid rgba(36,117,161,.16); border-radius: 18px; background: rgba(255,255,255,.86); }
.dvfx-security-cards h3 { margin: 0 0 8px; font-size: 18px; }
.dvfx-security-cards p { margin: 0; color: var(--dvfx-muted); font-size: 13px; }
.dvfx-security-note { grid-column: 1 / -1; margin: 0; padding: 14px 18px; color: var(--dvfx-muted); border-left: 3px solid var(--dvfx-cyan); background: rgba(255,255,255,.7); font-size: 12px; }

/* Related */
.dvfx-section--related { background: var(--dvfx-warm); }
.dvfx-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.dvfx-related-grid a { min-height: 220px; padding: 26px; border: 1px solid rgba(147,111,47,.17); border-radius: 20px; text-decoration: none; background: rgba(255,255,255,.78); transition: transform .2s ease, box-shadow .2s ease; }
.dvfx-related-grid a:hover { transform: translateY(-4px); box-shadow: var(--dvfx-shadow); }
.dvfx-related-grid span { color: var(--dvfx-gold); font-size: 11px; font-weight: 900; }
.dvfx-related-grid h3 { margin: 28px 0 10px; font-size: 20px; }
.dvfx-related-grid p { margin: 0; color: var(--dvfx-muted); font-size: 13px; }

/* FAQ */
.dvfx-section--faq { background: #fff; }
.dvfx-faq-list { display: grid; gap: 10px; }
.dvfx-faq-list details { border: 1px solid var(--dvfx-line); border-radius: 15px; background: #fff; }
.dvfx-faq-list details[open] { border-color: rgba(6,105,216,.32); box-shadow: 0 13px 34px rgba(6,44,98,.07); }
.dvfx-faq-list summary { position: relative; padding: 20px 55px 20px 22px; color: var(--dvfx-navy); font-weight: 800; cursor: pointer; list-style: none; }
.dvfx-faq-list summary::-webkit-details-marker { display: none; }
.dvfx-faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 22px; color: var(--dvfx-blue); font-size: 24px; transform: translateY(-50%); }
.dvfx-faq-list details[open] summary::after { content: "−"; }
.dvfx-faq-list details p { margin: 0; padding: 0 22px 22px; color: var(--dvfx-muted); font-size: 14px; }

/* Final CTA */
.dvfx-final-cta {
  padding: 112px 0;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(34,145,217,.32), transparent 38%),
    linear-gradient(135deg,#020f25,#072b5c);
}
.dvfx-final-cta__inner { max-width: 920px; }
.dvfx-final-cta .dvfx-eyebrow { color: var(--dvfx-cyan); }
.dvfx-final-cta h2 { margin: 0; font-size: clamp(34px,5vw,62px); line-height: 1.3; }
.dvfx-final-cta__inner > p:not(.dvfx-eyebrow) { max-width: 720px; margin: 22px auto 0; color: rgba(255,255,255,.72); }
.dvfx-final-cta .dvfx-action-guide { padding: 15px 18px; color: rgba(255,255,255,.76); background: rgba(255,255,255,.07); border-left: 3px solid var(--dvfx-gold); text-align: left; }
.dvfx-action-guide strong { color: #fff; }

/* Responsive */
@media (max-width: 1024px) {
  .dvfx-hero__layout { grid-template-columns: 1fr; }
  .dvfx-motion { max-width: 820px; width: 100%; margin: 0 auto; aspect-ratio: 16/9; }
  .dvfx-hero { padding-top: 84px; }
  .dvfx-capability-grid, .dvfx-price-grid, .dvfx-proof-grid, .dvfx-flow { grid-template-columns: repeat(2,1fr); }
  .dvfx-related-grid { grid-template-columns: repeat(2,1fr); }
  .dvfx-asset-layout { grid-template-columns: 1fr; }
  .dvfx-asset-layout > figure img { min-height: auto; aspect-ratio: 16/9; }
}

@media (max-width: 760px) {
  .dvfx-container { width: min(100% - 28px, 1160px); }
  .dvfx-section { padding: 76px 0; }
  .dvfx-hero { min-height: 0; padding: 74px 0 56px; }
  .dvfx-hero__layout { gap: 38px; }
  .dvfx-hero h1 { font-size: clamp(43px,13vw,62px); }
  .dvfx-hero__lead { font-size: 16px; }
  .dvfx-definition { padding: 17px; }
  .dvfx-cta-row { display: grid; }
  .dvfx-btn { width: 100%; }
  .dvfx-motion { border-radius: 20px; aspect-ratio: 4/3; }
  .dvfx-motion__scene img { object-position: center; }
  .dvfx-motion__note { left: 14px; bottom: 12px; max-width: 185px; font-size: 8px; }
  .dvfx-motion__scene figcaption { right: 14px; bottom: 14px; font-size: 11px; }
  .dvfx-glance { padding: 72px 0; }
  .dvfx-glance__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .dvfx-glance__card--wide { grid-row: auto; min-height: 340px; }
  .dvfx-glance__card { min-height: 260px; }
  .dvfx-problem-grid, .dvfx-capability-grid, .dvfx-price-grid, .dvfx-terms-grid, .dvfx-asset-audience, .dvfx-proof-grid, .dvfx-flow { grid-template-columns: 1fr; }
  .dvfx-statement { padding: 28px 22px; }
  .dvfx-split, .dvfx-security-grid { grid-template-columns: 1fr; gap: 34px; }
  .dvfx-reuse-flow { grid-template-columns: 1fr; }
  .dvfx-reuse-flow__core { width: 230px; margin: 0 auto; }
  .dvfx-reuse-flow ul { grid-template-columns: 1fr; }
  .dvfx-asset-layout { gap: 34px; }
  .dvfx-asset-layout > figure img { min-height: 380px; aspect-ratio: auto; }
  .dvfx-asset-steps article { grid-template-columns: 38px 1fr; }
  .dvfx-related-grid { grid-template-columns: 1fr; }
  .dvfx-related-grid a { min-height: 180px; }
  .dvfx-final-cta { padding: 82px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dvfx-motion__scene { animation: none; opacity: 0; transform: none; }
  .dvfx-motion__scene--1 { opacity: 1; }
  .dvfx-btn, .dvfx-glance__card img, .dvfx-related-grid a { transition: none; }
}