.visibility-page { background: var(--cream); }
.visibility-page .site-nav { gap: clamp(12px, 1.7vw, 25px); }
.visibility-page .site-nav a { font-size: .8rem; }
.visibility-page .header-actions { display:flex; align-items:center; gap:10px; }
.visibility-page .client-login { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; border:1px solid rgba(0,111,120,.42); border-radius:999px; background:rgba(255,255,255,.5); color:var(--green); font-size:.82rem; font-weight:700; white-space:nowrap; transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.visibility-page .client-login svg { width:19px; height:19px; }
.visibility-page .client-login:hover,.visibility-page .client-login:focus-visible { transform:translateY(-2px); border-color:var(--green); background:var(--green-soft); box-shadow:0 10px 20px rgba(0,111,120,.12); }
.visibility-hero { position: relative; overflow: hidden; padding: 64px 0 70px; background: radial-gradient(circle at 82% 30%, rgba(0,111,120,.13), transparent 28%), linear-gradient(180deg,#fffaf1 0%,var(--cream) 100%); }
.visibility-hero::before { content:""; position:absolute; inset:auto -4% -36% auto; width:510px; height:510px; border:1px solid rgba(0,111,120,.16); border-radius:50%; box-shadow:-35px -35px 0 -34px rgba(249,185,0,.45),-70px -70px 0 -69px rgba(0,111,120,.13); }
.visibility-hero__grid { min-height:510px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; }
.eyebrow,.section-kicker { margin:0 0 14px; color:var(--green); font-size:.74rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.visibility-hero h1 { max-width:720px; margin:0; color:var(--green-dark); font-size:clamp(40px,5vw,68px); line-height:1.04; letter-spacing:-.05em; }
.visibility-hero h1 span { color:var(--green); }
.visibility-hero__lead { max-width:620px; margin:24px 0 0; color:var(--ink); font-size:clamp(17px,1.7vw,20px); font-weight:700; line-height:1.5; }
.visibility-hero__text { max-width:590px; margin:14px 0 0; color:var(--muted); font-size:14px; font-weight:600; }
.visibility-hero .hero-actions { margin-top:26px; }
.visibility-price { margin:16px 0 0; color:var(--green); font-size:12px; font-weight:800; }
.visibility-hero__visual { position:relative; width:min(100%,500px); aspect-ratio:1; justify-self:center; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.92) 0 22%, rgba(231,244,243,.9) 23% 44%, transparent 45%); transform:perspective(850px) rotateX(calc(var(--hero-pointer-y, 0) * -3deg)) rotateY(calc(var(--hero-pointer-x, 0) * 3deg)); transition:transform .26s ease-out; will-change:transform; }
.orbit { position:absolute; inset:7%; border:1px dashed rgba(0,111,120,.34); border-radius:50%; animation:spin 42s linear infinite; }
.orbit--two { inset:20%; border-color:rgba(249,185,0,.7); animation-direction:reverse; animation-duration:28s; }
.visual-core { position:absolute; inset:35%; display:grid; place-content:center; width:30%; aspect-ratio:1; margin:auto; border-radius:50%; background:var(--green); color:#fff; text-align:center; box-shadow:0 20px 42px rgba(0,111,120,.28); }
.visual-core span,.visual-core strong { font-size:clamp(15px,2vw,23px); line-height:.82; }
.visual-core strong { color:var(--yellow); }
.visual-core small { margin-top:8px; font-size:8px; font-weight:700; line-height:1.25; }
.visual-node { position:absolute; z-index:1; display:grid; place-items:center; gap:5px; width:104px; aspect-ratio:1; border:1px solid rgba(0,111,120,.2); border-radius:50%; background:rgba(255,255,255,.96); color:var(--green); box-shadow:0 16px 28px rgba(8,45,66,.13); font-size:11px; font-weight:800; transition:filter .22s ease, box-shadow .22s ease; animation:node-float 5.2s ease-in-out infinite; }
.visual-node svg { width:31px; height:31px; }.visual-node:hover { animation-play-state:paused; filter:brightness(1.035); box-shadow:0 24px 36px rgba(8,45,66,.2); transform:translateY(-11px) scale(1.08); }
.visual-node--site { top:1%; left:27%; animation-delay:-.7s; }.visual-node--seo { top:25%; right:-1%; animation-delay:-2.2s; }.visual-node--ads { bottom:5%; right:17%; animation-delay:-3.6s; }.visual-node--social { bottom:10%; left:3%; animation-delay:-4.6s; }
.section-pad { padding:92px 0; }
.visibility-intro { background:#fff; }
.intro-grid,.coordination-grid,.performance-grid,.for-whom-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,7vw,110px); align-items:center; }
.section-heading h2,.coordination-copy h2,.performance-copy h2 { margin:0; color:var(--green-dark); font-size:clamp(32px,4vw,51px); line-height:1.1; letter-spacing:-.04em; }
.section-heading--center { max-width:800px; margin:0 auto 42px; text-align:center; }.section-heading--center > p:last-child { margin:16px auto 0; color:var(--muted); font-size:15px; font-weight:600; }
.intro-copy p,.coordination-copy p,.performance-copy p { margin:0 0 14px; color:var(--muted); font-size:15px; font-weight:600; }.intro-copy p:first-child { color:var(--ink); font-size:17px; }
.acquisition-path { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:56px; padding:0; list-style:none; counter-reset:path; }.acquisition-path li { position:relative; min-height:168px; display:grid; justify-items:center; align-content:center; gap:13px; padding:30px 12px 18px; overflow:hidden; border:1px solid rgba(0,111,120,.15); border-radius:14px; background:linear-gradient(150deg,#fff, var(--cream)); color:var(--green-dark); font-size:12px; font-weight:800; text-align:center; box-shadow:0 10px 20px rgba(8,45,66,.05); transition:transform .2s ease,box-shadow .2s ease; }.acquisition-path li:hover { transform:translateY(-5px); box-shadow:var(--soft-shadow); }.acquisition-path li::before { content:counter(path,decimal-leading-zero); counter-increment:path; position:absolute; top:13px; left:15px; color:var(--yellow); font-size:11px; font-weight:800; }.path-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--green); }.path-icon svg { width:29px; height:29px; }.acquisition-path li:nth-child(2n) .path-icon { background:var(--yellow-soft); color:var(--green-dark); }
.visibility-levers { background:linear-gradient(180deg,var(--cream),#fff); }.levers-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.lever-card { min-height:315px; padding:28px; border:1px solid rgba(0,111,120,.16); border-radius:var(--radius); background:rgba(255,255,255,.88); box-shadow:var(--soft-shadow); transition:transform .2s ease,box-shadow .2s ease; }.lever-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.lever-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--green); }.lever-icon svg { width:28px; height:28px; }.lever-card h3 { margin:20px 0 10px; color:var(--green); font-size:18px; line-height:1.2; }.lever-card p { min-height:66px; margin:0; color:var(--muted); font-size:12px; font-weight:600; }.lever-card ul { margin:16px 0 0; padding:0; list-style:none; color:var(--ink); font-size:11px; font-weight:700; }.lever-card li { margin:7px 0; padding-left:16px; position:relative; }.lever-card li::before { content:""; position:absolute; left:0; top:.52em; width:6px; height:6px; border-radius:50%; background:var(--yellow); }
.coordination { background:var(--green-dark); color:#fff; }.coordination-copy h2 { color:#fff; }.coordination-copy p { color:rgba(255,255,255,.78); }.coordination-copy .section-kicker { color:var(--yellow); }.coordination-art { display:grid; place-items:center; }.client-space-visual { position:relative; width:min(100%,560px); margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:18px; background:#123d4d; box-shadow:0 28px 55px rgba(0,0,0,.3); transform:rotate(-2.5deg); transition:transform .25s ease,box-shadow .25s ease; }.client-space-visual:hover { transform:rotate(0) translateY(-7px); box-shadow:0 35px 64px rgba(0,0,0,.38); }.client-space-visual img { width:100%; aspect-ratio:1.25; object-fit:cover; opacity:.82; }.client-space-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 32%,rgba(8,45,66,.9) 100%); pointer-events:none; }.client-space-visual figcaption { position:absolute; z-index:1; right:0; bottom:0; left:0; display:grid; gap:4px; padding:22px; color:#fff; }.client-space-visual figcaption span { width:max-content; padding:4px 9px; border-radius:999px; background:var(--yellow); color:var(--ink); font-size:10px; font-weight:800; }.client-space-visual figcaption strong { font-size:18px; }.client-space-visual figcaption small { color:rgba(255,255,255,.75); font-size:11px; font-weight:600; }.coordination-points { display:grid; gap:10px; margin:22px 0 0; padding:0; list-style:none; }.coordination-points li { display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.88); font-size:12px; font-weight:600; }.coordination-points svg { flex:0 0 auto; width:24px; height:24px; color:var(--yellow); }.coordination-points strong { color:#fff; }
.method { background:#fff; }.method-intro { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:54px; max-width:1030px; margin:0 auto 40px; }.method-intro .section-heading p:last-child { max-width:610px; margin:16px 0 0; color:var(--muted); font-size:15px; font-weight:600; }.method-photo { margin:0; overflow:hidden; border-radius:14px; box-shadow:var(--shadow); }.method-photo img { width:100%; aspect-ratio:1.28; object-fit:cover; }.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.step-card { position:relative; min-height:268px; padding:26px 24px 28px; overflow:hidden; border:1px solid rgba(0,111,120,.15); border-radius:14px; background:linear-gradient(155deg,#fff,var(--cream)); box-shadow:0 10px 24px rgba(8,45,66,.05); transition:transform .2s ease,box-shadow .2s ease; }.step-card:hover { transform:translateY(-5px); box-shadow:var(--soft-shadow); }.step-index { position:absolute; top:16px; right:18px; color:var(--yellow); font-size:13px; font-weight:800; }.step-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; }.step-card:nth-child(2n) .step-icon { background:var(--yellow); color:var(--ink); }.step-icon svg { width:29px; height:29px; }.step-card h3 { margin:25px 0 11px; color:var(--green); font-size:20px; }.step-card p { margin:0; color:var(--muted); font-size:12px; font-weight:600; }
.performance { background:linear-gradient(115deg,#e7f4f3,#fff); }.metrics-card { display:grid; grid-template-columns:58px 1fr; gap:16px; padding:34px; border-radius:var(--radius); background:var(--green); color:#fff; box-shadow:var(--shadow); }.metrics-card > svg { width:48px; height:48px; color:var(--yellow); }.metrics-card strong { font-size:19px; }.metrics-card ul { margin:14px 0 0; padding-left:18px; font-size:12px; font-weight:600; }.metrics-card li { margin:7px 0; }.metrics-card > p { grid-column:1/-1; margin:10px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.82); font-size:11px; font-weight:600; }
.for-whom { background:#fff; }.check-list { margin:0; padding:0; list-style:none; }.check-list li { position:relative; margin:0 0 14px; padding:16px 18px 16px 54px; border-radius:var(--radius); background:var(--cream); color:var(--ink); font-size:13px; font-weight:700; }.check-list li::before { content:"✓"; position:absolute; left:18px; top:14px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; font-size:12px; }
.conversion { padding:0 0 70px; background:#fff; }.conversion__inner { display:grid; grid-template-columns:1fr auto; align-items:center; gap:50px; padding:48px 60px; overflow:hidden; border-radius:var(--radius); background:linear-gradient(110deg,#006f78,#084e5a); color:#fff; }.conversion__inner .section-kicker { color:var(--yellow); }.conversion__inner h2 { max-width:700px; margin:0; font-size:clamp(29px,4vw,47px); line-height:1.08; letter-spacing:-.04em; }.conversion__inner p:last-child { max-width:690px; margin:14px 0 0; color:rgba(255,255,255,.8); font-size:14px; font-weight:600; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes node-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@media (max-width:1120px){ .visibility-page .site-nav { gap:17px; }.visibility-page .site-nav a { font-size:.75rem; }.visibility-hero__grid { gap:25px; }.levers-grid { grid-template-columns:repeat(2,1fr); }.steps-grid { grid-template-columns:repeat(2,1fr); }.method-intro { grid-template-columns:1fr .7fr; gap:34px; } }
@media (max-width:740px){ .container { width:min(calc(100% - 36px),1240px); }.visibility-page .header-actions .nav-cta { display:none; }.visibility-hero { padding:40px 0 52px; }.visibility-hero__grid,.intro-grid,.coordination-grid,.performance-grid,.for-whom-grid,.method-intro { grid-template-columns:1fr; }.visibility-hero__visual { width:min(100%,350px); order:-1; }.visibility-hero h1 { font-size:clamp(39px,11vw,54px); }.section-pad { padding:64px 0; }.section-heading h2,.coordination-copy h2,.performance-copy h2 { font-size:34px; }.acquisition-path { grid-template-columns:repeat(2,1fr); gap:10px; margin-top:34px; }.acquisition-path li { min-height:142px; padding:26px 8px 15px; }.path-icon { width:48px; height:48px; }.path-icon svg { width:24px; height:24px; }.levers-grid { grid-template-columns:1fr; }.lever-card { min-height:0; }.lever-card p { min-height:0; }.client-space-visual { width:100%; transform:none; }.client-space-visual figcaption { padding:16px; }.method-intro { gap:28px; margin-bottom:30px; }.method-photo { max-width:500px; }.steps-grid { grid-template-columns:1fr; }.step-card { min-height:0; }.conversion { padding-bottom:42px; }.conversion__inner { grid-template-columns:1fr; gap:28px; padding:38px 28px; }.conversion__inner .btn { width:100%; }.visibility-page .footer-grid { grid-template-columns:repeat(2,1fr); }.visibility-page .footer-grid > div { grid-column:1/-1; } }
@media (prefers-reduced-motion:reduce){ .orbit,.visual-node { animation:none; }.visibility-hero__visual { transition:none; } }