/* Home page: hero with a tilted IPO "device", orbs, rings, marquee, counters, lifecycle timeline, bento tools.
   Loaded only on the home page (layout.php), after cloud.css. */
.page-home #main{max-width:none;padding-top:0}
.page-home .app{padding:0}
.page-home .lsec .wrap,.page-home .finale .wrap{max-width:1320px;margin-inline:auto;padding-inline:28px}

/* ---------- hero ---------- */
.hm-hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,84px) 0 clamp(40px,5vw,70px);background:linear-gradient(180deg,#fff 0%,#fff7f5 60%,var(--bg) 100%)}
html[data-theme="dark"] .hm-hero{background:linear-gradient(180deg,#0e0f12,#130d0f 60%,var(--bg))}
.hm-orbs{position:absolute;inset:0;pointer-events:none}
.hm-orbs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;will-change:transform;animation:hmFloat 18s ease-in-out infinite alternate}
.hm-orbs .o1{width:520px;height:520px;right:-120px;top:-160px;background:rgba(255,0,0,.20)}
.hm-orbs .o2{width:420px;height:420px;left:-140px;bottom:-180px;background:rgba(255,122,89,.22);animation-duration:22s;animation-delay:-6s}
.hm-orbs .o3{width:300px;height:300px;left:42%;top:30%;background:rgba(255,190,120,.18);animation-duration:26s;animation-delay:-11s}
@keyframes hmFloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(5%,7%) scale(1.12)}}
.hm-hero-in{position:relative;z-index:1;width:min(1320px,100% - 56px);margin-inline:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}

.hm-live{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--cn-line,#e8e9ed);box-shadow:0 6px 20px -12px rgba(16,17,20,.3);color:var(--ink);text-decoration:none;font:700 13px "Manrope",var(--font);backdrop-filter:blur(10px)}
html[data-theme="dark"] .hm-live{background:rgba(255,255,255,.06)}
.hm-live i{width:8px;height:8px;border-radius:50%;background:#16a34a;animation:sfPing 1.8s infinite}
.hm-live b{color:#16a34a}
.hm-live span{color:var(--ink-3);font-size:16px;transition:transform .3s}
.hm-live:hover span{transform:translateX(3px)}
.hm-h1{margin:22px 0 18px;font:800 clamp(46px,7.4vw,96px)/.98 "Manrope",var(--display);letter-spacing:-.045em;color:var(--ink)}
.hm-line{display:block;overflow:hidden;padding-bottom:.06em}
.hm-w{display:inline-block;animation:hmRise .9s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes hmRise{0%{opacity:0;transform:translateY(105%)}100%{opacity:1;transform:none}}
.hm-accent{background:linear-gradient(100deg,#ff0000 0%,#ff5a3c 45%,#ff0000 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hmRise .9s cubic-bezier(.22,1,.36,1) both,hmShimmer 6s linear 1.2s infinite;animation-delay:var(--d,0ms),1.2s}
@keyframes hmShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hm-lead{max-width:560px;margin:0 0 26px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--ink-2);animation:hmFade .9s .35s both}
@keyframes hmFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hm-cta{display:flex;gap:10px;flex-wrap:wrap;animation:hmFade .9s .45s both}
.hm-btn{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 24px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:700 15px "Manrope",var(--font);text-decoration:none;transition:transform .35s cubic-bezier(.22,.8,.24,1),border-color .2s,background-color .2s,color .2s}
.hm-btn .ic{width:18px;height:18px;transition:transform .35s}
.hm-btn:hover{transform:translateY(-2px);border-color:#ff0000;color:#ff0000}
.hm-btn:hover .ic:last-child{transform:translateX(3px)}
.hm-btn.red{background:#ff0000;border-color:#ff0000;color:#fff;box-shadow:0 14px 34px -10px rgba(255,0,0,.55)}
.hm-btn.red:hover{background:#d70000;color:#fff}
.hm-creds{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:10px 20px;flex-wrap:wrap;animation:hmFade .9s .55s both}
.hm-creds li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.hm-creds .ic{width:16px;height:16px;color:#ff0000}
.hm-sebi{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.hm-sebi .ic{width:15px;height:15px;color:#16a34a}

/* device card */
.hm-stage{position:relative;perspective:1400px;min-height:420px;display:grid;place-items:center;animation:hmFade 1s .25s both}
.hm-device{position:relative;z-index:1;width:min(460px,100%);display:grid;gap:18px;padding:18px 20px 20px;border-radius:28px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);box-shadow:0 40px 80px -30px rgba(90,10,10,.45),0 2px 0 rgba(255,255,255,.8) inset,0 0 0 1px rgba(16,17,20,.06);backdrop-filter:saturate(1.6) blur(20px);transform:rotateY(-10deg) rotateX(6deg);transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .5s}
html[data-theme="dark"] .hm-device{background:rgba(26,24,24,.88);border-color:rgba(255,255,255,.08);box-shadow:0 40px 80px -30px #000,0 0 0 1px rgba(255,255,255,.06)}
.hm-device:hover{transform:rotateY(0) rotateX(0) translateY(-4px)}
.hm-dev-bar{display:flex;align-items:center;gap:6px}
.hm-dev-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.hm-dev-bar i:nth-child(2){background:#febc2e}.hm-dev-bar i:nth-child(3){background:#28c840}
.hm-dev-bar em{margin-left:auto;font:800 11px "Manrope",var(--font);letter-spacing:.08em;font-style:normal;color:#ff0000;background:rgba(255,0,0,.08);padding:4px 10px;border-radius:999px}
.hm-dev-head{display:flex;align-items:center;gap:14px}
.hm-dev-head .logo,.hm-orbit .logo,.hm-mq-set .logo{background:#fff;border:1px solid var(--line);color:#ff0000;border-radius:14px}
.hm-dev-head .logo img,.hm-orbit .logo img,.hm-mq-set .logo img{width:100%;height:100%;object-fit:contain;padding:4px}
.hm-dev-head b{display:block;font:800 19px/1.2 "Manrope",var(--font);letter-spacing:-.02em}
.hm-dev-head small{display:block;color:var(--ink-3);font-size:12.5px;font-weight:600;margin-top:3px}
.hm-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 8px;border-radius:20px;background:rgba(16,17,20,.035)}
html[data-theme="dark"] .hm-rings{background:rgba(255,255,255,.04)}
.hm-ring{margin:0;display:grid;justify-items:center;gap:2px;position:relative}
.hm-ring svg{width:76px;height:76px;transform:rotate(-90deg)}
.hm-ring circle{fill:none;stroke-width:7}
.hm-ring .tr{stroke:rgba(16,17,20,.08)}
html[data-theme="dark"] .hm-ring .tr{stroke:rgba(255,255,255,.1)}
.hm-ring .fg{stroke:var(--c);stroke-linecap:round;stroke-dashoffset:var(--off);animation:hmRing 1.6s cubic-bezier(.22,1,.36,1) .6s both}
@keyframes hmRing{from{stroke-dashoffset:var(--full)}to{stroke-dashoffset:var(--off)}}
.hm-ring b{position:absolute;top:27px;font:800 13.5px "Manrope",var(--font);font-variant-numeric:tabular-nums}
.hm-ring figcaption{font-size:12px;font-weight:700;color:var(--ink-3)}
.hm-dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.hm-dev-grid small{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.hm-dev-grid b{font:800 16px/1.35 "Manrope",var(--font)}
.hm-dev-grid .up,.hm-orbit .up,.hm-mq-set .up{color:#0a9d58}.hm-dev-grid .down,.hm-orbit .down,.hm-mq-set .down{color:#d0241b}
.hm-dev-foot{display:flex;align-items:center;gap:8px;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;font-weight:700;color:var(--ink-2)}
.hm-dev-foot .ic{width:15px;height:15px;color:#ff0000}
.hm-dev-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:#ff0000}
.hm-dev-go .ic{transition:transform .3s}
.hm-device:hover .hm-dev-go .ic{transform:translateX(4px)}
.hm-orbit{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(16,17,20,.06);box-shadow:0 18px 40px -18px rgba(16,17,20,.4);text-decoration:none;color:var(--ink);backdrop-filter:blur(14px);animation:hmBob 4.5s ease-in-out infinite alternate}
html[data-theme="dark"] .hm-orbit{background:rgba(30,28,28,.92);border-color:rgba(255,255,255,.08)}
.hm-orbit small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.hm-orbit b{display:block;font:800 13px/1.3 "Manrope",var(--font);white-space:nowrap}
.hm-orbit em{font-style:normal}
.hm-orbit.oa{left:-6%;top:6%}
.hm-orbit.ob{right:-4%;bottom:4%;animation-delay:-2.2s}
@keyframes hmBob{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* ---------- marquee ---------- */
.hm-marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--card);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hm-mq-track{display:flex;width:max-content;animation:hmScroll 60s linear infinite}
.hm-marquee:hover .hm-mq-track{animation-play-state:paused}
@keyframes hmScroll{to{transform:translateX(-50%)}}
.hm-mq-set{display:flex;gap:8px;padding:12px 4px}
.hm-mq-set a{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--soft);text-decoration:none;color:var(--ink);white-space:nowrap;font-size:13.5px;transition:background-color .2s}
.hm-mq-set a:hover{background:rgba(255,0,0,.08)}
.hm-mq-set .logo{border-radius:50%}
.hm-mq-set b{font-weight:800}
.hm-mq-set span{font-weight:800;font-size:12.5px}

/* ---------- counters ---------- */
.hm-counters{width:min(1320px,100% - 56px);margin:34px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hm-counter{position:relative;overflow:hidden;padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.hm-counter:first-child{background:#101114;border-color:#101114;color:#fff}
.hm-counter:first-child span,.hm-counter:first-child small{color:#c9ccd3!important}
.hm-c-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,0,0,.1);color:#ff0000;margin-bottom:14px}
.hm-c-ic .ic{width:19px;height:19px}
.hm-counter b{display:block;font:800 clamp(30px,3.4vw,44px)/1 "Manrope",var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:inherit}
.hm-counter>span:not(.hm-c-ic){display:block;margin-top:8px;font-weight:800;color:var(--ink)}
.hm-counter small{color:var(--ink-3);font-size:12.5px;font-weight:600}

/* ---------- sections ---------- */
.page-home .lsec{padding:clamp(56px,7vw,96px) 0 0}
.page-home .lsec-num span:first-child{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 8px;border-radius:999px;background:#ff0000;color:#fff;font-weight:800}
.page-home .lsec-head h2{font-family:"Manrope",var(--display);letter-spacing:-.035em}

/* lifecycle: a timeline rail with a dot per stage */
.page-home #lifecycle .wrap{position:relative}
.page-home #lifecycle .stage{position:relative;padding-left:46px}
.page-home #lifecycle .stage::before{content:"";position:absolute;left:14px;top:0;bottom:-28px;width:2px;background:linear-gradient(var(--line),var(--line))}
.page-home #lifecycle .stage:last-child::before{bottom:auto;height:24px}
.page-home #lifecycle .stage::after{content:"";position:absolute;left:6px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--card);border:3px solid #ff0000;box-shadow:0 0 0 6px rgba(255,0,0,.1);transition:transform .4s}
.page-home #lifecycle .stage:hover::after{transform:scale(1.25)}
.page-home .stage-tag{color:#ff0000;font-weight:800;letter-spacing:.06em}

/* bento tools */
.hm-bento{grid-template-columns:repeat(4,1fr)!important}
.hm-bento .hm-tile:nth-child(1),.hm-bento .hm-tile:nth-child(2){grid-column:span 2}
.hm-tile{border-radius:24px!important;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s}
.hm-tile:hover{transform:translateY(-4px);border-color:rgba(255,0,0,.3);box-shadow:0 26px 50px -28px rgba(255,0,0,.45)}
.hm-tile .tc-icon{transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .25s,color .25s}
.hm-tile:hover .tc-icon{transform:rotate(-8deg) scale(1.08);background:#ff0000;color:#fff}

/* finale */
.page-home .finale{margin-top:clamp(56px,7vw,96px)}

@media (max-width:1080px){
  .hm-hero-in{grid-template-columns:1fr}
  .hm-stage{min-height:0;padding:20px 0 40px}
  .hm-device{transform:none}
  .hm-counters{grid-template-columns:repeat(2,1fr)}
  .hm-bento{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:760px){
  .hm-hero-in,.hm-counters{width:calc(100% - 28px)}
  .page-home .lsec .wrap,.page-home .finale .wrap{padding-inline:14px}
  .hm-orbit{display:none}
  .hm-btn{height:48px;padding:0 20px}
  .hm-bento{grid-template-columns:1fr!important}
  .hm-bento .hm-tile:nth-child(1),.hm-bento .hm-tile:nth-child(2){grid-column:auto}
  .page-home #lifecycle .stage{padding-left:34px}
  .page-home #lifecycle .stage::before{left:8px}
  .page-home #lifecycle .stage::after{left:0}
}
@media (prefers-reduced-motion:reduce){
  .hm-orbs i,.hm-w,.hm-accent,.hm-lead,.hm-cta,.hm-creds,.hm-stage,.hm-ring .fg,.hm-orbit,.hm-mq-track{animation:none!important}
}