/* Vittafy homepage - globals only (resets, keyframes, link defaults). Layout lives inline. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F4FAF1; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }
a { color: #14432B; }
a:hover { color: #2E6B33; }
::selection { background: #F2F85C; color: #0F3D22; }

/* .vf-reveal is inert. A JS-driven scroll reveal cannot work here: the DC runtime
   re-renders the template, which strips imperatively-added classes and detaches the
   observed nodes, so nothing ever revealed and the page sat blank. Any entrance
   animation has to be pure CSS or owned by the logic class. */

@keyframes vf-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes vf-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-3%,4%) scale(1.06); } }

/* Reduced motion. Decorative loops and entrances stop; motion that carries state stays
   but loses its travel. Deliberately NOT a blanket `* { animation: none }`: that also
   deleted the loading spinner and the live-status pulse, which are feedback. The
   count-up, typewriter and chat replay are JS-driven and check the same query
   (window.vfReduceMotion, set in homepage.js). Base rules live in base.css. */
@media (prefers-reduced-motion: reduce) {
  .vf-hglow, .vf-hphone, .vf-phone, .vf-insightcard, .vf-flowx, .vf-blink, .vf-mails, .vf-travel,
  .vf-feed, .vf-drop, .vf-sheen, .vf-spin, .vf-halo, .vf-kept > span, .vf-ring, .vf-tick,
  .vf-fly, .vf-orbspin, .vf-orb::before, .vf-shimmer, .vf-cursor, .vf-in { animation: none !important; }
  /* keep the entrance/pulse/typing-dot feedback, opacity only */
  @keyframes vf-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
  @keyframes vf-ans { from { opacity: 0; } to { opacity: 1; } }
  @keyframes vf-dot { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
}

@keyframes vf-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: .4; } }


/* ---- responsive: inline styles need !important to be overridden ---- */
@media (max-width: 1024px) {
  .vf-hero { grid-template-columns: 1fr !important; gap: 36px !important; }
  .vf-hero > div:first-of-type { padding-bottom: 0 !important; }
  .vf-two { grid-template-columns: 1fr !important; gap: 32px !important; }
  .vf-ask { display: flex !important; flex-direction: column-reverse !important; }
  .vf-grid3 { grid-template-columns: 1fr 1fr !important; }
  .vf-panel { padding: 40px 32px !important; border-radius: 32px !important; }
  .vf-cta { padding: 44px 32px !important; border-radius: 32px !important; }
  .vf-sec { padding-top: 76px !important; }
}
@media (max-width: 900px) {
  .vf-nav { gap: 16px !important; }
  .vf-nav > a { font-size: 12px !important; }
}
@media (max-width: 720px) {
  .vf-grid3 { grid-template-columns: 1fr !important; }
  .vf-panel { padding: 32px 20px !important; }
  .vf-cta { padding: 36px 22px !important; }
  .vf-sec { padding-left: 18px !important; padding-right: 18px !important; padding-top: 64px !important; }
}
/* Hero CTAs: side-by-side only above the phone pass. These rules MUST stay scoped to
   the row layout - below 620px the row becomes a column, where flex-basis/shrink act
   on HEIGHT and were squashing the 52px buttons into thin slivers. */
@media (min-width: 621px) {
  .vf-herocta a { flex: 0 1 auto; justify-content: center; white-space: nowrap; }
}

/* Hero phone: the three sliding panes are absolutely positioned inside the 352x700
   design box, so compressing the frame clipped their content on every phone under
   ~410px. Keep the box at design size and zoom the whole mock down instead - zoom
   scales the layout box too, so nothing overflows and the float animation survives. */
.vf-phone { width: 352px !important; max-width: none !important; height: 700px !important; aspect-ratio: auto !important; }
.vf-phone > div { height: 100% !important; }
/* On phones the full 700px frame made the hero scroll for ages, and cropping it just
   faded out real content mid-card. Instead: shorten the frame to 520px and drop the
   one filler block inside the dashboard pane, so everything still visible is COMPLETE.
   The other two panes have flex:1 bodies that absorb the height change on their own. */
@media (max-width: 620px) {
  .vf-phone { zoom: .9; height: 566px !important; animation: none !important; }
  .vf-pane { padding: 6px 16px 16px !important; gap: 11px !important; }
  .vf-pane > div:nth-child(5) { display: none !important; }
}
@media (max-width: 400px) { .vf-phone { zoom: .82; } }
@media (max-width: 344px) { .vf-phone { zoom: .72; } }
/* The floating "VITTAFY AI" card is a desktop-only flourish: below 620px it became a
   full-width block above the mock, pushing the hero down and repeating what the
   insight card inside the phone already shows. */
@media (max-width: 620px) { .vf-insightcard { display: none !important; } }

@media (max-width: 720px) {
  .vf-chiprow { padding-left: 0 !important; }
  .vf-inbox { padding: 16px !important; }
}

@keyframes vf-dot { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }
@media (max-width: 1024px) { .vf-grid4 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 1150px) { .vf-insightcard { left: auto !important; right: 0 !important; bottom: 24px !important; } }
@media (max-width: 720px) { .vf-grid4 { grid-template-columns: 1fr !important; } .vf-insightcard { position: static !important; width: 100% !important; margin-bottom: 18px !important; animation: none !important; } }

/* ---- phone pass (tested at 430px / iPhone 16 Pro Max) ---- */
@media (max-width: 620px) {
  /* header: on phones the inline section links collapse into a menu button (.vf-menu),
     so wordmark + menu + Install fit and no section is unreachable from the top. */
  .vf-nav { flex-wrap: nowrap !important; gap: 0 !important; justify-content: flex-end !important; }
  .vf-nav > a:not(:last-child) { display: none !important; }
  .vf-nav > .vf-menu { display: block; }
  .vf-nav > a:last-child { flex: none; white-space: nowrap; }

  /* hero: 40px floor was too large for a 430px screen */
  #top h1 { font-size: 31px !important; letter-spacing: -.022em !important; line-height: 1.08 !important; }
  #top > div > div:first-of-type > p:first-of-type { font-size: 16.5px !important; }
  #top { padding: 28px 18px 0 !important; }
  #top > span:first-of-type { width: 700px !important; height: 380px !important; top: -120px !important; }
  .vf-hero { gap: 18px !important; }
  .vf-hero > div:first-of-type { gap: 18px !important; }
  /* full-width stacked CTAs - 52px tall, no side-by-side squeeze */
  .vf-herocta { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .vf-herocta a { flex: none !important; width: 100% !important; height: 52px !important; min-height: 52px !important;
                  justify-content: center !important; white-space: nowrap; }

  h2 { font-size: 26px !important; letter-spacing: -.02em !important; }
  .vf-sec { padding-top: 56px !important; }
  .vf-cta { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; }
  .vf-cta a { width: 100% !important; justify-content: center !important; }
  .vf-installrow { flex-direction: column !important; }
  .vf-installrow a { width: 100% !important; justify-content: center !important; }
  .vf-panel { border-radius: 26px !important; }
  .vf-waitrow { flex-direction: column !important; }
  .vf-waitrow > * { width: 100% !important; }
  #download input { font-size: 16px !important; }
}

/* Footer: brand block beside three link columns, collapsing to stacked on phones. */
.vf-foottop { row-gap: 40px; }
@media (max-width: 860px) { .vf-foottop { grid-template-columns: 1fr !important; gap: 38px !important; } }
@media (max-width: 560px) { .vf-footcols { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; } }
@media (max-width: 380px) { .vf-footcols { grid-template-columns: 1fr !important; } }

/* vf-wordmark-mq - wordmark sizing on small screens */
@media (max-width: 560px) {
  header img[src*="vittafy-wordmark"] { height: 30px !important; }
  footer img[src*="vittafy-wordmark"] { height: 42px !important; }
}

/* ---- section redesign (Sept 2026) ---- */
@keyframes vf-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .vf-in { animation: vf-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
}
@keyframes vf-flow { to { background-position: 24px 0; } }
.vf-flowx { background: repeating-linear-gradient(90deg, #C9D8C4 0 7px, transparent 7px 12px); background-size: 24px 2px; animation: vf-flow 1.2s linear infinite; }
@keyframes vf-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.vf-blink { animation: vf-blink 2.2s ease-in-out infinite; }
@keyframes vf-mail { 0%,70%,100% { opacity: .75; transform: none; } 78% { opacity: 1; transform: translateX(3px); } }
.vf-mails { animation: vf-mail 4s ease-in-out infinite; }
.vf-sources > div:nth-child(2) .vf-mails { animation-delay: 1s; }
.vf-sources > div:nth-child(3) .vf-mails { animation-delay: 2s; }
.vf-sources > div:nth-child(4) .vf-mails { animation-delay: 3s; }
@keyframes vf-travel { 0% { transform: translateX(-110%); } 55%,100% { transform: translateX(310%); } }
.vf-travel { animation: vf-travel 4s cubic-bezier(.5,0,.3,1) infinite; }
.vf-steps > div:nth-child(2) .vf-travel { animation-delay: 1s; }
.vf-steps > div:nth-child(3) .vf-travel { animation-delay: 2s; }
.vf-steps > div:nth-child(4) .vf-stepdot { background: #14432B !important; color: #E6F03B !important; }
.vf-steps > div:nth-child(4) .vf-stepline { display: none !important; }
@keyframes vf-feed { to { transform: translateY(-50%); } }
.vf-feed { animation: vf-feed 26s linear infinite; }
.vf-feed:hover, .vf-feed:focus-within { animation-play-state: paused; }
@keyframes vf-drop { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }
.vf-drop { animation: vf-drop 1.6s ease-in infinite; }
.vf-drop2 { animation-delay: .8s; }
@keyframes vf-sheen { to { background-position: -200% 0; } }
.vf-sheen { background: linear-gradient(110deg, #E6F03B 0%, #E6F03B 40%, #F7FB9A 50%, #E6F03B 60%, #E6F03B 100%); background-size: 200% 100%; animation: vf-sheen 3.2s linear infinite; }
@keyframes vf-spin { to { transform: rotate(360deg); } }
.vf-spin { animation: vf-spin 6s linear infinite; }
@keyframes vf-chip { 0%,20% { opacity: .25; transform: scale(.92); } 32%,90% { opacity: 1; transform: none; } 100% { opacity: .25; transform: scale(.92); } }
.vf-kept > span { animation: vf-chip 4.8s ease-out infinite; }
.vf-kept > span:nth-child(2) { animation-delay: .15s; }
.vf-kept > span:nth-child(3) { animation-delay: .3s; }
.vf-kept > span:nth-child(4) { animation-delay: .45s; }
@keyframes vf-ring { 0% { box-shadow: 0 0 0 0 rgba(46,107,51,.28); } 70%,100% { box-shadow: 0 0 0 10px rgba(46,107,51,0); } }
.vf-ring { animation: vf-ring 2.4s ease-out infinite; }
@keyframes vf-tick { 0%,6% { opacity: 0; transform: scale(.4); } 14%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: scale(.4); } }
.vf-tick { animation: vf-tick 6s cubic-bezier(.3,1.4,.5,1) infinite both; }
.vf-runsteps > div:nth-child(2) .vf-tick { animation-delay: .6s; }
.vf-runsteps > div:nth-child(3) .vf-tick { animation-delay: 1.2s; }

@media (max-width: 1100px) {
  .vf-foottop { grid-template-columns: minmax(0,1fr) minmax(0,2fr) !important; }
  .vf-footapp { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 1024px) {
  .vf-steps { grid-template-columns: 1fr 1fr !important; }
  .vf-stepline { display: none !important; }
  .vf-small4 { grid-template-columns: 1fr 1fr !important; }
  .vf-cta { grid-template-columns: 1fr !important; gap: 36px !important; }
  .vf-dark { margin-top: 76px !important; padding: 76px 28px !important; }
  footer { margin-top: 76px !important; }
}
@media (max-width: 860px) {
  .vf-bento { grid-template-columns: 1fr !important; }
  .vf-datacard { grid-template-columns: 1fr !important; }
  .vf-datanever { border-left: none !important; border-top: 1px solid #E6EFE2; }
}
@media (max-width: 720px) {
  .vf-probcard { grid-template-columns: 1fr !important; padding: 18px !important; gap: 14px; border-radius: 26px !important; }
  .vf-bracket { display: none !important; }
  .vf-nowhere { padding: 22px !important; }
  .vf-dark { padding: 64px 18px !important; margin-top: 64px !important; }
  .vf-consent { padding: 24px 22px !important; }
  .vf-datacard > div { padding: 28px 22px 22px !important; }
  .vf-bento > div { padding: 26px 22px 0 !important; }
  footer { padding: 56px 18px 28px !important; }
}
@media (max-width: 620px) {
  .vf-steps, .vf-small4, .vf-ctanotes, .vf-facts { grid-template-columns: 1fr !important; }
  .vf-facts { gap: 18px !important; }
  .vf-firstrun { padding: 24px 20px !important; }
  .vf-cta .vf-installrow a { width: 100% !important; }
  .vf-datahead > a { width: 100%; justify-content: center; }
  .vf-mails { display: none !important; }
  .vf-footapp { max-width: none; }
}

@keyframes vf-ans { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vf-ansin { animation: vf-ans .45s cubic-bezier(.22,.9,.3,1) both; }
@media (max-width: 720px) { .vf-askcard { padding: 20px 18px !important; border-radius: 26px !important; } }

/* Ask - AI chat card */
.vf-halo { animation: vf-spin 7s linear infinite; }
@keyframes vf-orb { to { transform: rotate(360deg); } }
.vf-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#F2F85C, #9FD27A, #E6F03B, #CFEA6B, #F2F85C); animation: vf-orb 3s linear infinite; box-shadow: 0 0 22px rgba(230,240,59,.45); }
.vf-orbsm::before { box-shadow: 0 0 14px rgba(230,240,59,.4); }
.vf-orbsm::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #10331F; }
@keyframes vf-shim { to { background-position: -200% 0; } }
.vf-shimmer { background: linear-gradient(90deg, #8FB08A 0%, #F3FBEE 40%, #E6F03B 50%, #F3FBEE 60%, #8FB08A 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: vf-shim 1.6s linear infinite; }
.vf-spinner { animation: vf-spin .8s linear infinite; }
.vf-cursor { animation: vf-caret 1s steps(1) infinite; }
@keyframes vf-caret { 50% { opacity: 0; } }
@media (max-width: 720px) { .vf-askcard { padding: 20px 18px !important; } .vf-askwrap { border-radius: 28px !important; } .vf-askcard { border-radius: 27px !important; } }
@media (max-width: 720px) { .vf-thread { height: 540px !important; } }
@media (max-width: 400px) { .vf-thread { height: 600px !important; } }

/* ---- dark hero (1b) ---- */
.vf-hglow { animation: vf-drift 16s ease-in-out infinite; }
.vf-hphone { animation: vf-float 9s ease-in-out infinite; }
@keyframes vf-fly { 0% { opacity: 0; transform: translate(var(--fx), 20px) scale(.9); } 12%,60% { opacity: 1; transform: translate(0,0) scale(1); } 78%,100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.6); } }
.vf-fly { animation: vf-fly 7.5s cubic-bezier(.22,.9,.3,1) infinite both; }
.vf-fly2 { animation-delay: 2.5s; } .vf-fly3 { animation-delay: 5s; }
.vf-orbspin { animation: vf-spin 4s linear infinite; }
@media (max-width: 1024px) {
  .vf-hero { gap: 12px !important; }
  .vf-hstage { height: 600px !important; }
}
@media (max-width: 620px) {
  #top { padding: 28px 18px 0 !important; }
  #top h1 { font-size: 36px !important; }
  .vf-hstage { height: 500px !important; }
  .vf-hphone { zoom: .82; animation: none !important; }
  .vf-fly > div { padding: 9px 12px 9px 9px !important; }
  .vf-fly:nth-child(1) { left: 0 !important; top: 40px !important; }
  .vf-fly:nth-child(2) { right: 0 !important; top: 150px !important; }
  .vf-fly:nth-child(3) { left: 0 !important; top: 270px !important; }
}
@media (max-width: 380px) { .vf-hphone { zoom: .74; } .vf-fly { zoom: .9; } }
@media (max-width: 620px) { .vf-hphone > div { gap: 10px !important; } }

/* ---- style-hover (canvas-only attribute) as real CSS. !important because the properties are also set inline. ---- */
.vf-hov-1:hover { background:#14432B !important; }
.vf-hov-2:hover { background:#F4FAF1 !important; }
.vf-hov-3:hover { background:#FCFEFA !important; }
.vf-hov-4:hover { background:#FFFFFF !important; }
.vf-hov-5:hover { background:rgba(15,61,34,.16) !important; }
.vf-hov-6:hover { border-color:#E6C34A !important; }
.vf-hov-7:hover { box-shadow:0 16px 34px rgba(20,52,36,.10) !important; }
.vf-hov-8:hover { color:#F2F85C !important; }
.vf-hov-9:hover { border-color:#E6F03B !important; color:#F3FBEE !important; }
.vf-hov-10:hover { background:#0F3D22 !important; color:#F2F85C !important; }
.vf-hov-11:hover { border-color:#E6F03B !important; }

/* ---- phone menu (native <details>: no JS needed to open, homepage.js closes it on navigation) ---- */
.vf-menu { display: none; position: relative; margin-right: 10px; }
.vf-menu summary { list-style: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 22px; cursor: pointer; color: var(--vf-snow);
  border: 1px solid rgba(255,255,255,.22); }
.vf-menu summary::-webkit-details-marker { display: none; }
.vf-menu[open] summary { background: rgba(255,255,255,.10); }
.vf-menupanel { position: absolute; right: 0; top: calc(100% + 12px); min-width: 232px; padding: 8px;
  border-radius: 20px; background: var(--vf-forest-night); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.32); display: flex; flex-direction: column; }
.vf-menupanel a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px;
  font: 500 15px/1 'Poppins', sans-serif; color: var(--vf-mist); text-decoration: none; }
.vf-menupanel a:hover { background: rgba(255,255,255,.06); color: var(--vf-lime-hi); }