:root {
  color-scheme: light;
  --plum: #241737;
  --deep-plum: #1a102a;
  --lilac: #a58bfa;
  --lime: #ddfb78;
  --porcelain: #f5f3fa;
  --coral: #ee7273;
  --ink: #241737;
  --muted: #61566e;
  --line: #ded7e9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 126px; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--porcelain); font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.55; }
body::before { content: ""; position: absolute; z-index: -2; top: 0; left: 0; right: 0; height: 890px; pointer-events: none; background: radial-gradient(ellipse at 80% 31%, #d9cfff 0%, #ebe7f9 35%, transparent 67%), linear-gradient(180deg, #fbfaff 0%, var(--porcelain) 94%); }
.ambient { position: absolute; z-index: -1; border: 1px solid #a58bfa4d; border-radius: 50%; pointer-events: none; }
.ambient-one { width: 960px; height: 960px; top: -580px; right: 0; }
.ambient-two { width: 1210px; height: 1210px; top: -720px; right: 0; border-color: #a58bfa24; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #7655cf; outline-offset: 3px; }
.shell { width: min(1260px, calc(100% - 80px)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; background: #faf8ffed; border-bottom: 1px solid #af9dcc99; box-shadow: 0 12px 30px #24173716; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 112px; }
.brand-link { display: inline-flex; align-items: center; flex: none; width: 172px; height: 110px; overflow: hidden; }
.brand-link img { display: block; width: 172px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 5px; padding: 5px; background: #eae3f8; border: 1px solid #d9cdea; border-radius: 100px; box-shadow: inset 0 1px #fff; }
.main-nav a { display: block; padding: 10px 15px; color: #57476f; border-radius: 100px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.main-nav a:hover, .main-nav a[aria-current="location"] { color: var(--plum); background: #fff; box-shadow: 0 3px 12px #24173714; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.language-toggle { min-width: 42px; height: 39px; padding: 6px 9px; color: var(--plum); background: #fff; border: 1px solid #c9b9e1; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.language-toggle:hover { border-color: #7655cf; }
.header-contact { display: inline-flex; align-items: center; gap: 13px; padding: 10px 16px; color: var(--plum); background: var(--lime); border: 1px solid #c3e95a; border-radius: 10px; box-shadow: 0 5px 13px #a3c84b33; font-size: 13px; font-weight: 800; white-space: nowrap; transition: transform .2s, box-shadow .2s; }
.header-contact:hover { transform: translateY(-2px); box-shadow: 0 8px 18px #a3c84b55; }
.header-contact span:last-child { font-size: 17px; line-height: 1; }
.menu-toggle { display: none; }

.hero { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; gap: clamp(44px, 5vw, 86px); padding-block: 88px 116px; }
.hero-copy { max-width: 650px; }
.eyebrow, .section-label, .visual-kicker, .flow-number, .visual-bottomline, .card-number { font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; color: #6545b0; }
.status-pulse, .live-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9775f2; box-shadow: 0 0 0 5px #a58bfa38; animation: pulse 3s ease-in-out infinite; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 690px; margin-bottom: 26px; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: clamp(56px, 5.4vw, 83px); font-weight: 400; line-height: 1.03; letter-spacing: -.058em; }
.hero-lead { max-width: 570px; margin-bottom: 32px; color: #584c68; font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 50px; padding: 12px 19px; border-radius: 10px; font-size: 13px; font-weight: 800; transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--plum); background: var(--lime); box-shadow: 0 8px 25px #b7d95452; }
.button-primary:hover { background: #e8ffa0; box-shadow: 0 10px 30px #b7d9546b; }
.button-quiet { color: var(--plum); background: #ffffffc2; border: 1px solid #bdb2ce; }
.button-quiet:hover { background: #fff; }
.button span:last-child { font-size: 18px; font-weight: 450; line-height: 1; }
.hero-meta { display: flex; align-items: center; gap: 14px; margin-top: 38px; color: #756785; font-size: 12px; }
.meta-line { flex: none; width: 29px; height: 1px; background: #9a7de8; }

.system-visual { position: relative; overflow: hidden; padding: 27px; color: #fff; background: radial-gradient(circle at 79% 13%, #523284 0%, transparent 41%), linear-gradient(150deg, #332248, #1b102a 72%); border: 1px solid #6d51a0; border-radius: 28px; box-shadow: 0 32px 72px #35225831, 0 6px 18px #3522581c; }
.system-visual::before { content: ""; position: absolute; inset: 9px; border: 1px solid #c1aff421; border-radius: 20px; pointer-events: none; }
.visual-topline { display: flex; justify-content: space-between; align-items: start; gap: 14px; padding: 2px 3px 22px; border-bottom: 1px solid #bfa9e536; }
.visual-topline > div { display: flex; flex-direction: column; gap: 5px; }
.visual-kicker { color: #c6adf6; }
.visual-topline strong { color: #fff; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.visual-live { display: inline-flex; align-items: center; gap: 10px; margin-top: 5px; color: var(--lime); font-size: 10px; font-weight: 850; letter-spacing: .1em; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; background: var(--lime); box-shadow: 0 0 0 4px #ddfb7830; }
.flow-list { display: grid; gap: 15px; padding-block: 22px; }
.flow-stage { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 22px; align-items: center; gap: 15px; min-height: 104px; padding: 11px 16px 11px 11px; color: var(--plum); background: #f4eeff; border: 1px solid #c5b1eb; border-radius: 17px; box-shadow: 0 8px 18px #09031420; transition: transform .25s, box-shadow .25s; }
.flow-stage:hover { transform: translateX(5px); box-shadow: 0 12px 24px #09031430; }
.flow-stage:not(:last-child)::after { content: "↓"; position: absolute; left: 44px; bottom: -21px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; color: var(--lime); background: #2c1948; border-radius: 50%; font-size: 15px; font-weight: 800; }
.stage-agent { background: #d1c2ff; border-color: #e0d8ff; }
.stage-review { background: #ffdfdf; border-color: #f6a9ae; }
.stage-learn { background: #eafbca; border-color: #cde48a; }
.flow-art { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; background: #ffffff92; border: 1px solid #ffffffb8; border-radius: 13px; }
.flow-art img { display: block; width: 75px; height: 75px; object-fit: contain; animation: float-art 5s ease-in-out infinite; }
.stage-agent .flow-art img { animation-delay: -.8s; }
.stage-review .flow-art img { animation-delay: -1.6s; }
.stage-learn .flow-art img { animation-delay: -2.4s; }
.flow-number { display: block; margin-bottom: 2px; color: #69539a; font-size: 9px; }
.stage-review .flow-number { color: #9e5361; }
.stage-learn .flow-number { color: #617a30; }
.flow-stage h2 { margin: 0 0 3px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.flow-stage p { margin: 0; color: #5c4d70; font-size: 11px; line-height: 1.35; }
.stage-review p { color: #6b4f62; }
.stage-learn p { color: #576144; }
.flow-arrow { justify-self: end; color: #7e5dbe; font-size: 19px; line-height: 1; }
.stage-review .flow-arrow { color: #c15d69; }
.stage-learn .flow-arrow { color: #6e9439; }
.visual-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 3px 1px; color: #b7a0dd; border-top: 1px solid #bfa9e536; font-size: 9px; }
.loop-indicator { color: var(--lime); font-size: 22px; line-height: 1; animation: loop-turn 8s linear infinite; }

.section-intro { display: grid; grid-template-columns: 230px 1fr; gap: 35px; padding-block: 96px 116px; border-top: 1px solid var(--line); }
.section-label { display: flex; gap: 11px; color: #6b50ba; }
.section-label span:first-child { color: var(--coral); }
.section-intro-content { display: grid; grid-template-columns: 1.04fr .96fr; gap: 62px; }
.section-intro h2, .section-heading h2, .status-panel h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 3.5vw, 56px); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; }
.section-intro p { margin: 3px 0 0; color: #61556c; font-size: 16px; line-height: 1.8; }
.capabilities { padding-bottom: 120px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 34px; }
.section-heading .section-label { margin-bottom: 22px; }
.section-heading h2 { max-width: 810px; }
.section-heading > p { max-width: 220px; margin-bottom: 6px; color: #776884; font-size: 14px; }
.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.capability-card { overflow: hidden; padding: 18px 18px 34px; background: #fff; border: 1px solid #e1d9eb; border-radius: 23px; box-shadow: 0 16px 38px #4b326c0b; transition: transform .25s, box-shadow .25s; }
.capability-card:hover { transform: translateY(-5px); box-shadow: 0 26px 45px #4b326c1c; }
.card-art { position: relative; display: grid; place-items: center; height: 210px; overflow: hidden; background: linear-gradient(140deg, #e9dcff, #f7f0ff); border-radius: 16px; }
.capability-card:nth-child(2) .card-art { background: linear-gradient(140deg, #d6c7ff, #f1ecff); }
.capability-card:nth-child(3) .card-art { background: linear-gradient(140deg, #ffe0df, #fff2ee); }
.capability-card:nth-child(4) .card-art { background: linear-gradient(140deg, #e5f7ba, #f5fbe4); }
.card-art img { z-index: 1; display: block; width: 178px; height: 178px; filter: drop-shadow(0 14px 10px #2417371a); animation: float-art 5s ease-in-out infinite; }
.capability-card:nth-child(2) .card-art img { animation-delay: -.8s; }
.capability-card:nth-child(3) .card-art img { animation-delay: -1.6s; }
.capability-card:nth-child(4) .card-art img { animation-delay: -2.4s; }
.art-orbit { position: absolute; width: 285px; height: 285px; border: 1px solid #a78adb59; border-radius: 50%; }
.orbit-one { top: -190px; left: -65px; }
.orbit-two { bottom: -220px; right: -100px; }
.art-chip { position: absolute; z-index: 2; right: 20px; bottom: 18px; padding: 7px 12px; color: #4b2b80; background: #ffffffdc; border: 1px solid #ffffff; border-radius: 100px; box-shadow: 0 5px 15px #2417371a; font-size: 11px; font-weight: 800; }
.card-number { display: block; margin: 28px 20px 9px; color: #7557b9; }
.capability-card:nth-child(3) .card-number { color: #b55063; }
.capability-card:nth-child(4) .card-number { color: #6e8b30; }
.capability-card h3 { margin: 0 20px 10px; font-size: 25px; font-weight: 750; letter-spacing: -.04em; }
.capability-card p { max-width: 450px; margin: 0 20px; color: #665975; font-size: 15px; line-height: 1.72; }

.status-section { padding-bottom: 105px; }
.status-panel { position: relative; overflow: hidden; padding: 45px 48px 50px; color: #fff; background: radial-gradient(circle at 90% 5%, #604295 0%, transparent 35%), linear-gradient(120deg, #332049, var(--deep-plum)); border: 1px solid #654c89; border-radius: 22px; box-shadow: 0 25px 55px #35225820; }
.status-panel::after { content: ""; position: absolute; top: -230px; right: -195px; width: 490px; height: 490px; border: 1px solid #cab5ff3b; border-radius: 50%; pointer-events: none; }
.status-panel .section-label { color: #d7c7ff; }
.status-content { display: grid; grid-template-columns: 1fr 235px; align-items: end; gap: 45px; margin-top: 26px; }
.status-content > div:first-child { max-width: 675px; }
.status-panel h2 { margin-bottom: 16px; }
.status-panel p { margin-bottom: 23px; color: #d1c7dc; font-size: 15px; line-height: 1.76; }
.text-link { display: inline-flex; align-items: center; gap: 15px; padding-bottom: 4px; color: var(--lime); border-bottom: 1px solid #ddfb7899; font-size: 14px; font-weight: 750; }
.text-link:hover { color: #efffb9; }
.status-badge { z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 19px; background: #ffffff12; border: 1px solid #bfa9ee77; border-radius: 14px; }
.status-badge-icon { margin-bottom: 13px; color: var(--lime); font-size: 27px; line-height: 1; }
.status-badge strong { margin-bottom: 3px; font-size: 14px; }
.status-badge > span:last-child { color: #c2b3d5; font-size: 11px; }
.footer { display: flex; align-items: center; gap: 35px; min-height: 120px; border-top: 1px solid var(--line); }
.footer-brand { width: 133px; height: 90px; }
.footer-brand img { width: 133px; }
.footer p { flex: 1; margin: 0; color: #81768c; font-size: 12px; }
.footer > a:last-child { color: #7655c5; font-size: 12px; }
.footer > a:last-child:hover { text-decoration: underline; }

@keyframes float-art { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 5px #a58bfa38; } 50% { box-shadow: 0 0 0 9px #a58bfa12; } }
@keyframes loop-turn { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .shell { width: min(100% - 56px, 1260px); }
  .header-inner { gap: 12px; }
  .main-nav a { padding-inline: 11px; }
  .hero { gap: 32px; }
  .flow-stage { grid-template-columns: 66px minmax(0, 1fr) 17px; gap: 10px; }
  .flow-art, .flow-art img { width: 66px; height: 66px; }
  .section-intro { grid-template-columns: 180px 1fr; }
  .section-intro-content { gap: 30px; }
}
@media (max-width: 820px) {
  .shell { width: min(100% - 42px, 680px); }
  .header-inner { min-height: 86px; }
  .brand-link { width: 122px; height: 82px; }
  .brand-link img { width: 122px; }
  .main-nav { display: none; position: absolute; top: calc(100% + 8px); left: 21px; right: 21px; flex-direction: column; align-items: stretch; gap: 4px; padding: 9px; background: #fff; border: 1px solid #d8cdea; border-radius: 17px; box-shadow: 0 16px 40px #24173730; }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 13px 15px; border-radius: 10px; font-size: 14px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 41px; height: 39px; padding: 0; background: #fff; border: 1px solid #c9b9e1; border-radius: 10px; cursor: pointer; }
  .menu-toggle span { width: 18px; height: 2px; background: var(--plum); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 54px; padding-block: 76px 94px; }
  .hero-copy { max-width: 680px; }
  h1 { max-width: 660px; }
  .system-visual { width: 100%; }
  .section-intro { display: block; padding-block: 78px 98px; }
  .section-intro > .section-label { margin-bottom: 25px; }
  .section-intro-content { grid-template-columns: 1fr; gap: 22px; }
  .section-heading { display: block; }
  .section-heading > p { max-width: none; margin-top: 20px; }
  .capability-grid { gap: 15px; }
  .card-art { height: 175px; }
  .card-art img { width: 152px; height: 152px; }
  .capability-card h3 { font-size: 21px; }
  .capability-card p { font-size: 14px; }
  .status-content { grid-template-columns: 1fr; gap: 28px; }
  .status-panel { padding: 35px 31px; }
  .status-badge { max-width: 240px; }
}
@media (max-width: 590px) {
  .shell { width: min(100% - 32px, 500px); }
  .header-inner { min-height: 78px; }
  .brand-link { width: 116px; height: 78px; }
  .brand-link img { width: 116px; }
  .header-contact { display: none; }
  .main-nav { left: 16px; right: 16px; }
  .hero { gap: 42px; padding-block: 61px 74px; }
  .eyebrow { font-size: 9px; }
  h1 { font-size: clamp(47px, 11vw, 64px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { display: grid; }
  .hero-meta { margin-top: 27px; }
  .system-visual { padding: 18px; border-radius: 21px; }
  .visual-topline strong { font-size: 16px; }
  .visual-live { font-size: 8px; letter-spacing: .04em; }
  .flow-list { gap: 12px; padding-block: 17px; }
  .flow-stage { grid-template-columns: 57px minmax(0, 1fr); gap: 10px; min-height: 83px; padding: 8px; border-radius: 13px; }
  .flow-stage:not(:last-child)::after { left: 29px; bottom: -18px; width: 17px; height: 17px; font-size: 11px; }
  .flow-art, .flow-art img { width: 57px; height: 57px; }
  .flow-stage h2 { font-size: 14px; }
  .flow-stage p { font-size: 10px; }
  .flow-number { font-size: 8px; }
  .flow-arrow { display: none; }
  .visual-bottomline { font-size: 8px; }
  .section-intro { padding-block: 70px 80px; }
  .section-intro h2, .section-heading h2, .status-panel h2 { font-size: clamp(37px, 9vw, 50px); }
  .section-intro p { font-size: 15px; }
  .capabilities { padding-bottom: 84px; }
  .capability-grid { grid-template-columns: 1fr; gap: 17px; }
  .capability-card { padding: 13px 13px 28px; }
  .card-art { height: 190px; }
  .card-art img { width: 165px; height: 165px; }
  .card-number { margin: 23px 12px 8px; }
  .capability-card h3 { margin-inline: 12px; font-size: 23px; }
  .capability-card p { margin-inline: 12px; }
  .status-section { padding-bottom: 67px; }
  .status-panel { padding: 30px 24px; }
  .footer { flex-wrap: wrap; gap: 9px 18px; min-height: auto; padding-block: 23px; }
  .footer-brand { width: 95px; height: 65px; }
  .footer-brand img { width: 95px; }
  .footer p { flex: 1; }
  .footer > a:last-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}