.g-hero { background: var(--grad); color: #fff; text-align: center; padding: 26px 20px 70px; position: relative; }
.g-back { position: absolute; left: 20px; top: 18px; color: #fff; font-weight: 700; text-decoration: none; opacity: .9; }
.motto { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 5px 14px; font-weight: 800; margin-top: 20px; }
.g-hero h1 { font-size: 34px; margin: 12px 0 8px; letter-spacing: -.02em; }
.g-dots { display: flex; gap: 6px; justify-content: center; }
.g-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .3s, transform .3s; }
.g-dots i.on { background: #fff; transform: scale(1.3); }
.g-wrap { max-width: 900px; margin: -44px auto 60px; padding: 0 20px; display: grid; gap: 16px; }
.g-card { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; background: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--shadow-h); opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s; }
.g-card.in { opacity: 1; transform: none; }
.g-card:nth-child(even) { grid-template-columns: 1fr 300px; }
.g-card:nth-child(even) .g-anim { order: 2; }
@media (max-width: 720px) { .g-card, .g-card:nth-child(even) { grid-template-columns: 1fr; } .g-card:nth-child(even) .g-anim { order: 0; } }
.g-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 900; }
.g-txt h2 { font-size: 22px; margin: 8px 0 6px; }
.g-txt p { font-size: 15px; color: #334155; margin: 0; line-height: 1.6; }
.g-anim { height: 170px; border-radius: 18px; background: linear-gradient(135deg, #eef2ff, #fdf4ff); position: relative; overflow: hidden; }
/* 1 sync */
.a-sync .sh, .a-sync .hd { position: absolute; top: 60px; padding: 10px 12px; border-radius: 12px; font-weight: 900; font-size: 12px; }
.a-sync .sh { left: 14px; background: #3665f3; color: #fff; }
.a-sync .hd { right: 14px; background: var(--grad); color: #fff; }
.a-sync .file { position: absolute; top: 62px; left: 100px; font-size: 26px; animation: fly 2.6s ease-in-out infinite; }
.a-sync .f2 { animation-delay: 1.3s; }
@keyframes fly { 0% { transform: translateX(0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translateX(10px) scale(1); } 80% { opacity: 1; transform: translateX(100px) scale(1); } 100% { transform: translateX(120px) scale(.6); opacity: 0; } }
/* 2 cost */
.a-cost .row-c { position: absolute; left: 20px; right: 20px; top: 40px; background: #fff; border-radius: 12px; padding: 12px; display: flex; justify-content: space-between; font-weight: 700; box-shadow: var(--shadow); }
.a-cost .type { font-style: normal; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--p); width: 0; animation: type 3s steps(5) infinite; }
@keyframes type { 0%, 10% { width: 0; } 50%, 100% { width: 44px; } }
.a-cost .be { position: absolute; left: 20px; right: 20px; bottom: 30px; text-align: center; background: var(--up-soft); color: var(--up); border-radius: 12px; padding: 10px; font-weight: 800; animation: popin 3s infinite; }
@keyframes popin { 0%, 50% { opacity: 0; transform: scale(.8); } 60%, 100% { opacity: 1; transform: none; } }
/* 3 rules */
.a-rules .lane { position: absolute; left: 20px; right: 20px; top: 74px; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #fecdd3, #fde68a, #a7f3d0); }
.a-rules .lo, .a-rules .hi { position: absolute; top: -34px; font-weight: 900; font-size: 12px; }
.a-rules .lo { left: 0; color: var(--bad); } .a-rules .hi { right: 0; color: var(--up); }
.a-rules .dot { position: absolute; top: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--p); border: 4px solid #fff; box-shadow: var(--shadow-h); animation: slide 4s ease-in-out infinite; }
@keyframes slide { 0%, 100% { left: 5%; } 50% { left: 85%; } }
/* 4 move */
.a-move { display: grid; align-content: center; gap: 10px; padding: 16px; }
.a-move .mv { background: #fff; border-radius: 12px; padding: 10px 12px; font-weight: 700; box-shadow: var(--shadow); animation: slideIn .6s both; }
.a-move .up b { color: var(--up); } .a-move .down b { color: var(--down); } .a-move .ad b { color: #a21caf; }
.g-card.in .a-move .mv:nth-child(2) { animation-delay: .3s; } .g-card.in .a-move .mv:nth-child(3) { animation-delay: .6s; }
/* 5 publish */
.a-pub .list3 { position: absolute; left: 20px; top: 24px; display: grid; gap: 8px; width: 150px; }
.a-pub .list3 i { height: 18px; border-radius: 6px; background: #fff; box-shadow: var(--shadow); position: relative; }
.a-pub .list3 i::before { content: '\2713'; position: absolute; left: 5px; top: 0; font-size: 12px; color: var(--up); font-weight: 900; }
.a-pub .btnp { position: absolute; right: 20px; top: 40px; background: var(--grad); color: #fff; font-weight: 900; padding: 10px 14px; border-radius: 12px; animation: press 3s infinite; }
@keyframes press { 0%, 40% { transform: none; } 45% { transform: scale(.9); } 50%, 100% { transform: none; } }
.a-pub .ok { position: absolute; right: 30px; bottom: 30px; font-weight: 900; color: var(--up); background: var(--up-soft); padding: 8px 12px; border-radius: 12px; animation: popin 3s infinite; }
.g-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .g-modes { grid-template-columns: 1fr; } }
.g-modes .m { border-radius: 18px; padding: 16px; color: #fff; box-shadow: var(--shadow-h); }
.g-modes .m span { font-size: 28px; } .g-modes .m b { display: block; font-size: 16px; } .g-modes .m small { opacity: .92; }
.m1 { background: linear-gradient(135deg, #38bdf8, #0284c7); } .m2 { background: linear-gradient(135deg, #f59e0b, #d97706); } .m3 { background: linear-gradient(135deg, #10b981, #059669); }
.g-legend, .g-faq { background: #fff; border-radius: 22px; padding: 20px; box-shadow: var(--shadow); }
.g-legend h2, .g-faq h2 { margin: 0 0 12px; font-size: 18px; }
.lg { display: flex; flex-wrap: wrap; gap: 8px; }
.g-faq details { border-top: 1px solid var(--line); padding: 10px 0; }
.g-faq summary { cursor: pointer; font-weight: 800; }
.g-faq p { margin: 6px 0 0; color: #334155; }

/* ---------- v2 Calm Pro overrides ---------- */
.g-hero { background: var(--ink); background-image: radial-gradient(700px 300px at 80% 0%, rgba(99,102,241,.45), transparent 70%); padding: 30px 20px 84px; }
.g-hero h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -.035em; }
.motto { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #e0e7ff; font-weight: 700; font-size: 13px; }
.g-back { opacity: 1; color: #cbd5e1; font-size: 14px; } .g-back:hover { color: #fff; }
.g-card, .g-legend, .g-faq { border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 18px; }
.g-modes .m { background: #fff !important; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); border-top: 3px solid var(--mc); }
.g-modes .m small { color: var(--muted); opacity: 1; }
.g-modes .m span .ic { width: 22px; height: 22px; color: var(--mc); }
.m1 { --mc: #0284c7; } .m2 { --mc: #d97706; } .m3 { --mc: #059669; }
.g-faq summary { font-weight: 700; padding: 4px 0; }
.g-faq summary:hover { color: var(--p-d); }