.method-landing-hero { padding: 76px 0 58px; color: white; background: radial-gradient(circle at 82% 22%, rgba(247,217,121,.2), transparent 23%), linear-gradient(125deg, #0b2832 0%, #123f4d 60%, #1a5964 100%); }
.method-landing-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .65fr); gap: 60px; align-items: center; }
.method-landing-hero .eyebrow { color: #f7d979; }
.method-landing-hero h1 { max-width: 760px; margin: 16px 0 20px; color: white; font-size: clamp(2.8rem, 6vw, 5.5rem); }
.method-landing-hero p { max-width: 670px; margin: 0; color: #d8eee9; font-size: 1.12rem; line-height: 1.7; }
.landing-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.landing-pills span { padding: 9px 12px; border: 1px solid rgba(216,238,233,.28); border-radius: 999px; color: #ecfbf8; font-size: .78rem; font-weight: 850; }
.landing-hero-note { padding: 25px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: rgba(9,34,43,.44); box-shadow: 0 22px 50px rgba(0,0,0,.15); }
.landing-note-symbol { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 14px; background: #f7d979; color: #12333f; font-weight: 950; }
.landing-hero-note strong { display: block; margin-bottom: 6px; color: white; font-size: 1.1rem; }
.landing-hero-note p { color: #c8dcd7; font-size: .9rem; line-height: 1.55; }
.method-gateway { background: #f6f8f3; }
.method-gateway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.method-portal-card { position: relative; display: block; min-height: 390px; padding: 22px; overflow: hidden; border: 1px solid #dbe5e0; border-radius: 25px; color: var(--navy); background: white; box-shadow: 0 13px 30px rgba(18,51,63,.06); transition: transform .18s ease, box-shadow .18s ease; }
.method-portal-card:hover { transform: translateY(-5px); box-shadow: 0 22px 45px rgba(18,51,63,.13); }
.portal-card-top { display: flex; align-items: center; justify-content: space-between; }
.portal-code { color: #66818b; font-size: .72rem; font-weight: 950; letter-spacing: .1em; }
.portal-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--lime); font-size: 1.1rem; }
.method-portal-card h3 { margin: 18px 0 8px; font-size: 1.65rem; }
.method-portal-card p { max-width: 480px; margin: 0; color: #66818b; line-height: 1.55; }
.portal-link { display: inline-flex; gap: 9px; align-items: center; margin-top: 21px; color: var(--navy); font-size: .84rem; font-weight: 950; }
.portal-link b { color: var(--coral-dark); font-size: 1.15rem; }
.portal-preview { position: relative; display: grid; min-height: 164px; margin-top: 22px; padding: 16px; border-radius: 18px; overflow: hidden; }
.periodic-preview { grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: center; background: linear-gradient(135deg, #fff0eb, #fff9dc); }
.preview-tile { display: grid; place-items: center; min-height: 48px; border: 1px solid rgba(18,51,63,.12); border-radius: 10px; background: rgba(255,255,255,.7); color: var(--navy); font-size: .82rem; font-weight: 950; }
.preview-tile.active { background: #f16d5d; color: white; transform: translateY(-8px); }
.preview-line { position: absolute; right: 12%; bottom: 20px; left: 12%; height: 2px; background: #f16d5d; opacity: .5; }
.path-preview { align-items: center; justify-content: space-around; background: linear-gradient(135deg, #e9f8f7, #eef1fd); }
.path-node { z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1e90a1; color: white; font-weight: 950; box-shadow: 0 0 0 6px rgba(255,255,255,.45); }
.path-node.n2 { background: #f2a43d; transform: translateY(-25px); }.path-node.n3 { background: #8d6bd5; transform: translateY(22px); }.path-node.n4 { background: #27a67e; }
.path-route { position: absolute; left: 12%; right: 12%; top: 50%; height: 3px; background: linear-gradient(90deg, #1e90a1, #f2a43d, #8d6bd5, #27a67e); transform: rotate(-2deg); }
.board-preview { grid-template-columns: repeat(3, 1fr); gap: 9px; align-items: stretch; background: linear-gradient(135deg, #ecfaf3, #fff7d9); }
.board-block { display: flex; align-items: end; min-height: 100px; padding: 11px; border-radius: 11px; font-size: .78rem; font-weight: 950; }
.board-block.b1 { background: #bcebdc; }.board-block.b2 { background: #c4e0f7; }.board-block.b3 { background: #f7dfa0; }
.constellation-preview { background: radial-gradient(circle at 50% 45%, #2b6571, #0b2832); }
.star { position: absolute; z-index: 1; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #f7d979; color: #0b2832; box-shadow: 0 0 0 7px rgba(247,217,121,.13), 0 0 23px rgba(247,217,121,.55); font-weight: 950; }
.star.s1 { left: 15%; top: 25%; }.star.s2 { left: 44%; top: 49%; background: #a8dfd3; }.star.s3 { right: 16%; top: 24%; background: #f16d5d; color: white; }.star.s4 { right: 31%; bottom: 13%; background: #d9c7f6; }
.star-line { position: absolute; z-index: 0; height: 1px; background: rgba(168,223,211,.65); transform-origin: left center; }.star-line.l1 { left: 23%; top: 36%; width: 45%; transform: rotate(19deg); }.star-line.l2 { left: 51%; top: 54%; width: 35%; transform: rotate(-26deg); }
.gateway-explainer { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 16px; align-items: stretch; padding: 22px; border: 1px solid #d8e5e0; border-radius: 20px; background: white; }
.gateway-explainer h2 { margin: 4px 0 0; font-size: 1.6rem; }
.gateway-choice { display: flex; gap: 10px; align-items: start; padding: 10px; border-left: 1px solid #d8e5e0; }.gateway-choice > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--navy); color: var(--lime); font-weight: 900; }.gateway-choice strong { display: block; color: var(--navy); font-size: .82rem; }.gateway-choice p { margin: 4px 0 0; color: #66818b; font-size: .72rem; line-height: 1.4; }
@media (max-width: 800px) { .method-landing-grid { grid-template-columns: 1fr; gap: 30px; }.method-gateway-grid { grid-template-columns: 1fr; }.gateway-explainer { grid-template-columns: 1fr; }.gateway-choice { border-top: 1px solid #d8e5e0; border-left: 0; padding-top: 14px; } }
@media (max-width: 470px) { .method-landing-hero h1 { font-size: 3rem; }.method-gateway-grid { gap: 12px; }.method-portal-card { min-height: 355px; }.portal-preview { min-height: 138px; } }