@charset "UTF-8";

/* ========================================
   Hero
======================================== */
.hero{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  padding:40px 0 110px;
}

.hero .container,
section .container{
  width:min(100% - 10%, var(--container));
  margin-inline:auto;
}

.hero-top{
  display:grid;
  grid-template-columns:3.6fr 6fr;
	gap: 0 4%;
}

.hero-copy{
}

.hero-copy .eyebrow{
  margin:18px 0;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.6);
  font-size:clamp(40%,1.5vw,100%);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  opacity:.7;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.hero-copy h1{
  margin:16.7% 0 3%;
  font-size:clamp(30px,4.4vw,62px);
  line-height:1.5;
  letter-spacing:-.06em;
  font-weight:700;
	text-align: center;
}

.hero-copy h1 span{
	font-size: 54%;
	letter-spacing:0;
}

.hero-copy p.sub{
  font-size:clamp(40%,1.4vw,114%);
  line-height:2.0;
  font-weight:800;
	text-align: center;
}

.hero-txt{
  position:relative;
  margin-top:30px;
  padding:28px 34px;
  border-radius:150px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.05),
    0 3px 10px rgba(0,0,0,.04);
}

.hero-txt::before{
  content:"";
  position:absolute;
  left:18%;
  top:-38px;
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:38px solid rgba(255,255,255,.92);
  filter:drop-shadow(0 -2px 3px rgba(0,0,0,.04));
}

.hero-txt p{
  text-align:center;
  font-size:clamp(100%,1.5vw,120%);
}

.hero-txt p span{
	font-weight: 700;
}

.hero-trust{
  padding:0;
  text-align:center;
}

.hero-trust-lead{
  font-size:18px;
  margin-bottom:12px;
}

.hero-trust-list{
  display:flex;
  justify-content:center;
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px;
}

.hero-trust-list li{
  position:relative;
  padding-left:18px;
  font-weight:700;
  font-size:clamp(100%,1.4vw,130%);
}

.hero-trust-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#4a7cff;
}

.hero-cta-wrap{
  margin-top:14px;
}

.hero-txt p.hero-cta-note{
  margin-bottom:12px;
  font-weight:800;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:20px;
}

.scroll-indicator{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
}

.scroll-mouse{
  display:flex;
  justify-content:center;
  width:26px;
  height:42px;
  padding-top:6px;
  border:2px solid rgba(0,0,0,.35);
  border-radius:20px;
}

.scroll-wheel{
  width:4px;
  height:8px;
  background:#000;
  border-radius:2px;
  animation:scrollWheel 1.6s infinite;
}

@keyframes scrollWheel{
  0%{
    opacity:0;
    transform:translateY(0);
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translateY(12px);
  }
}

/* ========================================
   Reasons
======================================== */
.reasons{
  position:relative;
  padding:120px 0;
}

.reasons-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}

.reason-card{
  position:relative;
  padding:30px 26px 26px;
  border:1px solid rgba(var(--border-r),var(--border-g),var(--border-b),.08);
  border-radius:28px;
  background:rgba(var(--panel-strong-r),var(--panel-strong-g),var(--panel-strong-b),.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.04);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.reason-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 18px 40px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  border-color:rgba(var(--border-r),var(--border-g),var(--border-b),.12);
}

.flex{
  display:flex;
  justify-content:space-between;
}

.flexL{
  width:15%;
}

.flexR{
  width:83%;
}

.reason-card img{
  width:40%;
  margin:0 0 5% 25%;
  padding:0;
}

.reason-num{
  font-size:clamp(100%, 3vw, 40px);
  line-height:1;
  letter-spacing:-0.05em;
  display:inline-block;
  text-transform:uppercase;
  font-weight:800;
  background:linear-gradient(
    90deg,
    #5b8cff,
    #8e6cff,
    #6fd3b5,
    #5b8cff
  );
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:slGradient 8s ease infinite;
}

.reason-card h3{
  margin:2% 0 0;
  font-size:clamp(100%, 1.4vw, 20px);
  line-height:1.45;
  color:rgb(var(--text-r),var(--text-g),var(--text-b));
}

.reason-card p{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.96);
}

.reasons-note{
  margin-top:28px;
  padding:22px 24px;
  text-align:center;
}

.reasons-note p{
  margin:0 0 14px;
  font-size:clamp(100%, 1.5vw, 112%);
  line-height:1.8;
}

/* ========================================
   Services
======================================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.service-card{
  border-radius:30px;
  padding:30px 28px;
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease);
}

.service-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 28px 60px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.11),
    0 1px 0 rgba(255,255,255,.54) inset;
}

.service-icon{
  width:64px;
  height:64px;
  margin-bottom:22px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
  transition:
    transform .35s var(--ease),
    box-shadow .35s ease;
}

.service-card:hover .service-icon{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 28px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.08);
}

.service-card .service-icon{
  width:64px;
  height:64px;
  display:block;
  color:rgb(var(--text-r),var(--text-g),var(--text-b));
  opacity:.88;
}

.service-icon svg{
  width:30px;
  height:30px;
}

.service-card h3{
  margin-bottom:12px;
  font-size:24px;
  letter-spacing:-.03em;
}

.service-card p{
  margin-bottom:16px;
  font-size:14px;
  line-height:1.95;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.93);
}

.service-card ul{
  display:grid;
  gap:8px;
}

.service-card li{
  list-style:none;
  position:relative;
  padding-left:18px;
  font-size:13px;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.94);
}

.service-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.78);
}

/* ========================================
   Pricing
======================================== */
.pricing{
  padding-top:118px;
}

.pricing-main{
  margin-top:8px;
}

.pricing-main__inner{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr .88fr;
  gap:28px;
  align-items:stretch;
  padding:34px;
  border-radius:36px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(247,251,255,.82) 100%);
  border:1px solid rgba(var(--border-r),var(--border-g),var(--border-b),.08);
  box-shadow:
    0 24px 70px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.07),
    0 0 0 1px rgba(185,220,240,.18) inset;
  backdrop-filter:blur(14px);
}

.pricing-main__content{
  padding:6px 6px 6px 2px;
}

.pricing-kicker{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.pricing-block{
  margin-top:72px;
}

.pricing-block-head{
  margin:0 0 28px;
}

.pricing-block-head h3,
.pricing-main__content h3{
  margin:0 0 14px;
  font-size:clamp(120%,4.2vw,30px);
  line-height:1.2;
  letter-spacing:.02em;
	font-weight: 700;
  color:rgba(var(--text-r),var(--text-g),var(--text-b),1);
}

.pricing-block-head p,
.pricing-main__lead,
.pricing-note,
.pricing-main__note{
  font-size: clamp(100%, 1.5vw, 112%);
}

.pricing-main__lead{
  margin:0 0 22px;
  font-size:15px;
  line-height:1.95;
}

.pricing-main__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;
  margin:0 0 0 1em;
  padding:0;
  list-style:none;
}

.pricing-main__list li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  line-height:1.8;
  color:rgba(var(--text-r),var(--text-g),var(--text-b),.94);
}

.pricing-main__list li::before,
.price-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(158,204,235,.95) 0%,rgba(197,230,250,.95) 100%);
  box-shadow:0 0 0 4px rgba(210,236,248,.45);
  transform:translateY(-50%);
}

.pricing-main__note{
  margin:22px 0 0;
  font-size:14px;
  line-height:1.9;
}

.pricing-main__card{
  position:relative;
  padding:30px 26px 28px;
  border-radius:30px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(150,195,220,.24);
  box-shadow:
    0 22px 58px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.08),
    0 0 0 1px rgba(210,236,248,.34) inset;
}

.price-badge{
  position:absolute;
  top:18px;
  right:18px;
  padding:8px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:#234;
  background:linear-gradient(135deg,#e9f8ff 0%,#dff0ff 100%);
  border:1px solid rgba(120,170,210,.18);
}

.price-badge--main{
  background:linear-gradient(
    90deg,
    #5b8cff,
    #8e6cff,
    #6fd3b5,
    #5b8cff
  );
  background-size:300% 300%;
  color:#fff;
  animation:bgGradient 8s ease infinite;
}

@keyframes bgGradient{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.price-label{
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(var(--soft-r),var(--soft-g),var(--soft-b),.95);
}
.price-label.color-grad{
  color:transparent;
}

.price-title{
  margin:0;
  font-size:24px;
  line-height:1.35;
  letter-spacing:.02em;
  color:rgba(var(--text-r),var(--text-g),var(--text-b),1);
}

.pricing-main__price{
  margin-top:18px;
}

.pricing-main__price + .pricing-main__price{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(var(--border-r),var(--border-g),var(--border-b),.08);
}

.pricing-main__price-sub{
  margin:0 0 6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(var(--soft-r),var(--soft-g),var(--soft-b),.96);
}

.pricing-main__price-main,
.price-value{
  margin:0;
  font-size:clamp(34px,4vw,48px);
  line-height:1;
  font-weight:700;
  letter-spacing:-.03em;
  color:rgba(var(--text-r),var(--text-g),var(--text-b),1);
}

.pricing-main__price-main span,
.price-value span{
  font-size:.42em;
  letter-spacing:0;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.98);
}

.price-text{
  margin:18px 0 0;
  font-size:15px;
  line-height:1.9;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.96);
}

.pricing-main__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  margin-top:24px;
  padding:0 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  color:#fff;
  background:rgba(var(--text-r), var(--text-g), var(--text-b), .98);
  border:1px solid rgba(131,178,208,.22);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.pricing-main__button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(120,170,210,.18);
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:30px 26px 28px;
  border:1px solid rgba(var(--border-r),var(--border-g),var(--border-b),.08);
  border-radius:28px;
  background:rgba(var(--panel-strong-r),var(--panel-strong-g),var(--panel-strong-b),.78);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.06);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.price-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 58px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.09);
  border-color:rgba(var(--border-r),var(--border-g),var(--border-b),.14);
}

.price-card--soft-recommended{
  border-color:rgba(120,170,210,.22);
  box-shadow:
    0 20px 52px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.07),
    0 0 0 1px rgba(170,210,235,.22) inset;
}

.price-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.price-list li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  line-height:1.75;
  color:rgba(var(--text-r),var(--text-g),var(--text-b),.92);
}

.pricing-note{
  margin:28px 0 0;
  text-align:center;
  font-size:14px;
  line-height:1.9;
}
.pricing-intro{
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.pricing-intro-lead{
  margin: 0;
  font-size: clamp(100%, 1.5vw, 112%);
  line-height: 2;
  color: rgba(var(--text-r), var(--text-g), var(--text-b), .86);
}

.pricing-main__strong{
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--border-r), var(--border-g), var(--border-b), .08);
  border-radius: 18px;
  background: rgba(255,255,255,.6);
  line-height: 1.9;
}

.pricing-fit{
  margin-top: 22px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(var(--border-r), var(--border-g), var(--border-b), .08);
}

.pricing-fit h4{
  margin: 0 0 12px;
  font-size: 1rem;
}

.pricing-fit-list{
  margin: 0;
  padding-left: 1.2em;
}

.pricing-fit-list li{
  margin: 0 0 8px;
  line-height: 1.8;
}

.pricing-cta-note{
  margin: 18px 0 0;
  font-size: .94rem;
  line-height: 1.8;
  color: rgba(var(--text-r), var(--text-g), var(--text-b), .72);
}

.pricing-block--example{
  margin-top: 44px;
}

.pricing-grid--example{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.price-target{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--border-r), var(--border-g), var(--border-b), .08);
  font-size: .93rem;
  line-height: 1.8;
  color: rgba(var(--text-r), var(--text-g), var(--text-b), .76);
}

.pricing-bottom-cta{
  margin-top: 44px;
  padding: 36px 28px;
  border-radius: 28px;
  text-align: center;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(var(--border-r), var(--border-g), var(--border-b), .08);
}

.pricing-bottom-cta p{
  margin: 0 0 18px;
  line-height: 1.9;
  font-size:clamp(100%, 1.5vw, 112%);
}

@media (max-width: 900px){
  .pricing-grid--example{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px){
  .pricing-intro{
    margin-bottom: 28px;
  }

  .pricing-intro-lead{
    text-align: left;
    line-height: 1.9;
  }

  .pricing-fit{
    padding: 18px;
    border-radius: 18px;
  }

  .pricing-bottom-cta{
    padding: 28px 20px;
    border-radius: 22px;
    text-align: left;
  }

  .pricing-bottom-cta .btn{
    width: 100%;
  }
}

/* ========================================
   Works / Flow slider shared
======================================== */
.works-swiper,
.flow-swiper{
  overflow:visible;
}

.slider-controls,
.flow-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:34px;
}

.slider-btn,
.flow-btn{
  width:60px;
  height:52px;
  border:none;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.97);
  color:#fff;
  box-shadow:0 12px 26px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.12);
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.slider-btn:hover,
.flow-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.16);
}

.slider-btn svg,
.flow-btn svg{
  width:22px;
  height:22px;
}

.slider-pagination,
.flow-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.slider-pagination .swiper-pagination-bullet,
.flow-pagination .swiper-pagination-bullet{
  width:8px;
  height:8px;
  margin:0 !important;
  opacity:1;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.18);
  transition:
    width .3s ease,
    border-radius .3s ease,
    background .3s ease;
}

.slider-pagination .swiper-pagination-bullet-active,
.flow-pagination .swiper-pagination-bullet-active{
  width:28px;
  border-radius:999px;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.92);
}

/* =========================
   WORKS
========================= */
.work-card-link{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
  text-decoration:none;
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 48px rgba(0,0,0,.08);
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease,
    border-color .35s ease,
    background .35s ease;
}

.work-card-link:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 64px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.1);
  background:rgba(255,255,255,.82);
}

.work-thumb{
  position:relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background:#f5f5f5;
}

.work-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}

.work-card-link:hover .work-thumb img{
  transform:scale(1.04);
}

.work-content{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:24px 24px 22px;
}

.work-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-bottom:14px;
}

.work-meta span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(0,0,0,.66);
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.05);
}

.work-content h3{
  margin:0 0 12px;
  font-size:clamp(20px,2vw,24px);
  line-height:1.45;
}

.work-content p{
  margin:0;
  color:rgba(0,0,0,.7);
  line-height:1.9;
}

.work-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-top:18px;
  font-size:13px;
  letter-spacing:.08em;
  color:rgba(0,0,0,.72);
  transition:color .3s ease;
}

.work-more svg{
  width:18px;
  height:18px;
  transition:transform .3s ease;
}

.work-card-link:hover .work-more{
  color:rgba(0,0,0,.95);
}

.work-card-link:hover .work-more svg{
  transform:translateX(4px);
}

/* mock */
.work-mock{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#fbfbfb 0%,#f2f2f2 100%);
}

.work-mock-bar{
  height:16%;
  background:rgba(0,0,0,.05);
  border-bottom:1px solid rgba(0,0,0,.04);
}

.work-mock-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px;
}

.work-line{
  height:12px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
}

.work-line:nth-child(1){ width:82%; }
.work-line:nth-child(2){ width:66%; }
.work-line:nth-child(3){ width:74%; }
.work-line:nth-child(4){ width:48%; }

@media (max-width: 767px){
  .work-content{
    padding:20px 18px 18px;
  }

  .work-content h3{
    font-size:18px;
  }

  .work-content p{
    font-size:14px;
    line-height:1.8;
  }

  .work-meta span{
    font-size:10px;
    min-height:28px;
    padding:0 10px;
  }
}

.work-purpose{
  display:inline-block;
  margin-top:10px;
  padding:4px 10px;
  font-size:12px;
  border-radius:20px;
  background:#f3f5f7;
  color:#444;
}

.work-card h3{
  font-size:18px;
  line-height:1.5;
}

.work-card h3 strong{
  display:block;
  font-size:22px;
  font-weight:600;
  margin-top:4px;
}

.work-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  padding:0;
  list-style:none;
}

.work-tags li{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  background:#f3f5f7;
  color:#444;
}
.work-location{
font-size:12px;
color:#777;
margin-top:6px;
margin-bottom:10px;
}
.work-type{
  font-size:13px;
  color:#6b6b6b;
  margin-top:6px;
  margin-bottom:4px;
  font-weight:500;
}

/* =========================
   Works CTA
========================= */
.works-cta{
  margin:36px auto 0;
  padding:28px 24px;
  max-width:880px;
  border:1px solid rgba(var(--line-r),var(--line-g),var(--line-b),.1);
  border-radius:28px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 48px rgba(0,0,0,.06);
  text-align:center;
}

.works-cta p{
  margin:0;
  font-size:clamp(100%, 1.5vw, 112%);
  line-height:2;
}

.works-cta .btn{
  margin-top:18px;
  min-width:260px;
}

@media (max-width:767px){
  .works-cta{
    margin-top:28px;
    padding:22px 18px;
    border-radius:22px;
  }

  .works-cta p{
    font-size:14px;
    line-height:1.9;
  }

  .works-cta .btn{
    width:100%;
    min-width:0;
    margin-top:16px;
  }
}

/* ========================================
   Consult
======================================== */

.consult-examples{
  padding:120px 0;
}

.consult-heading{
  max-width:760px;
  margin:0 auto 42px;
  text-align:center;
}

.consult-wrap{
  position:relative;
  padding:38px;
  border:1px solid rgba(var(--line-r),var(--line-g),var(--line-b),.08);
  border-radius:32px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.82) 0%,
      rgba(248,250,255,.92) 100%);
  box-shadow:
    0 16px 48px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.06),
    inset 0 1px 0 rgba(255,255,255,.7);
	overflow: hidden;
}

.consult-wrap::before{
  content:"";
  position:absolute;
  inset:auto auto -80px -80px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(190,210,255,.28) 0%,
    rgba(190,210,255,.10) 48%,
    rgba(190,210,255,0) 72%);
  pointer-events:none;
}

.consult-wrap::after{
  content:"";
  position:absolute;
  inset:-70px -60px auto auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(220,230,255,.22) 0%,
    rgba(220,230,255,.08) 48%,
    rgba(220,230,255,0) 72%);
  pointer-events:none;
}

.consult-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.consult-card{
  position:relative;
  padding:24px 24px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(var(--line-r),var(--line-g),var(--line-b),.07);
  backdrop-filter:blur(10px);
  box-shadow:
    0 8px 24px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.045);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease;
}

.consult-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 14px 32px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.08);
  border-color:rgba(var(--line-r),var(--line-g),var(--line-b),.12);
  background:rgba(255,255,255,.92);
}

.consult-card h3{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 12px;
  font-size:18px;
  line-height:1.55;
  letter-spacing:.01em;
}

.check-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-top:1px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#111;
  background:linear-gradient(180deg,#ffffff 0%, #eef4ff 100%);
  border:1px solid rgba(var(--line-r),var(--line-g),var(--line-b),.08);
  box-shadow:
    0 4px 12px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.05);
}

.consult-card p{
  margin:0;
  padding-left:38px;
  font-size:15px;
  line-height:1.9;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.95);
}

.consult-bottom{
  position:relative;
  z-index:1;
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid rgba(var(--line-r),var(--line-g),var(--line-b),.08);
  text-align:center;
}

.consult-bottom-text{
  margin:0 0 22px;
  font-size:clamp(100%, 1.5vw, 112%);
  line-height:1.9;
}

.consult-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 30px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  background:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
	font-weight: 600;
}

.consult-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.16);
  opacity:.96;
}

@media (max-width:980px){
  .consult-wrap{
    padding:28px;
  }

  .consult-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:767px){
  .consult-examples{
    padding:88px 0;
  }

  .consult-heading{
    margin-bottom:30px;
  }

  .consult-wrap{
    padding:20px;
    border-radius:24px;
  }

  .consult-card{
    padding:20px 18px 18px;
    border-radius:18px;
  }

  .consult-card h3{
    gap:10px;
    font-size:16px;
  }

  .check-mark{
    width:24px;
    height:24px;
    font-size:13px;
  }

  .consult-card p{
    padding-left:34px;
    font-size:14px;
  }

  .consult-bottom-text{
    font-size:14px;
  }

  .section-lead br,
  .consult-bottom-text br{
    display:none;
  }
}










/* ========================================
   Flow
======================================== */
.flow{
  padding-top:126px;
}

.flow-slider-wrap{
  position:relative;
  max-width:1100px;
  margin:0 auto;
}

.flow-card{
  position:relative;
  height:100%;
  min-height:356px;
  padding:34px 30px 30px;
  border-radius:30px;
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease);
}

.flow-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 28px 60px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.11),
    0 1px 0 rgba(255,255,255,.55) inset;
}

.flow-icon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  margin-bottom:24px;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.04);
  color:rgb(var(--text-r),var(--text-g),var(--text-b));
  border:1px solid rgba(0,0,0,.05);
  transition:
    transform .45s var(--ease),
    background .35s ease,
    box-shadow .35s ease;
}

.flow-card:hover .flow-icon{
  transform:translateY(-2px) scale(1.04);
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.06);
  box-shadow:0 12px 26px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.08);
}

.flow-icon svg{
  width:28px;
  height:28px;
  display:block;
}

.flow-num{
  margin-bottom:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:rgba(var(--soft-r),var(--soft-g),var(--soft-b),.95);
}

.flow-card h3{
  margin-bottom:14px;
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.35;
  letter-spacing:-.02em;
}

.flow-card p{
  font-size:15px;
  line-height:1.95;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.92);
}

/* ========================================
   Area
======================================== */
.area-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.area-card{
  display:block;
  border-radius:28px;
  padding:28px 24px;
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease);
}

.area-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 24px 52px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.10),
    0 1px 0 rgba(255,255,255,.55) inset;
}

.area-card small{
  display:block;
  margin-bottom:10px;
  font-size:11px;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(var(--soft-r),var(--soft-g),var(--soft-b),.95);
}

.area-card strong{
  display:block;
  margin-bottom:10px;
  font-size:22px;
  letter-spacing:-.03em;
}

.area-card p{
  font-size:14px;
  line-height:1.9;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.93);
}

/* ========================================
   About
======================================== */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.about-card{
  border-radius:30px;
  padding:34px 30px;
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease);
}

.about-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 24px 52px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.10),
    0 1px 0 rgba(255,255,255,.55) inset;
}

.about-card h3{
  margin-bottom:14px;
  font-size:clamp(20px, 4.6vw, 30px);
  letter-spacing:-.03em;
}

.about-card p{
  font-size:15px;
  line-height:1.95;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.93);
}

.about-list{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.about-list li{
  list-style:none;
  position:relative;
  padding-left:18px;
  font-size:14px;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.94);
}

.about-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.8);
}

/* ========================================
   CTA / Footer
======================================== */
.cta{
  padding-top:40px;
}

.cta-box{
  border-radius:38px;
  padding:56px 34px;
  text-align:center;
}

.cta-box h2{
  margin-bottom:16px;
  font-size:clamp(20px, 4.6vw, 30px);
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:700;
}

.cta-box p{
  max-width:700px;
  margin:0 auto 28px;
  font-size:clamp(100%, 1.5vw, 112%);
  line-height:1.95;
}

.cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

/* ========================================
   Responsive
======================================== */
@media (max-width:1080px){
  .hero-grid,
  .about-grid{
    grid-template-columns:1fr;
  }

  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .pricing-main__inner{
    grid-template-columns:1fr;
  }

  .pricing-main__list{
    grid-template-columns:1fr;
  }

  .pricing-grid{
    grid-template-columns:1fr;
  }

  .area-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:768px){
  .hero-top{
    grid-template-columns:1fr;
    gap:28px;
  }
}

@media (max-width:767px){
  .hero{
    min-height:auto;
  }

  .hero-logo{
    width:86%;
    margin:0 auto;
  }

  .hero-copy .eyebrow{
    width:100%;
    margin:18px auto 0;
    font-size:3.4vw;
  }

  .hero-copy h1{
    margin:5% 0;
    font-size:6.8vw;
  }

  .hero-copy h1 span{
    font-size:65%;
  }

  .hero-copy p.sub{
    font-size:100%;
	  text-align: left;
	  font-weight: 600;
  }

  .hero-txt{
    margin-top:50px;
    border-radius:20px;
  }

  .hero-txt p{
    text-align:left;
    font-size:100%;
  }

  .hero-txt p.hero-cta-note{
    text-align:center;
    line-height:140%;
  }

  .hero-trust-list{
    display:block;
  }

  .hero-trust-list li{
    display:table;
  }

  .reasons{
    padding:84px 0;
  }

  .reasons-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .reason-card{
    padding:26px 22px 22px;
    border-radius:24px;
  }

  .reason-num{
    font-size:9vw;
  }

  .reason-card h3{
    font-size:18px;
  }

  .reason-card p,
  .reasons-note p{
    font-size:13px;
    line-height:1.85;
    text-align:left;
  }

  .reasons-note{
    margin-top:20px;
    padding:20px 18px;
    border-radius:20px;
  }

  .services-grid,
  .pricing-grid,
  .area-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .service-card,
  .about-card,
  .area-card{
    border-radius:24px;
    padding:24px 22px;
  }

  .pricing{
    padding-top:92px;
  }

  .pricing-main__inner{
    padding:22px;
    border-radius:28px;
  }

  .pricing-main__card{
    padding:32px 20px 22px;
    border-radius:24px;
  }

  .pricing-block{
    margin-top:52px;
  }

  .price-card{
    padding:24px 20px 22px;
    border-radius:24px;
  }

  .price-title{
    font-size:21px;
  }

  .price-badge{
    top:14px;
    right:14px;
  }

  .pricing-note{
    text-align:left;
  }

  .flow{
    padding-top:96px;
  }

  .flow-card{
    min-height:auto;
    padding:28px 22px 24px;
    border-radius:24px;
  }

  .flow-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    margin-bottom:20px;
  }

  .flow-icon svg{
    width:24px;
    height:24px;
  }

  .flow-card h3{
    font-size:22px;
  }

  .flow-card p{
    font-size:14px;
    line-height:1.85;
  }

  .slider-controls,
  .flow-controls{
    gap:14px;
    margin-top:24px;
  }

  .slider-btn,
  .flow-btn{
    width:46px;
    height:46px;
  }

  .cta-box{
    border-radius:28px;
    padding:38px 20px;
    text-align:left;
  }

  .cta-box p{
    font-size:14px;
    line-height:1.85;
  }

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .bg-orb.-a{
    width:110vw;
    height:110vw;
    min-width:320px;
    min-height:320px;
  }

  .bg-orb.-b{
    width:78vw;
    height:78vw;
    min-width:240px;
    min-height:240px;
  }

  .bg-orb.-c{
    width:62vw;
    height:62vw;
    min-width:180px;
    min-height:180px;
  }

  .blob1{ width:46vw; height:46vw; }
  .blob2{ width:32vw; height:32vw; }
  .blob3{ width:28vw; height:28vw; }
  .blob4{ width:38vw; height:38vw; }
  .blob5{ width:24vw; height:24vw; }
}


/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative; width: 100%;
  height: 100svh; min-height: 520px; max-height: 900px;
  overflow: hidden; background: #fff;
}

/* ① 青→白グラデ（上から濃い青→完全な白） */
.hero-sky {
  position: absolute;
  top: 0; left: 0; right: 0; height: 62%;
  background: linear-gradient(
    180deg,
    #3d8fc0 0%,
    #4e9fd1 25%,
    #72b5de 55%,
    #ffffff 100%
  );
  will-change: transform;
}

/* 湘南イラスト */
.hero-illust {
  position: absolute; bottom: -25%;
  left: 50%; transform: translateX(-50%);
  width: 120%; max-width: 1600px;
  z-index: 5; pointer-events: none;
  will-change: transform;
  animation: illustUp .9s var(--ease) .15s both;
}
.hero-illust img {
  width: 100%; height: auto;
  mix-blend-mode: multiply; display: block;
}

/* グリッド */
.hero-inner {
  position: absolute; inset: 0; z-index: 10;
  display: grid; grid-template-columns: 4fr 6fr;
  align-items: center; gap: 0 6%;
  padding: calc(var(--header-h) + 16px) 6% 120px;
  max-width: 1280px; margin: 0 auto; left: 0; right: 0;
  will-change: transform;
}

/* 左：キャラ＋name＋テキストの縦積み */
.hero-chara-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%; z-index: 4;
  animation: charaIn .9s var(--ease) .28s both;
	max-width: 400px;
	margin-top: 30%;
}

/* キャラ画像 */
.hero-chara-img {
  width: 70%; height: auto;
	margin: 0; /* キャラの位置 */
  filter: drop-shadow(0 10px 30px rgba(10,30,60,.16));
  animation: charaBob 4.2s ease-in-out infinite;
  display: block;
}

/* name.svg：静止・bobなし */
.hero-name-svg {
  width: 77%; height: auto;
  display: block;
  margin: -16% 0 0 23%; /* キャラとの重なり感 */
  filter: drop-shadow(0 4px 12px rgba(10,30,60,.18));
  /* アニメなし・静止 */
  animation: fadeUp .7s var(--ease) .5s both;
}

/* SHONAN WEB DESIGN STUDIO テキスト */
.hero-studio-label {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  text-align: center;
  animation: fadeUp .7s var(--ease) .64s both;
  white-space: nowrap;
}

/* ② 吹き出し */
.chara-balloon {
  position: absolute;
  top: 0; right: -12%;
	margin-top: 9%;
  background: #fff;
  border-radius: 100px;
  padding: 1em;
  box-shadow: 0 4px 20px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.8);
  font-size: clamp(45%, 1.3vw, 100%); font-weight: 700; color: var(--navy);
  line-height: 1.4; white-space: nowrap;
  z-index: 15; pointer-events: none;
  animation: balloonIn .65s var(--ease) 1.2s both;
}
.chara-balloon::after {
  content: "";
  position: absolute; bottom: -11px; left: 33px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 6px solid transparent;
  border-top: 13px solid #fff;
}
.chara-balloon em { font-style: normal; color: var(--accent); }

/* 右：コピー */
.hero-copy {
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.48);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-ui); font-size: 9px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.9); margin-bottom: 16px;
  animation: fadeUp .65s var(--ease) .44s both;
}
.eyebrow-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-lt);
  animation: pulse 2.4s ease-in-out infinite;
}
.hero-h1 {
  font-size: clamp(24px, 2.9vw, 46px); font-weight: 900;
  line-height: 1.18; letter-spacing: -.055em; color: var(--white);
  margin-bottom: 14px;
  animation: fadeUp .7s var(--ease) .54s both;
  text-shadow: 0 2px 14px rgba(0,40,80,.1);
}
.hero-h1 .hl { position: relative; display: inline; }
.hero-h1 .hl::after {
  content: "";
  position: absolute; left: 0; bottom: 2px; right: 0; height: 3px;
  background: var(--accent-lt); border-radius: 2px;
  transform-origin: left;
  animation: lineGrow .6s var(--ease) 1.05s both;
}
.hero-h1 .h1-sub {
  display: block; font-size: .54em; font-weight: 700;
  letter-spacing: -.02em; color: rgba(255,255,255,.76); margin-top: 6px;
}
.hero-lead {
  font-size: clamp(11.5px, 1.1vw, 14px); line-height: 2;
  color: rgba(255,255,255,.72); font-weight: 500; margin-bottom: 28px;
  animation: fadeUp .7s var(--ease) .66s both;
}


/* ============================================================
   CTA
============================================================ */
.cta-group {
  display: flex; flex-direction: column;
  gap: 10px; align-items: flex-start;
  animation: fadeUp .7s var(--ease) .8s both;
}

/* ⑥ ステータス */
.cta-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8);
  margin-bottom: 2px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  animation: ripple 2.2s ease-out infinite;
}
@keyframes ripple {
  0%   { box-shadow: 0 0 0 0 rgba(61,184,122,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(61,184,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,184,122,0); }
}

/* メインボタン */
.btn-primary {
  display: inline-flex; align-items: stretch;
  border-radius: 14px; overflow: hidden;
  background: var(--white); border: none; cursor: pointer;
  font-family: var(--font-base);
  box-shadow: 0 3px 0 rgba(0,0,0,.14), 0 8px 32px rgba(0,0,0,.18);
  transition: transform .22s var(--ease), box-shadow .22s ease;
  text-decoration: none;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(0,0,0,.14), 0 20px 48px rgba(0,0,0,.22);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.14);
}
.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 54px; flex-shrink: 0;
  background: var(--sky); font-size: 22px; line-height: 1;
  transition: background .22s ease;
}
.btn-primary:hover .btn-icon { background: var(--sky-dark); }
.btn-text {
  padding: 12px 22px 12px 15px;
  display: flex; flex-direction: column; gap: 3px; text-align: left;
}
.btn-label {
  font-size: 14px; font-weight: 800; color: var(--navy);
  letter-spacing: .01em; line-height: 1.2; white-space: nowrap;
}
.btn-note {
  font-size: 9.5px; font-weight: 600;
  color: var(--accent); letter-spacing: .03em; white-space: nowrap;
}

/* サブボタン */
.btn-sub {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-base); font-size: 12.5px; font-weight: 700;
  color: rgba(255,255,255,.62); padding: 3px 1px;
  position: relative; transition: color .22s ease; text-decoration: none;
}
.btn-sub::after {
  content: ""; position: absolute; bottom: 0; left: 1px; right: 1px;
  height: 1px; background: rgba(255,255,255,.3);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.btn-sub:hover { color: rgba(255,255,255,.92); }
.btn-sub:hover::after { transform: scaleX(1); }
.btn-sub-arrow { font-size: 13px; transition: transform .22s ease; }
.btn-sub:hover .btn-sub-arrow { transform: translateX(3px); }


/* ============================================================
   インフォバー
============================================================ */
.hero-infobar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center;
  border-top: 1px solid rgba(0,0,0,.06);
  animation: fadeUp .6s ease .98s both;
}
.ib-item {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 30px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid rgba(0,0,0,.055);
  font-size: 11px; font-weight: 700;
  color: var(--navy-mid); letter-spacing: .01em; white-space: nowrap;
}
.ib-item:last-child { border-right: none; }
.ib-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); flex-shrink: 0; }


/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes charaIn {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes illustUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes charaBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.72); }
}
@keyframes balloonIn {
  from { opacity: 0; transform: scale(.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ============================================================
   BELOW SECTION
============================================================ */
.section-reasons { padding: 72px 6% 68px; background: #fff; }
.section-reasons .container { max-width: 1200px; margin: 0 auto; }
.sec-kicker {
  font-family: var(--font-ui); font-size: 10px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px; display: block;
}
.sec-h2 {
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 900;
  letter-spacing: -.048em; color: var(--text); margin-bottom: 36px; line-height: 1.2;
}
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reason-card {
  border: 1px solid rgba(0,0,0,.06); border-radius: 18px;
  padding: 24px 20px; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.055);
  transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease;
}
.reason-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06), 0 22px 52px rgba(0,0,0,.09);
  border-color: rgba(78,159,209,.2);
}
.reason-num {
  font-family: var(--font-ui); font-size: 28px; font-weight: 800;
  letter-spacing: -.04em; color: var(--accent); margin-bottom: 12px; line-height: 1;
}
.reason-h { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.reason-p { font-size: 12.5px; line-height: 1.88; color: var(--muted); }


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1080px) {
  .hero-h1 { font-size: clamp(22px, 3.4vw, 38px); }
  .gnav { display: none; }
  .hamburger { display: flex; }
  .header-cta { display: none; }
}

@media (max-width: 767px) {
  :root { --header-h: 56px; }
  .hero { max-height: none; }
  .hero-sky { height: 55%; }
  .hero-inner {
    grid-template-columns: 1fr;
    padding: calc(var(--header-h) + 16px) 5% 100px;
    gap: 0; align-items: start;
  }
  .hero-chara-wrap {
    position: absolute; right: 2%; top: calc(var(--header-h) + 4px);
    height: auto; width: 40%; max-width: 160px;
    align-items: center; justify-content: flex-end;
    flex-direction: column; gap: 0;
  }
  .hero-chara-img { width: 100%; max-width: none; }
  .hero-name-svg { width: 100%; max-width: none; margin-top: -10%; }
  .hero-studio-label { display: none; }
  .chara-balloon { display: none; }
  .hero-copy { padding-right: 40%; }
  .hero-eyebrow { font-size: 8px; padding: 4px 10px; margin-bottom: 10px; }
  .hero-h1 { font-size: clamp(20px, 7vw, 30px); margin-bottom: 10px; }
  .hero-lead { font-size: 12px; line-height: 1.85; margin-bottom: 18px; }
  .cta-status { font-size: 10px; }
  .btn-icon { width: 46px; font-size: 19px; }
  .btn-label { font-size: 13px; }
  .btn-note { font-size: 9px; }
  .btn-text { padding: 11px 16px 11px 12px; }
  .hero-illust { width: 150%; bottom: -2%; }
  .hero-infobar { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .hero-infobar::-webkit-scrollbar { display: none; }
  .ib-item { padding: 9px 20px; font-size: 10.5px; flex-shrink: 0; }
  .section-reasons { padding: 52px 5% 48px; }
  .reasons-grid { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 390px) {
  .hero-chara-wrap { width: 32%; }
  .hero-copy { padding-right: 36%; }
  .hero-h1 { font-size: 6.6vw; }
}