/* Home page only: hero, living workflow, work teaser. Builds on style.css.
   Without JavaScript or with reduced motion everything shows finished and static. */

/* ---------- Hero ---------- */
.hero { padding-top: clamp(64px, 14vh, 150px); padding-bottom: clamp(48px, 9vh, 88px); text-align: center; }
.hero h1 { font-size: clamp(40px, 7.4vw, 88px); line-height: 1.02; max-width: 13ch; margin: 0 auto 24px; }
.hero .lead { margin: 0 auto 36px; }
.hero .ctas { justify-content: center; }
.shine { background: linear-gradient(100deg, #fff 0%, #d9ccff 30%, var(--violet) 55%, var(--cyan) 80%, #fff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion .shine { animation: shine 9s ease-in-out infinite; }
@keyframes shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.scroll-hint { display: none; }
.motion .scroll-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 64px 0 0; font-size: 13px; color: var(--dim); }
.scroll-hint span { width: 1px; height: 28px; background: linear-gradient(var(--violet), transparent); animation: hint 2.2s ease-in-out infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Living workflow ---------- */
.flow { position: relative; padding: 16px 0 clamp(48px, 9vh, 96px); }
.motion .flow { height: 340vh; padding: 0; }
.motion .stage { position: sticky; top: var(--header); height: calc(100vh - var(--header)); height: calc(100svh - var(--header)); display: flex; align-items: center; }
.stage-inner { width: 100%; }
.stage-head { text-align: center; margin-bottom: clamp(24px, 5vh, 56px); }
.stage-head .kicker { margin-bottom: 14px; }
.flow-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: grid; gap: 14px; text-align: left; }
.flow-step { display: grid; grid-template-columns: 34px 1fr; gap: 10px; color: var(--muted); font-size: 16px; }
.flow-step b { font: 600 12px/2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--violet); }
.flow-step strong { color: var(--fg); font-weight: 600; }
.motion .flow-steps { display: block; position: relative; height: 5em; text-align: center; }
.motion .flow-step { position: absolute; inset: 0; display: block; opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity .55s, transform .55s, filter .55s; }
.motion .flow-step b { display: none; }
.motion .flow-step strong { display: block; font-size: clamp(20px, 2.6vw, 28px); letter-spacing: -.02em; margin-bottom: 4px; }
.motion .flow-step.is-on { opacity: 1; transform: none; filter: none; }
.rail { display: none; }
.motion .rail { display: block; width: 200px; height: 2px; margin: 16px auto 0; background: var(--line2); border-radius: 2px; overflow: hidden; }
.rail i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink)); }

.diagram { position: relative; display: grid; grid-template-columns: 1fr minmax(180px, 240px) 1fr; align-items: center; gap: clamp(24px, 6vw, 96px); }
.diagram::before { /* faint dotted grid that fades out at the edges */
  content: ""; position: absolute; inset: -40px -16px; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(ellipse at center, #000 20%, transparent 70%); mask: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.wire-base path { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1.5; }
.wire-lit path { fill: none; stroke-width: 2; stroke-linecap: round; }
.wire-lit path.in { stroke: url(#wireIn); }
.wire-lit path.out { stroke: url(#wireOut); }
.sparks circle { fill: #fff; }
.sparks circle.halo { filter: url(#soft); }

.col { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; z-index: 1; }
.node { padding: 14px 16px; background: rgba(14,14,24,.82); transition: border-color .5s, box-shadow .5s, opacity .3s; overflow: hidden; }
.node-top { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.glow-card .node-sub { margin: 4px 0 0 30px; font-size: 13px; color: var(--muted); }
.ico { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--cyan); position: relative; flex: none; opacity: .9; }
.ico-mail::after { content: ""; position: absolute; left: 2px; right: 2px; top: 3px; height: 7px; border: 1.5px solid var(--cyan); border-top: 0; border-left-color: transparent; border-right-color: transparent; border-radius: 0 0 4px 4px; }
.ico-sheet { background: linear-gradient(var(--cyan), var(--cyan)) 50% 0 / 1.5px 100% no-repeat, linear-gradient(var(--cyan), var(--cyan)) 0 50% / 100% 1.5px no-repeat; }
.ico-inv { border-radius: 3px 3px 6px 6px; background: linear-gradient(var(--cyan), var(--cyan)) 4px 5px / 9px 1.5px no-repeat, linear-gradient(var(--cyan), var(--cyan)) 4px 9px / 6px 1.5px no-repeat; }
.ico-box { border-radius: 4px; background: linear-gradient(var(--cyan), var(--cyan)) 0 6px / 100% 1.5px no-repeat; }
.mini { margin: 10px 0 0 30px; display: grid; gap: 5px; }
.mini i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); transition: background .5s; }
.mail i:nth-child(1) { width: 90%; } .mail i:nth-child(2) { width: 70%; } .mail i:nth-child(3) { width: 80%; }
.sheet { grid-template-columns: repeat(3, 1fr); gap: 3px; } .sheet i { height: 6px; border-radius: 1px; }
.inv i:nth-child(1) { width: 60%; } .inv i:nth-child(2) { width: 40%; background: rgba(110,231,255,.25); }
.orders { grid-template-columns: repeat(3, 1fr); } .orders i { height: 8px; }
.src.lit { border-color: rgba(110,231,255,.38); box-shadow: 0 0 0 1px rgba(110,231,255,.08), 0 0 34px -8px rgba(110,231,255,.55); }
.src.lit .mini i { background: rgba(110,231,255,.28); }
/* while the AI reads a source, its contents shimmer */
.motion .src.read .mini i { background: linear-gradient(90deg, rgba(110,231,255,.18), rgba(110,231,255,.55), rgba(110,231,255,.18)) 0 0 / 200% 100%; animation: scan 1.6s linear infinite; }
.motion .src.read .mini i:nth-child(2n) { animation-delay: -.5s; }
@keyframes scan { to { background-position: -200% 0; } }

.check { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1.5px solid var(--pink); position: relative; transition: background .4s, box-shadow .4s; }
.check::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--pink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.out.lit { border-color: rgba(240,171,252,.42); box-shadow: 0 0 40px -10px rgba(240,171,252,.6); }
.out .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(var(--b, 1)); background: linear-gradient(90deg, var(--violet), var(--pink)); opacity: .7; }
.motion .out .bar { transform: scaleX(var(--b, 0)); }
.out.ok .node-top::after { content: "Approved"; margin-left: auto; font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: #0a0a12; background: var(--pink); padding: 4px 6px; border-radius: 5px; box-shadow: 0 0 16px rgba(240,171,252,.6); }

.core { position: relative; z-index: 1; aspect-ratio: 1; display: grid; place-items: center; }
.core-glow { position: absolute; inset: -30%; background: radial-gradient(circle, rgba(167,139,250,.45), rgba(110,231,255,.12) 40%, transparent 68%); filter: blur(10px); opacity: var(--core, 1); }
.pulse { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(214,200,255,.8); opacity: 0; pointer-events: none; }
.rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.rings circle { fill: none; stroke-linecap: round; }
.rings .r1 { stroke: rgba(167,139,250,.35); stroke-width: 1; stroke-dasharray: 2 6; }
.rings .r2 { stroke: rgba(110,231,255,.5); stroke-width: 1.5; stroke-dasharray: 60 420; }
.rings .r3 { stroke: rgba(240,171,252,.45); stroke-width: 1.5; stroke-dasharray: 30 160 80 120; }
.orb { position: relative; width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #d8ccff 14%, #8b5cf6 42%, #312e81 78%, #0b0b1a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 60px rgba(139,92,246,.75), 0 0 140px rgba(110,231,255,.25); }
.orb::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(110,231,255,.7), transparent 30%, rgba(240,171,252,.6), transparent 60%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%); opacity: .8; }
.motion .orb::after { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.orb span { font-weight: 700; font-size: 20px; letter-spacing: .04em; color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.9); }
.core-label { position: absolute; bottom: -6px; left: -40px; right: -40px; margin: 0; text-align: center; font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .4s; }
.core.busy .core-label { color: #d9ccff; }

/* Static (no JavaScript or reduced motion): the finished picture */
html:not(.motion) .src { border-color: rgba(110,231,255,.3); }
html:not(.motion) .out { border-color: rgba(240,171,252,.35); }

/* ---------- Service areas, teasers, links ---------- */
.area h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 10px; }
.area > p:not(.tag) { margin-bottom: 18px; }
.area.alt .tag { color: var(--pink); }
.more { margin: 28px 0 0; }
.more a { color: var(--fg); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(167,139,250,.5); padding-bottom: 2px; transition: border-color .2s; }
.more a:hover { border-color: var(--cyan); }
.more span { display: inline-block; transition: transform .2s; }
.more a:hover span { transform: translateX(4px); }

.teasers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.teaser { display: block; color: inherit; text-decoration: none; transition: transform .3s, border-color .3s; }
.teaser:hover { transform: translateY(-3px); border-color: var(--line2); }
.teaser h3 { font-size: 18px; line-height: 1.3; }
.teaser p:not(.tag) { font-size: 15px; }
.t-ico { display: block; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; position: relative; border: 1px solid rgba(167,139,250,.35); background: radial-gradient(circle at 30% 20%, rgba(167,139,250,.35), rgba(110,231,255,.08) 70%); box-shadow: 0 0 24px -6px rgba(167,139,250,.6); }
.t-ico::before, .t-ico::after { content: ""; position: absolute; }
.t-books::before { left: 11px; right: 11px; top: 12px; height: 18px; background: linear-gradient(var(--cyan), var(--cyan)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) 0 8px / 70% 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) 0 16px / 85% 2px no-repeat; }
.t-orders::before { left: 11px; right: 11px; top: 12px; bottom: 11px; border: 2px solid var(--cyan); border-radius: 4px; }
.t-orders::after { left: 11px; right: 11px; top: 18px; height: 2px; background: var(--cyan); }
.t-photo::before { left: 10px; right: 10px; top: 13px; bottom: 12px; border: 2px solid var(--cyan); border-radius: 5px; }
.t-photo::after { top: 17px; width: 10px; height: 10px; border: 2px solid var(--pink); border-radius: 50%; box-sizing: border-box; left: calc(50% - 5px); }
.t-app::before { left: calc(50% - 7px); top: 9px; width: 14px; height: 24px; border: 2px solid var(--cyan); border-radius: 4px; box-sizing: border-box; }
.t-app::after { left: calc(50% - 3px); bottom: 12px; width: 6px; height: 2px; border-radius: 1px; background: var(--pink); }

.own-apps { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 12px 18px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255,255,255,.03); font-weight: 600; }
.own-apps .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pink); box-shadow: 0 0 0 4px rgba(240,171,252,.15), 0 0 14px var(--pink); }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .hero { text-align: left; }
  .hero h1, .hero .lead { margin-left: 0; }
  .hero .ctas, .motion .scroll-hint { justify-content: flex-start; }
  .motion .scroll-hint { margin-top: 44px; }
  .diagram { grid-template-columns: 1fr; gap: 26px; }
  .col { grid-template-columns: 1fr 1fr; gap: 10px; }
  .node { padding: 10px 12px; }
  .node-top { font-size: 13px; gap: 8px; }
  .ico, .check { width: 16px; height: 16px; }
  .check::after { left: 4.5px; top: 2px; width: 4px; height: 7px; }
  .mini { display: none; }
  .glow-card .node-sub { margin: 3px 0 0 24px; font-size: 11.5px; line-height: 1.35; }
  .core { width: 132px; margin: 0 auto; }
  .core-label { bottom: -14px; }
  .motion .core-label { display: none; }
  .out.ok .node-top::after { display: none; }
  .out.ok .check { background: var(--pink); box-shadow: 0 0 12px var(--pink); }
  .out.ok .check::after { border-color: #0a0a12; }
  .motion .flow-steps { height: 6.8em; }
  .motion .flow-step { font-size: 14px; }
  .motion .stage-head { margin-bottom: 18px; }
  .own-apps { border-radius: 16px; align-items: flex-start; }
  .own-apps .dot { margin-top: 8px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .motion .flow-step span { font-size: 13px; }
  .core { width: 104px; }
  .glow-card .node-sub { display: none; }
}