@charset "UTF-8";
/* =========================================================
   BARO-SUBMIT INTRO PAGE
   ========================================================= */
.baro-page {
    --navy: #071329;
    --navy-light: #0d2243;
    --blue: #0d3ea6;
    --blue-bright: #3277ff;
    --cyan: #29d5ff;
    --purple: #651a99;
    --violet: #8a52ff;
    --ink: #17233b;
    --muted: #69758d;
    --line: #dfe6f1;
    color: var(--ink);
    background: #fff;
    overflow: visible;
    overflow-x: clip;
    word-break: keep-all;
}
.baro-page *, .baro-page *::before, .baro-page *::after { box-sizing: border-box; }
.baro-page svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.baro-container { width: min(1320px, calc(100% - 80px)); margin: 0 auto; }
/* BARO-SUBMIT SCROLL STORY */
.baro-scroll-story { position: relative; height: 460vh; background: #fff; }
.baro-story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #fff; }
.baro-story-frame { position: absolute; top: 50%; left: 50%; z-index: 3; width: 100vw; height: 100vh; height: 100svh; overflow: hidden; color: var(--ink); border-radius: 0; background: linear-gradient(180deg,rgba(77,91,126,.16) 0%,transparent 27%), radial-gradient(ellipse at 84% 15%,rgba(137,88,220,.4) 0%,rgba(137,88,220,.16) 27%,transparent 52%), radial-gradient(ellipse at 7% 86%,rgba(43,181,145,.3) 0%,rgba(43,181,145,.11) 28%,transparent 50%), radial-gradient(circle at 47% 45%,rgba(65,116,211,.16),transparent 40%), linear-gradient(125deg,#d9e7f3 0%,#ddd6ed 49%,#cfe3e5 100%); box-shadow: 0 0 0 rgba(52,66,94,0); transform: translate(-50%,-50%); transition: box-shadow .45s ease; will-change: width,height,top,border-radius; }
.story-grid { position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(rgba(80,101,139,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(80,101,139,.08) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, #000 10%, transparent 96%); }
.story-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(8px); }
.story-glow-one { top: -15%; right: -8%; width: 520px; height: 520px; background: radial-gradient(circle,rgba(139,91,220,.3),transparent 70%); animation: glowFloat 8s ease-in-out infinite; }
.story-glow-two { bottom: -28%; left: 16%; width: 440px; height: 440px; background: radial-gradient(circle,rgba(47,183,147,.24),transparent 70%); animation: glowFloat 9s ease-in-out -2s infinite reverse; }
.story-intro { position: absolute; top: 50%; left: 50%; z-index: 5; width: min(900px, calc(100% - 80px)); text-align: center; transform: translate(-50%,-47%); transition: opacity .65s ease, transform .8s ease, visibility .65s; }
.story-kicker { display: inline-flex; align-items: center; gap: 12px; color: #2871c8; font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.story-kicker::before, .story-kicker::after { content: ""; width: 30px; height: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.story-intro h1 { margin: 24px 0 25px; color: #202b40; font-size: clamp(54px,6vw,88px); line-height: 1.13; letter-spacing: -.06em; font-weight: 330; }
.story-intro h1 strong { display: inline-block; color: #17233b; font-weight: 900; text-shadow: 0 10px 32px rgba(50,119,255,.15); }
.story-intro h1 strong::after { content: ""; display: block; width: 100%; height: 5px; margin-top: 8px; border-radius: 5px; background: linear-gradient(90deg,#29d5ff,#3277ff,#8a52ff); box-shadow: 0 0 25px rgba(41,213,255,.5); transform-origin: left; animation: underlineGrow 1.1s .3s both; }
.story-intro p { margin: 0; color: #65728a; font-size: 16px; line-height: 1.85; }
.story-tags { display: flex; justify-content: center; gap: 9px; margin-top: 28px; }
.story-tags span { padding: 8px 14px; color: #53627b; border: 1px solid #d8e0ed; border-radius: 100px; background: rgba(255,255,255,.72); box-shadow: 0 8px 22px rgba(52,66,94,.05); font-size: 12px; }
.baro-story-words { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.story-word { position: absolute; top: 50%; color: #10141d; font-size: clamp(55px,6vw,92px); line-height: 1; letter-spacing: -.07em; opacity: 0; transform: translateY(-30%); transition: opacity .8s .2s ease, transform .9s .2s cubic-bezier(.22,.72,.2,1); }
.story-word-left { left: 6%; }
.story-word-right { right: 6%; }
.story-hub { position: absolute; inset: 0; z-index: 4; opacity: 0; visibility: hidden; transition: opacity .7s .2s ease, visibility .7s; }
.story-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .28s ease, transform .35s ease; }
.story-line { fill: none; stroke: #4d91ff; stroke-width: 2.2; stroke-dasharray: 520; stroke-dashoffset: 520; opacity: .64; filter: drop-shadow(0 0 7px rgba(50,119,255,.62)); transition: stroke-dashoffset 1.1s cubic-bezier(.22,.72,.2,1),opacity .6s ease; }
.story-line-fax { stroke: #42d69b; filter: drop-shadow(0 0 7px rgba(37,193,129,.58)); }
.story-line-online { stroke: #a06cff; filter: drop-shadow(0 0 7px rgba(138,82,255,.62)); }
.story-service { position: absolute; z-index: 5; width: 235px; min-height: 88px; display: flex; align-items: center; gap: 15px; padding: 17px 19px; opacity: 0; border: 1px solid rgba(111,183,255,.42); border-radius: 19px; background: linear-gradient(145deg,rgba(21,72,130,.97),rgba(8,29,62,.96)); box-shadow: 0 20px 48px rgba(0,0,0,.3),0 0 28px rgba(41,213,255,.08),inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(12px); transition: opacity .7s ease,transform .9s cubic-bezier(.22,.72,.2,1),filter .7s ease,box-shadow .45s ease; }
.story-service-mo { top: 20%; left: 14%; border-color: rgba(91,157,255,.52); background: linear-gradient(145deg,rgba(63,123,209,.97),rgba(32,78,145,.97)); transform: translate(-55px,-25px) scale(.86); }
.story-service-fax { top: 20%; right: 14%; border-color: rgba(83,219,169,.5); background: linear-gradient(145deg,rgba(48,157,123,.97),rgba(22,104,88,.97)); transform: translate(55px,-25px) scale(.86); }
.story-service-online { bottom: 10%; left: 50%; border-color: rgba(176,127,255,.5); background: linear-gradient(145deg,rgba(126,91,202,.97),rgba(78,57,151,.97)); transform: translate(-50%,55px) scale(.86); }
.story-service:hover { box-shadow: 0 24px 56px rgba(0,0,0,.34),0 0 34px rgba(72,168,255,.16),inset 0 1px rgba(255,255,255,.12); }
.story-service-mo:hover { box-shadow: 0 24px 56px rgba(0,0,0,.34),0 0 34px rgba(77,145,255,.2),inset 0 1px rgba(255,255,255,.12); }
.story-service-fax:hover { box-shadow: 0 24px 56px rgba(0,0,0,.34),0 0 34px rgba(66,214,155,.18),inset 0 1px rgba(255,255,255,.12); }
.story-service-online:hover { box-shadow: 0 24px 56px rgba(0,0,0,.34),0 0 34px rgba(160,108,255,.2),inset 0 1px rgba(255,255,255,.12); }
.story-service-icon { flex: 0 0 50px; width: 50px; height: 50px; display: grid; place-items: center; color: #8bb7ff; border-radius: 14px; background: linear-gradient(145deg,rgba(77,145,255,.28),rgba(50,119,255,.16)); box-shadow: inset 0 0 0 1px rgba(99,158,255,.24),0 0 18px rgba(50,119,255,.13); }
.story-service-fax .story-service-icon { color: #71e4b5; background: linear-gradient(145deg,rgba(66,214,155,.25),rgba(37,193,129,.13)); box-shadow: inset 0 0 0 1px rgba(91,225,171,.22),0 0 18px rgba(37,193,129,.12); }
.story-service-online .story-service-icon { color: #c29dff; background: linear-gradient(145deg,rgba(160,108,255,.27),rgba(138,82,255,.14)); box-shadow: inset 0 0 0 1px rgba(184,139,255,.22),0 0 18px rgba(138,82,255,.13); }
.story-service-icon svg { width: 27px; height: 27px; }
.story-service b { display: block; margin-bottom: 5px; color: #fff; font-size: 17px; line-height: 1; letter-spacing: .025em; }
.story-service span { color: rgba(228,239,255,.7); font-size: 11px; line-height: 1.35; }
.story-core { position: absolute; top: 50%; left: 50%; z-index: 6; width: 235px; height: 235px; opacity: 0; transform: translate(-50%,-50%) scale(.72); transition: top .5s ease,width .5s ease,height .5s ease,opacity .7s ease,transform .9s cubic-bezier(.22,.72,.2,1); }
.story-core-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(116,132,173,.2); transition: opacity .35s ease,transform .4s ease; }
.story-core-ring-one { inset: -25px; box-shadow: 0 0 52px rgba(104,91,155,.2); animation: corePulse 3s ease-out infinite; }
.story-core-ring-two { inset: -52px; border-style: dashed; border-color: rgba(138,82,255,.3); animation: orbitRotate 16s linear infinite reverse; }
.story-core-body { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(255,255,255,.9); border-radius: 50%;    background:radial-gradient(circle at 20% 28%, rgba(56, 132, 230, .16), transparent 42%),radial-gradient(circle at 80% 28%, rgba(40, 190, 145, .16), transparent 42%),radial-gradient(circle at 50% 88%, rgba(116, 75, 205, .16), transparent 44%),      #fff;}
.story-core-body > span { color: #4b67a7; font-size: 8px; font-weight: 900; letter-spacing: .22em; text-shadow: none; }
.story-core-body strong { margin: 10px 0 12px; color: #17233b; font-size: 36px; font-weight: 900; line-height: .86; letter-spacing: -.055em; text-shadow: 0 5px 16px rgba(62,76,111,.14); }
.story-core-body small { display: flex; align-items: center; gap: 5px; color: rgba(63,76,105,.7); font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.story-core-body small i { width: 5px; height: 5px; border-radius: 50%; background: #4dffb8; box-shadow: 0 0 9px #4dffb8; animation: statusBlink 1.5s infinite; }
.story-complete-copy { position: absolute; right: 0; bottom: 3.5%; left: 0; z-index: 7; text-align: center; opacity: 0; transform: translateY(16px); transition: bottom .45s ease,opacity .7s ease,transform .7s ease; }
.story-complete-copy span { display: block; margin-bottom: 5px; color: #386fbd; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.story-complete-copy strong { color: #35435b; font-size: 13px; }
.baro-story-progress { position: absolute; top: 50%; right: 26px; z-index: 9; width: 2px; height: 150px; overflow: hidden; background: rgba(17,35,66,.12); transform: translateY(-50%); }
.baro-story-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(to bottom,#29d5ff,#3277ff,#8a52ff); transform: scaleY(0); transform-origin: top; }
.baro-story-scroll { position: absolute; bottom: 22px; left: 50%; z-index: 9; display: flex; flex-direction: column; align-items: center; gap: 7px; color: rgba(38,55,84,.46); font-size: 8px; letter-spacing: .18em; transform: translateX(-50%); transition: color .5s ease, opacity .5s ease; }
.baro-story-scroll span { width: 1px; height: 28px; background: linear-gradient(to bottom,transparent,#29d5ff); animation: scrollLine 1.8s ease-in-out infinite; }
.baro-scroll-story.stage-hub .story-intro { opacity: 0; visibility: hidden; transform: translate(-50%,-55%) scale(.94); }
.baro-scroll-story.stage-hub .story-hub { opacity: 1; visibility: visible; }
.baro-scroll-story.stage-hub .story-core { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.baro-scroll-story.stage-shrink .baro-story-frame { box-shadow: 0 35px 90px rgba(48,60,86,.22); }
.baro-scroll-story.stage-shrink .story-word { opacity: 1; transform: translateY(-50%); }
.baro-scroll-story.stage-shrink .baro-story-scroll { color: rgba(13,33,66,.35); }
.baro-scroll-story.stage-mo .story-service-mo { opacity: 1; transform: translate(0,0) scale(1); }
.baro-scroll-story.stage-mo .story-line-mo { stroke-dashoffset: 0; }
.baro-scroll-story.stage-fax .story-service-fax { opacity: 1; transform: translate(0,0) scale(1); }
.baro-scroll-story.stage-fax .story-line-fax { stroke-dashoffset: 0; }
.baro-scroll-story.stage-online .story-service-online { opacity: 1; transform: translate(-50%,0) scale(1); }
.baro-scroll-story.stage-online .story-line-online { stroke-dashoffset: 0; }
.baro-scroll-story.stage-complete .story-service-mo { opacity: 0; filter: blur(3px); transform: translate(145%,80%) scale(.42); }
.baro-scroll-story.stage-complete .story-service-fax { opacity: 0; filter: blur(3px); transform: translate(-145%,80%) scale(.42); }
.baro-scroll-story.stage-complete .story-service-online { opacity: 0; filter: blur(3px); transform: translate(-50%,-105%) scale(.42); }
.baro-scroll-story.stage-complete .story-connections { opacity: 0; transform: scale(.72); }
.baro-scroll-story.stage-complete .story-line { stroke-dashoffset: 0; opacity: 0; }
.baro-scroll-story.stage-complete .story-core { top: 45%; width: 340px; height: 180px; transform: translate(-50%,-50%) scale(1); }
.baro-scroll-story.stage-complete .story-core-ring { opacity: 0; animation: none; transform: scale(.65); }
.baro-scroll-story.stage-complete .story-core-body { border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; }
.baro-scroll-story.stage-complete .story-core-body > span { color: #3371c5; font-size: 10px; text-shadow: 0 8px 18px rgba(50,119,255,.16); }
.baro-scroll-story.stage-complete .story-core-body strong { margin: 11px 0 0; color: #17233b; font-size: 67px; line-height: .84; text-shadow: 0 12px 28px rgba(50,119,255,.18); }
.baro-scroll-story.stage-complete .story-core-body small { height: 0; margin: 0; overflow: hidden; opacity: 0; }
.baro-scroll-story.stage-complete .story-complete-copy { bottom: 8%; opacity: 1; transform: translateY(0); }
.baro-scroll-story.stage-complete .baro-story-scroll { opacity: 0; }
/* COMMON HEADINGS */
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; margin-bottom: 58px; }
.section-heading h2, .center-heading h2, .value-copy h2 { margin: 13px 0 0; color: var(--ink); font-size: clamp(35px, 4vw, 50px); line-height: 1.23; letter-spacing: -.045em; }
.section-heading > p { flex: 0 0 430px; margin: 0 0 5px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.center-heading { margin-bottom: 66px; text-align: center; }
.center-heading .section-kicker { justify-content: center; }
.center-heading p { margin: 18px 0 0; color: var(--muted); font-size: 16px; }
/* STATUS DASHBOARD */
.baro-status-section { position: relative; padding: 130px 0 140px; background: linear-gradient(180deg, #fff 0%, #f5f8fd 100%); }
.status-dashboard { overflow: hidden; border: 1px solid #dce5f2; border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 30px 80px rgba(23,35,59,.10); }
.dashboard-topline { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border-bottom: 1px solid #e8edf5; background: linear-gradient(90deg, #fbfdff, #f3f7fc); }
.dashboard-title { display: flex; align-items: center; gap: 10px; }
.dashboard-title > i { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 5px rgba(50,119,255,.11); }
.dashboard-title strong { color: var(--ink); font-size: 16px; }
.dashboard-title span { padding-left: 10px; border-left: 1px solid #d8e0ec; color: #8994a7; font-size: 12px; }
.dashboard-live { padding: 7px 11px; color: #168764; border-radius: 100px; background: #e8faf4; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.dashboard-live span { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #28c891; box-shadow: 0 0 8px rgba(40,200,145,.65); }
.dashboard-body { display: grid; grid-template-columns: 1.05fr 1.35fr; gap: 0; }
.primary-stat { grid-row: span 2; min-height: 360px; display: flex; flex-direction: column; justify-content: center; padding: 52px 60px; border-right: 1px solid #e7ecf4; background: radial-gradient(circle at 10% 0%, rgba(50,119,255,.10), transparent 44%); }
.stat-label { color: #64718a; font-size: 15px; font-weight: 700; }
.stat-number { display: flex; align-items: flex-end; gap: 9px; margin: 15px 0 24px; }
.stat-number strong { color: var(--blue); font-size: clamp(64px, 7vw, 94px); line-height: .95; letter-spacing: -.06em; }
.stat-number em { margin-bottom: 10px; color: #56637b; font-size: 20px; font-style: normal; font-weight: 700; }
.primary-stat p { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: #8792a6; font-size: 11px; line-height: 1.6; }
.primary-stat p i { width: 7px; height: 7px; border-radius: 50%; background: #28c891; box-shadow: 0 0 8px rgba(40,200,145,.5); }
.primary-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.primary-points li { padding: 8px 11px; color: #53627b; border: 1px solid #dce5f2; border-radius: 100px; background: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; }
.summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #e7ecf4; }
.summary-stats article { min-height: 160px; padding: 30px; border-right: 1px solid #e7ecf4; }
.summary-stats article:last-child { border-right: 0; }
.summary-stats span, .summary-stats small { display: block; color: #8a95a8; font-size: 11px; }
.summary-stats strong { display: block; margin: 11px 0 8px; color: var(--ink); font-size: 15px; }
.summary-stats strong b { margin-right: 3px; color: var(--blue); font-size: 29px; letter-spacing: -.04em; }
.channel-status { padding: 24px 32px; }
.channel-row { display: grid; grid-template-columns: 165px 1fr 70px; align-items: center; gap: 18px; min-height: 49px; }
.channel-name { display: flex; align-items: center; gap: 8px; }
.channel-dot { width: 8px; height: 8px; border-radius: 50%; }
.mo-dot { background: #4d91ff; box-shadow: 0 0 8px rgba(50,119,255,.55); }
.fax-dot { background: #42d69b; box-shadow: 0 0 8px rgba(37,193,129,.55); }
.online-dot { background: #a06cff; box-shadow: 0 0 8px rgba(138,82,255,.55); }
.channel-name b { font-size: 12px; }
.channel-name em { color: #929caf; font-size: 10px; font-style: normal; }
.channel-summary { color: #78859b; font-size: 11px; }
.channel-row strong { text-align: right; color: #6e7a90; font-size: 11px; }
.channel-row strong b { margin-right: 2px; color: var(--ink); font-size: 16px; }
/* PROCESS */
.baro-process-section { padding: 140px 0 150px; background: #fff; }
.process-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process-track { position: absolute; top: 60px; left: 12.5%; right: 12.5%; z-index: 0; height: 2px; background: #dfe6f1; }
.process-track::before { content: ""; position: absolute; inset: -8px 0; background: linear-gradient(90deg,transparent,rgba(50,119,255,.12),transparent); opacity: 0; filter: blur(6px); }
.process-track span { position: absolute; top: -1px; left: 0; width: 24%; height: 4px; border-radius: 10px; background: linear-gradient(90deg,transparent,#3277ff 35%,#7beaff 72%,#fff); box-shadow: 0 0 8px #29d5ff,0 0 20px rgba(50,119,255,.75); opacity: 0; transform: translateX(-105%); }
.process-track i { position: absolute; top: 50%; left: 0; width: 27px; height: 27px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: radial-gradient(circle,#fff 0 12%,#54dcff 25%,#3277ff 56%,transparent 70%); filter: drop-shadow(0 0 8px #29d5ff) drop-shadow(0 0 15px #3277ff); opacity: 0; transform: translate(-50%,-50%); }
.process-track i svg { width: 15px; height: 15px; fill: #fff; stroke: #fff; stroke-width: 1; }
.process-card { --process-delay: .15s; --icon-rotate: -3deg; position: relative; z-index: 1; padding: 0 16px; text-align: center; }
.process-card:nth-of-type(2) { --process-delay: .82s; --icon-rotate: 3deg; }
.process-card:nth-of-type(3) { --process-delay: 1.5s; }
.process-card:nth-of-type(4) { --process-delay: 2.18s; --icon-rotate: 3deg; }
.process-card::before { content: ""; position: absolute; top: 22px; left: 50%; z-index: -1; width: 114px; height: 114px; border: 1px solid rgba(50,119,255,.45); border-radius: 50%; box-shadow: 0 0 0 0 rgba(50,119,255,.25),inset 0 0 24px rgba(41,213,255,.08); opacity: 0; transform: translateX(-50%) scale(.45); }
.process-step { display: block; margin-bottom: 18px; color: #a8b3c3; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.process-icon { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 25px; color: var(--blue-bright); border: 1px solid #d9e4f2; border-radius: 23px; background: #fff; box-shadow: 0 14px 34px rgba(36,68,120,.09); transform: rotate(-3deg); transition: .35s ease; }
.process-card:nth-of-type(even) .process-icon { color: var(--purple); transform: rotate(3deg); }
.process-icon svg { width: 30px; height: 30px; }
.process-card:hover .process-icon { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 18px 42px rgba(61,68,194,.25); transform: translateY(-7px) rotate(0); }
.process-card h3 { margin: 0 0 12px; font-size: 19px; }
.process-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.process-flow.is-visible .process-track::before { animation: processTrackGlow 2.55s .05s ease-out both; }
.process-flow.is-visible .process-track span { animation: processEnergyRun 2.35s .08s cubic-bezier(.2,.72,.16,1) both; }
.process-flow.is-visible .process-track i { animation: processBoltRun 2.35s .08s cubic-bezier(.2,.72,.16,1) both; }
.process-flow.is-visible .process-card::before { animation: processRingFlash .8s var(--process-delay) cubic-bezier(.16,.72,.2,1) both; }
.process-flow.is-visible .process-icon { animation: processIconFlash .82s var(--process-delay) cubic-bezier(.16,.72,.2,1) both; }
.process-flow.is-visible .process-step,
.process-flow.is-visible .process-card h3 { animation: processTextFlash .72s var(--process-delay) ease both; }
.process-flow.is-visible .process-card:last-child .process-icon { animation-name: processCompleteFlash; animation-duration: 1.05s; }
/* SOLUTION CARDS */
.baro-solutions-section { position: relative; padding: 140px 0 150px; color: var(--ink); background: radial-gradient(ellipse at 86% 12%,rgba(137,88,220,.27),transparent 38%), radial-gradient(ellipse at 8% 88%,rgba(43,181,145,.2),transparent 36%), linear-gradient(135deg,#e1eaf4 0%,#e5dff0 52%,#d9e9e9 100%); }
.baro-solutions-section::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(circle at 20% 30%, var(--cyan) 0, transparent 1px), radial-gradient(circle at 80% 60%, var(--violet) 0, transparent 1px); background-size: 70px 70px, 92px 92px; }
.baro-solutions-section .baro-container { position: relative; }
.section-heading.light h2 { color: var(--ink); }
.section-heading.light > p { color: var(--muted); }
.solution-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.solution-card { position: relative; min-height: 490px; overflow: hidden; padding: 30px 32px 34px; border: 1px solid #dfe5ef; border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 22px 55px rgba(45,58,84,.09); backdrop-filter: blur(12px); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; }
.solution-card::before { content: ""; position: absolute; top: -100px; right: -80px; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(50,119,255,.2), transparent 68%); transition: transform .5s ease; }
.solution-card-fax::before { background: radial-gradient(circle, rgba(37,193,129,.2), transparent 68%); }
.solution-card-online::before { background: radial-gradient(circle, rgba(138,82,255,.22), transparent 68%); }
.solution-card:hover { transform: translateY(-10px); border-color: rgba(77,145,255,.42); box-shadow: 0 28px 70px rgba(45,58,84,.14), 0 0 38px rgba(50,119,255,.08); }
.solution-card-fax:hover { border-color: rgba(66,214,155,.48); }
.solution-card-online:hover { border-color: rgba(160,108,255,.46); }
.solution-card:hover::before { transform: scale(1.2); }
.solution-card-top { display: flex; justify-content: space-between; align-items: center; }
.solution-card-top span { color: #a4afc1; font-size: 12px; font-weight: 800; }
.solution-card-top em { color: #8090aa; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .15em; }
.solution-symbol { width: 70px; height: 70px; display: grid; place-items: center; margin: 36px 0 28px; color: #79aaff; border-radius: 21px; background: rgba(50,119,255,.12); box-shadow: inset 0 0 0 1px rgba(89,147,255,.19); }
.solution-card-fax .solution-symbol { color: #70dfb0; background: rgba(37,193,129,.11); box-shadow: inset 0 0 0 1px rgba(66,214,155,.18); }
.solution-card-online .solution-symbol { color: #bd96ff; background: rgba(138,82,255,.13); box-shadow: inset 0 0 0 1px rgba(160,108,255,.19); }
.solution-symbol svg { width: 34px; height: 34px; }
.solution-card h3 { margin: 0 0 8px; color: #17233b; font-size: 34px; letter-spacing: -.04em; }
.solution-card > strong { display: block; color: #35435b; font-size: 15px; }
.solution-card > p { min-height: 73px; margin: 18px 0 22px; color: #69758d; font-size: 13px; line-height: 1.8; }
.solution-card ul { margin: 0; padding: 19px 0 0; border-top: 1px solid #e5eaf2; list-style: none; }
.solution-card li { position: relative; margin-top: 10px; padding-left: 15px; color: #53627b; font-size: 12px; }
.solution-card li::before { content: ""; position: absolute; top: 7px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #4d91ff; box-shadow: 0 0 8px currentColor; }
.solution-card-fax li::before { background: #42d69b; }
.solution-card-online li::before { background: #a06cff; }
/* VALUES */
.baro-value-section { padding: 135px 0; background: #f5f8fc; }
.value-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; align-items: center; }
.value-copy h2 { margin-bottom: 22px; }
.value-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.value-list { border-top: 1px solid #d7e0ec; }
.value-list article { display: grid; grid-template-columns: 55px 1fr; gap: 20px; align-items: center; padding: 26px 8px; border-bottom: 1px solid #d7e0ec; transition: padding .3s ease, background .3s ease; }
.value-list article:hover { padding-left: 18px; background: linear-gradient(90deg, rgba(50,119,255,.055), transparent); }
.value-list article > span { color: var(--blue-bright); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.value-list h3 { margin: 0 0 7px; color: var(--ink); font-size: 18px; }
.value-list p { margin: 0; color: var(--muted); font-size: 13px; }
/* REVEAL & ANIMATIONS */
.reveal-item { opacity: 0; transform: translateY(34px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }
.solution-card:nth-child(2) { transition-delay: .12s; }
.solution-card:nth-child(3) { transition-delay: .24s; }
@keyframes glowFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-18px,18px,0) scale(1.06); } }
@keyframes underlineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes orbitRotate { to { transform: rotate(352deg); } }
@keyframes corePulse { 0% { transform: scale(.92); opacity: 0; } 40% { opacity: .7; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes statusBlink { 50% { opacity: .35; } }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes processEnergyRun { 0% { opacity: 0; transform: translateX(-105%) scaleX(.5); } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(420%) scaleX(1.1); } }
@keyframes processBoltRun { 0% { left: 0; opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(-10deg); } 7%,91% { opacity: 1; } 48% { transform: translate(-50%,-50%) scale(1.18) rotate(8deg); } 100% { left: 100%; opacity: 0; transform: translate(-50%,-50%) scale(.65) rotate(14deg); } }
@keyframes processTrackGlow { 0%,100% { opacity: 0; } 12%,82% { opacity: 1; } }
@keyframes processRingFlash { 0% { opacity: 0; transform: translateX(-50%) scale(.45); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1.35); box-shadow: 0 0 0 18px rgba(50,119,255,0); } }
@keyframes processIconFlash { 0% { color: var(--blue-bright); transform: rotate(var(--icon-rotate)) scale(1); } 38% { color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--blue),var(--violet)); box-shadow: 0 0 0 7px rgba(50,119,255,.09),0 18px 42px rgba(61,68,194,.3),0 0 25px rgba(41,213,255,.34); transform: translateY(-8px) rotate(0) scale(1.08); } 100% { color: var(--blue-bright); transform: rotate(var(--icon-rotate)) scale(1); } }
@keyframes processCompleteFlash { 0% { color: var(--purple); transform: rotate(3deg) scale(1); } 35%,62% { color: #fff; border-color: transparent; background: linear-gradient(135deg,#3277ff,#29d5ff); box-shadow: 0 0 0 9px rgba(41,213,255,.1),0 18px 45px rgba(50,119,255,.32),0 0 32px rgba(41,213,255,.48); transform: translateY(-9px) rotate(0) scale(1.12); } 100% { color: var(--purple); transform: rotate(3deg) scale(1); } }
@keyframes processTextFlash { 0%,100% { color: inherit; transform: translateY(0); } 40% { color: var(--blue-bright); transform: translateY(-3px); text-shadow: 0 0 18px rgba(50,119,255,.24); } }
/* RESPONSIVE */
@media (max-width: 1100px) {
    .baro-container { width: min(100% - 48px, 960px); }
    .story-word { font-size: 54px; }
    .story-word-left { left: 2.5%; }
    .story-word-right { right: 2.5%; }
    .story-service { width: 205px; min-height: 80px; gap: 12px; padding: 14px 15px; }
    .story-service-mo { top: 18%; left: 7%; }
    .story-service-fax { top: 18%; right: 7%; }
    .story-service-online { bottom: 9%; }
    .story-service-icon { flex-basis: 44px; width: 44px; height: 44px; }
    .story-service-icon svg { width: 24px; height: 24px; }
    .story-service b { font-size: 15px; }
    .story-service span { font-size: 10px; }
    .story-core { width: 200px; height: 200px; }
    .story-core-body strong { font-size: 30px; }
    .dashboard-body { grid-template-columns: 1fr; }
    .primary-stat { grid-row: auto; min-height: 300px; border-right: 0; border-bottom: 1px solid #e7ecf4; }
    .process-flow { grid-template-columns: repeat(2, 1fr); row-gap: 60px; }
    .process-track { display: none; }
    .solution-card { padding: 28px 25px; }
    .value-inner { gap: 60px; }
}
@media (max-width: 780px) {
    .baro-container { width: calc(100% - 36px); }
    .desktop-only { display: none; }
    .baro-scroll-story { height: 280vh; }
    .story-intro { width: calc(100% - 36px); }
    .story-kicker { font-size: 8px; }
    .story-kicker::before, .story-kicker::after { width: 18px; }
    .story-intro h1 { font-size: clamp(40px,11vw,58px); }
    .story-intro p { font-size: 13px; line-height: 1.75; }
    .story-tags { flex-wrap: wrap; }
    .baro-story-words { position: absolute; inset: 0; display: block; }
    .story-word { position: absolute; right: auto; left: 50%; width: max-content; font-size: 35px; line-height: 1; text-align: center; white-space: nowrap; transform: translate(-50%,-12px); }
    .story-word-left { top: 78px; bottom: auto; }
    .story-word-right { top: auto; bottom: 12px; }
    .baro-scroll-story.stage-shrink .story-word { transform: translate(-50%,0); }
    .story-connections { display: none; }
    .story-service { width: 145px; min-height: 62px; gap: 8px; padding: 10px 11px; border-radius: 14px; }
    .story-service-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
    .story-service-icon svg { width: 18px; height: 18px; }
    .story-service b { margin-bottom: 3px; font-size: 12px; }
    .story-service span { font-size: 8px; }
    .story-service-mo { top: 20%; left: 4%; }
    .story-service-fax { top: 20%; right: 4%; }
    .story-service-online { bottom: 19%; left: 50%; width: 145px; }
    .story-core { width: 142px; height: 142px; }
    .story-core-ring-one { inset: -13px; }
    .story-core-ring-two { inset: -27px; }
    .story-core-body strong { font-size: 22px; }
    .baro-scroll-story.stage-complete .story-core { top: 45%; width: 250px; height: 145px; }
    .baro-scroll-story.stage-complete .story-core-body > span { font-size: 8px; }
    .baro-scroll-story.stage-complete .story-core-body strong { font-size: 40px; }
    .story-complete-copy { bottom: 2.5%; }
    .baro-scroll-story.stage-complete .story-service-mo,
    .baro-scroll-story.stage-complete .story-service-fax,
    .baro-scroll-story.stage-complete .story-service-online { opacity: 0; transform: scale(.6); }
    .baro-story-progress { right: 8px; }
    .section-heading { display: block; margin-bottom: 42px; }
    .section-heading > p { margin-top: 20px; }
    .baro-status-section, .baro-solutions-section, .baro-value-section{ padding: 90px 0; }
    .baro-process-section{ padding: 48px 0 90px;}
    .status-dashboard { border-radius: 18px; }
    .dashboard-topline { padding: 0 20px; }
    .primary-stat { padding: 40px 28px; }
    .summary-stats { grid-template-columns: 1fr; }
    .summary-stats article { min-height: 115px; border-right: 0; border-bottom: 1px solid #e7ecf4; }
    .summary-stats article:last-child { border-bottom: 0; }
    .channel-status { padding: 22px 20px; }
    .channel-row { grid-template-columns: 105px 1fr 58px; gap: 10px; }
    .channel-name em { display: none; }
    .process-flow, .solution-cards, .value-inner { grid-template-columns: 1fr; }
    .process-flow { gap: 48px; }
    .solution-card { min-height: auto; }
    .solution-card > p { min-height: auto; }
    .value-inner { gap: 48px; }
}
@media (max-width: 520px) {
    .story-intro h1 { font-size: 40px; }
    .story-intro h1 strong::after { height: 4px; }
    .story-word { font-size: 32px; }
    .story-word-left { top: 76px; }
    .story-word-right { bottom: 10px; }
    .story-service { width: calc(50% - 24px); max-width: 145px; min-height: 60px; padding: 9px 10px; }
    .story-service-mo { top: 22%; left: 12px; }
    .story-service-fax { top: 22%; right: 12px; }
    .story-service-online { bottom: 7%; left: 50%; width: 145px; }
    .story-core { top: 53%; width: 136px; height: 136px; }
    .baro-scroll-story.stage-complete .story-core { top: 45%; width: 230px; height: 135px; }
    .baro-scroll-story.stage-complete .story-core-body strong { font-size: 38px; }
    .section-heading h2, .center-heading h2, .value-copy h2 { font-size: 32px; }
    .stat-number strong { font-size: 60px; }
    .dashboard-title span { display: none; }
    .channel-row { grid-template-columns: 85px 1fr 48px; }
      .baro-scroll-story .story-service-online {bottom: 16svh !important; }
}
@media (prefers-reduced-motion: reduce) {
    .baro-page *, .baro-page *::before, .baro-page *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .reveal-item { opacity: 1; transform: none; }
}
/* 합쳐진 원의 바깥 링 효과 */
.baro-story-frame {
    isolation: isolate;
}
/* 원 테두리를 따라 회전하는 컬러 링 */
.baro-story-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    padding: 3px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(70, 135, 235, .8) 45deg,
        transparent 100deg,
        rgba(42, 190, 150, .75) 165deg,
        transparent 220deg,
        rgba(126, 87, 220, .8) 285deg,
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
/* 합쳐진 뒤 컬러 링 회전 + 바깥쪽 이중 링 */
.baro-scroll-story.stage-complete .baro-story-frame {
    animation: baro-outer-pulse 3s ease-in-out infinite;
}
.baro-scroll-story.stage-complete .baro-story-frame::before {
    opacity: 1;
    animation: baro-ring-spin 5s linear infinite;
}
@keyframes baro-ring-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes baro-outer-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(79, 105, 195, .18),
            0 0 0 12px rgba(102, 92, 190, .07),
            0 0 0 28px rgba(76, 163, 190, .025),
            0 22px 55px rgba(33, 52, 97, .14);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(79, 105, 195, .26),
            0 0 0 16px rgba(102, 92, 190, .1),
            0 0 0 34px rgba(76, 163, 190, .045),
            0 26px 65px rgba(33, 52, 97, .18);
    }
}
@media (prefers-reduced-motion: reduce) {
    .baro-scroll-story.stage-complete .baro-story-frame,
    .baro-scroll-story.stage-complete .baro-story-frame::before {
        animation: none;
    }
}