:root{
  --accent:#18a59a;
  --accent-deep:#0f7d74;
  --accent-bright:#22c2b3;
  --accent-soft:#d6efec;
  --accent-tint:#ecf8f6;
  
  --c-teal:#18a59a;
  --c-blue:#2f6bd4;
  --c-yellow:#ffc233;
  --c-coral:#f5462f;
  --ink:#37413f;
  --ink-soft:#5e6664;
  --bg:#F3F0E8;
  --display-font:"Zen Kaku Gothic New", system-ui, sans-serif;
  --body-font:"Zen Kaku Gothic New", system-ui, sans-serif;
  --maxw:1140px;
  --r-blob1:62% 38% 55% 45% / 55% 48% 52% 45%;
  --r-blob2:42% 58% 46% 54% / 58% 42% 58% 42%;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--body-font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.95;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;overflow-x: clip;}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--display-font);
  font-weight:700;
  color:#fff;
  font-size:1rem;
  letter-spacing:.06em;
  margin:0 0 .9em;
  background: var(--ink);
  padding:9px 22px;
  border-radius:999px;
}
.eyebrow .dot{width:9px;height:9px;border-radius:50%;background:#fff;}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: color-burn;
  opacity: 1;
  border-radius: inherit;
}

.mascot{display:inline-block;flex:none;}

.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display-font);font-weight:900;font-size:1.45rem;color:var(--ink);letter-spacing:.02em;}
.brand .mascot{height: 30px;}
.topbar .cta{
  font-family:var(--display-font);font-weight:700;font-size:.98rem;
  background:var(--accent);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:999px;transition:background .2s,transform .2s;
  box-shadow:0 10px 22px -12px rgba(15,125,116,.7);
}
.topbar .cta:hover{background:var(--accent-deep);transform:translateY(-2px);}

.hero{position:relative;overflow:hidden;padding-bottom:120px;}
.hero .blob{position:absolute;z-index:0;}
.hero .blob.y1{width:640px;height:600px;background: linear-gradient(241deg, #ff8600, #ff4900);border-radius: 2000px 700px 600px 100px;top:-120px;right:-160px;opacity:.95;transform: rotate(45deg);}

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:0.95fr 1.05fr;gap:30px;align-items:center;padding:54px 0 30px;}
.hero-copy h1{
  font-weight:900;
  font-size: clamp(2.5rem,15.5vw,4.5rem);
  margin:0;
  color:var(--ink);
}
.hero-copy h1 .hl{
  color: #000000;
  background: linear-gradient(0deg, #fff410 90%, transparent 60%);
  padding-left: 8px;
  letter-spacing: -14%;
}
.hero-copy .mini{
  font-size: 90%;
}
.hero-copy .em-shun{
    color: #000000;
    font-weight: 900;
    letter-spacing: -5%;
    }
.hero-copy .sub{
  margin:1.6em 0 0;
  font-family:var(--display-font);
  font-weight:700;
  color: var(--ink-soft);
  font-size:clamp(1rem,1.6vw,1.25rem);
  line-height:1.7;
  
}
.hero-copy .sub .zabuton{
  background: white;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 440px));
  justify-content: center;
  gap: 28px;
}

.card-item {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 28px;
  padding: 10px 30px;

  min-height: 400px;
  display: grid;
  align-content: space-between;
  position: relative;
}

.card-item:first-child{
  background: linear-gradient(304deg, #de380f, #ffb153);
}

.card-item:last-child{
  background: linear-gradient(304deg, #0f5ede, #3af4ff);
}

.card-item .title{
  font-size: 65px;
  line-height: 65px;
  font-weight: 900;
  letter-spacing: -5%;
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  margin-bottom: 25px;
  margin-top: 40px;
  container-type: inline-size;
}

.card-item span{
  color: #000000;
}
.card-item span.ls{
  letter-spacing:-20%
}
.card-item span.sub{
  font-size: 18px;
  line-height: 20px;
}

.card-item .card-copy{
  display:block;
  width: calc(100% + 20px);
  text-align: right;
  color: white;
  margin: 0;
  font-size: 100px;
  font-weight:900;
  line-height: 100px;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.phone-cluster{position:relative;height:560px;}
.phone{
  position:absolute;
  background: #333030;
  border-radius:38px;
  padding:9px;
  box-shadow:0 40px 70px -30px rgba(31,80,75,.45),0 8px 20px -10px rgba(31,80,75,.25);
  border: 1px solid #a2a2a2;
}
.phone .screen{position:relative;border-radius:30px;overflow:hidden;background: linear-gradient(307deg, #d0d0d0, #ffffff);width:100%;height:100%;}
.slot-img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;}
.slot-img-phone{object-fit:cover;object-position:center top;}
.phone .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:34%;height:18px;background: #333030;border-radius:0 0 14px 14px;z-index:3;}
.phone.p1{width:248px;height:512px;left:6%;top:20px;transform:rotate(-8deg);z-index:2;}
.phone.p2{width:262px;height:540px;right:8%;top:0;transform:rotate(6deg);z-index:3;}
.phone.p3{width:210px;height:432px;right:30%;bottom:-26px;transform:rotate(-3deg);z-index:1;}

.band{position:relative;padding:96px 0;}

.section-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.section-head h2{font-family:var(--display-font);font-weight:900;font-size:clamp(1.9rem,3.4vw,2.9rem);margin:.2em 0 .4em;line-height:1.5;color:var(--ink);}
.section-head h2 .hl{color:var(--accent);}
.section-head p{color:var(--ink-soft);margin:0;font-size:1.05rem;line-height:1.95;}

.hop-stage{display:flex;align-items:flex-end;justify-content:center;max-width:860px;margin:18px auto 0;padding:56px 0 6px;}
.hop-item{position:relative;flex:none;text-align:center;}
.hop-item.h2x{margin-bottom:54px;}
.hop-item.h3x{margin-bottom:112px;}
.hop-num{
  position:absolute;top:-52px;left:24%;z-index:2;
  transform:rotate(-8deg);
  font-family:var(--display-font);font-weight:900;font-size:4.4rem;line-height:1;
  color:#fff;
  -webkit-text-stroke:10px #2c2c2c;
  paint-order:stroke fill;
  filter:drop-shadow(0 6px 0 rgba(31,80,75,.18));
}
.hop-item.h3x .hop-num{font-size:5rem;top:-60px;transform:rotate(-9deg);}
.hop-bubble{
  background:var(--nc,var(--c-teal));color:var(--non,#fff);
  border-radius:42% 58% 52% 48% / 55% 45% 58% 42%;
  display:flex;align-items:center;justify-content:center;padding:18px;
  box-shadow:0 20px 36px -20px rgba(31,80,75,.55);transition:transform .25s;
}
.hop-item:hover .hop-bubble{transform:translateY(-6px);}
.hop-item.h1 .hop-bubble{width: 173px;height: 140px;}
.hop-item.h2x .hop-bubble{width: 188px;height: 160px;border-radius:55% 45% 48% 52% / 45% 58% 42% 55%;}
.hop-item.h3x .hop-bubble{width: 219px;height: 168px;border-radius:48% 52% 58% 42% / 52% 48% 45% 58%;}
.hop-bubble .txt{font-family:var(--display-font);font-weight:700;font-size:1.02rem;line-height:1.6;}
.hop-bubble .txt mark{
  display:inline-block;
  font-weight:900;font-size:1.5rem;line-height:1.3;
  color:#fff;background:none;
  filter:drop-shadow(2px 3px 0 #4d4d4d);
  padding:0 .06em;margin-top:.1em;
}
.hop-bubble .txt mark.big{font-size:1.7rem;}
.hop-arc{flex:none;width:92px;height:74px;margin:0 -10px;overflow:visible;}
.hop-arc.a1{margin-bottom:138px;}
.hop-arc.a2{margin-bottom:212px;}

.cycle-vert{display:none;max-width:440px;margin:0 auto;}
.cycle-vert .step{position:relative;background:var(--nc,var(--c-teal));color:var(--non,#fff);border-radius:24px;padding:18px 22px;display:flex;align-items:center;gap:16px;margin-bottom:36px;box-shadow:0 16px 30px -20px rgba(31,80,75,.4);}
.cycle-vert .step .num{font-family:var(--display-font);font-weight:900;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--nc,var(--c-teal));flex:none;}
.cycle-vert .step .txt{font-family:var(--display-font);font-weight:700;font-size:1.04rem;line-height:1.45;}
.cycle-vert .step::after{content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid #c7d0ce;}

.cycle-vert .loop{text-align:center;margin-top:22px;}
.cycle-vert .loop span{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:11px 24px;border-radius:999px;font-family:var(--display-font);font-weight:700;font-size:.98rem;}

.cycle-foot{max-width:620px;margin:44px auto 0;text-align:center;color:var(--ink-soft);font-size:1.05rem;line-height:2;text-wrap:pretty;}

.deep-band{position:relative;background:var(--c-blue);color:#fff;padding:104px 0;}
.deep-band::before,.deep-band::after{content:"";position:absolute;left:0;right:0;height:60px;background:var(--bg);z-index:1;}
.deep-band::before{top:-1px;border-radius:0 0 60px 60px;}
.deep-band::after{bottom:-1px;border-radius:60px 60px 0 0;}
.deep-band .inner{position:relative;z-index:2;}
.deep-band .section-head h2{color:#fff;white-space: nowrap;}
.deep-band .section-head h2 .hl{color:var(--c-yellow);}
.deep-band .section-head p{color:#dde7fb;max-width: 400px;text-align: left;margin-left: auto;margin-right: auto;}

.need-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:stretch;max-width:980px;margin:0 auto;}
.need-card{background:#fff;border-radius:34px;padding:30px 34px 38px;position:relative;box-shadow:0 30px 60px -34px rgba(0,0,0,.45);}
.need-card .pill{
  display:block;
  text-align:center;
  font-family:var(--display-font);
  font-weight:900;
  font-size:1.3rem;
  color:#5a4300;
  background:var(--c-yellow);
  border-radius:20px;
  padding:13px 18px;
  margin:-52px auto 20px;
  width:max-content;
  min-width:62%;
  box-shadow:0 14px 26px -16px rgba(180,130,0,.6);
}

.need-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.need-list li{display:flex;align-items:flex-start;gap:12px;font-family:var(--display-font);font-weight:700;font-size:1.12rem;line-height:1.5;color:var(--ink);}
.need-list li .check{flex:none;width:25px;height:25px;border-radius:50%;background:var(--c-blue);color:#fff;display:grid;place-items:center;font-size:.8rem;margin-top:4px;}
.need-amp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.need-amp .plus{font-family:var(--display-font);font-weight:900;font-size:2.4rem;color:#5a4300;width:78px;height:78px;border-radius:var(--r-blob1);background:var(--c-yellow);display:grid;place-items:center;box-shadow:0 16px 30px -18px rgba(0,0,0,.4);}

.need-foot{text-align:center;margin-top:42px;font-family:var(--display-font);font-weight:900;font-size:clamp(1.2rem,2.2vw,1.5rem);color:#fff;white-space: nowrap;}
.need-foot .hl{
    color: var(--c-yellow);
}

.features{padding:100px 0 48px;}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:108px;--fc:var(--c-teal);--fcs:var(--accent-soft);--fco:#fff;}
.feature:nth-child(1){--fc:var(--c-teal);--fcs: #1fc4ed;--fco:#fff;}
.feature:nth-child(2){--fc:var(--c-yellow);--fcs:#de3b0b;--fco:#5a4300;}
.feature:nth-child(3){--fc:var(--c-blue);--fcs:#00adde;--fco:#fff;}
.feature:nth-child(4){--fc:var(--c-coral);--fcs:#fc8504;--fco:#fff;}
.feature:nth-child(even) .feature-art{order:2;}
.feature-art{position:relative;display:flex;justify-content:center;}
.feature-art .blob-bg{position:absolute;width:86%;height:88%;border-radius:var(--r-blob1);z-index: 0;top:6%;left:6%;background: linear-gradient(
6deg, var(--fcs), var(--fc));}
.feature:nth-child(even) .feature-art .blob-bg{border-radius:var(--r-blob2);left:auto;right:6%;}
.feature-art .phone{position:relative;width:248px;height:512px;transform:rotate(-4deg);z-index: 4;}
.feature:nth-child(even) .feature-art .phone{transform:rotate(4deg);}
.feature-art .browser{
  position:relative;
  z-index: 5;
  width:480px;
  max-width:92%;
  background:#fff;
  border-radius:18px;
  border: 1px solid #cacecd;
  overflow:hidden;
  transform:rotate(-2deg);
  margin:48px 0;
  box-shadow:0 40px 70px -30px rgba(31,80,75,.45),0 8px 20px -10px rgba(31,80,75,.25);
}
.feature:nth-child(even) .feature-art .browser{transform:rotate(2deg);}
.feature-art .browser .bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;}
.feature-art .browser .dots{display:flex;gap:6px;}
.feature-art .browser .dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57;}
.feature-art .browser .dots i:nth-child(2){background:#febc2e;}
.feature-art .browser .dots i:nth-child(3){background:#28c840;}
.feature-art .browser .addr{flex:1;background:#f1f5f4;border-radius:999px;font-size:.72rem;color:var(--ink-soft);padding:5px 14px;font-family:var(--display-font);font-weight:700;}
.feature-art .browser .screen{position:relative;background:var(--accent-tint);aspect-ratio:16/10;}
.feature-art .browser .screen .slot-img{position:absolute;inset:0;}
.slot-img-browser{object-fit:cover;object-position:center top;background:#fffcf6;}
.feature-num, .feature-num-zabuton{
  position:absolute;
  top: 53px;
  left: clamp(-20px,-18%, -18%);
}
.feature-num{
  z-index: 2;
  /* width:60px; */
  /* height:60px; */
  border-radius: 4px;
  /* background:var(--fc); */
  color: var(--fc);
  font-family:var(--display-font);
  font-weight:900;
  font-size: 29rem;
  line-height: 1rem;
  /* display:grid; */
  /* place-items:center; */
  transform: rotate(6deg);
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}
.feature-num-zabuton{
  z-index:4;
  width: 64px;
  height: 64px;
  transform: rotate(-2deg) translate(1px, 1px);
  background: #4b554b;
  box-shadow: 0 0 5px #4b554b;
  border-radius: 2px;
  display: block;
}
.feature:nth-child(even) .feature-num, .feature:nth-child(even) .feature-num-zabuton{left:auto;right: clamp(-20px,-18%, -18%);transform: rotate(-6deg);}
.feature-copy .kicker{display:inline-block;font-family:var(--display-font);font-weight:900;color:var(--fco);font-size:1.15rem;margin:0 0 .5em;background:var(--fc);padding:6px 20px;border-radius:999px;}
.feature-copy h3{font-family:var(--display-font);font-weight:900;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.5;margin:0 0 .55em;color:var(--ink);}
.feature-copy p{color:var(--ink-soft);margin:0;font-size:1.06rem;line-height:1.95;}

.qa-band{padding:100px 0 110px;}
.qa-list{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
.qa{border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -34px rgba(31,80,75,.4);}
.qa .q{width:100%;text-align:left;border:none;background: black;color:#fff;display:flex;align-items:center;gap:18px;padding:22px 30px;font:inherit;cursor:default;}
.qa .q .mark{font-family:var(--display-font);font-weight:900;font-size:1.9rem;line-height:1;flex:none;}
.qa .q .qt{font-family:var(--display-font);font-weight:900;font-size:1.2rem;line-height:1.55;}
.qa .q .chev{display:none;flex:none;margin-left:auto;width:13px;height:13px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);transition:transform .35s ease;}
.qa .a-wrap{display:block;}
.qa .a{display:flex;gap:18px;padding:28px 30px 32px;background: linear-gradient(0deg, #e9e6e6, #FFFEFF, #ffffff);}
.qa .a .mark{font-family:var(--display-font);font-weight:900;font-size:1.9rem;line-height:1;color: #000000;flex:none;}
.qa .a .at{margin:0;color:var(--ink);font-size:1.04rem;line-height:1.95;}

@media (max-width:720px){
  .qa-list{grid-template-columns:1fr;gap:18px;}
  .qa .q{cursor:pointer;}
  .qa .q .chev{display:block;}
  .qa.open .q .chev{transform:rotate(225deg);}
  .qa .a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease;}
  .qa.open .a-wrap{grid-template-rows:1fr;}
  .qa .a-wrap > .a-clip{overflow:hidden;min-height:0;}
}

.foot-cta{position:relative;background:var(--accent);color:#fff;text-align:center;padding:108px 24px;overflow:hidden;}
.foot-cta .blob{position:absolute;z-index:0;background:var(--accent-bright);}
.foot-cta .blob.f1{width:420px;height:420px;border-radius:var(--r-blob1);top:-160px;left:-120px;opacity:.6;}
.foot-cta .blob.f2{width:340px;height:340px;border-radius:var(--r-blob2);bottom:-150px;right:-90px;opacity:.55;}
.foot-cta .inner{position:relative;z-index:2;}
.foot-cta h2{font-family:var(--display-font);font-weight:900;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.5;margin:0 0 .4em;}
.preferred-break{word-break:keep-all;overflow-wrap:anywhere;}
.foot-cta p{margin:0 auto 2em;max-width:560px;color:#eafbf9;font-size:1.08rem;}
.foot-cta .btn{display:inline-block;background:#fff;color:var(--accent-deep);font-family:var(--display-font);font-weight:900;font-size:1.15rem;text-decoration:none;padding:18px 52px;border-radius:999px;transition:transform .2s,box-shadow .2s;box-shadow:0 18px 36px -18px rgba(0,0,0,.4);}
.foot-cta .btn:hover{transform:translateY(-3px);}
.site-foot{background:#2b3735;color:#c9d3d1;padding:44px 0;font-size:.9rem;}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center;}
.site-foot a{color:#c9d3d1;}
.site-foot .fb{display:flex;align-items:center;gap:12px;font-family:var(--display-font);font-weight:900;color:#fff;font-size:1.2rem;}

@media(max-width: 920px){
  .hero-inner{grid-template-columns:1fr;gap:20px;padding:40px 0 10px;text-align:center;}
  .hero-copy .sub{max-width:480px;margin-left:auto;margin-right:auto;}
  .phone-cluster{height:500px;max-width:520px;margin:0 auto;}
  
  .hop-stage{display:none;}
  .cycle-vert{display:block;}
  .need-grid{grid-template-columns:1fr;gap:64px;}
  .need-amp{flex-direction:row;}
  .need-amp .plus{width:60px;height:60px;font-size:2rem;}
  .feature{grid-template-columns: minmax(0, 1fr);gap:36px;margin-bottom:72px;/* overflow-x: clip; */}
  .feature:nth-child(even) .feature-art{order:0;}
  
}
@media(max-width: 560px){
  body{font-size:16px;}
  .band{padding:64px 0;}
  .phone-cluster{height:430px;}
  .phone.p1{width:190px;height:392px;}
  .phone.p2{width:200px;height:412px;}
  .phone.p3{width:160px;height:330px;}

  .qa-band .wrap{padding:0 12px}
  .qa .a{padding:20px 20px 20px}
}
@media (max-width: 720px) {
  .card-grid {
    grid-template-columns: minmax(0, 440px);
  }
}
@container (max-width: 300px){
  .title-break {
    display: none;
  }
}