.seo-page-hero { padding:10px 0 58px; }
.seo-hero-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; align-items:center; }
.seo-hero-copy { min-width:0; }
.page-hero h1.seo-hero-title { max-width:none; font-size:clamp(49px,calc(4.5vw + 1px),57px); line-height:1.08; letter-spacing:-.035em; }
.seo-hero-title span { display:block; white-space:nowrap; }
.seo-hero-copy .page-lead { max-width:570px; }

.seo-hero-visual { position:relative; min-height:560px; overflow:hidden; cursor:crosshair; touch-action:pan-y; isolation:isolate; }
.seo-hero-visual::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.28; background-image:radial-gradient(#8390a4 .65px,transparent .65px); background-size:22px 22px; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 100%); }
.seo-hero-visual::after { content:""; position:absolute; left:50%; top:10%; bottom:7%; z-index:-1; border-left:1px dashed rgba(91,105,128,.19); }
.seo-scene { position:absolute; left:50%; top:50%; width:620px; height:540px; transform:translate(-50%,-50%) scale(.88); transform-origin:center; }
.seo-item { position:absolute; z-index:4; will-change:transform; }
.seo-drift { animation:seo-drift var(--seo-speed,7s) ease-in-out infinite alternate; animation-delay:var(--seo-delay,0s); }
.seo-drift-1 { --seo-speed:8.4s; --seo-delay:-2s; --seo-r1:-1.1deg; --seo-r2:.5deg; }
.seo-drift-2 { --seo-speed:7.1s; --seo-delay:-4s; --seo-r1:.8deg; --seo-r2:-.5deg; }
.seo-drift-3 { --seo-speed:6.8s; --seo-delay:-1s; --seo-r1:.3deg; --seo-r2:1deg; }
.seo-drift-4 { --seo-speed:9.2s; --seo-delay:-4s; --seo-r1:-.35deg; --seo-r2:.45deg; }
@keyframes seo-drift { from { transform:translate3d(-3px,-4px,0) rotate(var(--seo-r1,-.5deg)); } to { transform:translate3d(5px,6px,0) rotate(var(--seo-r2,.7deg)); } }

.seo-card { position:relative; width:194px; min-height:204px; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:5px; background:#fff; box-shadow:0 14px 38px rgba(25,37,57,.13),0 2px 5px rgba(25,37,57,.06); }
.seo-card::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(16,23,35,.035); pointer-events:none; }
.seo-card p { margin:0; padding:10px 11px 11px; color:#263044; font:700 10px/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.seo-card p span { display:block; margin-top:4px; color:#8a93a3; font-size:9px; font-weight:500; line-height:1.4; }
.seo-graphic { position:relative; height:110px; overflow:hidden; }
.seo-graphic::after { content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(50,72,111,.24) .6px,transparent .6px); background-size:10px 10px; mask-image:linear-gradient(135deg,#000,transparent 72%); }
.seo-area-1 { top:30px; left:7px; }
.seo-area-2 { top:30px; left:213px; }
.seo-area-3 { top:30px; right:7px; }

.seo-discovery { background:linear-gradient(145deg,#eaf1ff,#f8faff); }
.seo-discovery-line { position:absolute; z-index:1; left:26px; right:26px; top:50%; height:1px; background:#89a2d5; }
.seo-discovery-line::before,.seo-discovery-line::after { content:""; position:absolute; top:-16px; width:1px; height:32px; background:#89a2d5; }
.seo-discovery-line::before { left:0; transform:rotate(-48deg); }
.seo-discovery-line::after { right:0; transform:rotate(48deg); }
.seo-discovery-core { position:absolute; z-index:4; left:50%; top:50%; width:20px; height:20px; border:6px solid var(--accent); border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 0 5px rgba(37,95,230,.08); }
.seo-discovery-node { position:absolute; z-index:3; width:44px; height:36px; display:grid; place-items:center; border:1px solid #dce4f3; border-radius:6px; color:#496189; background:#fff; box-shadow:0 6px 14px rgba(37,65,112,.09); font:800 8px/1 var(--font-mono); }
.seo-d1 { left:9px; top:12px; }
.seo-d2 { left:50%; bottom:8px; transform:translateX(-50%); }
.seo-d3 { right:9px; top:12px; }

.seo-content { background:linear-gradient(145deg,#fff3df,#fffbf2); }
.seo-content-page { position:absolute; z-index:1; left:50%; top:15px; width:62px; height:79px; border:1px solid #e2bf7d; border-radius:4px; background:rgba(255,255,255,.78); transform:translateX(-50%) rotate(2deg); box-shadow:0 8px 18px rgba(123,88,28,.08); }
.seo-content-page::before { content:""; position:absolute; left:12px; right:12px; top:16px; height:4px; border-radius:2px; background:#e5a631; box-shadow:0 12px 0 #ead6ad,0 24px 0 #ead6ad,0 36px 0 #ead6ad; }
.seo-content-line { position:absolute; z-index:2; height:1px; background:#b99655; transform-origin:left; }
.seo-cl1 { left:20px; top:24px; width:62px; transform:rotate(16deg); }
.seo-cl2 { right:18px; top:29px; width:63px; transform:rotate(164deg); }
.seo-cl3 { left:27px; bottom:19px; width:64px; transform:rotate(-16deg); }
.seo-content-chip { position:absolute; z-index:3; padding:5px 6px; border:1px solid #ead7b4; border-radius:4px; color:#866425; background:#fff; box-shadow:0 5px 12px rgba(123,88,28,.08); font:800 8px/1 var(--font-mono); letter-spacing:.03em; }
.seo-cc1 { left:8px; top:11px; }
.seo-cc2 { right:8px; top:17px; }
.seo-cc3 { left:11px; bottom:7px; }

.seo-authority { background:linear-gradient(145deg,#eaf8f4,#f7fcfa); }
.seo-authority-line { position:absolute; z-index:1; left:24px; right:24px; top:50%; height:1px; background:#6fa893; }
.seo-authority-line::before,.seo-authority-line::after { content:""; position:absolute; top:-17px; width:1px; height:34px; background:#6fa893; }
.seo-authority-line::before { left:0; transform:rotate(-49deg); }
.seo-authority-line::after { right:0; transform:rotate(49deg); }
.seo-authority-hub { position:absolute; z-index:4; left:50%; top:50%; width:21px; height:21px; border:6px solid #2ba977; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 0 5px rgba(43,169,119,.09); }
.seo-authority-node { position:absolute; z-index:3; min-width:40px; height:36px; display:grid; place-items:center; padding:0 5px; border:1px solid rgba(32,91,69,.18); border-radius:6px; color:#21684f; background:#fff; box-shadow:0 7px 16px rgba(37,93,73,.1); font:800 8px/1 var(--font-mono); }
.seo-a1 { left:9px; top:12px; }
.seo-a2 { left:50%; bottom:8px; transform:translateX(-50%); }
.seo-a3 { right:7px; top:12px; }

.seo-visibility { top:327px; left:50%; transform:translateX(-50%); }
.seo-visibility-box { width:500px; min-height:118px; padding:15px 17px 17px; border:1px solid rgba(45,62,89,.16); border-radius:6px; background:rgba(255,255,255,.97); box-shadow:0 18px 48px rgba(22,37,62,.14); }
.seo-visibility-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #e7eaf0; }
.seo-visibility-heading small { color:#8b94a4; font:600 9px/1.3 var(--font-mono); letter-spacing:.07em; text-transform:uppercase; }
.seo-visibility-heading strong { color:#202838; font-size:16px; letter-spacing:-.015em; }
.seo-destinations { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.seo-destinations span { min-width:0; min-height:45px; display:flex; align-items:center; gap:6px; padding:6px; border:1px solid #e0e5ed; border-radius:4px; color:#536077; background:#fafbfc; font:700 8px/1.15 var(--font-mono); text-transform:uppercase; }
.seo-mark { width:25px; height:25px; display:grid; flex:0 0 25px; place-items:center; border-radius:50%; background:#fff; font:800 9px/1 var(--font-sans); box-shadow:0 3px 8px rgba(42,59,87,.08); }
.seo-mark-google { color:transparent; background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0); background-clip:text; -webkit-background-clip:text; font-size:14px; }
.seo-mark-overview { color:#fff; background:linear-gradient(135deg,#4285f4,#8b5cf6); font-size:7px; }
.seo-mark-chat { color:#fff; background:#172033; font-size:13px; }
.seo-mark-copilot { color:#fff; background:linear-gradient(135deg,#5b6df8,#9b4ed6 55%,#26a6c9); }

.seo-flow { position:absolute; z-index:1; height:1px; background:linear-gradient(90deg,transparent,rgba(102,116,139,.34) 15%,rgba(102,116,139,.34) 85%,transparent); transform-origin:left center; }
.seo-flow::after { content:""; position:absolute; left:12%; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(37,95,230,.08); animation:seo-signal 3.6s ease-in-out infinite; animation-delay:var(--seo-flow-delay,0s); }
@keyframes seo-signal { 0% { left:12%; opacity:0; } 18% { opacity:1; } 82% { opacity:1; } 100% { left:86%; opacity:0; } }
.seo-flow-1 { top:238px; left:104px; width:127px; transform:rotate(43deg); --seo-flow-delay:-.5s; }
.seo-flow-2 { top:238px; left:310px; width:91px; transform:rotate(90deg); --seo-flow-delay:-1.6s; }
.seo-flow-3 { top:238px; left:516px; width:127px; transform:rotate(137deg); --seo-flow-delay:-2.4s; }
.seo-orbit { position:absolute; z-index:0; left:50%; top:49%; width:520px; height:310px; border:1px solid rgba(37,95,230,.08); border-radius:50%; transform:translate(-50%,-50%) rotate(-8deg); }
.seo-orbit::before { content:""; position:absolute; inset:34px 72px; border:1px solid rgba(37,95,230,.06); border-radius:inherit; }

@media (max-width:1100px) {
  .seo-hero-grid { grid-template-columns:1fr; gap:32px; }
  .seo-hero-copy { max-width:760px; }
  .seo-hero-visual { min-height:540px; }
  .seo-scene { transform:translate(-50%,-50%) scale(.94); }
}

@media (max-width:720px) {
  .seo-page-hero { padding:10px 0 42px; }
  .page-hero h1.seo-hero-title { font-size:clamp(38px,10.5vw,48px); }
  .seo-hero-title span { white-space:normal; }
  .seo-hero-grid { gap:22px; }
  .seo-mark { font-size:12px; }
  .seo-mark-google { font-size:17px; }
  .seo-mark-overview { font-size:10px; }
  .seo-mark-chat { font-size:16px; }
}

@media (prefers-reduced-motion:reduce) {
  .seo-drift,.seo-flow::after { animation:none !important; }
}