/*
Theme Name: Vantevion
Theme URI: https://vantevion.com
Author: Vantevion
Description: Multilingual corporate theme for the Vantevion software portfolio.
Version: 1.1.2
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: vantevion
*/

:root {
  --ink: #11251f;
  --ink-soft: #52655f;
  --forest: #0b352b;
  --forest-2: #125342;
  --green: #22a976;
  --mint: #5de1ae;
  --lime: #b9ef75;
  --cream: #f5f8f4;
  --paper: #ffffff;
  --line: #dbe5df;
  --line-dark: rgba(255,255,255,.16);
  --risk: #dc4c56;
  --warning: #d99a16;
  --success: #168b63;
  --shadow: 0 24px 70px rgba(11,53,43,.13);
  --shadow-soft: 0 12px 36px rgba(11,53,43,.08);
  --radius: 24px;
  --radius-small: 14px;
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lang-ja { line-height: 1.8; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button, select { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 9999; top: 10px; left: 10px; padding: 10px 16px; transform: translateY(-150%); border-radius: 8px; color: #fff; background: var(--forest); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgba(219,229,223,.8); background: rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.admin-bar .site-header { top: 32px; }
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--forest); font-size: 21px; font-weight: 760; letter-spacing: -.04em; }
.brand img { width: 40px; height: 40px; }
.header-navigation { display: flex; align-items: center; gap: 26px; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.main-nav a { position: relative; color: #41554e; font-size: 14px; font-weight: 620; }
.main-nav a::after { content: ""; position: absolute; right: 50%; bottom: -11px; left: 50%; height: 2px; border-radius: 2px; background: var(--green); transition: left .2s ease, right .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.is-current { color: var(--forest); }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a.is-current::after { right: 0; left: 0; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.language-picker { height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.language-picker svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.language-picker select { max-width: 104px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 650; cursor: pointer; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.menu-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; border-radius: 3px; background: var(--forest); }

.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 1px solid transparent; border-radius: 14px; font-size: 15px; font-weight: 720; line-height: 1.2; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--forest); box-shadow: 0 10px 28px rgba(11,53,43,.18); }
.button-primary:hover, .button-primary:focus-visible { background: var(--forest-2); box-shadow: 0 14px 32px rgba(11,53,43,.25); }
.button-secondary { border-color: var(--line); color: var(--forest); background: rgba(255,255,255,.74); }
.button-secondary:hover, .button-secondary:focus-visible { border-color: #acc3b8; background: #fff; }
.button-light { color: var(--forest); background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.button-light:hover, .button-light:focus-visible { background: var(--lime); }
.button-small { min-height: 40px; padding: 9px 15px; border-radius: 11px; font-size: 13px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--forest); font-weight: 730; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

.hero { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; padding: 92px 0 105px; background: radial-gradient(circle at 0 0, #e8f9ee 0, transparent 42%), linear-gradient(145deg, #fbfdfb 0%, #eff6f1 100%); }
.hero::after { content: ""; position: absolute; inset: auto -8% -30% 42%; height: 520px; background: radial-gradient(ellipse, rgba(93,225,174,.19), transparent 70%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.hero-glow-one { top: 11%; left: -120px; width: 260px; height: 260px; background: rgba(185,239,117,.18); }
.hero-glow-two { right: -70px; bottom: 7%; width: 220px; height: 220px; background: rgba(93,225,174,.18); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); align-items: center; gap: 68px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--green); font-size: 12px; font-weight: 790; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase; }
.eyebrow > span { width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow.centered { justify-content: center; }
.hero h1, .page-hero h1 { max-width: 720px; margin: 0; color: var(--forest); font-size: clamp(48px, 6vw, 76px); font-weight: 770; letter-spacing: -.064em; line-height: .99; }
.hero .lead, .page-hero .lead { max-width: 650px; margin: 26px 0 0; color: var(--ink-soft); font-size: clamp(18px, 2vw, 21px); line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-facts { display: flex; gap: 28px; margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero-facts div { min-width: 85px; }
.hero-facts strong { display: block; color: var(--forest); font-size: 22px; line-height: 1; }
.hero-facts span { display: block; margin-top: 7px; color: #71827c; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }

.product-visual { position: relative; perspective: 1200px; }
.visual-window { overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255,255,255,.93); box-shadow: 0 38px 90px rgba(11,53,43,.18); transform: rotateY(-3deg) rotateX(1deg); }
.visual-topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border-bottom: 1px solid #e8efeb; }
.visual-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 760; }
.visual-brand img { width: 27px; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 20px; color: #306253; background: #e8f8f0; font-size: 9px; font-weight: 720; text-transform: uppercase; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,169,118,.14); }
.visual-body { min-height: 390px; display: grid; grid-template-columns: 54px 1fr; }
.visual-sidebar { display: flex; flex-direction: column; align-items: center; gap: 15px; padding-top: 24px; border-right: 1px solid #e8efeb; background: #f7faf8; }
.visual-sidebar span { width: 23px; height: 23px; border-radius: 7px; background: #dfe9e4; }
.visual-sidebar span:first-child { background: var(--forest); }
.visual-content { padding: 28px; }
.visual-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.visual-heading small, .metric-row small { display: block; color: #71827c; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.visual-heading strong { display: block; margin-top: 4px; font-size: 32px; letter-spacing: -.04em; }
.visual-heading > span { padding: 4px 8px; border-radius: 8px; color: var(--success); background: #e7f6ef; font-size: 11px; font-weight: 760; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 20px 0; }
.metric-row > div { padding: 14px; border: 1px solid #e5ede8; border-radius: 12px; background: #fbfcfb; }
.metric-row strong { display: block; margin-top: 7px; font-size: 22px; }
.risk { color: var(--risk); }.warning { color: var(--warning); }.success { color: var(--success); }
.queue { padding: 16px; border: 1px solid #e3ebe6; border-radius: 14px; background: #fff; }
.queue-title { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 11px; }
.queue-title span { color: var(--green); font-weight: 700; }
.queue-item { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; padding: 11px 0; border-top: 1px solid #edf2ef; font-size: 10px; }
.queue-item i { width: 7px; height: 7px; border-radius: 50%; }
.risk-dot { background: var(--risk); }.warn-dot { background: var(--warning); }.success-dot { background: var(--success); }
.queue-item b { font-size: 10px; }
.floating-card { position: absolute; display: flex; flex-direction: column; padding: 13px 17px; border: 1px solid rgba(255,255,255,.9); border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); }
.floating-card span { color: #73847e; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.floating-card strong { margin-top: 3px; font-size: 12px; }
.floating-card-left { bottom: 35px; left: -40px; }.floating-card-right { top: 94px; right: -32px; }

.section { padding: 112px 0; }
.section-intro { background: #fff; }
.section h2, .page-content-section h2 { margin: 0; color: var(--forest); font-size: clamp(36px, 4.5vw, 55px); font-weight: 760; letter-spacing: -.052em; line-height: 1.08; }
.section-lead { max-width: 720px; margin: 22px auto 0; color: var(--ink-soft); font-size: 18px; }
.cards-grid { display: grid; gap: 18px; margin-top: 52px; }
.cards-three { grid-template-columns: repeat(3,1fr); }
.cards-four { grid-template-columns: repeat(2,1fr); }
.feature-card { position: relative; min-height: 270px; padding: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 0 rgba(11,53,43,.02); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-card::after { content: ""; position: absolute; right: -40px; bottom: -55px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(93,225,174,.13), transparent 68%); }
.feature-card:hover { transform: translateY(-5px); border-color: #bad0c5; box-shadow: var(--shadow-soft); }
.card-number { color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.feature-card h3 { margin: 70px 0 12px; color: var(--forest); font-size: 23px; line-height: 1.18; letter-spacing: -.03em; }
.feature-card p { margin: 0; color: var(--ink-soft); }

.product-section { overflow: hidden; background: var(--cream); }
.product-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px; }
.check-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 30px; color: #2d463e; font-weight: 630; }
.check-list li::before { content: "✓"; position: absolute; top: 1px; left: 0; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: var(--forest); background: var(--lime); font-size: 11px; font-weight: 900; }
.status-line { display: flex; align-items: center; gap: 9px; margin-top: 28px; color: #5e716a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.status-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 5px rgba(217,154,22,.12); }
.sla-visual { position: relative; min-height: 470px; display: grid; place-items: center; overflow: hidden; border-radius: 32px; background: linear-gradient(145deg, var(--forest), #0c4939); box-shadow: var(--shadow); }
.sla-visual::before, .sla-visual::after { content: ""; position: absolute; border-radius: 50%; }
.sla-visual::before { top: -130px; right: -100px; width: 330px; height: 330px; border: 1px solid rgba(185,239,117,.25); box-shadow: 0 0 0 55px rgba(185,239,117,.04), 0 0 0 110px rgba(185,239,117,.025); }
.sla-visual::after { bottom: -80px; left: -70px; width: 220px; height: 220px; background: rgba(93,225,174,.08); }
.sla-ring { position: relative; z-index: 1; width: 245px; height: 245px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime) 0 92%, rgba(255,255,255,.12) 92%); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.sla-ring::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--forest); }
.sla-ring > div { position: relative; z-index: 1; text-align: center; color: #fff; }
.sla-ring strong { display: block; font-size: 52px; letter-spacing: -.06em; line-height: 1; }
.sla-ring span { display: block; margin-top: 8px; color: #bcd2ca; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.sla-bars { position: absolute; right: 30px; bottom: 30px; left: 30px; display: grid; grid-template-columns: repeat(4,1fr); align-items: end; gap: 8px; height: 52px; opacity: .65; }
.sla-bars span { display: block; height: var(--w); max-height: 52px; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, rgba(93,225,174,.15), rgba(93,225,174,.9)); }

.pillars-section { background: #fff; }
.pillars-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.pillar-card { min-height: 400px; padding: 42px; border-radius: 28px; }
.pillar-card h2 { max-width: 470px; font-size: clamp(32px,4vw,48px); }
.pillar-card p { max-width: 560px; color: var(--ink-soft); font-size: 17px; }
.pillar-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 80px; border-radius: 14px; font-weight: 800; }
.pillar-global { border: 1px solid #d5e3db; background: linear-gradient(145deg,#f7faf7,#ebf6ef); }
.pillar-global .pillar-icon { color: var(--forest); background: var(--lime); }
.pillar-security { color: #fff; background: linear-gradient(145deg,#123c31,var(--forest)); }
.pillar-security h2 { color: #fff; }
.pillar-security p { color: #c5d6cf; }
.pillar-security .pillar-icon { color: var(--forest); background: var(--mint); }
.pillar-security .text-link { color: var(--lime); }
.language-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.language-cloud span { padding: 6px 10px; border: 1px solid #c8d9d0; border-radius: 20px; color: #466159; background: rgba(255,255,255,.55); font-size: 11px; font-weight: 760; }

.closing-section { padding-top: 0; }
.closing-card, .page-cta { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 62px; overflow: hidden; border-radius: 30px; color: #fff; background: linear-gradient(120deg,#0b352b,#135746); box-shadow: var(--shadow); }
.closing-card h2, .page-cta h2 { max-width: 760px; color: #fff; }
.closing-card p:not(.eyebrow), .page-cta p { max-width: 670px; margin: 18px 0 0; color: #c8d9d2; }
.eyebrow-light { color: var(--lime); }

.page-hero { position: relative; min-height: 500px; display: flex; align-items: center; overflow: hidden; padding: 90px 0 100px; background: linear-gradient(150deg,#f5faf6,#edf5f0); }
.page-hero h1 { max-width: 900px; margin-inline: auto; font-size: clamp(48px,6vw,72px); }
.page-hero .lead { margin-inline: auto; }
.page-orb { position: absolute; border-radius: 50%; }
.page-orb-one { top: -170px; left: -120px; width: 430px; height: 430px; border: 1px solid rgba(34,169,118,.13); box-shadow: 0 0 0 70px rgba(34,169,118,.025), 0 0 0 140px rgba(34,169,118,.018); }
.page-orb-two { right: -90px; bottom: -150px; width: 330px; height: 330px; background: rgba(185,239,117,.12); filter: blur(2px); }
.status-pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; padding: 8px 13px; border: 1px solid #d4dfd8; border-radius: 30px; color: #4f625c; background: rgba(255,255,255,.7); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.page-content-section { background: #fff; }
.page-card { min-height: 255px; }
.page-card h3 { margin-top: 45px; }
.card-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--forest); background: #e4f5ec; font-size: 12px; font-weight: 820; }
.secondary-section { padding-top: 20px; background: #fff; }
.secondary-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; padding: 52px; border: 1px solid var(--line); border-radius: 28px; background: var(--cream); }
.secondary-card h2 { font-size: clamp(32px,4vw,48px); }
.secondary-card p:not(.eyebrow) { max-width: 760px; margin: 17px 0 0; color: var(--ink-soft); font-size: 17px; }
.secondary-logo { width: 118px; filter: drop-shadow(0 18px 25px rgba(11,53,43,.18)); }
.prototype-mini { min-width: 250px; padding: 20px; border-radius: 18px; color: #fff; background: var(--forest); box-shadow: var(--shadow-soft); }
.prototype-mini span { display: block; color: var(--mint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.prototype-mini strong { display: block; margin-top: 5px; }
.prototype-mini div { display: flex; gap: 6px; margin-top: 22px; }
.prototype-mini i { width: 36px; height: 6px; border-radius: 5px; background: rgba(255,255,255,.18); }.prototype-mini i:first-child { width: 70px; background: var(--lime); }
.page-cta-section { padding-top: 20px; }
.page-cta h2 { font-size: clamp(32px,4vw,46px); }

.site-footer { padding: 80px 0 28px; color: #c5d4ce; background: #071f1a; }
.footer-top { display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; padding-bottom: 62px; }
.brand-footer { color: #fff; }
.footer-brand p { max-width: 340px; margin: 20px 0 0; color: #9eb2aa; }
.footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.footer-links h2 { margin: 0 0 17px; color: #fff; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.footer-links a { display: block; margin: 10px 0; color: #aebfb8; font-size: 14px; }
.footer-links a:hover { color: var(--lime); }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding-top: 25px; border-top: 1px solid var(--line-dark); color: #80968d; font-size: 12px; }
.footer-bottom p { margin: 0; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.cards-grid [data-reveal]:nth-child(2) { transition-delay: .08s; }
.cards-grid [data-reveal]:nth-child(3) { transition-delay: .16s; }
.cards-grid [data-reveal]:nth-child(4) { transition-delay: .24s; }

@media (max-width: 1080px) {
  .main-nav { gap: 15px; }
  .main-nav a { font-size: 13px; }
  .header-actions .button { display: none; }
  .hero-grid { grid-template-columns: .9fr 1.1fr; gap: 35px; }
  .floating-card-right { right: -10px; }
  .floating-card-left { left: -15px; }
}

@media (max-width: 900px) {
  .admin-bar .site-header { top: 46px; }
  .header-inner { min-height: 70px; }
  .menu-toggle { display: block; }
  .header-navigation { position: absolute; top: 69px; right: 0; left: 0; display: none; align-items: stretch; padding: 18px 20px 24px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 20px 35px rgba(11,53,43,.1); }
  .header-navigation[data-open="true"] { display: block; }
  .main-nav { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
  .main-nav a { padding: 11px; border-radius: 9px; }
  .main-nav a::after { display: none; }
  .main-nav a.is-current { background: var(--cream); }
  .header-actions { justify-content: space-between; margin-top: 13px; padding-top: 15px; border-top: 1px solid var(--line); }
  .header-actions .button { display: inline-flex; }
  .hero { padding-top: 70px; }
  .hero-grid, .product-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 700px; }
  .product-visual { max-width: 680px; margin: 15px auto 0; }
  .cards-three { grid-template-columns: 1fr; }
  .feature-card { min-height: 220px; }
  .feature-card h3 { margin-top: 40px; }
  .product-grid { gap: 55px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 680px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .brand { font-size: 19px; }.brand img { width: 36px; height: 36px; }
  .header-actions .button { display: none; }
  .language-picker { width: 100%; }.language-picker select { width: 100%; max-width: none; }
  .hero { min-height: 0; padding: 58px 0 72px; }
  .hero h1, .page-hero h1 { font-size: clamp(42px,13vw,58px); }
  .hero .lead, .page-hero .lead { font-size: 17px; }
  .hero-actions { display: grid; }.hero-actions .button { width: 100%; }
  .hero-facts { gap: 13px; justify-content: space-between; }
  .hero-facts div { min-width: 0; }
  .hero-facts strong { font-size: 19px; }.hero-facts span { font-size: 9px; }
  .visual-window { transform: none; border-radius: 18px; }
  .visual-topbar { height: 52px; padding: 0 12px; }
  .live-badge { display: none; }
  .visual-body { min-height: 315px; grid-template-columns: 40px 1fr; }
  .visual-sidebar { gap: 11px; }.visual-sidebar span { width: 18px; height: 18px; }
  .visual-content { padding: 16px; }
  .metric-row { gap: 6px; }.metric-row > div { padding: 9px; }.metric-row small { font-size: 8px; }.metric-row strong { font-size: 18px; }
  .floating-card { display: none; }
  .section { padding: 78px 0; }
  .section h2, .page-content-section h2 { font-size: 37px; }
  .cards-four { grid-template-columns: 1fr; }
  .feature-card, .page-card { min-height: 0; padding: 26px; }
  .sla-visual { min-height: 390px; }
  .sla-ring { width: 210px; height: 210px; }
  .pillar-card { min-height: 0; padding: 30px; }.pillar-icon { margin-bottom: 55px; }
  .closing-card, .page-cta { align-items: flex-start; flex-direction: column; padding: 34px 26px; }
  .page-hero { min-height: 430px; padding: 70px 0; }
  .secondary-card { grid-template-columns: 1fr; padding: 30px 25px; }
  .secondary-logo { width: 82px; }
  .footer-links { grid-template-columns: repeat(2,1fr); }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .button, .hero-actions { display: none !important; }
  body { color: #000; background: #fff; }
  .section, .page-hero { padding: 30px 0; }
}

/* Vantevion product portfolio */
.portfolio-hero { min-height: 760px; }
.portfolio-console { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.88); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: 0 38px 90px rgba(11,53,43,.17); transform: rotateY(-2deg) rotateX(1deg); }
.portfolio-console::before { content: ""; position: absolute; inset: -120px -100px auto auto; width: 300px; height: 300px; border-radius: 50%; background: rgba(93,225,174,.12); }
.console-topbar { position: relative; z-index: 1; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.development-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid #ead7ac; border-radius: 999px; color: #765313; background: #fff8e7; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.development-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(217,154,22,.12); }
.status-pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; padding: 9px 14px; border: 1px solid #ead7ac; border-radius: 999px; color: #765313; background: #fff8e7; font-size: 11px; font-weight: 800; letter-spacing: .07em; line-height: 1; text-transform: uppercase; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(217,154,22,.12); }
.console-body { position: relative; z-index: 1; padding: 28px; }
.console-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 9px; margin-bottom: 20px; color: #71827c; font-size: 10px; font-weight: 760; letter-spacing: .07em; text-align: center; text-transform: uppercase; }
.console-flow span, .console-flow strong { padding: 9px 7px; border: 1px solid #e2ebe6; border-radius: 10px; background: #f9fbfa; }
.console-flow strong { color: var(--forest); background: #ecf8f1; }
.console-flow i { color: var(--green); font-style: normal; }
.console-families { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.console-family { min-height: 118px; display: flex; flex-direction: column; align-items: flex-start; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.console-family small { margin-bottom: auto; color: #71827c; font-size: 9px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.console-family strong { margin-top: 6px; color: var(--forest); font-size: 14px; }
.console-family.family-commerce { border-top: 3px solid #22a976; }
.console-family.family-market { border-top: 3px solid #5b78dc; }
.console-family.family-growth { grid-column: 1 / -1; min-height: 92px; border-top: 3px solid #d39232; }
.console-trust-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 12px; }
.console-trust-row span { padding: 9px 5px; border-radius: 8px; color: #456057; background: #eef5f1; font-size: 9px; font-weight: 750; text-align: center; }

.portfolio-list-section { background: #f7faf8; }
.portfolio-heading { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 70px; margin-bottom: 50px; }
.portfolio-heading .section-lead { margin: 0; }
.portfolio-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 18px; margin-top: 52px; }
.portfolio-heading + .portfolio-grid { margin-top: 0; }
.portfolio-card { --product-accent: var(--green); min-width: 0; grid-column: span 2; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-top: 4px solid var(--product-accent); border-radius: 24px; background: #fff; box-shadow: 0 1px 0 rgba(11,53,43,.025); scroll-margin-top: 100px; transition: transform .25s ease, box-shadow .25s ease; }
.portfolio-card:nth-child(4) { grid-column: 2 / span 2; }
.portfolio-card:nth-child(5) { grid-column: 4 / span 2; }
.portfolio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.portfolio-card.product-tiersignal, .portfolio-card.product-appmarketiq { --product-accent: #5b78dc; }
.portfolio-card.product-rankrenew { --product-accent: #d39232; }
.portfolio-card.product-returnmetric { --product-accent: #22a976; }
.portfolio-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-monogram { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--forest); background: color-mix(in srgb, var(--product-accent) 16%, white); font-size: 12px; font-weight: 850; letter-spacing: .04em; }
.product-family { margin: 34px 0 8px; color: var(--product-accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-card h3 { margin: 0; color: var(--forest); font-size: 30px; letter-spacing: -.045em; }
.product-category { min-height: 44px; margin: 7px 0 0; color: #657871; font-size: 13px; font-weight: 650; }
.product-story { display: grid; gap: 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.product-story strong, .product-connection strong { display: block; margin-bottom: 5px; color: var(--forest); font-size: 10px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.product-story p, .product-connection p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.product-connection { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: auto; padding-top: 24px; }
.product-connection > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--forest); background: #eef5f1; font-weight: 800; }
.portfolio-grid-compact .portfolio-card { min-height: 540px; }

.ecosystem-section { overflow: hidden; color: #fff; background: #092c24; }
.ecosystem-section h2 { color: #fff; }
.ecosystem-section .section-lead { color: #bfd1ca; }
.ecosystem-section .eyebrow { color: var(--lime); }
.ecosystem-map { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 48px minmax(300px,1.25fr) 48px minmax(0,1fr); align-items: center; gap: 12px; margin-top: 56px; padding: 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.ecosystem-map::before { content: ""; position: absolute; inset: 12% 30%; border-radius: 50%; background: rgba(93,225,174,.08); filter: blur(45px); }
.map-column, .map-hub { position: relative; z-index: 1; }
.map-column { display: grid; gap: 12px; }
.map-column-label { margin: 0 0 4px; color: #96b0a6; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.map-node { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.055); }
.map-node-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #0a3128; background: var(--lime); font-size: 11px; font-weight: 850; }
.source-market .map-node-icon { background: #9fb0ff; }
.source-search .map-node-icon { background: #f0bd68; }
.map-node strong { display: block; color: #fff; font-size: 13px; }
.map-node small { display: block; margin-top: 4px; color: #a9bdb5; font-size: 10px; }
.map-arrow { position: relative; z-index: 1; color: var(--mint); font-size: 25px; text-align: center; }
.map-arrow::before { content: ""; position: absolute; top: 50%; right: 4px; left: 4px; height: 1px; background: rgba(93,225,174,.35); }
.map-arrow span { position: relative; padding: 0 4px; background: #0b352b; }
.map-hub { padding: 30px; border: 1px solid rgba(185,239,117,.4); border-radius: 24px; background: linear-gradient(145deg,rgba(21,78,62,.98),rgba(10,48,39,.98)); box-shadow: 0 25px 55px rgba(0,0,0,.2); text-align: center; }
.map-hub-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--lime); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.map-hub-brand img { width: 28px; filter: brightness(0) invert(1); }
.map-hub h3 { margin: 20px 0 8px; color: #fff; font-size: 28px; letter-spacing: -.04em; }
.map-hub > p { margin: 0; color: #b8cbc4; font-size: 12px; }
.map-product-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 24px; }
.map-product-chip { padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #eaf5f0; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 720; }
.outcome-node { min-height: 64px; }
.outcome-number { color: var(--mint); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.development-note-section { padding-top: 72px; padding-bottom: 30px; background: #fff; }
.development-note { display: grid; grid-template-columns: auto 1fr; gap: 28px; padding: 40px; border: 1px solid #ead9b3; border-radius: 26px; background: #fffaf0; }
.development-note-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #765313; background: #f6dfae; font-size: 25px; }
.development-note h2 { font-size: clamp(30px,4vw,46px); }
.development-note p:not(.eyebrow) { max-width: 900px; margin: 15px 0 0; color: #665b46; }
.products-page .page-cta-section { background: #fff; }

/* Institutional Home */
.institutional-hero { min-height: 750px; }
.home-signal-board { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 38px 90px rgba(11,53,43,.17); transform: rotateY(-2deg) rotateX(1deg); }
.home-signal-board::before { content: ""; position: absolute; inset: -140px -110px auto auto; width: 330px; height: 330px; border-radius: 50%; background: rgba(93,225,174,.13); }
.signal-board-body { position: relative; z-index: 1; padding: 34px; }
.signal-board-kicker { margin: 0 0 10px; color: var(--green); font-size: 10px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.signal-board-body h2 { max-width: 480px; margin: 0; color: var(--forest); font-size: clamp(28px,3.3vw,42px); letter-spacing: -.045em; line-height: 1.05; }
.decision-path { display: grid; gap: 10px; margin-top: 30px; }
.decision-path article { display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdfc; }
.decision-path article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--forest); background: #dff5e9; font-size: 11px; font-weight: 850; }
.decision-path article:nth-child(2) > span { background: #e8ecff; }
.decision-path article:nth-child(3) > span { background: #fff0d5; }
.decision-path strong { display: block; color: var(--forest); font-size: 14px; }
.decision-path p { margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.signal-trust-line { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; color: #456057; background: #eef5f1; font-size: 10px; font-weight: 750; }
.signal-trust-line span { color: var(--green); }

.home-method-section { background: #f3f7f4; }
.method-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.method-card { min-height: 260px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.method-card > span { display: block; margin-bottom: 48px; color: var(--green); font-size: 11px; font-weight: 850; letter-spacing: .09em; }
.method-card h3 { margin: 0; color: var(--forest); font-size: 20px; letter-spacing: -.025em; }
.method-card p { margin: 12px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

.home-portfolio-bridge { padding-top: 0; background: #f3f7f4; }
.portfolio-bridge-card { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 48px 54px; border: 1px solid #cfe3d9; border-radius: 28px; background: linear-gradient(125deg,#fff,#edf8f2); box-shadow: var(--shadow-soft); }
.portfolio-bridge-card > div { max-width: 760px; }
.portfolio-bridge-card h2 { margin: 0; color: var(--forest); font-size: clamp(32px,4vw,48px); letter-spacing: -.045em; }
.portfolio-bridge-card p:not(.eyebrow) { margin: 16px 0 0; color: var(--ink-soft); line-height: 1.65; }
.portfolio-bridge-card .button { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .method-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .home-signal-board { max-width: 680px; margin: 20px auto 0; transform: none; }
  .portfolio-bridge-card { align-items: flex-start; flex-direction: column; gap: 30px; }
}

@media (max-width: 680px) {
  .institutional-hero { min-height: 0; }
  .signal-board-body { padding: 24px 18px; }
  .signal-board-body h2 { font-size: 30px; }
  .method-grid { grid-template-columns: 1fr; }
  .method-card { min-height: 0; padding: 24px; }
  .method-card > span { margin-bottom: 28px; }
  .portfolio-bridge-card { padding: 32px 24px; }
  .portfolio-bridge-card .button { width: 100%; }
}

@media (max-width: 1080px) {
  .portfolio-card { grid-column: span 3; }
  .portfolio-card:nth-child(4) { grid-column: span 3; }
  .portfolio-card:nth-child(5) { grid-column: 2 / span 4; }
  .ecosystem-map { grid-template-columns: minmax(0,1fr) 36px minmax(260px,1.15fr) 36px minmax(0,1fr); padding: 26px; }
}

@media (max-width: 900px) {
  .portfolio-console { max-width: 680px; margin: 20px auto 0; transform: none; }
  .portfolio-heading { grid-template-columns: 1fr; gap: 20px; }
  .portfolio-heading .section-lead { margin: 0; }
  .portfolio-grid, .portfolio-grid-compact { grid-template-columns: repeat(2,1fr); }
  .portfolio-card, .portfolio-card:nth-child(4), .portfolio-card:nth-child(5) { grid-column: auto; min-height: 0; }
  .portfolio-card:last-child { grid-column: 1 / -1; }
  .ecosystem-map { grid-template-columns: 1fr; gap: 18px; }
  .map-arrow { min-height: 34px; display: grid; place-items: center; transform: rotate(90deg); }
  .map-arrow::before { right: 42%; left: 42%; }
  .map-column-label { text-align: center; }
}

@media (max-width: 680px) {
  .portfolio-hero { min-height: 0; }
  .console-topbar { padding: 0 14px; }
  .console-topbar .visual-brand span { font-size: 11px; }
  .console-topbar .development-badge { max-width: 145px; overflow: hidden; text-overflow: ellipsis; }
  .console-body { padding: 18px; }
  .console-flow { grid-template-columns: 1fr; }
  .console-flow i { transform: rotate(90deg); }
  .console-families { grid-template-columns: 1fr; }
  .console-family.family-growth { grid-column: auto; }
  .console-trust-row { grid-template-columns: repeat(2,1fr); }
  .portfolio-grid, .portfolio-grid-compact { grid-template-columns: 1fr; margin-top: 34px; }
  .portfolio-card:last-child { grid-column: auto; }
  .portfolio-card { padding: 24px; }
  .portfolio-card h3 { font-size: 27px; }
  .product-category { min-height: 0; }
  .development-badge { font-size: 9px; }
  .ecosystem-map { margin-top: 38px; padding: 18px; border-radius: 22px; }
  .map-hub { padding: 24px 18px; }
  .development-note { grid-template-columns: 1fr; padding: 28px 24px; }
}