﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Shippori+Mincho:wght@600;700&display=swap');

:root{
  --bg:#f6fbff;
  --bg2:#fff3f8;
  --text:#0b1220;
  --muted:#334155;
  --line: rgba(15,23,42,.14);
  --line2: rgba(15,23,42,.18);
  --shadow: 0 24px 80px rgba(15,23,42,.16);
  --shadow2: 0 18px 48px rgba(45,83,255,.18);
  --blue:#2d8cff;
  --blue2:#2d53ff;
  --pink:#ff6fae;
  --pink2:#ff3e95;
  --hl:#2d53ff;
  --hl2:#ff3e95;
  --hero-photo: url('./bg.png');
  --container: 1120px;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
  --font-display: "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body[data-hero-bg="2"]{ --hero-photo: url('./bg.png'); }
body{
  margin:0;
  font-family: var(--font-body);
  font-size:19px;
  color:var(--text);
  padding-top:72px;
  background: #fff1f6;
}

a{color:inherit; text-decoration:none}
strong{font-weight:900}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.srOnly{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.skip{
  position:absolute;
  left:-9999px; top:10px;
  padding:10px 12px;
  background:#fff;color:#000;
}
.skip:focus{left:10px; z-index:9999}

/* header */
.header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
}
.header__inner{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-weight:950;
  letter-spacing:.08em;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:26px;
}
.brand--sm{font-size:12px}
.brand__logo{
  width:40px;
  height:40px;
  display:block;
  object-fit:contain;
}
.brand--sm .brand__logo{
  width:18px;
  height:18px;
}
.brand__mark{
  width:14px; height:14px;
  background: var(--blue2);
  transform: skewX(-18deg);
}
.brand__text{white-space:nowrap}

.nav{display:flex; align-items:center; gap:10px}
.nav__toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
}
.nav__toggleLine{
  display:block;
  height:2px;
  margin:6px 10px;
  background: rgba(15,23,42,.78);
}
.nav__menu{display:flex; align-items:center; gap:10px}
.nav__link{
  padding:10px 12px;
  color: rgba(15,23,42,.78);
  font-weight:900;
  letter-spacing:.02em;
  border-bottom: 2px solid transparent;
  font-size:16px;
}
.nav__link:hover{border-bottom-color: rgba(45,140,255,.45)}
.nav__link.isActive{border-bottom-color: rgba(255,62,149,.55)}
.nav__cta{
  padding:10px 14px;
  border:1px solid rgba(45,83,255,.30);
  background: rgba(45,83,255,.12);
  font-weight:900;
  font-size:16px;
  letter-spacing:.02em;
  border-radius:10px;
  min-width:180px;
  text-align:center;
}
.nav__cta--green{
  padding:10px 16px;
  border:0;
  background: linear-gradient(180deg, #2fd148, #12a22a);
  color:#fff;
  box-shadow: 0 10px 24px rgba(18,162,42,.22);
}
.nav__cta--green .cta-free{
  color:#ffe45a;
}
.nav__cta--orange{
  padding:10px 16px;
  border:0;
  background: linear-gradient(180deg, #ff9a3a, #f07a12);
  color:#fff;
  box-shadow: 0 10px 24px rgba(240,122,18,.22);
}
.nav__cta--orange .cta-free{
  color:#ffe45a;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 18px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.92);
  font-weight:1000;
  letter-spacing:.01em;
  font-size:16px;
}
.btn--primary{
  border-color: rgba(45,83,255,.34);
  background: rgba(45,83,255,.18);
  box-shadow: var(--shadow2);
}
.btn--ghost{background: rgba(255,255,255,.55)}
.btn--line{background: rgba(255,255,255,.80)}
.btn:hover{filter:brightness(1.02)}
.w100{width:100%}
.br-sp{display:none}

/* hero */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hero-photo) center/cover no-repeat;
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.02);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.80);
}
.hero__inner{
  position:relative;
  z-index:1;
  min-height: min(460px, calc(100vh - 72px));
  padding: 18px 0 0;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:end;
}
.hero__copy{
  padding-left: clamp(8px, 2vw, 24px);
  align-self:start;
  padding-top: 10px;
}
.hero__badgeRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 10px;
}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background: linear-gradient(90deg, #2d53ff, #ff3e95);
  color:#fff;
  font-weight:900;
  font-size:13px;
  letter-spacing:.04em;
  box-shadow: 0 14px 30px rgba(45,83,255,.22);
}
.hero__badge--pink{
  background: linear-gradient(90deg, #ff6fae, #ff9a3a);
  color:#fff;
}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(15,23,42,.72);
  font-size:28px;
}
.kicker__dot{
  width:10px;height:10px;
  background: var(--pink2);
  transform: skewX(-18deg);
}
.hero__title{
  margin:16px 0 0;
  font-size: clamp(54px, 6.4vw, 96px);
  line-height:1;
  letter-spacing:-.03em;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow: visible;
}
.hero__title span{
  white-space: nowrap;
}
.hero__titleEm{
  padding-top: 12px;
  background: none;
  color: inherit;
}
.hero__titleRuby{
  display:inline-flex;
  gap:0;
}
.heroRuby{
  position:relative;
  display:inline-block;
  padding-top:0.24em;
  overflow: visible;
  z-index:1;
  background: linear-gradient(90deg, var(--blue2), var(--pink2));
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.heroRuby--pass{
  margin-right:0.1em;
}

.heroRt{
  position:absolute;
  top:-28%;
  left:50%;
  transform: translate(-50%, -0.2em);
  font-size: clamp(32px, .22em, 32px);
  letter-spacing:.08em;
  background: linear-gradient(90deg, var(--blue2), var(--pink2));
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight:800;
  line-height:2;
  white-space:nowrap;
  z-index:2;
}
.hero__title strong{
  background: linear-gradient(90deg, var(--blue2), var(--pink2));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}
.hero__lead{
  margin:14px 0 0;
  color: rgba(15,23,42,.76);
  line-height:1.95;
  font-weight:650;
  max-width: 46ch;
  font-size:22px;
}
.hero__actions{
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.trustRow{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.trustItem{
  padding:10px 12px;
  background: rgba(255,255,255,.78);
  font-weight:900;
  color: rgba(15,23,42,.76);
  font-size:14px;
}
.trustItem--emphasis{
  background: rgba(45,83,255,.18);
  color: rgba(15,23,42,.9);
  box-shadow: 0 12px 40px rgba(45,83,255,.18);
}
.fine{margin:10px 0 0; color: rgba(15,23,42,.58); font-size:12px}

.hero__right{display:grid; gap:0; align-self:end}

.heroPerson{
  position:relative;
  height: min(560px, calc(100vh - 100px));
  align-self:end;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.heroPerson__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 38% 12%;
  display:block;
  filter: none;
  transform: scaleX(-1);
}

.hl{color: var(--hl); font-weight:1000}
.hl2{color: var(--hl2); font-weight:1000}

/* placeholders */
.avatarPlaceholder,
.photoPlaceholder,
.logoPlaceholder{
  border:1px solid rgba(15,23,42,.18);
  background: #eef2f7;
  color: rgba(15,23,42,.70);
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.avatarPlaceholder{width:72px;height:72px}
.avatarPlaceholder span{font-size:11px; padding:8px}
.photoPlaceholder{padding:10px}
.photoPlaceholder--scene{aspect-ratio: 16 / 10}
.photoPlaceholder--doc{aspect-ratio: 16 / 10}
.photoPlaceholder--square{aspect-ratio: 1 / 1}
.photoPlaceholder span{font-size:11px}

/* sections */
.section{padding:70px 0}
.section--soft{
  background: #eef4ff;
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.section__head{max-width:760px; margin:0 0 18px}
.section__eyebrow{
  margin:0 0 10px;
  font-size:24px;
  font-weight:900;
  color: rgba(45,83,255,.9);
  letter-spacing:.04em;
}
.section__title{
  margin:0;
  font-size:40px;
  letter-spacing:-.01em;
  font-family: var(--font-display);
  color: #0b1220;
}
.section__desc{margin:12px 0 0; color:var(--muted); line-height:1.9; font-size:20px; font-weight:700}

/* problems (redesign) */
.problems__head{
  text-align:center;
  margin:0 0 60px;
}
.problems__eyebrow{
  margin:10px 0 6px;
  font-size:26px;
  font-weight:900;
  color: rgba(45,83,255,.9);
}
.problems__title{
  margin:0;
  font-size:40px;
  letter-spacing:-.01em;
}
.problems__titleBreak{
  display:inline;
}
.problemList{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.problemItem{
  display:flex;
  align-items:center;
  gap:16px;
  background: #fff;
  border-radius:10px;
  padding:20px 22px;
  border:1px solid rgba(45,83,255,.14);
}
.problemNum{
  width:60px;
  height:60px;
  border-radius:999px;
  background: #ff3e95;
  color:#fff;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  letter-spacing:.02em;
  flex:0 0 auto;
}
.problemNum__label{
  font-size:12px;
}
.problemNum__value{
  line-height:1;
  font-size:24px;
}
.problemText{
  margin:0;
  font-size:21px;
  font-weight:900;
  color: rgba(15,23,42,.9);
}
.problems__arrow{
  width:0;
  height:0;
  margin:40px auto 40px;
  border-left:120px solid transparent;
  border-right:120px solid transparent;
  border-top:60px solid rgba(45,83,255,.85);
}
.problems__note{
  margin:22px 0 0;
  font-weight:900;
  color: #0b1220;
  font-size:34px;
  text-align:center;
}
.problems__noteEm{
  display:inline-block;
  position:relative;
  padding:0 6px;
  font-size:52px;
  z-index:0;
}
.problems__noteEm::after{
  content:"";
  position:absolute;
  left:-4px;
  right:-4px;
  bottom:0.12em;
  height:0.5em;
  background: rgba(255,62,149,.55);
  z-index:-1;
  border-radius:6px;
}

/* reasons */
.reasons{
  background:
    radial-gradient(circle at top right, rgba(45,83,255,.1), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 58%, #f4f8ff 100%);
  position:relative;
}
.reasons::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(45,83,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,83,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.45), transparent 78%);
  pointer-events:none;
}
.reasons__head{
  text-align:center;
  margin:0 0 30px;
  max-width: 860px;
  margin-left:auto;
  margin-right:auto;
}
.reasons__eyebrow{
  margin:0 0 10px;
  font-size:26px;
  font-weight:900;
  color: rgba(45,83,255,.9);
  letter-spacing:.06em;
}
.reasons__title{
  margin:0;
  font-size:40px;
  letter-spacing:-.01em;
  display:inline-block;
  padding-bottom:6px;
}
.reasons__desc{
  margin:14px auto 0;
  max-width:760px;
  color: rgba(15,23,42,.72);
  line-height:1.95;
  font-size:19px;
  font-weight:700;
}
.reasons__descEm{
  color: rgba(15,23,42,.96);
  background: linear-gradient(transparent 58%, rgba(255,225,97,.72) 58%);
}
.reasons__summary{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
  margin:0 0 32px;
}
.reasons__summaryItem{
  position:relative;
  min-height:170px;
  padding:24px 22px 22px;
  border-radius:22px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(45,83,255,.1);
  box-shadow: 0 18px 34px rgba(45,83,255,.08);
  overflow:hidden;
}
.reasons__summaryItem::after{
  content:"";
  position:absolute;
  inset:auto -30px -36px auto;
  width:110px;
  height:110px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(45,83,255,.16), rgba(45,83,255,0));
}
.reasons__summaryLabel{
  margin:0;
  font-size:14px;
  font-weight:900;
  color: rgba(45,83,255,.88);
  letter-spacing:.08em;
}
.reasons__summaryText{
  margin:14px 0 0;
  font-size:25px;
  line-height:1.5;
  font-weight:900;
  color:#0b1220;
}
.reasons__list{
  display:grid;
  gap:22px;
}
.reason{
  position:relative;
  display:block;
  background: rgba(255,255,255,.8);
  border:1px solid rgba(45,83,255,.12);
  box-shadow: 0 24px 56px rgba(45,83,255,.09);
  backdrop-filter: blur(10px);
  padding:34px;
  border-radius:28px;
  overflow:hidden;
}
.reason::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background: linear-gradient(180deg, rgba(45,83,255,.9), rgba(45,83,255,0));
}
.reason__media{
  position:absolute;
  top:34px;
  right:34px;
  width:min(30%, 320px);
}
.reason__intro{
  max-width: calc(100% - 360px);
}
.reason__topline{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.reason__benefit{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  border-radius:999px;
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.84);
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.reason__lead{
  margin:0;
  color: rgba(15,23,42,.92);
  font-size:24px;
  font-weight:900;
  line-height:1.65;
}
.reason__header{
  display:flex;
  align-items:center;
  gap:18px;
}
.reason__label{
  font-size:14px;
  font-weight:900;
  color: rgba(45,83,255,.9);
  letter-spacing:.08em;
}
.reason__num{
  font-size:36px;
  font-weight:900;
  color: rgba(45,83,255,.9);
  line-height:1;
}
.reason__marker{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:8px 0;
}
.reason__title{
  margin:0;
  font-size:34px;
  font-weight:900;
  color: rgba(15,23,42,.92);
  line-height:1.4;
}
.reason__text{
  margin:16px 0 0;
  color: rgba(15,23,42,.72);
  line-height:1.85;
  font-size:21px;
  font-weight:700;
}
.reason__panel{
  margin-top:22px;
  padding:20px 22px 22px;
  border-radius:20px;
  background: linear-gradient(180deg, rgba(245,248,255,.98), rgba(237,244,255,.96));
  border:1px solid rgba(45,83,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.reason__panelTitle{
  margin:0;
  font-size:22px;
  font-weight:900;
  color: rgba(45,83,255,.92);
  letter-spacing:.04em;
}
.reason__chips{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.reason__chips li{
  position:relative;
  min-height:98px;
  padding:16px 16px 16px 48px;
  border-radius:20px;
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.82);
  font-size:20px;
  font-weight:800;
  line-height:1.5;
  border:1px solid rgba(15,23,42,.05);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
  display:flex;
  align-items:center;
}
.reason__chips li::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background: linear-gradient(180deg, #5d7cff, #2d53ff);
  box-shadow: 0 6px 14px rgba(45,83,255,.24);
  transform: translateY(-50%);
}
.reason__chips li::after{
  content:"";
  position:absolute;
  left:20px;
  top:50%;
  width:6px;
  height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform: translateY(-65%) rotate(45deg);
}
.reason__subtext{
  margin:14px 0 0;
  color: rgba(15,23,42,.68);
  line-height:1.8;
  font-size:18px;
  font-weight:700;
}
.reason__visual{
  position:relative;
  min-height:380px;
  border-radius:0;
  overflow:hidden;
}
.reason__visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  max-width:none;
  margin-left:0;
}
.reason__visualOverlay{
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:1;
  padding:0;
}
.reason__visualLabel{
  margin:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
  color: rgba(255,255,255,.78);
}
.reason__visualText{
  margin:10px 0 0;
  font-size:20px;
  line-height:1.55;
  font-weight:900;
  color:#fff;
}
.reason--it{
  border-color: rgba(45,83,255,.2);
  box-shadow: 0 18px 44px rgba(45,83,255,.12);
}
.reason--custom{
  border-color: rgba(255,62,149,.18);
  box-shadow: 0 18px 44px rgba(255,62,149,.12);
}
.reason--custom::before{
  background: linear-gradient(180deg, rgba(255,62,149,.95), rgba(255,62,149,0));
}
.reason--custom .reason__marker{
  position:relative;
}
.reason--custom .reason__marker::after{
  content:"";
  width:44px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, #ff3e95, #ff8cbf);
}
.reason--custom .reason__label,
.reason--custom .reason__num{
  color: rgba(214,29,112,.94);
}
.reason--custom .reason__panel{
  background: linear-gradient(180deg, rgba(255,247,251,.98), rgba(255,239,246,.98));
  border-color: rgba(255,62,149,.16);
}
.reason--custom .reason__panelTitle{
  color: rgba(214,29,112,.94);
}
.reason--custom .reason__chips li::before{
  background: linear-gradient(180deg, #ff70ad, #ff3e95);
  box-shadow: 0 6px 14px rgba(255,62,149,.24);
}
.reason--custom .reason__benefit{
  background: rgba(255,62,149,.1);
  color: rgba(214,29,112,.96);
}
.reason--it .reason__marker{
  position:relative;
}
.reason--it .reason__marker::after{
  content:"";
  width:44px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, #2d53ff, #78a6ff);
}
.reason--it .reason__title{
  color: rgba(14,30,83,.96);
}
.reason--it .reason__benefit{
  background: rgba(45,83,255,.1);
  color: rgba(45,83,255,.96);
}
.reason--it::before{
  background: linear-gradient(180deg, rgba(45,83,255,.95), rgba(45,83,255,0));
}
.reason--online{
  border-color: rgba(45,83,255,.18);
  box-shadow: 0 18px 44px rgba(45,83,255,.12);
}
.reason--online::before{
  background: linear-gradient(180deg, rgba(45,83,255,.95), rgba(45,83,255,0));
}
.reason--online .reason__marker{
  position:relative;
}
.reason--online .reason__marker::after{
  content:"";
  width:44px;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, #2d53ff, #7c94ff);
}
.reason--online .reason__label,
.reason--online .reason__num{
  color: rgba(45,83,255,.94);
}
.reason--online .reason__panel{
  background: linear-gradient(180deg, rgba(246,248,255,.98), rgba(238,242,255,.98));
  border-color: rgba(45,83,255,.16);
}
.reason--online .reason__panelTitle{
  color: rgba(45,83,255,.94);
}
.reason--online .reason__chips li::before{
  background: linear-gradient(180deg, #7c94ff, #2d53ff);
  box-shadow: 0 6px 14px rgba(45,83,255,.24);
}
.reason--online .reason__title{
  color: rgba(28,45,120,.96);
}
.reason--online .reason__benefit{
  background: rgba(45,83,255,.1);
  color: rgba(45,83,255,.96);
}

/* tailor-made section */
.tailorSection{
  background:
    radial-gradient(circle at top left, rgba(255,62,149,.12), transparent 28%),
    linear-gradient(180deg, #fff8fb 0%, #ffffff 38%, #f7fbff 100%);
}
.tailorSection__head{
  max-width:860px;
  margin:0 auto 18px;
  text-align:center;
}
.tailorSection__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}
.tailorCard{
  display:grid;
  gap:14px;
  padding:22px 20px;
  border-radius:18px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.tailorCard__visual{
  aspect-ratio: 16 / 10;
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(180deg, #fff8fb, #f5f9ff);
  border:1px solid rgba(45,83,255,.08);
}
.tailorCard__visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.tailorCard__num{
  margin:0;
  font-size:28px;
  font-weight:900;
  color: rgba(214,29,112,.88);
  letter-spacing:.08em;
}
.tailorCard__title{
  margin:0;
  min-height:2.7em;
  display:flex;
  align-items:flex-start;
  font-size:28px;
  line-height:1.35;
  color:#0b1220;
}
.tailorCard__text{
  margin:0;
  color: rgba(15,23,42,.72);
  line-height:1.8;
  font-size:16px;
  font-weight:700;
}
.tailorCard__points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.tailorCard__points li{
  position:relative;
  margin:0;
  padding-left:24px;
  color: rgba(15,23,42,.82);
  font-size:16px;
  font-weight:800;
  line-height:1.65;
}
.tailorCard__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:10px;
  height:10px;
  border-radius:50%;
  background: linear-gradient(180deg, #ff6fae, #2d53ff);
}
.tailorProcess{
  margin-top:24px;
  padding:22px;
  border-radius:22px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(243,247,255,.96));
  border:1px solid rgba(45,83,255,.12);
  box-shadow: 0 20px 48px rgba(45,83,255,.08);
}
.tailorProcess__eyebrow{
  margin:0;
  font-size:16px;
  font-weight:900;
  color: rgba(45,83,255,.88);
  letter-spacing:.08em;
}
.tailorProcess__title{
  margin:8px 0 0;
  font-size:34px;
  line-height:1.4;
  color:#0b1220;
}
.tailorProcess__steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.tailorStep{
  padding:18px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(45,83,255,.12);
}
.tailorStep__badge{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(45,83,255,.1);
  color: rgba(45,83,255,.96);
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
}
.tailorStep__text{
  margin:12px 0 0;
  color: rgba(15,23,42,.78);
  line-height:1.8;
  font-size:17px;
  font-weight:800;
}
.reason__media img{
  width:100%;
  max-width:none;
  display:block;
  border-radius:0;
  background:#fff;
  margin-left:0;
}

/* banner */
.banner{
  background: #3b3b3b;
  margin-top:-18px;
  padding:44px 0;
  position:relative;
  z-index:2;
}
.banner p{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
  text-align:center;
}
.banner__em{
  font-size:26px;
  font-weight:900;
  color: #ff6fae;
}
.banner__em--white{
  color: #ffe45a;
}
.bannerCta{
  background: #f3f4f6;
  padding:36px 0 40px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.bannerCta__inner{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.bannerCta__lead{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  font-size:24px;
  font-weight:400;
  color: rgba(15,23,42,.78);
  margin:0 0 6px;
}
.bannerCta__leadMark{
  display:inline-block;
  margin:0 10px;
  font-size:40px;
  color: var(--pink2);
  font-weight:700;
  line-height:1;
}
.bannerCta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:18px 26px;
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;
  border:0;
  text-decoration:none;
  border-radius:14px;
  width: min(520px, 100%);
  padding-left:28px;
  padding-right:28px;
  position:relative;
}
.bannerCta__btn--green{
  background: linear-gradient(180deg, #2fd148, #12a22a);
  box-shadow: 0 16px 40px rgba(18,162,42,.28);
}
.bannerCta__btn--green .cta-free{
  color:#ffe45a;
}
.bannerCta__btn--orange{
  background: linear-gradient(180deg, #ff9a3a, #f07a12);
  box-shadow: 0 16px 40px rgba(240,122,18,.28);
}
.bannerCta__btn--orange .cta-free{
  color:#ffe45a;
}
.bannerCta__badge{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:66px;
  height:66px;
  background:#fff;
  color:#14a32b;
  border-radius:50%;
  font-size:14px;
  line-height:1.05;
  font-weight:900;
}
.bannerCta__arrow{
  margin-left:auto;
}
.bannerCta__btn--orange .bannerCta__badge{
  color:#f07a12;
}
.bannerCta__sec{
  display:flex;
  align-items:flex-end;
  gap:4px;
}
.bannerCta__secNum{
  font-size:28px;
  line-height:1;
}
.bannerCta__secUnit{
  font-size:12px;
  line-height:1;
  margin-bottom:2px;
}
.bannerCta__text{
  font-size:28px;
  font-weight:900;
  text-align:center;
  flex:1;
}
.bannerCta__textMain{
  font-size:34px;
  font-weight:900;
}
.bannerCta__arrow{
  width:28px;
  height:28px;
  border-radius:50%;
  background: #fff;
  position:relative;
}
.bannerCta__arrow::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid #1aaa32;
  transform: translate(-35%, -50%);
}
.bannerCta__btn--orange .bannerCta__arrow::after{
  border-left-color: #f07a12;
}

/* problems */
.checks{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.check{
  background: rgba(255,255,255,.92);
  padding:28px 18px 28px 62px;
  font-weight:900;
  position:relative;
  font-size:18px;
  box-shadow: 0 10px 26px rgba(45,83,255,.08);
  border:1px solid rgba(45,83,255,.14);
}
.check__label{
  position:absolute;
  left:14px;
  top:14px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  color: rgba(45,83,255,.95);
}
.check::before{
  content:"";
  position:absolute;
  left:14px; top:14px;
  width:36px; height:36px;
  background: #fff;
  border:2px solid rgba(45,83,255,.65);
  border-radius:999px;
}
.check::after{
  content:none;
}

/* cards */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.card{
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
  padding:20px;
}
.card--accent{
  background: #f5f7ff;
}
.card__title{margin:0; font-size:22px}
.card__text{margin:10px 0 0; color: rgba(15,23,42,.74); line-height:1.8; font-size:17px}
.bullets{margin:14px 0 0; padding-left:18px; color: rgba(15,23,42,.74); line-height:1.8; font-size:16px}

/* sample */
.sampleWrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start}
.sample{
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 70px rgba(15,23,42,.10);
  padding:14px;
}
.sample__top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.sample__title{font-weight:1000; font-size:18px}
.sample__tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{
  padding:8px 10px;
  border:1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.70);
  font-weight:950;
  cursor:pointer;
  font-size:14px;
}
.tab.isActive{
  border-color: rgba(45,83,255,.26);
  background: rgba(45,83,255,.14);
}
.editor{margin-top:12px; border:1px solid rgba(15,23,42,.16); background: rgba(255,255,255,.86)}
.editor.isHidden{display:none}
.editor__head{display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid rgba(15,23,42,.12); background: rgba(15,23,42,.04)}
.traffic{display:flex; gap:6px}
.traffic span{width:10px;height:10px;border-radius:999px;background: rgba(15,23,42,.14); border:1px solid rgba(15,23,42,.10)}
.traffic span:nth-child(1){background: rgba(255,111,174,.30)}
.traffic span:nth-child(2){background: rgba(45,140,255,.24)}
.traffic span:nth-child(3){background: rgba(15,23,42,.10)}
.editor__file{color: rgba(15,23,42,.70); font-weight:850; font-size:12px}
.editor__body{display:grid; grid-template-columns: 1fr 1fr; gap:10px; padding:12px}
.label{font-weight:1000; font-size:12px; color: rgba(15,23,42,.70)}
.code{
  margin:8px 0 0;
  padding:12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:13px;
  line-height:1.8;
  white-space:pre-wrap;
}
.callouts{padding:0 12px 12px}
.callout{padding:10px; border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.82); color: rgba(15,23,42,.74); font-weight:750; line-height:1.7}
.callout b{font-weight:1000}
.sample__foot{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:8px 10px; border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.70); font-weight:950; font-size:13px; color: rgba(15,23,42,.72)}

/* results */
.results{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.result{background: rgba(255,255,255,.88); padding:18px; box-shadow: 0 16px 50px rgba(15,23,42,.08)}
.result__k{color: rgba(15,23,42,.66); font-weight:950; font-size:12px}
.result__v{margin-top:6px; font-size:34px; font-weight:1100}
.result__s{margin-top:2px; color: rgba(15,23,42,.58); font-weight:900; font-size:12px}
.uniGrid{margin-top:14px; display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:10px}
.logoPlaceholder{min-height:58px}
.logoPlaceholder span{font-size:11px; padding:8px}

/* mentors */
.mentorGrid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px}
.mentor{border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.86); box-shadow: 0 12px 46px rgba(15,23,42,.08); padding:14px}
.mentor__name{margin:12px 0 0; font-size:20px}
.mentor__text{margin:10px 0 0; color: rgba(15,23,42,.74); line-height:1.75; font-size:16px}
.mentor__tags{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.mentor__tags span{padding:8px 10px; border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.70); font-weight:950; font-size:12px; color: rgba(15,23,42,.72)}

/* pricing */
.pricing{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; align-items:stretch}
.price{border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.86); padding:16px; box-shadow: 0 12px 46px rgba(15,23,42,.08)}
.price--hot{
  border-color: rgba(45,83,255,.18);
  background: #f5f7ff;
  box-shadow: 0 22px 80px rgba(45,83,255,.14);
}
.price__flag{display:inline-flex; padding:8px 10px; border:1px solid rgba(45,83,255,.26); background: rgba(45,83,255,.12); font-weight:1000; font-size:12px}
.price__name{margin:12px 0 0; font-size:20px}
.price__value{margin:10px 0 0; font-size:32px; font-weight:1100}
.price__value span{font-size:12px; font-weight:900; color: rgba(15,23,42,.62)}
.price__list{margin:12px 0 16px; padding-left:18px; color: rgba(15,23,42,.74); line-height:1.8}

/* faq (pass-way) */
.faqBlock{
  padding:70px 0;
  background: #fff1f6;
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.faqBlock__head{
  text-align:center;
  margin:0 auto 28px;
  max-width:var(--container);
}
.faqList{
  display:grid;
  gap:14px;
  max-width:var(--container);
  margin:0 auto;
}
.faqItem{
  border:0;
  background:none;
}
.faqQ{
  position:relative;
  cursor:pointer;
  padding:18px 42px 18px 16px;
  display:flex;
  align-items:center;
  gap:16px;
  font-weight:1000;
  font-size:19px;
  list-style:none;
  background: rgba(255,247,251,.88);
  border:1px solid rgba(45,83,255,.14);
  border-radius:12px;
  color: rgba(15,23,42,.9);
}
.faqQ::-webkit-details-marker{display:none}
.faqQ::after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  transform: translateY(-50%);
  font-size:28px;
  font-weight:900;
  color: var(--pink2);
}
.faqItem[open] .faqQ{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.faqItem[open] .faqQ::after{
  content:"−";
  color: var(--blue2);
}
.faqQ__icon{
  font-size:26px;
  font-weight:1000;
  color: var(--blue2);
  flex:0 0 auto;
}
.faqQ__text{
  line-height:1.6;
}
.faqA{
  display:flex;
  gap:16px;
  padding:16px 16px 20px;
  border:1px solid rgba(45,83,255,.14);
  border-top:0;
  border-radius:0 0 12px 12px;
  background:#fff;
  color: rgba(15,23,42,.78);
  line-height:1.8;
  font-size:17px;
}
.faqA__icon{
  font-size:24px;
  font-weight:1000;
  color: var(--pink2);
  flex:0 0 auto;
}
.faqA__body p{
  margin:0;
}

/* pricing plan */
.pricingPlan{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, #fff0f6 0%, #ffffff 60%);
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.pricingPlan .container{
  position:relative;
  z-index:1;
}
.pricingPlan::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-160px;
  width:340px;
  height:340px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,62,149,.25), rgba(255,62,149,0) 60%);
}
.pricingPlan::after{
  content:"";
  position:absolute;
  bottom:-140px;
  left:-160px;
  width:360px;
  height:360px;
  border-radius:50%;
  background: radial-gradient(circle at 70% 70%, rgba(45,83,255,.22), rgba(45,83,255,0) 60%);
}
.pricingPlan__head{
  text-align:center;
  margin:0 auto 32px;
  max-width:var(--container);
}
.pricingPlan__head .section__desc{
  font-size:22px;
}
.planIntro{
  margin:0 auto 22px;
  max-width:880px;
  padding:0;
  color: rgba(45,83,255,.78);
  font-size:17px;
  font-weight:700;
  line-height:1.9;
  text-align:center;
}
.planGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}
.planCard{
  background: #eef4ff;
  border-radius:14px;
  padding:20px;
  display:grid;
  gap:14px;
  border:1px solid rgba(45,83,255,.12);
  box-shadow: 0 14px 40px rgba(45,83,255,.08);
}
.planCard--recommended{
  position:relative;
  overflow:visible;
  background: linear-gradient(180deg, #fff7fb 0%, #eef4ff 100%);
  border-color: rgba(255,62,149,.26);
  box-shadow: 0 18px 46px rgba(255,62,149,.14);
}
.planCard__head{
  display:block;
}
.planCard__recommend{
  position:absolute;
  left:50%;
  top:-14px;
  transform:translateX(-50%);
  margin:0;
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background: linear-gradient(90deg, #ff5b9f, #ff8a5b);
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow: 0 10px 20px rgba(255,91,159,.2);
  z-index:2;
}
.planCard__icon{
  width:44px;
  height:44px;
  border-radius:999px;
  border:3px solid rgba(45,83,255,.65);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:1000;
}
.planCard__title{
  margin:0;
  font-size:22px;
}
.planCard__body{
  display:grid;
  gap:10px;
}
.planCard__tag{
  width:fit-content;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(45,83,255,.22);
  color: rgba(45,83,255,.96);
  font-weight:900;
  font-size:12px;
  letter-spacing:.04em;
}
.planCard__bubble{
  position:relative;
  margin:0 0 4px;
  padding:12px 14px;
  background:#fff7e8;
  color:#6b3c12;
  border:1px solid rgba(240,122,18,.28);
  border-radius:14px;
  font-weight:800;
  font-size:14px;
  line-height:1.5;
}
.planCard__bubble::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:-8px;
  width:14px;
  height:14px;
  background:#fff7e8;
  border-left:1px solid rgba(240,122,18,.28);
  border-bottom:1px solid rgba(240,122,18,.28);
  transform: rotate(45deg);
}
.planCard__pill{
  background:#fff;
  border-radius:8px;
  padding:12px 14px;
  font-weight:900;
  color: rgba(15,23,42,.86);
  font-size:16px;
}
.planCard__meta{
  display:grid;
  gap:10px;
}
.planCard__metaItem{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:12px;
  align-items:center;
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
}
.planCard__metaItem:last-child{
  background: transparent;
  border-radius:0;
  padding:8px 0 0;
}
.planCard__metaItem:last-child .planCard__metaIcon{
  width:48px;
  height:48px;
  background: linear-gradient(180deg, rgba(255,62,149,.14), rgba(255,138,91,.16));
  color:#c21f68;
}
.planCard__metaItem:last-child .planCard__metaLabel{
  color: rgba(194,31,104,.78);
  font-size:14px;
}
.planCard__metaItem:last-child .planCard__metaValue{
  font-size:34px;
  line-height:1.05;
  color:#c21f68;
  letter-spacing:.01em;
}
.planCard__metaIcon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(45,83,255,.12);
  color: #1e3a8a;
}
.planCard__metaIcon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.planCard__metaText{
  display:grid;
  gap:2px;
}
.planCard__metaLabel{
  font-size:13px;
  font-weight:900;
  color: rgba(15,23,42,.66);
}
.planCard__metaValue{
  font-size:18px;
  font-weight:900;
  color: rgba(15,23,42,.92);
}
.planCard__note{
  font-size:12px;
  color: rgba(15,23,42,.6);
  margin-left:6px;
}
.planNote{
  margin:12px 0 0;
  text-align:right;
  color: rgba(15,23,42,.58);
  font-size:12px;
}

/* fit for you */
.fitForYou{
  background:
    radial-gradient(circle at top left, rgba(45,83,255,.10), transparent 24%),
    radial-gradient(circle at bottom right, rgba(255,62,149,.08), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.fitForYou__head{
  text-align:center;
  margin:0 auto 36px;
  max-width:900px;
}
.fitForYou__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:22px;
  max-width:1080px;
  margin:0 auto;
}
.fitCard{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:28px;
  align-items:center;
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,249,255,.96));
  border:1px solid rgba(45,83,255,.10);
  border-radius:26px;
  padding:30px 28px;
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
}
.fitCard::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background: linear-gradient(180deg, #2d53ff, #78a6ff);
}
.fitCard::after{
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width:180px;
  height:180px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(45,83,255,.14), rgba(45,83,255,0) 68%);
  pointer-events:none;
}
.fitCard__meta{
  display:grid;
  gap:14px;
}
.fitCard__eyebrow{
  margin:0;
  width:fit-content;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(45,83,255,.10);
  color: rgba(45,83,255,.96);
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
}
.fitCard__lead{
  margin:0;
  font-size:34px;
  font-weight:1000;
  line-height:1.3;
  letter-spacing:-.02em;
  color:#0b1220;
  white-space:nowrap;
}
.fitCard__text{
  margin:0;
  font-size:24px;
  line-height:1.65;
  color: rgba(15,23,42,.78);
  font-weight:700;
  align-self:center;
}
.fitCard--pink{
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,245,250,.96));
  border-color: rgba(255,62,149,.12);
}
.fitCard--pink::before{
  background: linear-gradient(180deg, #ff3e95, #ff8cbf);
}
.fitCard--pink::after{
  background: radial-gradient(circle, rgba(255,62,149,.16), rgba(255,62,149,0) 68%);
}
.fitCard--pink .fitCard__eyebrow{
  background: rgba(255,62,149,.10);
  color: rgba(214,29,112,.96);
}
.fitCard--accent{
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,244,249,.96));
  border-color: rgba(220,96,146,.12);
}
.fitCard--accent::before{
  background: linear-gradient(180deg, #d96f9a, #f3a7c2);
}
.fitCard--accent::after{
  background: radial-gradient(circle, rgba(220,96,146,.16), rgba(220,96,146,0) 68%);
}
.fitCard--accent .fitCard__eyebrow{
  background: rgba(220,96,146,.10);
  color: rgba(163,60,101,.96);
}

/* promise */
.promise{
  background: #eef4ff;
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.promise__head{
  margin:0 auto 26px;
  max-width:var(--container);
  text-align:center;
}
.promise__title{
  margin:0;
  font-size:40px;
  line-height:1.6;
}
.promise__panel{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:22px;
  background:#fff;
  border-radius:18px;
  padding:22px;
  align-items:center;
  box-shadow: 0 16px 46px rgba(15,23,42,.10);
}
.promise__media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.promise__image{
  width:100%;
  min-height:220px;
  background:#e5e7eb;
  color:#475569;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}
.promise__catch{
  margin:0 0 8px;
  font-size:30px;
  font-weight:1000;
}
.promise__name{
  margin:0 0 14px;
  font-size:14px;
  color: rgba(15,23,42,.7);
}
.promise__text{
  margin:0;
  color: rgba(15,23,42,.72);
  line-height:1.95;
  font-size:18px;
}
.promise__grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
.promise__card{
  background:#fff;
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
.promise__card h3{
  margin:0 0 10px;
  font-size:21px;
}
.promise__card p{
  margin:0;
  color: rgba(15,23,42,.72);
  line-height:1.9;
  font-size:17px;
}

/* flow */
.flow{
  background: #eef4ff;
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.flow__head{
  text-align:center;
  margin:0 auto 28px;
  max-width:var(--container);
}
.flow__card{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  padding:28px 26px;
  box-shadow: 0 18px 60px rgba(15,23,42,.08);
}
.flowList{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:34px;
  position:relative;
}
.flowList::before{
  content:"";
  position:absolute;
  left:48px;
  top:12px;
  bottom:-60px;
  width:6px;
  background: rgba(45,83,255,.18);
  border-radius:999px;
}
.flowItem{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:24px;
  align-items:flex-start;
  position:relative;
  padding:8px 0;
}
.flowItem__badge{
  width:96px;
  height:96px;
  border-radius:999px;
  background: var(--blue2);
  color:#fff;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-direction:column;
  gap:4px;
  line-height:1.1;
  font-size:14px;
  letter-spacing:.04em;
}
.flowItem__badge span{
  display:block;
  font-size:34px;
}
.flowItem__title{
  margin:6px 0 8px;
  font-size:22px;
  font-weight:1000;
}
.flowItem__text{
  margin:0;
  color: rgba(15,23,42,.74);
  line-height:1.8;
  font-size:16px;
}
.flowItem__actions{
  margin-top:14px;
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  align-items:stretch;
}
.flowBtn{
  flex:1;
  width:100%;
  min-width:0;
  padding:14px 16px;
}
.flowBtn .bannerCta__text{font-size:20px}
.flowBtn .bannerCta__textMain{font-size:24px}
.flowBtn--phone{
  gap:12px;
}
.flowBtn__icon{
  font-size:26px;
  font-weight:900;
  margin-right:4px;
}
.flowBtn__phone{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.flowBtn__phoneNum{
  font-size:24px;
  font-weight:1000;
}
.flowBtn__phoneNote{
  font-size:12px;
  font-weight:700;
  opacity:.9;
}
.flowMini{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.flowMini span{
  padding:8px 12px;
  border-radius:999px;
  background: rgba(45,83,255,.08);
  border:1px solid rgba(45,83,255,.18);
  font-weight:900;
  font-size:12px;
  color: rgba(15,23,42,.8);
}
.flowStart{
  margin-top:36px;
  display:grid;
  grid-template-columns: 110px 1fr;
  align-items:center;
  gap:24px;
  position:relative;
}
.flowStart__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  border-radius:999px;
  background: var(--pink2);
  color:#fff;
  font-weight:1000;
  letter-spacing:.06em;
}
.flowStart__text{
  margin:0;
  font-size:22px;
  font-weight:1000;
  color: rgba(15,23,42,.88);
}

/* steps 4 */
.steps4{
  background: #eef4ff;
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.steps4__head{
  text-align:center;
  margin:0 auto 28px;
  max-width:var(--container);
}
.steps4__list{
  display:grid;
  gap:26px;
}
.steps4__item{
  display:grid;
  grid-template-columns: 240px 1fr 240px;
  gap:18px;
  align-items:center;
  background:#fff;
  border:0;
  padding:24px 22px;
  border-radius:22px;
  box-shadow: 0 18px 42px rgba(45,83,255,.08);
}
.steps4__label{
  background:#dbeafe;
  color:#1e3a8a;
  font-weight:900;
  font-size:22px;
  padding:26px 18px;
  text-align:center;
  border-radius:18px;
}
.steps4__body p{
  margin:0;
  color: rgba(15,23,42,.72);
  line-height:1.9;
  font-size:18px;
  font-weight:700;
}
.steps4__media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps4__image{
  width:100%;
  max-width:240px;
  display:block;
  border-radius:20px;
  border:1px solid rgba(45,83,255,.08);
  background:#fff;
}
.steps4__item--goal{
  background: transparent;
  border:0;
  padding:0;
}
.steps4__goalBanner{
  grid-column: 1 / -1;
  min-height:160px;
  border-radius:16px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,.55)),
    url('./bg.png') center/cover no-repeat;
  border:1px solid rgba(45,83,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.steps4__goalText{
  margin:0;
  font-size:64px;
  font-weight:900;
  letter-spacing:.18em;
  color:#ff4f8b;
  text-shadow:
    0 10px 24px rgba(255,79,139,.32),
    -2px 0 0 rgba(255,255,255,.9),
    2px 0 0 rgba(255,255,255,.9),
    0 -2px 0 rgba(255,255,255,.9),
    0 2px 0 rgba(255,255,255,.9),
    -2px -2px 0 rgba(255,255,255,.9),
    2px 2px 0 rgba(255,255,255,.9),
    -2px 2px 0 rgba(255,255,255,.9),
    2px -2px 0 rgba(255,255,255,.9);
}
.steps4__arrow{
  width:0;
  height:0;
  border-left:32px solid transparent;
  border-right:32px solid transparent;
  border-top:20px solid #8ab4ff;
  margin:6px auto;
}

/* cta */
.cta{padding:70px 0 90px}
.cta__inner{
  background: #ffffff;
  box-shadow: var(--shadow);
  padding:20px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.cta__badge{
  display:inline-flex;
  padding:8px 12px;
  background: rgba(45,83,255,.12);
  color: rgba(15,23,42,.75);
  font-weight:900;
  font-size:13px;
  margin:0 0 10px;
}
.cta__title{margin:0; font-size:40px; font-family: var(--font-display)}
.cta__desc{margin:12px 0 0; color: rgba(15,23,42,.74); line-height:1.9; font-size:20px; font-weight:700}
.cta__chips{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}
.cta__chips span{padding:8px 10px; border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.70); font-weight:950; font-size:12px; color: rgba(15,23,42,.72)}
.form2{display:grid; gap:10px}
.field{display:grid; gap:6px}
.field__label{font-size:13px; color: rgba(15,23,42,.74); font-weight:900}
.field__input{width:100%; padding:12px 12px; border:1px solid var(--line2); background: rgba(255,255,255,.96); outline:none}
.field__input:focus{border-color: rgba(45,140,255,.55); box-shadow: 0 0 0 4px rgba(45,140,255,.12)}
.field__textarea{resize:vertical; min-height:120px}

/* footer */
.footer{padding:26px 0 40px; border-top:1px solid var(--line); background: rgba(255,255,255,.6)}
.footer__inner{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.footer__text{margin:10px 0 0; color:rgba(15,23,42,.58); font-size:12px}
.footer__right{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.footer__link{padding:10px 12px; border:1px solid var(--line); background: rgba(255,255,255,.78); color: rgba(15,23,42,.72); font-weight:900}

/* toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:60;
  width:min(520px, calc(100% - 24px));
  padding:12px 14px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 80px rgba(15,23,42,.14);
  color: rgba(15,23,42,.92);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.isVisible{opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(-6px)}

/* reveal */
[data-reveal]{opacity:0; transform: translateY(12px); transition: opacity .45s ease, transform .6s cubic-bezier(.22,.82,.2,1)}
[data-reveal].isIn{opacity:1; transform: translateY(0)}

@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr}
  .hero__copy{text-align:center}
  .hero__actions{justify-content:center}
  .heroPerson{height: min(320px, 36vh)}
  .hero__title{align-items:center}
  .hero__title{margin-top:0}
  .hero__title{line-height:1.1; padding-top:0.4em}
  .heroRuby{padding-top:0.45em}
  .heroRt{transform: translate(-50%, -0.35em)}
  .problems__titleBreak{display:block}
  .problems__noteAfter{display:block}
  .kicker{font-size:20px}
  .hero__lead{font-size:18px}
  .section__title{font-size:32px}
  .section__desc{font-size:17px}
  .problemText{font-size:18px}
  .problems__arrow{
    border-left:80px solid transparent;
    border-right:80px solid transparent;
    border-top:40px solid rgba(45,83,255,.85);
    margin:18px auto 18px;
  }
  .reasons__desc{font-size:16px}
  .reasons__summary{
    grid-template-columns: 1fr;
  }
  .reasons__summaryText{
    font-size:24px;
  }
  .reason{
    display:grid;
    grid-template-columns: 1fr;
    padding:22px 20px;
    border-radius:22px;
  }
  .reason__media{
    position:static;
    width:auto;
  }
  .reason__intro{
    max-width:none;
  }
  .reason__lead{
    font-size:20px;
  }
  .reason__title{font-size:28px}
  .reason__text{font-size:18px}
  .reason__panelTitle{font-size:18px}
  .reason__chips{
    grid-template-columns: 1fr;
  }
  .reason__visual{
    min-height:340px;
    border-radius:0;
  }
  .reason__visualOverlay{
    left:14px;
    right:14px;
    bottom:14px;
    padding:0;
  }
  .reason__visualText{
    font-size:17px;
  }
  .reason__chips li{
    font-size:17px;
    min-height:auto;
  }
  .reason__chips li{
    border-radius:18px;
  }
  .tailorSection__grid{
    grid-template-columns: 1fr;
  }
  .tailorProcess{
    padding:20px 18px;
  }
  .tailorProcess__title{
    font-size:26px;
  }
  .tailorCard__title{font-size:24px}
  .tailorCard__text{font-size:16px}
  .tailorCard__points li{font-size:15px}
  .tailorProcess__steps{
    grid-template-columns: 1fr;
  }
  .bannerCta__text{font-size:20px}
  .bannerCta__textMain{font-size:24px; display:block}
  .checks{grid-template-columns: 1fr}
  .grid3{grid-template-columns: 1fr}
  .sampleWrap{grid-template-columns: 1fr}
  .editor__body{grid-template-columns: 1fr}
  .results{grid-template-columns: 1fr}
  .uniGrid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .mentorGrid{grid-template-columns: 1fr}
  .pricing{grid-template-columns: 1fr}
  .cta__inner{grid-template-columns: 1fr}
  .faqQ{
    font-size:19px;
    padding:16px 48px 16px 16px;
    gap:12px;
  }
  .faqQ__icon{font-size:22px}
  .faqA{font-size:17px; padding:14px 16px 18px}
  .faqA__icon{font-size:20px}
  .flow__card{padding:22px 18px}
  .flowItem{
    grid-template-columns: 1fr;
  }
  .flowList::before{
    left:44px;
    top:12px;
    bottom:-60px;
  }
  .flowItem__badge{
    width:88px;
    height:88px;
    margin-left:8px;
  }
  .flowItem__title{font-size:20px}
  .flowItem__badge span{font-size:30px}
  .flowBtn{
    width:100%;
  }
  .flowBtn__phoneNum{font-size:20px}
  .flowStart{
    grid-template-columns: 1fr;
    justify-items:start;
  }
  .planGrid{
    grid-template-columns: 1fr;
  }
  .fitForYou__grid{
    grid-template-columns: 1fr;
  }
  .fitCard{
    grid-template-columns: 1fr;
    gap:16px;
    padding:24px 20px;
    border-radius:22px;
  }
  .fitCard__lead{font-size:28px}
  .fitCard__lead{white-space:normal}
  .fitCard__text{font-size:18px; line-height:1.75}
  .planNote{
    text-align:left;
  }
  .promise__panel{
    grid-template-columns: 1fr;
  }
  .promise__grid{
    grid-template-columns: 1fr;
  }
  .steps4__item{
    grid-template-columns: 1fr;
    gap:12px;
  }
  .steps4__label{
    text-align:left;
  }
  .steps4__body p{
    font-size:18px;
  }
  .steps4__image{
    max-width:none;
  }
  .steps4__goalBanner{
    min-height:140px;
  }
  .steps4__goalText{
    font-size:52px;
  }
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav__menu{
    position:absolute; right:20px; top:72px;
    width:min(420px, calc(100vw - 40px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border:1px solid var(--line);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    overflow:hidden;
  }
  .nav__menu.isOpen{display:flex}
  .nav__link,.nav__cta{
    padding:14px 14px;
    border:0;
    border-top:1px solid rgba(15,23,42,.08);
  }
  .br-sp{display:block}
  .reasons__title{line-height:0.8}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important; transition:none!important; animation:none!important}
}
