.noise {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .12;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    }

    .brand {
      position: fixed;
      z-index: 30;
      top: 30px;
      left: 42px;
      display: flex;
      align-items: center;
      gap: 13px;
      color: #fff;
      text-decoration: none;
      transition: opacity .35s ease, transform .35s ease;
    }

    .brand-logo {
      width: 62px;
      height: 56px;
      flex: 0 0 auto;
    }

    .brand-logo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 7px 11px rgba(0, 24, 65, .45));
    }

    .brand-name strong,
    .brand-name span { display: block; }
    .brand-name strong { font-size: 16px; font-weight: 700; }
    .brand-name span { margin-top: 3px; color: #a9d9ff; font-size: 10px; font-weight: 700; }

    .deck-progress {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 40;
      width: 100%;
      height: 3px;
      background: rgba(255,255,255,.08);
    }

    .deck-progress span {
      display: block;
      width: 11.111%;
      height: 100%;
      background: linear-gradient(90deg, #27e9e1, #3d9cff);
      box-shadow: 0 0 16px #22d8ff;
      transition: width .45s ease;
    }

    .side-nav {
      position: fixed;
      z-index: 35;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      display: grid;
      gap: 13px;
    }

    .side-nav button {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(190, 228, 255, .34);
      cursor: pointer;
      transition: .3s ease;
    }

    .side-nav button.active {
      height: 30px;
      border-radius: 8px;
      background: var(--cyan);
      box-shadow: 0 0 18px rgba(36, 217, 241, .8);
    }

    .page-count {
      position: fixed;
      z-index: 35;
      right: 25px;
      bottom: 26px;
      color: #b9d4f2;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .slide {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      display: grid;
      place-items: center;
      overflow: hidden;
      isolation: isolate;
      padding: 120px 9vw 80px;
    }

    .slide::after {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      background-image:
        linear-gradient(rgba(71, 174, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(71, 174, 255, .07) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
    }

    .slide-inner {
      width: min(1540px, 100%);
      margin: auto;
      opacity: .18;
      transform: translateY(52px) scale(.985);
      transition: opacity .85s ease, transform .85s cubic-bezier(.2,.8,.2,1);
    }

    .slide.in-view .slide-inner {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .eyebrow {
      margin: 0 0 18px;
      color: var(--cyan);
      font-size: clamp(14px, 1vw, 19px);
      font-weight: 800;
      letter-spacing: .16em;
    }

    h1, h2, p { margin-top: 0; }
    h1, h2 { line-height: 1.16; }
    h1 { margin-bottom: 25px; font-size: clamp(62px, 6.2vw, 122px); font-weight: 850; }
    h2 { margin-bottom: 22px; font-size: clamp(42px, 4.2vw, 78px); font-weight: 800; }

    .lede {
      max-width: 820px;
      color: #b9d2ed;
      font-size: clamp(20px, 1.55vw, 30px);
      line-height: 1.75;
    }

    .cover { padding-left: 11vw; place-items: center start; }
    .cover::before {
      content: "";
      position: absolute;
      z-index: -3;
      width: min(74vw, 1280px);
      aspect-ratio: 1;
      right: -17vw;
      top: -39vh;
      border: 1px solid rgba(77, 219, 255, .2);
      border-radius: 50%;
      box-shadow:
        0 0 0 70px rgba(18, 114, 215, .035),
        0 0 0 150px rgba(28, 212, 245, .025),
        inset 0 0 160px rgba(32, 173, 255, .12);
      animation: orbit 18s linear infinite;
    }

    .cover .slide-inner { position: relative; max-width: 1320px; }
    .cover h1 span {
      color: transparent;
      background: linear-gradient(94deg, #fff 10%, #79dcff 48%, #2af1e5 92%);
      background-clip: text;
      -webkit-background-clip: text;
      filter: drop-shadow(0 12px 34px rgba(0, 139, 255, .22));
    }

    .cover-subtitle {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      margin: 0;
      color: #c9ddf4;
      font-size: clamp(23px, 1.8vw, 36px);
      font-weight: 500;
    }

    .cover-subtitle::before {
      content: "";
      width: 64px;
      height: 3px;
      background: linear-gradient(90deg, var(--cyan), transparent);
      box-shadow: 0 0 14px var(--cyan);
    }

    .cover-company {
      margin-top: 62px;
      color: #8eb6dc;
      font-size: clamp(18px, 1.2vw, 24px);
      letter-spacing: .08em;
    }

    .holo {
      position: absolute;
      width: min(34vw, 650px);
      aspect-ratio: 1;
      right: 6vw;
      top: 50%;
      transform: translateY(-50%);
      opacity: .9;
    }

    .holo-ring {
      position: absolute;
      inset: 12%;
      border: 1px solid rgba(92, 225, 255, .5);
      border-radius: 50%;
      box-shadow: inset 0 0 50px rgba(28, 163, 255, .12), 0 0 30px rgba(32, 209, 255, .09);
      animation: spin 14s linear infinite;
    }

    .holo-ring:nth-child(2) { inset: 25%; animation-direction: reverse; animation-duration: 9s; border-style: dashed; }
    .holo-ring::before,
    .holo-ring::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 18px var(--cyan);
    }
    .holo-ring::before { top: 10%; left: 16%; }
    .holo-ring::after { right: 12%; bottom: 15%; }

    .holo-core {
      position: absolute;
      inset: 36%;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 50%;
      color: #fff;
      font-size: clamp(24px, 2.4vw, 46px);
      font-weight: 900;
      background: radial-gradient(circle, rgba(20, 211, 255, .32), rgba(8, 62, 142, .18));
      box-shadow: 0 0 70px rgba(35, 209, 255, .35);
      animation: pulse 3.2s ease-in-out infinite;
    }

    .scanline {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      top: 14%;
      background: linear-gradient(90deg, transparent, rgba(65, 231, 255, .8), transparent);
      box-shadow: 0 0 18px rgba(37, 221, 255, .8);
      animation: scan 4.6s ease-in-out infinite;
    }

    .scroll-cue {
      position: absolute;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      color: #79a8d2;
      font-size: 11px;
      letter-spacing: .18em;
      text-align: center;
    }

    .scroll-cue i {
      display: block;
      width: 1px;
      height: 42px;
      margin: 10px auto 0;
      background: linear-gradient(var(--cyan), transparent);
      animation: cue 1.9s ease-in-out infinite;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
      gap: 7vw;
      align-items: center;
    }

    .visual-stage {
      position: relative;
      min-height: 530px;
      display: grid;
      place-items: center;
    }

    .glass {
      position: relative;
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgba(19, 81, 150, .45), rgba(3, 20, 51, .55));
      box-shadow: 0 30px 90px rgba(0, 7, 25, .35), inset 0 1px rgba(255,255,255,.08);
      backdrop-filter: blur(18px);
    }

    .search-window {
      width: min(720px, 100%);
      padding: 34px;
      border-radius: 8px;
      transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
    }

    .search-bar {
      height: 74px;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 0 24px;
      border: 1px solid rgba(133, 223, 255, .34);
      background: rgba(3, 17, 42, .72);
      font-size: 21px;
      color: #dff7ff;
    }

    .search-bar b { font-size: 32px; color: var(--cyan); }
    .answer-lines { display: grid; gap: 16px; margin-top: 28px; }
    .answer-lines span {
      height: 12px;
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(50, 221, 247, .78), rgba(77, 143, 233, .12));
      animation: load 3.8s ease-in-out infinite;
    }
    .answer-lines span:nth-child(2) { width: 84%; animation-delay: .15s; }
    .answer-lines span:nth-child(3) { width: 66%; animation-delay: .3s; }

    .behavior-stage {
      position: relative;
      min-height: 580px;
      display: grid;
      grid-template-columns: 1fr 116px 1fr;
      align-items: center;
      gap: 16px;
    }

    .behavior-card {
      position: relative;
      min-height: 450px;
      padding: 26px;
      overflow: hidden;
      border-radius: 8px;
    }

    .behavior-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, transparent 22%, rgba(87, 218, 255, .08), transparent 70%);
      transform: translateX(-100%);
      animation: sheen 5s ease-in-out infinite;
    }

    .behavior-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 30px;
      color: #87afd4;
      font-size: 15px;
      font-weight: 700;
    }

    .behavior-label i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4a8bd6;
      box-shadow: 0 0 12px #4a8bd6;
    }

    .behavior-card.ai .behavior-label { color: #72ecf2; }
    .behavior-card.ai .behavior-label i { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }

    .keyword-box {
      height: 66px;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 19px;
      border: 1px solid rgba(139, 194, 242, .28);
      background: rgba(3, 17, 42, .68);
      color: #d7e8fb;
      font-size: 17px;
    }

    .keyword-box b { color: #6ebcff; font-size: 27px; }

    .result-list { display: grid; gap: 19px; margin-top: 28px; }
    .result-list div { padding-left: 16px; border-left: 2px solid rgba(95, 154, 220, .34); }
    .result-list strong { display: block; margin-bottom: 9px; color: #b7d5f1; font-size: 16px; }
    .result-list span {
      display: block;
      width: 88%;
      height: 7px;
      border-radius: 5px;
      background: rgba(135, 176, 214, .17);
    }

    .ai-question {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 15px;
      align-items: center;
      padding: 17px;
      border: 1px solid rgba(73, 222, 242, .33);
      background: rgba(4, 31, 65, .72);
      color: #e7fbff;
      font-size: 17px;
      line-height: 1.45;
    }

    .person-dot, .ai-dot {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(145deg, #2268b8, #133867);
      color: #fff;
      font-weight: 800;
    }

    .ai-answer {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 15px;
      margin-top: 23px;
      padding: 20px 17px;
      border: 1px solid rgba(64, 229, 242, .18);
      background: linear-gradient(140deg, rgba(11, 104, 145, .24), rgba(2, 20, 48, .52));
    }

    .ai-dot {
      background: radial-gradient(circle at 35% 30%, #66f8f1, #1289d4 62%, #124173);
      box-shadow: 0 0 24px rgba(34, 220, 240, .32);
      font-size: 13px;
    }

    .ai-copy strong { display: block; color: #dffcff; font-size: 17px; }
    .ai-copy span {
      display: block;
      height: 8px;
      margin-top: 14px;
      border-radius: 6px;
      background: linear-gradient(90deg, rgba(65, 226, 238, .58), rgba(70, 139, 218, .11));
      animation: load 3.8s ease-in-out infinite;
    }
    .ai-copy span:nth-child(3) { width: 84%; animation-delay: .15s; }
    .ai-copy span:nth-child(4) { width: 62%; animation-delay: .3s; }

    .behavior-shift {
      position: relative;
      height: 120px;
      display: grid;
      place-items: center;
    }

    .behavior-shift::before,
    .behavior-shift::after {
      content: "";
      position: absolute;
      left: 4px;
      right: 4px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      box-shadow: 0 0 11px rgba(36, 217, 241, .75);
      animation: flowline 2.4s ease-in-out infinite;
    }
    .behavior-shift::before { top: 48px; }
    .behavior-shift::after { top: 70px; animation-delay: .35s; opacity: .55; }
    .behavior-shift b {
      position: relative;
      z-index: 1;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(93, 230, 255, .5);
      border-radius: 50%;
      background: #072957;
      color: var(--cyan);
      font-size: 25px;
      box-shadow: 0 0 30px rgba(35, 196, 240, .25);
    }

    .question-mark {
      font-size: clamp(210px, 22vw, 390px);
      line-height: .8;
      font-weight: 900;
      color: transparent;
      -webkit-text-stroke: 2px rgba(78, 218, 255, .65);
      filter: drop-shadow(0 0 36px rgba(36, 217, 241, .32));
      animation: float 5s ease-in-out infinite;
    }

    .visibility-orbit {
      position: relative;
      width: min(560px, 90vw);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
    }

    .visibility-orbit::before,
    .visibility-orbit::after {
      content: "";
      position: absolute;
      inset: 5%;
      border: 1px solid rgba(62, 220, 246, .28);
      border-radius: 50%;
      animation: spin 16s linear infinite;
    }
    .visibility-orbit::after {
      inset: 18%;
      border-style: dashed;
      animation-direction: reverse;
      animation-duration: 11s;
    }

    .site-scan {
      position: relative;
      z-index: 2;
      width: 68%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border: 1px solid rgba(111, 220, 255, .45);
      border-radius: 8px;
      background: linear-gradient(150deg, rgba(24, 101, 179, .72), rgba(3, 18, 45, .88));
      box-shadow: 0 34px 80px rgba(0, 5, 22, .5), 0 0 55px rgba(29, 205, 241, .17);
      transform: perspective(900px) rotateY(8deg) rotateX(4deg);
    }

    .site-scan .browser-top {
      height: 14%;
      border-bottom: 1px solid rgba(109, 213, 255, .22);
      background: rgba(2, 14, 35, .72);
    }
    .site-scan .hero-block { height: 31%; margin: 6% 7% 4%; background: linear-gradient(105deg, #176bd0, #1fd4e9); opacity: .8; }
    .site-scan .site-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; margin: 0 7%; }
    .site-scan .site-lines i { display: block; aspect-ratio: 1.35; border: 1px solid rgba(125, 224, 255, .22); background: rgba(105, 181, 237, .11); }
    .site-scan .laser {
      position: absolute;
      left: 0;
      right: 0;
      top: 8%;
      height: 3px;
      background: #5ef8ef;
      box-shadow: 0 0 25px #29e4ef, 0 0 55px rgba(41, 228, 239, .7);
      animation: scan 3.7s ease-in-out infinite;
    }
    .ai-eye {
      position: absolute;
      z-index: 4;
      right: 3%;
      bottom: 17%;
      width: 122px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1px solid rgba(101, 237, 255, .58);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(47, 239, 236, .95) 0 8%, #0d5b9d 10% 25%, rgba(3, 29, 68, .95) 27% 52%, rgba(27, 158, 213, .72) 54% 100%);
      box-shadow: 0 0 45px rgba(44, 221, 242, .45);
      color: #eaffff;
      font-size: 16px;
      font-weight: 900;
    }

    .compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      margin-top: 44px;
    }

    .compare article {
      position: relative;
      overflow: hidden;
      min-height: 260px;
      padding: 34px;
      border-top: 3px solid #3b86df;
    }
    .compare article::after {
      content: attr(data-ghost);
      position: absolute;
      right: -10px;
      bottom: -18px;
      color: rgba(80, 180, 255, .06);
      font-size: 88px;
      font-weight: 900;
      line-height: 1;
    }
    .compare article:last-child { border-top-color: var(--cyan); }
    .compare h3 { margin: 0 0 28px; font-size: 30px; }
    .compare strong { display: block; font-size: clamp(32px, 2.8vw, 54px); line-height: 1.25; }
    .compare p { margin: 22px 0 0; color: var(--muted); font-size: 19px; }

    .flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-top: 62px;
    }

    .flow-item {
      position: relative;
      min-height: 255px;
      display: grid;
      align-content: center;
      padding: 26px;
      text-align: center;
      overflow: hidden;
    }
    .flow-item:not(:last-child)::after {
      content: "";
      position: absolute;
      width: 32px;
      height: 1px;
      right: -25px;
      top: 50%;
      background: var(--cyan);
      box-shadow: 0 0 10px var(--cyan);
    }
    .flow-item b { color: var(--cyan); font-size: 52px; line-height: 1; text-shadow: 0 0 28px rgba(36, 217, 241, .45); }
    .flow-item strong { display: block; margin-top: 22px; font-size: 24px; }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 36px;
    }
    .feature {
      position: relative;
      min-height: 236px;
      display: grid;
      grid-template-columns: 52% 48%;
      align-items: center;
      padding: 0;
      overflow: hidden;
    }
    .feature::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 28%, rgba(5, 25, 58, .16) 48%, rgba(5, 25, 58, .94) 60%);
    }
    .feature img { width: 100%; height: 100%; object-fit: cover; }
    .feature > div { position: relative; z-index: 2; padding: 24px 22px 24px 12px; }
    .feature h3 { margin: 0 0 10px; font-size: 25px; }
    .feature p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }

    .timeline {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      margin-top: 70px;
    }
    .timeline article {
      position: relative;
      padding: 55px 28px 25px;
      border-top: 1px solid rgba(84, 212, 255, .42);
      transition: transform .35s ease, background .35s ease;
    }
    .timeline article:hover { transform: translateY(-12px); background: rgba(23, 94, 158, .14); }
    .timeline article::before {
      content: "";
      position: absolute;
      width: 15px;
      height: 15px;
      left: 28px;
      top: -8px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 22px var(--cyan);
    }
    .timeline b { color: #6cb8ff; font-size: 18px; }
    .timeline h3 { margin: 16px 0 0; font-size: 24px; }

    .case-stage {
      position: relative;
      min-height: 700px;
      overflow: hidden;
      border: 1px solid rgba(82, 213, 247, .25);
      border-radius: 8px;
      background: #031128;
      box-shadow: 0 34px 100px rgba(0, 4, 18, .52), inset 0 1px rgba(255,255,255,.08);
    }
    .case-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 0 43%, rgba(3, 14, 35, .38) 56%, rgba(3, 14, 35, .98) 78%),
        linear-gradient(0deg, rgba(2, 11, 28, .38), transparent 38%);
      z-index: 1;
    }
    .case-stage::after {
      content: "";
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      box-shadow: 0 0 18px var(--cyan);
      opacity: 0;
      animation: caseSweep 3.2s ease-in-out .7s 2 forwards;
    }
    .case-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .case-copy {
      position: relative;
      z-index: 2;
      width: 47%;
      min-height: 700px;
      margin-left: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 58px 62px 52px 36px;
    }
    .case-copy h2 { font-size: clamp(37px, 3.3vw, 62px); }
    .case-intro { max-width: 650px; margin-bottom: 0; color: #abc8e5; font-size: 18px; line-height: 1.75; }
    .outcomes { display: grid; gap: 13px; margin-top: 30px; }
    .outcomes p {
      margin: 0;
      padding: 15px 18px;
      border-left: 3px solid var(--cyan);
      background: linear-gradient(90deg, rgba(15, 102, 158, .34), rgba(15, 65, 122, .08));
      color: #d2e9ff;
      font-size: 18px;
    }

    .journey {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      margin-top: 55px;
    }
    .journey div { padding: 30px; min-height: 190px; }
    .journey small { color: var(--cyan); font-size: 14px; }
    .journey strong { display: block; margin-top: 24px; font-size: 26px; }

    .closing { text-align: center; }
    .closing::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: min(840px, 80vw);
      aspect-ratio: 1;
      border: 1px solid rgba(50, 221, 245, .2);
      border-radius: 50%;
      box-shadow: 0 0 0 70px rgba(26, 133, 224, .035), 0 0 0 150px rgba(28, 216, 239, .025), inset 0 0 120px rgba(27, 183, 236, .1);
      animation: orbit 22s linear infinite;
    }
    .closing h2 { max-width: 1200px; margin-inline: auto; }
    .closing .brand-mark {
      width: 120px;
      height: 110px;
      margin: 58px auto 20px;
    }
    .closing .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .closing-company { margin: 0; font-size: 25px; }
    .closing-en { margin: 8px 0 0; color: #86b7df; font-size: 15px; font-weight: 700; }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes orbit { to { transform: rotate(360deg); } }
    @keyframes pulse { 50% { transform: scale(1.08); box-shadow: 0 0 100px rgba(35, 209, 255, .55); } }
    @keyframes float { 50% { transform: translateY(-24px) rotate(2deg); } }
    @keyframes scan { 0%, 100% { top: 14%; opacity: 0; } 20%, 80% { opacity: 1; } 50% { top: 86%; } }
    @keyframes cue { 0%, 100% { transform: scaleY(.25); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
    @keyframes load { 50% { opacity: .42; transform: scaleX(.92); transform-origin: left; } }
    @keyframes sheen { 0%, 25% { transform: translateX(-120%); } 65%, 100% { transform: translateX(120%); } }
    @keyframes flowline { 0%, 100% { transform: scaleX(.25); opacity: .2; } 50% { transform: scaleX(1); opacity: 1; } }
    @keyframes caseSweep { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translateY(696px); opacity: 0; } }

    @media (max-width: 1100px) {
      .slide { min-height: auto; padding: 110px 7vw 80px; scroll-snap-align: none; }
      .cover { min-height: 100svh; }
      .holo { opacity: .25; right: -10vw; width: 65vw; }
      .split { grid-template-columns: 1fr; gap: 34px; }
      .case-stage { min-height: 760px; }
      .case-stage::before { background: linear-gradient(0deg, rgba(3, 14, 35, .98) 0 58%, rgba(3, 14, 35, .15) 88%); }
      .case-copy { width: 100%; min-height: 760px; justify-content: end; padding: 340px 42px 42px; }
      .behavior-stage { grid-template-columns: 1fr; min-height: 0; }
      .behavior-shift { height: 70px; transform: rotate(90deg); }
      .behavior-card { min-height: 390px; }
      .visual-stage { min-height: 380px; }
      .feature-grid { grid-template-columns: 1fr 1fr; }
      .flow, .timeline { grid-template-columns: 1fr; gap: 14px; }
      .flow-item { min-height: 130px; }
      .flow-item:not(:last-child)::after { display: none; }
      .timeline article { border-top: 0; border-left: 1px solid rgba(84, 212, 255, .42); padding: 20px 30px 20px 45px; }
      .timeline article::before { left: -8px; top: 28px; }
      .side-nav, .page-count { display: none; }
    }

    @media (max-width: 680px) {
      html { scroll-snap-type: none; }
      .brand { top: 20px; left: 20px; }
      .brand-name strong { font-size: 14px; }
      .brand-name span { font-size: 9px; }
      .slide { padding: 110px 22px 68px; }
      .cover { padding-left: 24px; }
      .cover-company { margin-top: 38px; }
      .feature-grid, .compare, .journey { grid-template-columns: 1fr; }
      .case-stage, .case-copy { min-height: 720px; }
      .case-copy { padding: 300px 24px 30px; }
      .feature { grid-template-columns: 46% 54%; }
      .feature img { width: 100%; }
      .search-window { padding: 20px; transform: none; }
    }

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


.aiseo_con04 {
      padding: 0px;
      color: #fff;
    }

.aiseo_con04 .cta-row {
      gap: 16px;

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: 2px 0;
    }

.aiseo_con04 .cta-button {
      padding: 14px 26px;
      border: 1px solid rgba(255,255,255,0.5);
      background: #2268b8;
      color: #fff;
      font-size: 22px;
      text-align: center;
      transition: .2s ease;
      border-radius: 30px;

      display: flex;
    justify-content: center;
    align-items: center;
    }

.aiseo_con04 .cta-button.phone {
      background: #24d9f1;
    }

.aiseo_con04 .cta-button.line {
      background: #06c755;
    }

.aiseo_con04 .cta-button:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
    }

.aiseo_con04 .cta-note {
      width: 100%;
      margin: 16px 0 0;
      font-size: 18px;
      text-align: center;
      color: #abc8e5;
    }
@media screen and (max-width: 1190px) {
.aiseo_con04 .cta-button {
        border-radius: 5px;
    }
}
@media screen and (max-width: 1100px) {
.aiseo_con04 .cta-button{
  flex-wrap: wrap;
    }
.aiseo_con04 .cta-button.phone .tel{
      width: 100%;
    }
}
@media screen and (max-width: 1000px) {
.aiseo_con04 .cta-button {
      font-size: 20px;
    }
}
@media screen and (max-width: 500px) {
.aiseo_con04 .cta-row {
        grid-template-columns: repeat(1, 1fr);
    }
}