/* ============================================================
   Nestiy — home page ("hm-")
   Glass cards, an orbit of products, animated feature previews and a scroll timeline.
   Colours come from tokens that switch with the light / dark theme.
   Motion: assets/js/home.js (pauses off-screen, respects "reduce motion").
   ============================================================ */

/* ---------- tokens: dark (default) ---------- */
.hm{
  --hm-ink:#F2F6EE; --hm-sub:#A3AFA8; --hm-faint:rgba(255,255,255,0.06);
  --hm-card:rgba(16,22,18,0.58); --hm-card-2:rgba(255,255,255,0.04); --hm-border:rgba(255,255,255,0.10);
  --hm-shadow:0 30px 70px -36px rgba(0,0,0,0.9);
  --hm-paper:#F7FAF5; --hm-paper-ink:#0f241a; --hm-paper-line:#DCE9E1;
  --c-lime:#C4F24A; --c-sun:#FFB45C; --c-mint:#5EE6A8; --c-violet:#B794FF; --c-blue:#6EA8FF;
  --c-coral:#FF7A66; --c-sky:#5CD6FF; --c-teal:#3FD8CB; --c-pink:#FF8FC7;
  --hm-grad:linear-gradient(100deg, #C4F24A 0%, #5EE6A8 35%, #5CD6FF 65%, #B794FF 100%);
  color:var(--hm-ink);
}
/* ---------- tokens: light ---------- */
html[data-theme="light"] .hm{
  --hm-ink:#0C3A2B; --hm-sub:#4B675A; --hm-faint:rgba(12,58,43,0.05);
  --hm-card:rgba(255,255,255,0.62); --hm-card-2:rgba(255,255,255,0.55); --hm-border:rgba(30,142,90,0.15);
  --hm-shadow:0 30px 60px -34px rgba(12,58,43,0.35);
  --c-lime:#1E8E5A; --c-sun:#E0861B; --c-mint:#12A06A; --c-violet:#7A4FE0; --c-blue:#2F6DDB;
  --c-coral:#E2533F; --c-sky:#1A98D2; --c-teal:#0F9A90; --c-pink:#D4458C;
  --hm-grad:linear-gradient(100deg, #1E8E5A 0%, #12A06A 30%, #1A98D2 65%, #7A4FE0 100%);
}
.hm [data-c="lime"]{ --c:var(--c-lime); } .hm [data-c="sun"]{ --c:var(--c-sun); } .hm [data-c="mint"]{ --c:var(--c-mint); }
.hm [data-c="violet"]{ --c:var(--c-violet); } .hm [data-c="blue"]{ --c:var(--c-blue); } .hm [data-c="coral"]{ --c:var(--c-coral); }
.hm [data-c="sky"]{ --c:var(--c-sky); } .hm [data-c="teal"]{ --c:var(--c-teal); } .hm [data-c="pink"]{ --c:var(--c-pink); }

.hm h1, .hm h2, .hm h3, .hm h4{ color:var(--hm-ink); font-family:var(--font-head); }
.hm-grad{ background:var(--hm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:hmShine 8s ease-in-out infinite alternate; }
@keyframes hmShine{ to{ background-position:100% 0; } }
.hm-muted{ color:var(--hm-sub); }
.hm-acc{ color:var(--c, var(--c-lime)); }

/* glass */
.hm-glass, .hm-card, .hm-float, .hm-ai-card, .hm-why-card, .hm-plan, .hm-final-box, .hm-tl-step, .hm-marquee span{
  background:var(--hm-card); border:1px solid var(--hm-border);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--hm-shadow);
}

/* ---------- hero ---------- */
.hm-hero{ position:relative; padding:72px 0 56px; overflow:hidden; }
.hm-aurora{ position:absolute; inset:-20% -10% auto; height:120%; pointer-events:none; z-index:-1; filter:blur(60px); opacity:.55; }
.hm-aurora i{ position:absolute; border-radius:50%; mix-blend-mode:screen; animation:hmDrift 18s ease-in-out infinite alternate; }
.hm-aurora i:nth-child(1){ width:520px; height:520px; left:52%; top:6%; background:radial-gradient(circle, rgba(196,242,74,0.38), transparent 65%); }
.hm-aurora i:nth-child(2){ width:460px; height:460px; left:72%; top:30%; background:radial-gradient(circle, rgba(92,214,255,0.32), transparent 65%); animation-delay:-6s; }
.hm-aurora i:nth-child(3){ width:420px; height:420px; left:38%; top:46%; background:radial-gradient(circle, rgba(183,148,255,0.30), transparent 65%); animation-delay:-12s; }
html[data-theme="light"] .hm-aurora{ opacity:.7; }
html[data-theme="light"] .hm-aurora i{ mix-blend-mode:multiply; }
html[data-theme="light"] .hm-aurora i:nth-child(1){ background:radial-gradient(circle, rgba(140,220,170,0.55), transparent 65%); }
html[data-theme="light"] .hm-aurora i:nth-child(2){ background:radial-gradient(circle, rgba(150,215,245,0.45), transparent 65%); }
html[data-theme="light"] .hm-aurora i:nth-child(3){ background:radial-gradient(circle, rgba(205,190,250,0.45), transparent 65%); }
@keyframes hmDrift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-60px,40px) scale(1.15); } }

.hm-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:center; }
.hm-eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border-radius:999px; font-size:0.8rem; font-weight:600;
  color:var(--hm-ink); background:var(--hm-card); border:1px solid var(--hm-border); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hm-live{ width:8px; height:8px; border-radius:50%; background:var(--c-lime); box-shadow:0 0 0 0 var(--c-lime); animation:hmPulse 2.2s ease-out infinite; }
@keyframes hmPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--c-lime) 60%, transparent); } 80%,100%{ box-shadow:0 0 0 9px transparent; } }
.hm-title{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); line-height:1.02; letter-spacing:-0.045em; font-weight:700; margin:22px 0 18px; }
.hm-rotator{ display:block; position:relative; height:1.08em; overflow:hidden; }
.hm-word{
  position:absolute; left:0; top:0; white-space:nowrap; opacity:0; transform:translateY(100%); filter:blur(6px);
  transition:transform .7s cubic-bezier(.2,.75,.2,1), opacity .7s ease, filter .7s ease;
  background:linear-gradient(100deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.06em;
}
html[data-theme="light"] .hm-word{ background:linear-gradient(100deg, var(--c), color-mix(in srgb, var(--c) 60%, #0C3A2B)); -webkit-background-clip:text; background-clip:text; }
.hm-word.is-on{ opacity:1; transform:none; filter:none; }
.hm-word.is-out{ opacity:0; transform:translateY(-100%); filter:blur(6px); }
.hm-lede{ font-size:1.12rem; line-height:1.65; color:var(--hm-sub); max-width:560px; margin:0 0 28px; }
.hm-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hm-btn-glow{ position:relative; }
.hm-btn-glow::after{ content:''; position:absolute; inset:-3px; border-radius:inherit; background:var(--hm-grad); z-index:-1; filter:blur(12px); opacity:.55; transition:opacity .2s ease; }
.hm-btn-glow:hover::after{ opacity:.9; }
.hm-trust{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px; font-size:0.88rem; color:var(--hm-sub); }
.hm-trust li{ display:inline-flex; align-items:center; gap:7px; }
.hm-trust svg{ width:16px; height:16px; color:var(--c-lime); }
.hm-in{ opacity:0; transform:translateY(18px); animation:hmIn .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d, 0s); }
@keyframes hmIn{ to{ opacity:1; transform:none; } }

/* orbit */
.hm-stage{ position:relative; height:520px; transform-style:preserve-3d; transition:transform .25s ease-out; }
.hm-orbit{ position:absolute; left:50%; top:50%; width:440px; height:440px; margin:-220px 0 0 -220px; }
.hm-ring{ position:absolute; inset:0; border-radius:50%; border:1px dashed var(--hm-border); }
.hm-ring.r2{ inset:70px; border-style:solid; border-color:color-mix(in srgb, var(--c-lime) 22%, transparent); }
.hm-ring.r3{ inset:-30px; border-color:var(--hm-faint); border-style:solid; }
.hm-ring.r1{ inset:140px; background:radial-gradient(circle, color-mix(in srgb, var(--c-lime) 22%, transparent), transparent 70%); border:0; animation:hmBreath 4s ease-in-out infinite; }
@keyframes hmBreath{ 50%{ transform:scale(1.12); opacity:.7; } }
.hm-spin{ position:absolute; inset:0; animation:hmSpin 40s linear infinite; }
.hm-spin.s2{ inset:70px; animation-duration:28s; animation-direction:reverse; }
@keyframes hmSpin{ to{ transform:rotate(360deg); } }
.hm-planet{ position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateY(-220px); }
.hm-spin.s2 .hm-planet{ transform:rotate(var(--a)) translateY(-150px); }
.hm-planet i{
  position:absolute; left:-28px; top:-28px; width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  color:var(--c); background:var(--hm-card); border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow:0 0 30px -6px color-mix(in srgb, var(--c) 70%, transparent), var(--hm-shadow);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transform:rotate(calc(-1 * var(--a))); animation:hmCounter 40s linear infinite;
}
.hm-spin.s2 .hm-planet i{ animation:hmCounter2 28s linear infinite; }
@keyframes hmCounter{ from{ transform:rotate(calc(-1 * var(--a))); } to{ transform:rotate(calc(-1 * var(--a) - 360deg)); } }
@keyframes hmCounter2{ from{ transform:rotate(calc(-1 * var(--a))); } to{ transform:rotate(calc(-1 * var(--a) + 360deg)); } }
.hm-planet svg{ width:26px; height:26px; }
.hm-core{
  position:absolute; left:50%; top:50%; width:118px; height:118px; margin:-59px 0 0 -59px; border-radius:34px;
  display:flex; align-items:center; justify-content:center; background:var(--hm-card); border:1px solid var(--hm-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 10px var(--hm-faint), 0 0 80px -10px color-mix(in srgb, var(--c-lime) 60%, transparent);
}
.hm-core img{ width:64px; height:64px; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--c-lime) 60%, transparent)); }

/* floating live cards */
.hm-float{ position:absolute; width:220px; padding:12px 14px; border-radius:16px; font-size:0.82rem; color:var(--hm-ink); animation:hmFloat 7s ease-in-out infinite; }
.hm-float::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--c); box-shadow:0 0 12px var(--c); }
.hm-float p{ margin:4px 0 0; color:var(--hm-sub); line-height:1.4; }
.hm-float-h{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hm-float-h b{ font-family:var(--font-head); font-size:0.86rem; white-space:nowrap; }
.hm-float-h small{ white-space:nowrap; font-size:0.66rem; color:var(--c); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.hm-float.f1{ left:-4%; top:4%; }
.hm-float.f2{ right:-2%; top:2%; width:240px; animation-delay:-2s; }
.hm-float.f3{ left:-8%; bottom:18%; width:210px; animation-delay:-4s; }
.hm-float.f4{ right:-6%; bottom:30%; width:200px; animation-delay:-1s; }
.hm-float.f5{ left:30%; bottom:-2%; width:190px; animation-delay:-5s; }
@keyframes hmFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.hm-typing{ margin-top:8px; font-family:var(--font-mono, ui-monospace, monospace); font-size:0.74rem; white-space:nowrap; overflow:hidden; border-bottom:1px solid var(--hm-border); padding-bottom:6px; }
.hm-typing span{ display:inline-block; overflow:hidden; vertical-align:bottom; width:0; border-right:2px solid var(--c); animation:hmType 6s steps(34) infinite, hmCaret .8s step-end infinite; }
@keyframes hmType{ 0%{ width:0; } 45%,80%{ width:100%; } 100%{ width:0; } }
@keyframes hmCaret{ 50%{ border-color:transparent; } }
.hm-lines i{ display:block; height:1px; background:var(--hm-border); margin-top:10px; }
.hm-meter{ height:7px; border-radius:7px; background:var(--hm-faint); overflow:hidden; margin:8px 0 5px; }
.hm-meter i{ display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 50%, #fff)); transform-origin:left; animation:hmGrow 2.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hmGrow{ from{ transform:scaleX(0); } }
.hm-spark{ width:100%; height:36px; margin:6px 0 2px; }
.hm-spark path{ fill:none; stroke:var(--c); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:200; stroke-dashoffset:200; animation:hmLine 4s ease-in-out infinite; filter:drop-shadow(0 0 6px var(--c)); }
@keyframes hmLine{ 0%{ stroke-dashoffset:200; } 50%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-200; } }

.hm-scroll{ position:absolute; left:50%; bottom:14px; width:26px; height:42px; margin-left:-13px; border-radius:14px; border:2px solid var(--hm-border); }
.hm-scroll span{ position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--c-lime); animation:hmWheel 1.8s ease-in-out infinite; }
@keyframes hmWheel{ 0%{ transform:translateY(0); opacity:1; } 80%{ transform:translateY(14px); opacity:0; } 100%{ opacity:0; } }

/* ---------- marquee ---------- */
.hm-marquee{ overflow:hidden; padding:18px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-track{ display:flex; gap:12px; width:max-content; animation:hmMarq 46s linear infinite; }
.hm-marquee:hover .hm-track{ animation-play-state:paused; }
.hm-marquee span{
  white-space:nowrap; padding:10px 18px; border-radius:999px; font-size:0.9rem; font-weight:600; color:var(--hm-ink);
  border-color:color-mix(in srgb, var(--c) 35%, transparent); box-shadow:0 0 24px -12px var(--c);
}
@keyframes hmMarq{ to{ transform:translateX(-50%); } }

/* ---------- sections ---------- */
.hm-section{ padding:96px 0; position:relative; }
.hm-head{ text-align:center; max-width:760px; margin:0 auto 48px; }
.hm-head h2{ font-size:clamp(2rem, 4vw, 3.1rem); letter-spacing:-0.035em; line-height:1.08; margin:14px 0 12px; }
.hm-head p{ color:var(--hm-sub); font-size:1.06rem; margin:0; }
.hm-tag{
  display:inline-block; padding:6px 14px; border-radius:999px; font-size:0.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-lime); background:color-mix(in srgb, var(--c-lime) 12%, transparent); border:1px solid color-mix(in srgb, var(--c-lime) 30%, transparent);
}

/* reveal */
.hm-rv{ opacity:0; transform:translateY(28px) scale(.985); filter:blur(6px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1), filter .85s ease; transition-delay:var(--rd, 0s); }
.hm-rv.on{ opacity:1; transform:none; filter:none; }
.no-js .hm-rv{ opacity:1; transform:none; filter:none; }

/* ---------- bento ---------- */
.hm-bento{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:18px; }
.hm-card{
  position:relative; display:flex; flex-direction:column; gap:18px; padding:26px; border-radius:26px; overflow:hidden; color:var(--hm-ink);
  transform-style:preserve-3d; transition:border-color .3s ease, box-shadow .3s ease, opacity .85s cubic-bezier(.2,.7,.2,1), filter .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}
.hm-card.on{ transition:border-color .3s ease, box-shadow .3s ease, transform .2s ease-out, opacity .85s, filter .85s; }
.hm-card::before{ /* colour wash */
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 55%);
}
.hm-card::after{ /* cursor spotlight */
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c) 20%, transparent), transparent 50%);
}
.hm-card:hover{ border-color:color-mix(in srgb, var(--c) 55%, transparent); box-shadow:0 34px 80px -40px color-mix(in srgb, var(--c) 80%, transparent); }
.hm-card:hover::after{ opacity:1; }
.hm-card > *{ position:relative; z-index:1; }
.hm-card-top h3{ font-size:1.45rem; letter-spacing:-0.025em; margin:12px 0 8px; }
.hm-card-top p{ color:var(--hm-sub); font-size:0.95rem; line-height:1.55; margin:0; }
.hm-chip{ display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--c); padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--c) 13%, transparent); }
.hm-go{ margin-top:auto; font-weight:700; font-size:0.92rem; color:var(--c); display:inline-flex; gap:6px; transition:transform .2s ease; }
.hm-card:hover .hm-go{ transform:translateX(5px); }
.hm-vis{ flex:1; min-height:150px; border-radius:18px; background:var(--hm-card-2); border:1px solid var(--hm-border); position:relative; overflow:hidden; }
.hm-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.hm-pills span{ font-size:0.76rem; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--c) 35%, transparent); color:var(--hm-ink); }

.c-office{ grid-column:span 4; } .c-design{ grid-column:span 2; }
.c-minutes{ grid-column:span 3; } .c-pdf{ grid-column:span 3; }
.c-holiday{ grid-column:span 4; } .c-globe{ grid-column:span 2; }
.c-check, .c-rest, .c-grocery, .c-wallet{ grid-column:span 3; }

/* paused when off-screen */
.hm-card:not(.play) *, .hm-ai-card:not(.play) *{ animation-play-state:paused !important; }

/* note */
.hm-paper{ background:var(--hm-paper); color:var(--hm-paper-ink); min-height:220px; }
.hm-paper-bar{ display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--hm-paper-line); background:#fff; }
.hm-paper-bar i{ width:22px; height:22px; border-radius:6px; background:#EEF5F0; }
.hm-paper-bar i:first-child{ background:#1E8E5A; }
.hm-paper-body{ padding:6px 22px 16px 44px; background-image:repeating-linear-gradient(180deg, transparent 0 33px, var(--hm-paper-line) 33px 34px); background-position:0 6px; position:relative; }
.hm-paper-body::before{ content:''; position:absolute; left:32px; top:0; bottom:0; width:1px; background:#F3C9C0; }
.hm-typeline{ height:34px; display:flex; align-items:flex-end; padding-bottom:6px; font-family:'Inter', system-ui, sans-serif; font-size:0.92rem; }
.hm-typeline span{ display:inline-block; white-space:nowrap; overflow:hidden; width:0; border-right:2px solid transparent; }
.hm-typeline.l1 span{ font-weight:700; font-size:1rem; color:#0C3A2B; animation:hmTypeL 9s steps(14) infinite; }
.hm-typeline.l2 span{ animation:hmTypeL2 9s steps(36) infinite; }
.hm-typeline.l3 span{ animation:hmTypeL3 9s steps(32) infinite; }
@keyframes hmTypeL{ 0%{ width:0; border-color:#1E8E5A; } 14%{ width:9em; border-color:#1E8E5A; } 15%,90%{ width:9em; border-color:transparent; } 100%{ width:0; } }
@keyframes hmTypeL2{ 0%,16%{ width:0; border-color:transparent; } 17%{ border-color:#1E8E5A; } 42%{ width:22em; border-color:#1E8E5A; } 43%,90%{ width:22em; border-color:transparent; } 100%{ width:0; } }
@keyframes hmTypeL3{ 0%,44%{ width:0; border-color:transparent; } 45%{ border-color:#1E8E5A; } 68%{ width:20em; border-color:#1E8E5A; } 69%,90%{ width:20em; border-color:transparent; } 100%{ width:0; } }
.hm-mini-table{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:0; margin-top:12px; max-width:340px; border:1px solid #CFE3D6; border-radius:6px; overflow:hidden; opacity:0; animation:hmFadeLoop 9s ease infinite; }
.hm-mini-table i{ height:22px; border-right:1px solid #CFE3D6; border-bottom:1px solid #CFE3D6; background:#fff; }
.hm-mini-table i:nth-child(-n+3){ background:#E3F4E9; }
@keyframes hmFadeLoop{ 0%,70%{ opacity:0; transform:translateY(6px); } 76%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }

/* design */
.hm-grid-vis{ background-color:var(--hm-paper); background-image:linear-gradient(#E1ECE5 1px, transparent 1px), linear-gradient(90deg, #E1ECE5 1px, transparent 1px); background-size:16px 16px; display:flex; align-items:center; justify-content:center; min-height:200px; }
.hm-grid-vis svg{ width:100%; max-width:280px; }
.hm-draw{ stroke:#7A4FE0; stroke-width:2.5; fill:rgba(122,79,224,0.08); stroke-dasharray:420; stroke-dashoffset:420; animation:hmDraw 7s ease-in-out infinite; }
.hm-draw.d2{ stroke:#1E8E5A; fill:rgba(30,142,90,0.10); animation-delay:.6s; }
.hm-draw.d3{ fill:none; stroke:#0C3A2B; animation-delay:1.2s; }
.hm-draw.d4{ stroke:#E0861B; fill:rgba(224,134,27,0.12); animation-delay:1.8s; }
@keyframes hmDraw{ 0%{ stroke-dashoffset:420; } 35%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-420; } }
.hm-dim{ stroke:#E2533F; stroke-width:1.5; }
.hm-dimtxt{ font:600 11px 'Inter', sans-serif; fill:#E2533F; }

/* minutes */
.hm-minutes{ padding:12px; display:flex; flex-direction:column; gap:8px; min-height:200px; }
.hm-row{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:var(--hm-card); border:1px solid var(--hm-border); font-size:0.86rem; }
.hm-row em{ font-style:normal; color:var(--hm-sub); font-size:0.8rem; }
.hm-row .st{ font-size:0.72rem; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.s-done{ background:color-mix(in srgb, var(--c-mint) 18%, transparent); color:var(--c-mint); }
.s-prog{ background:color-mix(in srgb, var(--c-sun) 18%, transparent); color:var(--c-sun); }
.s-ai{ background:color-mix(in srgb, var(--c-blue) 20%, transparent); color:var(--c-blue); animation:hmBlink 1.6s ease-in-out infinite; }
@keyframes hmBlink{ 50%{ opacity:.55; } }
.hm-toast{ align-self:flex-end; margin-top:auto; font-size:0.82rem; font-weight:600; padding:8px 14px; border-radius:12px; color:#fff; background:linear-gradient(90deg, var(--c-blue), var(--c-violet)); box-shadow:0 12px 30px -12px var(--c-blue); animation:hmToast 6s ease infinite; }
@keyframes hmToast{ 0%,40%{ opacity:0; transform:translateY(14px) scale(.96); } 48%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }

/* pdf */
.hm-pdf{ display:flex; align-items:center; justify-content:center; gap:16px; min-height:200px; flex-wrap:wrap; padding:16px; }
.hm-doc{ position:relative; width:170px; height:170px; border-radius:10px; background:#fff; padding:20px 18px; box-shadow:0 20px 40px -20px rgba(0,0,0,0.6); transform:rotate(-3deg); }
.hm-doc i{ display:block; height:8px; border-radius:4px; background:#DCE9E1; margin-bottom:12px; position:relative; }
.hm-doc .w9{ width:90%; } .hm-doc .w8{ width:80%; } .hm-doc .w7{ width:70%; } .hm-doc .w6{ width:60%; }
.hm-doc i.hl::after{ content:''; position:absolute; left:-4px; top:-5px; height:18px; width:0; border-radius:4px; background:rgba(255,180,92,0.55); animation:hmHl 5s ease-in-out infinite; }
@keyframes hmHl{ 0%,15%{ width:0; } 45%,90%{ width:calc(100% + 8px); } 100%{ width:0; } }
.hm-stamp{ position:absolute; right:12px; bottom:14px; font:700 0.72rem 'Inter', sans-serif; color:#E2533F; border:2px solid #E2533F; border-radius:6px; padding:3px 7px; transform:rotate(-8deg) scale(0); animation:hmStamp 5s ease infinite; }
@keyframes hmStamp{ 0%,50%{ transform:rotate(-8deg) scale(0); opacity:0; } 58%{ transform:rotate(-8deg) scale(1.25); opacity:1; } 64%,92%{ transform:rotate(-8deg) scale(1); opacity:1; } 100%{ opacity:0; } }
.hm-lock{ font-size:0.8rem; font-weight:700; padding:7px 12px; border-radius:999px; color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); border:1px solid color-mix(in srgb, var(--c) 30%, transparent); }

/* holiday */
.hm-trip{ min-height:210px; background:linear-gradient(170deg, #1d2f5c 0%, #4b5f9e 55%, #f6b38e 100%); }
html[data-theme="light"] .hm-trip{ background:linear-gradient(170deg, #9fd3f0 0%, #cfe6ff 55%, #ffe1c7 100%); }
.hm-trip svg{ position:absolute; inset:10px 10px 46px; width:calc(100% - 20px); height:calc(100% - 56px); }
.hm-route{ stroke:#fff; stroke-width:2.5; stroke-dasharray:7 8; animation:hmDash 1.2s linear infinite; opacity:.9; }
html[data-theme="light"] .hm-route{ stroke:#2F6DDB; }
@keyframes hmDash{ to{ stroke-dashoffset:-30; } }
.hm-plane path{ fill:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35)); }
html[data-theme="light"] .hm-plane path{ fill:#2F6DDB; }
.hm-pin{ fill:#FFB45C; stroke:#fff; stroke-width:2; } .hm-pin.end{ fill:#FF7A66; }
.hm-city{ font:700 12px 'Inter', sans-serif; fill:#fff; }
html[data-theme="light"] .hm-city{ fill:#0C3A2B; }
.hm-budget{ position:absolute; left:14px; right:14px; bottom:12px; display:flex; align-items:center; gap:10px; font-size:0.8rem; font-weight:700; color:#fff; }
html[data-theme="light"] .hm-budget{ color:#0C3A2B; }
.hm-budget .hm-meter{ flex:1; margin:0; background:rgba(255,255,255,0.25); --c:#FFB45C; }

/* globe */
.hm-globe-vis{ display:flex; align-items:center; justify-content:center; min-height:200px; background:radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--c-sky) 25%, transparent), transparent 60%); }
.hm-globe{ width:150px; height:150px; border-radius:50%; overflow:hidden; position:relative;
  background:radial-gradient(circle at 32% 28%, #8fdcff, #2a8ad6 55%, #134b8a 100%);
  box-shadow:inset -18px -18px 40px rgba(0,0,30,0.45), 0 0 40px -6px color-mix(in srgb, var(--c-sky) 70%, transparent);
}
.hm-globe-land{ position:absolute; inset:0 -150px 0 0; width:300px; animation:hmRoll 14s linear infinite;
  background:
    radial-gradient(28px 20px at 30px 50px, #7ed687 98%, transparent), radial-gradient(40px 26px at 80px 92px, #7ed687 98%, transparent),
    radial-gradient(22px 30px at 120px 40px, #ffd166 98%, transparent), radial-gradient(36px 22px at 60px 125px, #7ed687 98%, transparent),
    radial-gradient(28px 20px at 180px 50px, #7ed687 98%, transparent), radial-gradient(40px 26px at 230px 92px, #b9f0b4 98%, transparent),
    radial-gradient(22px 30px at 270px 40px, #ffd166 98%, transparent), radial-gradient(36px 22px at 210px 125px, #7ed687 98%, transparent);
}
@keyframes hmRoll{ to{ transform:translateX(-150px); } }
.hm-badge{ position:absolute; font-size:1.4rem; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:0 8px 20px -8px rgba(0,0,0,0.5); animation:hmBob 3.2s ease-in-out infinite; }
.hm-badge.b1{ left:16%; top:18%; } .hm-badge.b2{ right:14%; top:30%; animation-delay:-1s; } .hm-badge.b3{ left:24%; bottom:12%; animation-delay:-2s; }
@keyframes hmBob{ 50%{ transform:translateY(-8px) scale(1.06); } }

/* grocery */
.hm-stock{ padding:14px; display:flex; flex-direction:column; gap:10px; min-height:190px; }
.hm-stock-row{ display:grid; grid-template-columns:72px 1fr 34px; gap:10px; align-items:center; font-size:0.85rem; }
.hm-stock-row b{ font-size:0.72rem; color:var(--c-mint); }
.hm-stock-row b.warn{ color:var(--c-coral); animation:hmBlink 1.4s ease-in-out infinite; }
.hm-bar{ height:8px; border-radius:8px; background:var(--hm-faint); overflow:hidden; }
.hm-bar i{ display:block; height:100%; width:var(--w); border-radius:inherit; background:var(--c-mint); animation:hmGrow 2s ease both; }
.hm-bar i.low{ background:var(--c-coral); animation:hmDrain 5s ease-in-out infinite; }
@keyframes hmDrain{ 0%{ width:60%; } 60%,100%{ width:var(--w); } }
.hm-deal{ margin-top:auto; font-size:0.84rem; padding:9px 12px; border-radius:12px; background:color-mix(in srgb, var(--c-mint) 14%, transparent); border:1px solid color-mix(in srgb, var(--c-mint) 30%, transparent); animation:hmToast 5s ease infinite; }
.hm-deal b{ color:var(--c-mint); }

/* wallet */
.hm-chart{ display:flex; align-items:flex-end; gap:10px; padding:18px 18px 14px; min-height:190px; }
.hm-chart i{ flex:1; height:var(--h); border-radius:8px 8px 4px 4px; background:linear-gradient(180deg, var(--c-teal), color-mix(in srgb, var(--c-teal) 30%, transparent)); transform-origin:bottom; animation:hmBars 5s ease-in-out infinite; }
.hm-chart i:nth-child(2){ animation-delay:.1s; } .hm-chart i:nth-child(3){ animation-delay:.2s; } .hm-chart i:nth-child(4){ animation-delay:.3s; }
.hm-chart i:nth-child(5){ animation-delay:.4s; } .hm-chart i:nth-child(6){ animation-delay:.5s; } .hm-chart i:nth-child(7){ animation-delay:.6s; }
@keyframes hmBars{ 0%{ transform:scaleY(.1); } 30%,85%{ transform:scaleY(1); } 100%{ transform:scaleY(.1); } }

/* travel checklist: items tick themselves, the ring fills */
.hm-ck{ display:flex; align-items:center; gap:18px; padding:16px 18px; min-height:200px; }
.hm-ck-ring{ position:relative; width:84px; height:84px; flex-shrink:0; }
.hm-ck-ring svg{ width:84px; height:84px; transform:rotate(-90deg); }
.hm-ck-ring circle{ fill:none; stroke-width:7; }
.hm-ck-ring .bg{ stroke:var(--hm-faint); }
.hm-ck-ring .fg{ stroke:var(--c-lime); stroke-linecap:round; stroke-dasharray:163.4; stroke-dashoffset:163.4; animation:hmRing 7s ease-in-out infinite; filter:drop-shadow(0 0 6px color-mix(in srgb, var(--c-lime) 60%, transparent)); }
.hm-ck-ring b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.7rem; }
@keyframes hmRing{ 0%,8%{ stroke-dashoffset:163.4; } 72%,90%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:163.4; } }
.hm-ck ul{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.hm-ck li{ display:flex; align-items:center; gap:10px; font-size:0.86rem; padding:7px 10px; border-radius:10px; background:var(--hm-card); border:1px solid var(--hm-border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; animation:hmCkRow 7s ease infinite; animation-delay:calc(var(--i) * 0.9s); }
.hm-ck li i{ width:16px; height:16px; border-radius:5px; border:2px solid color-mix(in srgb, var(--c-lime) 60%, transparent); flex-shrink:0; position:relative; animation:hmCkBox 7s ease infinite; animation-delay:calc(var(--i) * 0.9s); }
.hm-ck li i::after{ content:''; position:absolute; left:3.5px; top:0; width:4px; height:8px; border:solid var(--hm-ck-tick, #0B1105); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); animation:hmCkTick 7s ease infinite; animation-delay:calc(var(--i) * 0.9s); }
html[data-theme="light"] .hm-ck li i::after{ border-color:#fff; }
@keyframes hmCkBox{ 0%,10%{ background:transparent; } 16%,88%{ background:var(--c-lime); border-color:var(--c-lime); } 100%{ background:transparent; } }
@keyframes hmCkTick{ 0%,10%{ transform:rotate(45deg) scale(0); } 16%,88%{ transform:rotate(45deg) scale(1); } 100%{ transform:rotate(45deg) scale(0); } }
@keyframes hmCkRow{ 0%,10%{ opacity:1; } 16%,88%{ opacity:.62; } 100%{ opacity:1; } }
@media (max-width: 640px){ .hm-ck{ flex-direction:column; align-items:stretch; } .hm-ck-ring{ align-self:center; } }

/* rest */
.hm-soon{ display:flex; align-items:center; justify-content:center; min-height:190px; background:linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--c-pink) 18%, transparent) 50%, transparent 70%); background-size:250% 100%; animation:hmSheen 4s linear infinite; }
.hm-soon span{ font-family:var(--font-head); font-size:1.2rem; font-weight:700; color:var(--c-pink); }
@keyframes hmSheen{ from{ background-position:100% 0; } to{ background-position:-150% 0; } }

/* ---------- AI helpers ---------- */
.hm-ai-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.hm-ai-card{ border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; }
.hm-ai-card::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%); }
.hm-ai-card > *{ position:relative; }
.hm-ai-h{ display:flex; gap:12px; align-items:center; }
.hm-ai-h h3{ font-size:1.15rem; margin:0; }
.hm-ai-h small{ color:var(--hm-sub); font-size:0.8rem; }
.hm-ai-ic{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.hm-chat{ display:flex; flex-direction:column; gap:8px; min-height:232px; }
.hm-chat p{ margin:0; padding:10px 13px; border-radius:16px; font-size:0.88rem; line-height:1.45; max-width:92%; opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease; }
.hm-chat p.show{ opacity:1; transform:none; }
.hm-chat .me{ align-self:flex-end; background:var(--c); color:#0B1105; font-weight:600; border-bottom-right-radius:5px; }
html[data-theme="light"] .hm-chat .me{ color:#fff; }
.hm-chat .bot{ align-self:flex-start; background:var(--hm-card-2); border:1px solid var(--hm-border); border-bottom-left-radius:5px; }
.hm-chat .bot.ok{ border-color:color-mix(in srgb, var(--c) 50%, transparent); background:color-mix(in srgb, var(--c) 12%, transparent); font-weight:600; }
.hm-dots{ display:inline-flex; gap:3px; margin-right:6px; vertical-align:middle; }
.hm-dots i{ width:6px; height:6px; border-radius:50%; background:var(--c); animation:hmDot 1s ease-in-out infinite; }
.hm-dots i:nth-child(2){ animation-delay:.15s; } .hm-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes hmDot{ 50%{ transform:translateY(-4px); opacity:.5; } }
.hm-link{ margin-top:auto; font-weight:700; color:var(--c); font-size:0.92rem; }
.hm-link:hover{ text-decoration:underline; }

/* ---------- numbers ---------- */
.hm-numbers{ padding:30px 0; }
.hm-num-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.hm-num{ text-align:center; padding:26px 16px; border-radius:22px; background:var(--hm-card); border:1px solid var(--hm-border); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.hm-num b{ display:block; font-family:var(--font-head); font-size:clamp(2.2rem, 4vw, 3.2rem); letter-spacing:-0.04em; line-height:1; background:var(--hm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hm-num span{ display:block; margin-top:8px; color:var(--hm-sub); font-size:0.9rem; }

/* ---------- timeline ---------- */
.hm-timeline{ position:relative; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px; padding-top:34px; }
.hm-tl-line{ position:absolute; left:3%; right:3%; top:10px; height:4px; border-radius:4px; background:var(--hm-faint); overflow:hidden; }
.hm-tl-line i{ display:block; height:100%; width:0; background:var(--hm-grad); box-shadow:0 0 16px var(--c-lime); transition:width .15s linear; }
.hm-tl-step{ position:relative; padding:20px 16px 18px; border-radius:20px; transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease; opacity:.55; }
.hm-tl-step.lit{ opacity:1; border-color:color-mix(in srgb, var(--c) 50%, transparent); box-shadow:0 26px 60px -34px color-mix(in srgb, var(--c) 90%, transparent); transform:translateY(-6px); }
.hm-tl-step time{ font-family:var(--font-mono, ui-monospace, monospace); font-size:0.78rem; color:var(--c); font-weight:700; }
.hm-tl-dot{ position:absolute; right:14px; top:14px; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; background:color-mix(in srgb, var(--c) 14%, transparent); }
.hm-tl-step h4{ font-size:1rem; margin:10px 0 6px; }
.hm-tl-step p{ font-size:0.86rem; color:var(--hm-sub); line-height:1.5; margin:0; }

/* ---------- why + plans + final ---------- */
.hm-why-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.hm-why-card{ padding:24px; border-radius:22px; transition:transform .3s ease, border-color .3s ease; }
.hm-why-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--c) 50%, transparent); }
.hm-why-card span{ font-size:1.6rem; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:color-mix(in srgb, var(--c) 14%, transparent); }
.hm-why-card h4{ font-size:1.05rem; margin:16px 0 6px; }
.hm-why-card p{ color:var(--hm-sub); font-size:0.9rem; margin:0; line-height:1.55; }

.hm-plan-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; max-width:880px; margin:0 auto; }
.hm-plan{ position:relative; padding:30px; border-radius:26px; display:flex; flex-direction:column; gap:14px; }
.hm-plan h3{ font-size:1.6rem; margin:0; }
.hm-plan-sub{ color:var(--hm-sub); margin:0; }
.hm-plan ul{ display:flex; flex-direction:column; gap:10px; margin:4px 0 10px; }
.hm-plan li{ position:relative; padding-left:28px; font-size:0.94rem; }
.hm-plan li::before{ content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; font-size:0.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; color:var(--c-lime); background:color-mix(in srgb, var(--c-lime) 15%, transparent); }
.hm-plan .btn{ margin-top:auto; align-self:flex-start; }
.hm-plan.pro{ border:1px solid transparent; background:linear-gradient(var(--hm-card), var(--hm-card)) padding-box, var(--hm-grad) border-box; box-shadow:0 40px 90px -40px color-mix(in srgb, var(--c-lime) 70%, transparent); }
.hm-plan-flag{ position:absolute; top:18px; right:18px; font-size:0.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:var(--hm-grad); color:#0B1105; }
html[data-theme="light"] .hm-plan-flag{ color:#fff; }

.hm-final-box{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding:48px; border-radius:32px; overflow:hidden; }
.hm-final-box::before{ content:''; position:absolute; inset:-2px; z-index:-1; border-radius:inherit; background:conic-gradient(from var(--hm-ang, 0deg), var(--c-lime), var(--c-sky), var(--c-violet), var(--c-sun), var(--c-lime)); opacity:.35; filter:blur(30px); animation:hmAng 10s linear infinite; }
@property --hm-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes hmAng{ to{ --hm-ang:360deg; } }
.hm-final-box h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing:-0.035em; margin:0 0 10px; }
.hm-final-box p{ color:var(--hm-sub); max-width:520px; margin:0 0 22px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .hm-hero-grid{ grid-template-columns:1fr; }
  .hm-stage{ height:480px; max-width:620px; margin:0 auto; width:100%; }
  .hm-bento{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .c-office, .c-holiday{ grid-column:span 2; }
  .c-design, .c-minutes, .c-pdf, .c-globe, .c-grocery, .c-wallet, .c-check, .c-rest{ grid-column:span 1; }
  .hm-ai-grid{ grid-template-columns:1fr; max-width:620px; margin:0 auto; }
  .hm-timeline{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .hm-tl-line{ display:none; }
  .hm-why-grid, .hm-num-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .hm-hero{ padding:40px 0 30px; }
  .hm-title{ margin-top:18px; }
  .hm-lede{ font-size:1rem; }
  .hm-stage{ height:360px; }
  .hm-orbit{ transform:scale(.62); }
  .hm-float{ width:170px; font-size:0.74rem; padding:10px 11px; }
  .hm-float.f1{ left:0; top:0; } .hm-float.f2{ right:0; top:auto; bottom:4%; }
  .hm-float.f3, .hm-float.f4, .hm-float.f5{ display:none; }
  .hm-scroll{ display:none; }
  .hm-section{ padding:64px 0; }
  .hm-bento{ grid-template-columns:1fr; gap:14px; }
  .hm-bento > .hm-card{ grid-column:span 1; padding:20px; }
  .hm-card-top h3{ font-size:1.25rem; }
  .hm-paper-body{ padding-left:36px; }
  .hm-typeline{ font-size:0.8rem; }
  .hm-timeline{ grid-template-columns:1fr; }
  .hm-why-grid{ grid-template-columns:1fr; }
  .hm-num-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .hm-plan-grid{ grid-template-columns:1fr; }
  .hm-final-box{ padding:28px 22px; }
  .hm-row{ grid-template-columns:1fr auto; } .hm-row em{ display:none; }
}

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hm *, .hm *::before, .hm *::after{ animation:none !important; transition:none !important; }
  .hm-rv, .hm-in{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hm-typeline span, .hm-typing span{ width:auto !important; }
  .hm-mini-table, .hm-toast, .hm-deal, .hm-stamp{ opacity:1 !important; transform:none !important; }
  .hm-draw{ stroke-dashoffset:0 !important; }
  .hm-chat p{ opacity:1 !important; transform:none !important; }
  .hm-spark path{ stroke-dashoffset:0 !important; }
}
.hm-ck li .hm-buy{ margin-left:auto; font-style:normal; font-size:0.72rem; font-weight:700; padding:2px 8px; border-radius:999px; color:var(--c-lime); background:color-mix(in srgb, var(--c-lime) 14%, transparent); border:1px solid color-mix(in srgb, var(--c-lime) 35%, transparent); flex-shrink:0; }