/* accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
  background: var(--c-surface); border:1px solid var(--c-line);
  border-radius: 10px; z-index:9999; box-shadow: var(--shadow-sm);
}

.page{overflow-x:hidden;}
.container{max-width: var(--container-max);}

.navbar-glass{
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,16,32,.08);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;}
.brand-mark{
  width:14px; height:14px; border-radius: 4px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  box-shadow: 0 10px 20px rgba(44,74,154,.20);
}
.brand-text{color: var(--c-ink);}
.navbar .nav-link{
  border-radius: 999px;
  padding: .45rem .75rem;
}
.navbar .nav-link:hover{background: rgba(44,74,154,.08);}
.navbar .nav-link.active{background: rgba(44,74,154,.12);}

.hero{
  position:relative;
  padding: 64px 0 8px;
}
.hero-bg{
  position:absolute; inset:0;
  background: var(--grad-hero);
  pointer-events:none;
}
.hero-pattern{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(11,16,32,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .25;
  mask-image: radial-gradient(600px 300px at 20% 30%, #000 30%, transparent 70%);
}
/* .blob{
  position:absolute; filter: blur(var(--blur));
  opacity:.9; border-radius: 999px;
}
.blob-a{
  width: 360px; height: 240px;
  left: -80px; top: 40px;
  background: rgba(232,93,117,.45);
}
.blob-b{
  width: 420px; height: 320px;
  right: -120px; top: 120px;
  background: rgba(44,74,154,.40);
} */

.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding: 7px 12px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(11,16,32,.08);
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(11,16,32,.06);
  font-weight: 600;
  color: rgba(11,16,32,.75);
}

.hero-badges{display:flex; flex-wrap:wrap; gap:10px;}
.badge-pill{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.08);
  padding: 8px 12px;
  border-radius: 999px;
  display:inline-flex; gap:10px; align-items:center;
}
.dot{width:8px; height:8px; border-radius:999px; display:inline-block;}
.dot-accent{background: var(--c-accent);}
.dot-sakura{background: var(--c-accent-2);}
.dot-matcha{background: var(--c-accent-3);}

.hero-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow:hidden;
}
.hero-card-top{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(11,16,32,.08);
}
.mini-title{font-weight:800; letter-spacing:.2px;}
.mini-sub{color: var(--c-muted); margin-top:3px; font-size:.95rem;}
.hero-card-body{padding: 16px 18px;}
.icon-list{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.i-badge{
  width:28px; height:28px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(44,74,154,.10);
  color: var(--c-accent);
  font-weight:800;
  margin-right:10px;
}
.hero-card-note{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(201,164,76,.12);
  border: 1px solid rgba(201,164,76,.25);
  color: rgba(11,16,32,.82);
}
.hero-card-foot{padding: 14px 18px 18px;}
.btn-soft{
  background: rgba(44,74,154,.10);
  border: 1px solid rgba(44,74,154,.18);
  color: var(--c-accent);
}
.btn-soft:hover{
  background: rgba(44,74,154,.14);
  border-color: rgba(44,74,154,.25);
  color: #233B7C;
}

.section{
  position:relative;
  padding: 64px 0;
}
.section-surface{background: rgba(255,255,255,.52);}
.section-divider{
  position:absolute; left:0; right:0; bottom:-1px;
  height: 90px; pointer-events:none;
}
.section-divider svg{width:100%; height:100%;}
.section-divider path{fill: var(--c-bg);}
.section-divider-hero path{fill: rgba(255,255,255,.52);}
.section-divider-foot path{fill: var(--c-bg);}

.shape-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  padding: 18px 18px;
  box-shadow: var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.shape-card:before{
  content:"";
  position:absolute; inset:-40px -60px auto auto;
  width: 180px; height: 120px;
  background: radial-gradient(circle at 40% 40%, rgba(232,93,117,.20), transparent 60%),
              radial-gradient(circle at 70% 30%, rgba(44,74,154,.18), transparent 60%);
  transform: rotate(12deg);
}
.shape-card > *{position:relative;}
.shape-icon{height: 38px; margin-bottom: 10px;}
.shape{
  display:inline-block;
  width: 38px; height: 38px;
  border-radius: 14px;
  transform: rotate(10deg);
  box-shadow: 0 16px 36px rgba(11,16,32,.10);
}
.shape-1{background: linear-gradient(135deg, rgba(44,74,154,.18), rgba(44,74,154,.05)); border:1px solid rgba(44,74,154,.18);}
.shape-2{background: linear-gradient(135deg, rgba(232,93,117,.18), rgba(232,93,117,.05)); border:1px solid rgba(232,93,117,.18);}
.shape-3{background: linear-gradient(135deg, rgba(59,170,124,.18), rgba(59,170,124,.05)); border:1px solid rgba(59,170,124,.18);}
.shape-4{background: linear-gradient(135deg, rgba(201,164,76,.18), rgba(201,164,76,.05)); border:1px solid rgba(201,164,76,.18);}
.shape-5{background: linear-gradient(135deg, rgba(11,16,32,.12), rgba(11,16,32,.04)); border:1px solid rgba(11,16,32,.12);}
.shape-6{background: linear-gradient(135deg, rgba(44,74,154,.10), rgba(232,93,117,.10)); border:1px solid rgba(11,16,32,.10);}

.link-soft{font-weight:700; text-decoration:none; color: var(--c-accent);}
.link-soft:hover{text-decoration: underline;}

.callout{
  background: rgba(44,74,154,.08);
  border: 1px solid rgba(44,74,154,.14);
  border-radius: var(--r-lg);
  padding: 16px 16px;
}
.callout-title{font-weight:800; margin-bottom: 8px;}

.timeline{display:grid; gap:12px;}
.t-item{display:flex; gap:12px; align-items:stretch;}
.t-dot{
  width: 10px; border-radius:999px;
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-2));
  margin-top: 16px;
  box-shadow: 0 14px 30px rgba(44,74,154,.18);
}
.t-card{
  flex:1;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.t-top{display:flex; justify-content:space-between; gap:12px; margin-bottom: 6px;}
.t-step{font-weight:800; color: rgba(11,16,32,.78);}
.t-time{color: var(--c-muted); font-size:.92rem;}

.price-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  position:relative;
}
.price-card.highlight{
  border-color: rgba(44,74,154,.22);
  box-shadow: 0 26px 60px rgba(44,74,154,.16);
}
.ribbon{
  position:absolute; top:14px; right:-42px;
  background: rgba(44,74,154,.95);
  color: #fff;
  padding: 6px 52px;
  transform: rotate(18deg);
  font-weight:800;
  font-size:.85rem;
}
.price-top{padding: 16px 16px 10px; border-bottom: 1px solid rgba(11,16,32,.08);}
.price-name{font-weight:900; font-size:1.1rem;}
.price-tag{color: var(--c-muted); margin-top: 2px;}
.price-body{padding: 14px 16px;}
.price-cta{padding: 0 16px 16px;}
.price-footnote{margin-top: 10px; color: var(--c-muted); font-size: .92rem;}

.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.checklist li{
  position:relative; padding-left: 26px;
}
.checklist li:before{
  content:"";
  position:absolute; left:0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 6px;
  background: rgba(59,170,124,.18);
  border: 1px solid rgba(59,170,124,.26);
  box-shadow: 0 10px 20px rgba(59,170,124,.10);
}

.notice{
  display:flex; gap:12px; align-items:flex-start;
  background: rgba(255,255,255,.62);
  border: 1px dashed rgba(11,16,32,.18);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.notice-icon{
  width: 18px; height: 18px; border-radius: 6px;
  margin-top: 2px;
  background: linear-gradient(135deg, rgba(201,164,76,.35), rgba(201,164,76,.10));
  border: 1px solid rgba(201,164,76,.30);
}
.notice-text{color: rgba(11,16,32,.78); font-weight: 600;}

.accordion-clean .accordion-item{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}
.accordion-clean .accordion-button{
  background: transparent;
  font-weight: 800;
}
.accordion-clean .accordion-button:not(.collapsed){
  color: var(--c-ink);
  background: rgba(44,74,154,.06);
}
.accordion-clean .accordion-body{color: rgba(11,16,32,.78);}

.story-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 16px;
}
.story-top{display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px;}
.story-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(232,93,117,.10);
  border: 1px solid rgba(232,93,117,.18);
  color: rgba(11,16,32,.82);
  font-weight: 800;
  font-size: .85rem;
}
.story-meta{color: var(--c-muted); font-weight: 700; font-size: .9rem;}

.contact-mini{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.mini-row{display:grid; grid-template-columns: 90px 1fr; gap:10px; padding: 8px 0; border-bottom: 1px solid rgba(11,16,32,.06);}
.mini-row:last-child{border-bottom:none;}
.mini-label{color: var(--c-muted); font-weight:800;}
.mini-value{color: rgba(11,16,32,.85);}

.form-shell{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  padding: 18px 18px;
  box-shadow: var(--shadow-md);
}
.form-inline-status{
  min-height: 22px;
  font-weight: 700;
  color: rgba(11,16,32,.78);
}
.form-inline-status .ok{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 10px;
  background: rgba(59,170,124,.12);
  border: 1px solid rgba(59,170,124,.20);
  border-radius: 999px;
}

.trust-row{display:flex; flex-wrap:wrap; gap:10px;}
.trust-item{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(11,16,32,.08);
  border-radius: 999px;
  padding: 8px 12px;
  display:inline-flex; align-items:center; gap:10px;
  font-weight: 700;
  color: rgba(11,16,32,.75);
}
.trust-icon{
  width: 14px; height: 14px; border-radius: 5px;
  background: linear-gradient(135deg, rgba(59,170,124,.35), rgba(44,74,154,.18));
  border: 1px solid rgba(11,16,32,.10);
}

.page-hero{padding: 54px 0 8px; position:relative;}
.stat-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
.stat{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  padding: 14px 14px;
  box-shadow: var(--shadow-sm);
}
.stat-num{font-size: 1.3rem; font-weight: 900;}
.stat-label{color: var(--c-muted); font-weight: 800;}

.panel{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  padding: 16px 16px;
  box-shadow: var(--shadow-sm);
}
.step{display:flex; gap:12px; padding: 10px 0; border-bottom: 1px solid rgba(11,16,32,.06);}
.step:last-child{border-bottom:none;}
.step-badge{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(44,74,154,.10);
  border: 1px solid rgba(44,74,154,.16);
  font-weight: 900; color: var(--c-accent);
}
.step-title{font-weight: 900;}
.step-text{margin-top: 2px;}

.soft-hr{border-top: 1px solid rgba(11,16,32,.10); opacity:1;}

.cta-band{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,16,32,.10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 18px 18px;
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cta-actions{display:flex; gap:10px; flex-wrap:wrap;}

.footer{
  padding: 44px 0 30px;
  border-top: 1px solid rgba(11,16,32,.08);
  background: rgba(255,255,255,.45);
}
.brand-footer .brand-text{color: var(--c-ink);}
.footer-title{font-weight: 900; margin-bottom: 10px;}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:8px;}
.footer-links a{color: rgba(11,16,32,.78); text-decoration:none;}
.footer-links a:hover{color: var(--c-accent); text-decoration: underline;}
.footer-contact .muted{color: rgba(11,16,32,.72);}
.social-row{display:flex; gap:10px; flex-wrap:wrap;}
.social-btn{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(44,74,154,.08);
  border: 1px solid rgba(44,74,154,.14);
  text-decoration:none;
  color: rgba(11,16,32,.80);
  font-weight: 800;
}
.social-btn:hover{background: rgba(44,74,154,.12); border-color: rgba(44,74,154,.22);}
.footer-bottom{margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(11,16,32,.06);}
.muted{color: rgba(11,16,32,.68);}

/* reveal */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:none;}

@media (max-width: 991.98px){
  .hero{padding: 48px 0 12px;}
  .section{padding: 56px 0;}
  .section-divider{height: 70px;}
  .hero-card{margin-top: 6px;}
  .t-item{flex-direction: column;}
  .t-dot{height: 10px; margin-top: 0;}
  .t-top{flex-direction: column; align-items:flex-start;}
  .notice{flex-direction: column;}
  .cta-band{flex-direction: column; align-items:flex-start;}
  .mini-row{grid-template-columns: 1fr; gap:6px;}
}

@media (max-width: 575.98px){
  .hero{padding: 40px 0 10px;}
  .kicker{font-size: .9rem;}
  .hero-badges{gap:8px;}
  .badge-pill{padding: 6px 10px; font-size: .92rem;}
  .price-card .h3{font-size: 1.5rem;}
  .ribbon{right:-58px; padding: 6px 58px;}
}