/*
Theme Name: Lightning Child
Template: lightning 
*/


 :root {
   --background-color: #fff;
   --primary-color: #0181ff;
   --accent-color: #FD81B2;
   --text: #1a1a1a;
   --text-muted: #666;
   --surface: rgba(0, 0, 0, 0.03);
   --surface-hover: rgba(0, 0, 0, 0.05);
   --border: rgba(0, 0, 0, 0.09);
   --primary-glow: rgba(1, 129, 255, 0.15);
   --accent-glow: rgba(253, 129, 178, 0.15);
   --font-ja: 'Noto Sans JP', '游ゴシック', 'Yu Gothic', 'YuGothic', sans-serif;
   --font-display: 'Shippori Mincho B1', '游明朝', 'Yu Mincho', serif;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   background: var(--background-color);
   color: var(--text);
   font-family: var(--font-ja);
   font-weight: 300;
   line-height: 1.8;
   overflow-x: hidden;
 }

 /* ── Noise texture overlay ── */
 body::before {
   content: '';
   position: fixed;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
   pointer-events: none;
   z-index: 999;
   opacity: .35;
 }

 /* ── Nav ── */
 /* nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   padding: 0 5%;
   height: 68px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border);
   transition: all .3s;
 } */

 .nav-logo {
   font-family: var(--font-display);
   font-size: 1.1rem;
   letter-spacing: .1em;
   color: #111;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .nav-logo span {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--primary-color);
   box-shadow: 0 0 12px var(--primary-color);
 }

 .nav-links {
   display: flex;
   gap: 2.5rem;
   list-style: none;
   font-size: .82rem;
   letter-spacing: .12em;
   color: var(--text-muted);
 }

 .nav-links a {
   color: inherit;
   text-decoration: none;
   transition: color .2s;
 }

 .nav-links a:hover {
   color: #fff;
 }

 .nav-cta {
   font-size: .8rem;
   padding: 9px 22px;
   border-radius: 100px;
   background: var(--primary-color);
   color: #fff;
   text-decoration: none;
   letter-spacing: .1em;
   transition: all .2s;
   box-shadow: 0 0 20px rgba(1, 129, 255, .4);
 }

 .nav-cta:hover {
   background: #1a90ff;
   box-shadow: 0 0 30px rgba(1, 129, 255, .6);
   transform: translateY(-1px);
 }

 /* ── Hero ── */
 .hero {
   position: relative;
   height: 100vh;
   min-height: 640px;
   display: flex;
   align-items: center;
   overflow: hidden;
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   background:
     radial-gradient(ellipse 70% 60% at 70% 50%, rgba(1, 129, 255, .07) 0%, transparent 60%),
     radial-gradient(ellipse 50% 60% at 20% 80%, rgba(253, 129, 178, .05) 0%, transparent 50%),
     linear-gradient(170deg, #f8fbff 0%, #fff 50%, #fff 100%);
 }

 /* Grid lines */
 .hero-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(rgba(1, 129, 255, .06) 1px, transparent 1px),
     linear-gradient(90deg, rgba(1, 129, 255, .06) 1px, transparent 1px);
   background-size: 60px 60px;
   mask-image: radial-gradient(ellipse 80% 80% at 60% 50%, black 30%, transparent 80%);
 }

 .hero-content {
   position: relative;
   z-index: 2;
   padding: 0 5%;
   max-width: 760px;
   margin-left: 5%;
 }

 .hero-eyebrow {
   font-size: .78rem;
   letter-spacing: .25em;
   color: var(--primary-color);
   margin-bottom: 1.6rem;
   display: flex;
   align-items: center;
   gap: 12px;
   opacity: 0;
   animation: fadeUp .8s .2s forwards;
   justify-content: flex-start;
   max-width: 1110px;
 }

 .hero-eyebrow::before {
   content: '';
   display: block;
   width: 32px;
   height: 1px;
   background: var(--primary-color);
 }

 .hero-title {
   font-family: var(--font-display);
   font-size: clamp(2rem, 4vw, 3.2rem);
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: .04em;
   margin-bottom: 1.6rem;
   opacity: 0;
   animation: fadeUp .8s .4s forwards;
 }

 .hero-title em {
   font-style: normal;
   color: var(--accent-color);
 }

 .hero-sub {
   font-size: .95rem;
   color: var(--text-muted);
   line-height: 2;
   margin-bottom: 2.8rem;
   max-width: 520px;
   opacity: 0;
   animation: fadeUp .8s .6s forwards;
 }

 .hero-sub strong {
   color: #aaa;
   font-weight: 400;
 }

 .hero-actions {
   display: flex;
   gap: 1.2rem;
   align-items: center;
   flex-wrap: wrap;
   opacity: 0;
   animation: fadeUp .8s .8s forwards;
 }

 .btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 36px;
   background: var(--primary-color);
   color: #fff;
   text-decoration: none;
   border-radius: 100px;
   font-size: .9rem;
   letter-spacing: .1em;
   box-shadow: 0 0 40px rgba(1, 129, 255, .5);
   transition: all .25s;
   position: relative;
   overflow: hidden;
 }

 .btn-primary::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, .15), transparent);
 }

 .btn-primary:hover {
   box-shadow: 0 0 60px rgba(1, 129, 255, .7);
   transform: translateY(-2px);
 }

 .btn-outline {
   font-size: .85rem;
   color: var(--text-muted);
   text-decoration: none;
   letter-spacing: .1em;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: color .2s;
 }

 .btn-outline:hover {
   color: #fff;
 }

 .hero-stats {
   position: absolute;
   right: 6%;
   bottom: 10%;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   z-index: 2;
   opacity: 0;
   animation: fadeLeft .8s 1s forwards;
 }

 .stat-card {
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid rgba(1, 129, 255, .15);
   border-radius: 16px;
   padding: 20px 28px;
   backdrop-filter: blur(12px);
   text-align: center;
   box-shadow: 0 4px 24px rgba(1, 129, 255, .08);
 }

 .stat-card .num {
   font-family: var(--font-display);
   font-size: 2.4rem;
   font-weight: 600;
   color: var(--primary-color);
   line-height: 1;
 }

 .stat-card .label {
   font-size: .72rem;
   color: #888;
   letter-spacing: .12em;
   margin-top: 6px;
 }

 /* ── Section base ── */
 section {
   padding: 120px 5%;
 }

 .section-label {
   font-size: .75rem;
   letter-spacing: .3em;
   color: var(--primary-color);
   margin-bottom: 1.2rem;
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .section-label::before {
   content: '';
   display: block;
   width: 28px;
   height: 1px;
   background: var(--primary-color);
 }

 .section-title {
   font-family: var(--font-display);
   font-size: clamp(1.6rem, 3vw, 2.4rem);
   font-weight: 600;
   line-height: 1.5;
   margin-bottom: 1.2rem;
   letter-spacing: .04em;
 }

 .section-desc {
   color: var(--text-muted);
   font-size: .92rem;
   max-width: 560px;
   line-height: 2;
 }

 /* ── Pain points ── */
 .pain {
   background:
     radial-gradient(ellipse 60% 80% at 10% 50%, rgba(253, 129, 178, .06) 0%, transparent 60%),
     #f9f9f9;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }

 .pain-inner {
   max-width: 1100px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: center;
 }

 .pain-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 2.5rem;
 }

 .pain-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 18px 22px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 12px;
   font-size: .9rem;
   line-height: 1.7;
   transition: all .25s;
   cursor: default;
 }

 .pain-item:hover {
   background: var(--surface-hover);
   border-color: rgba(253, 129, 178, .2);
   transform: translateX(4px);
 }

 .pain-item::before {
   content: '？';
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   background: rgba(253, 129, 178, .12);
   color: var(--accent-color);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .85rem;
   font-weight: 700;
 }

 .pain-visual {
   position: relative;
 }

 .pain-circle {
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(253, 129, 178, .12) 0%, transparent 70%);
   border: 1px solid rgba(253, 129, 178, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   position: relative;
 }

 .pain-circle::before {
   content: '';
   position: absolute;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   border: 1px dashed rgba(253, 129, 178, .2);
   animation: spin 20s linear infinite;
 }

 .pain-circle-text {
   text-align: center;
 }

 .pain-circle-text .num {
   font-family: var(--font-display);
   font-size: 4rem;
   font-weight: 800;
   color: var(--accent-color);
   line-height: 1;
 }

 .pain-circle-text .sub {
   font-size: .8rem;
   color: var(--text-muted);
   letter-spacing: .15em;
   margin-top: 8px;
 }

 /* ── Strengths ── */
 .strengths {
   max-width: 1100px;
   margin: 0 auto;
 }

 .strengths-header {
   margin-bottom: 4rem;
 }

 .strengths-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: 20px;
   overflow: hidden;
 }

 .strength-card {
   background: #fff;
   padding: 3rem 2.5rem;
   position: relative;
   overflow: hidden;
   transition: background .3s;
 }

 .strength-card:hover {
   background: #f5f9ff;
 }

 .strength-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--primary-color), transparent);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .4s;
 }

 .strength-card:hover::before {
   transform: scaleX(1);
 }

 .strength-num {
   font-family: var(--font-display);
   font-size: 4rem;
   font-weight: 800;
   color: rgba(1, 129, 255, .4);
   line-height: 1;
   margin-bottom: 1.5rem;
   transition: color .3s;
 }

 .strength-card:hover .strength-num {
   color: rgba(1, 129, 255, .2);
 }

 .strength-title {
   font-size: 1rem;
   font-weight: 500;
   color: #111;
   margin-bottom: 1rem;
   line-height: 1.6;
   letter-spacing: .03em;
 }

 .strength-desc {
   font-size: .85rem;
   color: #777;
   line-height: 2;
 }

 /* ── Services ── */
 .services {
   background: #f4f8ff;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }

 .services-inner {
   max-width: 1100px;
   margin: 0 auto;
 }

 .services-catch {
   font-size: .92rem;
   color: var(--text-muted);
   max-width: 620px;
   line-height: 2;
   margin: 1.5rem 0 4rem;
 }

 .services-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
 }

 .service-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: 2.8rem 2.2rem;
   position: relative;
   overflow: hidden;
   transition: all .3s;
 }

 .service-card:hover {
   transform: translateY(-6px);
   border-color: rgba(1, 129, 255, .25);
   box-shadow: 0 20px 50px rgba(1, 129, 255, .1);
 }

 .service-card::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 80px;
   background: linear-gradient(0deg, rgba(1, 129, 255, .05), transparent);
   opacity: 0;
   transition: opacity .3s;
 }

 .service-card:hover::after {
   opacity: 1;
 }

 .service-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: rgba(1, 129, 255, .1);
   border: 1px solid rgba(1, 129, 255, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.8rem;
   font-size: 1.4rem;
 }

 .service-num {
   font-family: var(--font-display);
   font-size: .78rem;
   color: var(--primary-color);
   letter-spacing: .2em;
   margin-bottom: .8rem;
 }

 .service-title {
   font-size: 1.08rem;
   font-weight: 500;
   color: #111;
   margin-bottom: 1.2rem;
   line-height: 1.5;
 }

 .service-desc {
   font-size: .84rem;
   color: var(--text-muted);
   line-height: 2;
 }

 /* ── Profile / Greeting ── */
 .profile {
   max-width: 1100px;
   margin: 0 auto;
 }

 .profile-inner {
   display: grid;
   grid-template-columns: 1fr 480px;
   gap: 6rem;
   align-items: start;
   margin-top: 4rem;
 }

 .profile-quote {
   position: relative;
   padding: 0;
   background: none;
   border: none;
   border-radius: 0;
   font-size: .95rem;
   line-height: 2.1;
   color: #444;
   margin-bottom: 2rem;
 }

 .profile-quote::before {
   display: none;
 }

 .s-logos {
   display: flex;
   flex-wrap: wrap;
   gap: .6rem;
   margin-top: 1.2rem;
 }

 .s-word {
   position: relative;
   display: inline-block;
   padding: 7px 18px;
   border-radius: 8px;
   background: #f0f6ff;
   border: 1px solid rgba(1, 129, 255, .18);
   font-size: .82rem;
   color: var(--primary-color);
   letter-spacing: .1em;
   font-weight: 500;
   cursor: default;
   transition: background .2s, border-color .2s;
 }

 .s-word:hover {
   background: rgba(1, 129, 255, .1);
   border-color: rgba(1, 129, 255, .4);
 }

 .s-word .s-tooltip {
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%) translateY(4px);
   background: #111;
   color: #fff;
   font-size: .72rem;
   letter-spacing: .12em;
   padding: 5px 12px;
   border-radius: 6px;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   transition: opacity .2s, transform .2s;
 }

 .s-word .s-tooltip::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border: 5px solid transparent;
   border-top-color: #111;
 }

 .s-word:hover .s-tooltip {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }

 .s-concept-phrase {
   margin-top: 1.6rem;
   font-size: .88rem;
   color: #555;
   line-height: 1.9;
   padding-left: 1rem;
   border-left: 2px solid rgba(1, 129, 255, .25);
 }

 .s-heading {
   font-size: .75rem;
   letter-spacing: .25em;
   color: var(--primary-color);
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .s-heading::before {
   content: '';
   display: block;
   width: 20px;
   height: 1px;
   background: var(--primary-color);
 }

 .profile-greeting {
   padding: 1.8rem 2rem;
   border-bottom: 1px solid var(--border);
   font-size: .88rem;
   line-height: 2;
   color: #555;
 }

 .profile-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 24px;
   overflow: hidden;
 }

 .profile-card-header {
   background: linear-gradient(135deg, rgba(1, 129, 255, .08), rgba(253, 129, 178, .06));
   padding: 2.5rem;
   border-bottom: 1px solid var(--border);
   text-align: center;
 }

 .profile-avatar {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(1, 129, 255, .15), rgba(253, 129, 178, .15));
   border: 2px solid var(--border);
   margin: 0 auto 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
 }

 .profile-name {
   font-family: var(--font-display);
   font-size: 1.3rem;
   font-weight: 600;
   color: #111;
 }

 .profile-role {
   font-size: .78rem;
   color: var(--text-muted);
   letter-spacing: .15em;
   margin-top: 6px;
 }

 .profile-card-body {
   padding: 2rem 2.5rem;
 }

 .profile-item {
   margin-bottom: 1.8rem;
 }

 .profile-item-label {
   font-size: .72rem;
   letter-spacing: .2em;
   color: var(--primary-color);
   margin-bottom: .7rem;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .profile-item-label::before {
   content: '';
   display: block;
   width: 16px;
   height: 1px;
   background: var(--primary-color);
 }

 .profile-item-content {
   font-size: .85rem;
   color: #555;
   line-height: 1.9;
 }

 .cert-list {
   display: flex;
   flex-wrap: wrap;
   gap: .4rem;
 }

 .cert-badge {
   padding: 4px 12px;
   border-radius: 6px;
   background: #f0f4ff;
   font-size: .74rem;
   color: #444;
   border: 1px solid rgba(1, 129, 255, .15);
 }

 /* ── Flow ── */
 .flow {
   border-top: 1px solid var(--border);
   background: #f9f9f9;
 }

 .flow-inner {
   max-width: 1100px;
   margin: 0 auto;
 }

 .flow-header {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   margin-bottom: 4rem;
   align-items: start;
 }

 .price-note {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 2rem;
   font-size: .88rem;
   color: #555;
   line-height: 2;
   display: block;
   font-size: .75rem;
   letter-spacing: .2em;
   color: var(--accent-color);
   margin-bottom: .8rem;
 }

 .flow-steps {
   display: flex;
   flex-direction: column;
   gap: 0;
 }

 .flow-step {
   display: flex;
   gap: 2rem;
   padding: 2rem 0;
   position: relative;
 }

 .flow-step:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 22px;
   top: 72px;
   bottom: -8px;
   width: 1px;
   background: linear-gradient(180deg, var(--primary-color), transparent);
   opacity: .3;
 }

 .flow-num {
   flex-shrink: 0;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: rgba(1, 129, 255, .1);
   border: 1px solid rgba(1, 129, 255, .3);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: .95rem;
   font-weight: 600;
   color: var(--primary-color);
 }

 .flow-content {
   padding-top: 10px;
 }

 .flow-title {
   font-size: 1rem;
   font-weight: 500;
   color: #111;
   margin-bottom: .4rem;
 }

 .flow-free {
   display: inline-block;
   font-size: .7rem;
   padding: 2px 10px;
   border-radius: 100px;
   background: rgba(253, 129, 178, .15);
   color: var(--accent-color);
   border: 1px solid rgba(253, 129, 178, .2);
   margin-left: 8px;
   vertical-align: middle;
 }

 .flow-desc {
   font-size: .85rem;
   color: var(--text-muted);
   line-height: 1.8;
 }

 /* ── FAQ ── */
 .faq {
   max-width: 800px;
   margin: 0 auto;
 }

 .faq-list {
   margin-top: 3rem;
 }

 .faq-item {
   border-bottom: 1px solid var(--border);
 }

 .faq-q {
   padding: 1.6rem 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
   gap: 1.5rem;
   transition: color .2s;
 }

 .faq-q:hover {
   color: #fff;
 }

 .faq-q-text {
   font-size: .95rem;
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   color: #333;
 }

 .faq-q-text::before {
   content: 'Q';
   flex-shrink: 0;
   font-family: var(--font-display);
   font-size: .9rem;
   color: var(--primary-color);
   font-weight: 600;
 }

 .faq-toggle {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   color: var(--text-muted);
   transition: all .3s;
 }

 .faq-item.open .faq-toggle {
   background: rgba(1, 129, 255, .1);
   border-color: rgba(1, 129, 255, .3);
   color: var(--primary-color);
   transform: rotate(45deg);
 }

 .faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s ease;
 }

 .faq-item.open .faq-a {
   max-height: 200px;
 }

 .faq-a-inner {
   padding: 0 0 1.6rem 2.4rem;
   font-size: .88rem;
   color: var(--text-muted);
   line-height: 2;
 }

 .faq-a-inner::before {
   display: none;
 }

 /* ── Area ── */
 .area {
   border-top: 1px solid var(--border);
   background: #fff;
 }

 .area-inner {
   max-width: 1100px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: center;
 }

 .area-cards {
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   margin-top: 2.5rem;
 }

 .area-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 1.8rem 2rem;
   display: flex;
   gap: 1.2rem;
   align-items: flex-start;
 }

 .area-card-icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   flex-shrink: 0;
 }

 .area-card-icon.visit {
   background: rgba(1, 129, 255, .1);
   border: 1px solid rgba(1, 129, 255, .2);
 }

 .area-card-icon.online {
   background: rgba(253, 129, 178, .1);
   border: 1px solid rgba(253, 129, 178, .2);
 }

 .area-card-title {
   font-size: .88rem;
   font-weight: 500;
   color: #111;
   margin-bottom: .4rem;
 }

 .area-card-desc {
   font-size: .82rem;
   color: var(--text-muted);
   line-height: 1.9;
 }

 .area-map-box {
   background: #f0f6ff;
   border: 1px solid rgba(1, 129, 255, .15);
   border-radius: 24px;
   overflow: hidden;
   aspect-ratio: 1;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .area-map-bg {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 60% 60% at 40% 40%, rgba(1, 129, 255, .08) 0%, transparent 70%);
 }

 .area-map-label {
   text-align: center;
   position: relative;
 }

 .area-map-label .prefecture {
   font-family: var(--font-display);
   font-size: 2rem;
   color: #111;
   font-weight: 600;
 }

 .area-map-label .city {
   font-size: .8rem;
   color: var(--primary-color);
   letter-spacing: .3em;
   margin-top: 8px;
 }

 .area-map-dot {
   width: 12px;
   height: 12px;
   background: var(--primary-color);
   border-radius: 50%;
   box-shadow: 0 0 0 4px rgba(1, 129, 255, .2), 0 0 20px var(--primary-color);
   margin: 1rem auto;
   animation: pulse 2s infinite;
 }

 /* ── Contact CTA ── */
 .contact-cta {
   background:
     radial-gradient(ellipse 80% 100% at 50% 50%, rgba(1, 129, 255, .06) 0%, transparent 70%),
     #f4f8ff;
   border-top: 1px solid var(--border);
   text-align: center;
   padding: 140px 5%;
 }

 .contact-cta .section-title {
   margin-bottom: .8rem;
 }

 .contact-cta .section-desc {
   max-width: 480px;
   margin: 0 auto 2.5rem;
   text-align: center;
 }

 .contact-sub {
   font-size: .82rem;
   color: var(--text-muted);
   margin-top: 1.5rem;
 }

 /* ── Footer ── */
 footer {
   border-top: 1px solid var(--border);
   padding: 3rem 5%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
 }

 .footer-logo {
   font-family: var(--font-display);
   font-size: 1rem;
   color: #111;
   letter-spacing: .08em;
   font-size: .75rem;
   color: var(--text-muted);
   letter-spacing: .1em;
 }

 /* ── Reveal animation ── */
 .reveal {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity .7s ease, transform .7s ease;
 }

 .reveal.visible {
   opacity: 1;
   transform: translateY(0);
 }

 @keyframes fadeUp {
   to {
     opacity: 1;
     transform: translateY(0);
   }

   from {
     opacity: 0;
     transform: translateY(20px);
   }
 }

 @keyframes fadeLeft {
   to {
     opacity: 1;
     transform: translateX(0);
   }

   from {
     opacity: 0;
     transform: translateX(20px);
   }
 }

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 @keyframes pulse {

   0%,
   100% {
     box-shadow: 0 0 0 4px rgba(1, 129, 255, .2), 0 0 20px var(--primary-color);
   }

   50% {
     box-shadow: 0 0 0 8px rgba(1, 129, 255, .08), 0 0 30px var(--primary-color);
   }
 }

 /* ── Responsive ── */
 @media (max-width: 900px) {

   .pain-inner,
   .profile-inner,
   .flow-header,
   .area-inner {
     grid-template-columns: 1fr;
     gap: 3rem;
   }

   .strengths-grid,
   .services-grid {
     grid-template-columns: 1fr;
   }

   .hero-stats {
     display: none;
   }

   .nav-links {
     display: none;
   }

   .pain-visual {
     display: none;
   }
 }