/* Yoomi website — ported verbatim from the design source.
   --u is a responsive unit (1rpx = 100vw/1440), clamped 0.5–1px, so all spacing scales smoothly. */

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

/* 动态尺寸单位 --u（rpx 思路）：以 1440 设计宽为基准，1rpx = 100vw / 1440，
       随视口连续缩放、无断点跳变；下限 0.5（窄屏不过度收缩，交给排版换行），上限 1（不超出设计尺寸） */
    :root{--u:clamp(0.5px, calc(100vw / 1440), 1px)}
    *{box-sizing:border-box}
    body{margin:0;background:#FFFFFF;font-family:'Nunito','Noto Sans JP','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
    a{color:#7A45E8;text-decoration:none}
    a:hover{color:#6236C4}
    h1,h2,h3,p{margin:0}
    img{max-width:100%}
    ::selection{background:rgba(122,69,232,.22)}

    /* 布局骨架：所有间距走 rpx，断点只负责重排 */
    .wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 clamp(20px, 3vw, 32px)}
    .sec{padding-top:calc(var(--u) * 88)}
    .row{display:flex;align-items:center;gap:calc(var(--u) * 56)}
    .col{flex:1 1 0;min-width:0}
    .phones{flex:0 1 auto;min-width:0;position:relative;width:min(100%, 490px);aspect-ratio:490 / 640}
    .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u) * 34)}
    .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u) * 16)}
    .g2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 6) calc(var(--u) * 44)}
    .navlinks{display:flex;align-items:center;gap:calc(var(--u) * 26)}
    .dl{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 12)}

    @media (max-width:1040px){
      .row{flex-direction:column;gap:calc(var(--u) * 40)}
      .row.rev{flex-direction:column-reverse}
      .hero .col{text-align:center;margin:0 auto}
      .hero .dl{justify-content:center}
      .hero .marks{justify-content:center}
      .phones{width:min(86vw, 420px);aspect-ratio:auto;height:auto;display:flex;align-items:flex-start;justify-content:center;gap:16px}
      .phones > div{position:static !important;width:min(42vw, 210px) !important}
    }
    @media (max-width:860px){ .g3{grid-template-columns:1fr 1fr} .g4{grid-template-columns:1fr 1fr} }
    @media (max-width:760px){ .navlinks{display:none} }
    @media (max-width:620px){ .g3{grid-template-columns:1fr} .g2{grid-template-columns:1fr} }

    .rise{opacity:0;--ry:calc(var(--u) * 24);transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
    .rise.in{opacity:1;--ry:0px}
    .d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
    .float{animation:bob 6s ease-in-out infinite}
    .float2{animation:bob 6s ease-in-out .9s infinite}
    @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u) * -8))}}
    .shot{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
    .shot:hover{--ty:calc(var(--u) * -9);--sc:1.03;filter:drop-shadow(0 26px 50px rgba(122,69,232,.3))}
    @media (prefers-reduced-motion: reduce){ .rise{opacity:1;transform:none;transition:none} .float,.float2{animation:none} }
  
    .shot,.btn2,.mag-on,.rise{transform:translateY(calc(var(--ty,0px) + var(--ry,0px))) scale(var(--sc,1))}
    .shot{transition:transform .48s cubic-bezier(.16,.84,.3,1),filter .48s ease}
    .btn2{transition:transform .2s ease,box-shadow .28s ease}
    .btn2:hover{--ty:-2px;box-shadow:0 12px 28px rgba(122,69,232,.3)}
    .btn2:active{--ty:0px;--sc:.985}
    .shot.mag-on,.btn2.mag-on,a.mag-on,div.mag-on{--sc:1.07}
    div.mag-on,a.mag-on{transform:translateY(calc(var(--ty,0px) + var(--ry,0px))) scale(var(--sc,1))}
    .mag{transition:transform .26s cubic-bezier(.16,.84,.3,1);will-change:transform}
    .mag-on{--sc:1.07;z-index:3}
    #ylens{position:fixed;left:0;top:0;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;
      backdrop-filter:blur(1.5px) saturate(160%) brightness(1.06);-webkit-backdrop-filter:blur(1.5px) saturate(160%) brightness(1.06);
      background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.24) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 64%);
      border:1px solid rgba(255,255,255,.44);
      box-shadow:0 18px 44px rgba(20,17,53,.3),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -14px 28px rgba(122,69,232,.14);
      transition:opacity .28s ease,width .26s ease,height .26s ease,margin .26s ease}
    #ylens.on{opacity:1}
    #ylens::after{content:'';position:absolute;left:14%;top:10%;width:42%;height:26%;border-radius:50%;
      background:linear-gradient(150deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,0) 72%);filter:blur(1px)}
    @media (prefers-reduced-motion:reduce){
      #ylens{display:none}
      .shot,.btn2,.rise,.mag-on{--ty:0px;--ry:0px;--sc:1;transform:none!important;transition:none!important}
    }

/* Handoff-only additions: resets the design source got from its host, plus static-page helpers */
input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}
img[width][height]{height:auto}
.langsw{display:flex;align-items:center;gap:3px;flex:0 0 auto;padding:3px;border-radius:999px;border:1px solid rgba(27,43,75,.14);background:rgba(255,255,255,.6)}
.langsw-btn{padding:5px 11px;border:0;border-radius:999px;background:transparent;color:rgba(27,43,75,.5);font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap}
.langsw-btn[aria-pressed="true"]{background:#7A45E8;color:#fff}
.legal{max-width:760px;margin:0 auto;padding:calc(var(--u) * 56) clamp(20px,3vw,32px) calc(var(--u) * 40)}
.legal h2{font-size:clamp(24px,2.6vw,34px);font-weight:900;letter-spacing:-.028em;color:#1B2B4B;margin:0 0 10px}
.legal h3{font-size:17px;font-weight:900;color:#1B2B4B;margin:26px 0 8px}
.legal p{font-size:14.5px;line-height:1.82;font-weight:700;color:rgba(27,43,75,.66);white-space:pre-line;margin:0}
.tbc{margin:20px 0;padding:16px 18px;border-radius:14px;background:#FFF8E6;border:1.5px solid #F0D48A;font-size:13px;font-weight:800;color:#7A5C00}
[data-lang-block]{display:none}
[data-lang-block].on{display:block}