/* ===========================================================================
   Clearwork marketing site - global styles
   CSS is reused verbatim from the design handoff (Desktop + Mobile standalones).
   The cw-* rules drive the desktop layout, cwm-* the mobile layout, and the
   responsive switch at the bottom serves one or the other by viewport width.
   =========================================================================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; background:#0C1620; scroll-behavior:smooth; }
::selection { background:#2E9BC9; color:#04252f; }
a { text-decoration:none; color:inherit; }

/* ---- Desktop keyframes + helpers (verbatim from Desktop standalone) ---- */
@keyframes cw-spin { to { transform:rotate(360deg); } }
@keyframes cw-spin-rev { to { transform:rotate(-360deg); } }
@keyframes cw-ring { 0% { transform:scale(1); opacity:.5; } 100% { transform:scale(3.6); opacity:0; } }
@keyframes cw-glow { 0%,100% { opacity:.45; } 50% { opacity:.8; } }
@keyframes cw-drift { from { transform:translate(0,0); } to { transform:translate(-60px,-60px); } }
@keyframes cw-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes cw-caret { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes cw-type { from { width:0; } to { width:100%; } }
@keyframes cw-heroline { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes cw-statusblink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@keyframes cw-flow { to { background-position:18px 0; } }
@keyframes cw-flowin { to { background-position:-12px 0; } }
@keyframes cw-travel { 0% { left:-6px; opacity:0; } 15% { opacity:1; } 85% { opacity:1; } 100% { left:100%; opacity:0; } }
@keyframes cw-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes cw-scan { 0% { transform:translateY(-44px); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform:translateY(340px); opacity:0; } }
@keyframes cw-orbitpulse { 0%,100% { box-shadow:0 0 0 0 rgba(46,155,201,0); } 50% { box-shadow:0 0 0 5px rgba(46,155,201,.1); } }
.cw-rv { opacity:0; transform:translateY(24px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.cw-rv.cw-in { opacity:1; transform:none; }
.cw-lift { position:relative; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
.cw-lift:hover { transform:translateY(-4px); box-shadow:0 24px 50px -26px rgba(0,0,0,.6); border-color:#3a4f5e; }
.cw-nav-link { position:relative; }
.cw-nav-link::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:1.5px; background:#2E9BC9; transition:width .25s ease; }
.cw-nav-link:hover::after { width:100%; }
.cw-btn { transition:transform .2s ease, box-shadow .2s ease; }
.cw-btn:hover { transform:translateY(-2px); box-shadow:0 0 26px -6px rgba(46,155,201,.55); }
.cw-typeline { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; border-right:2px solid #7cc3df; animation:cw-type 2s steps(30) .3s both, cw-caret 1.1s step-end 1.1s infinite; }

/* ---- Mobile keyframes + helpers (verbatim from Mobile standalone) ---- */
@keyframes cwm-caret { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes cwm-ring { 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(2.6); opacity:0 } }
@keyframes cwm-flowup { 0%{ transform:translateY(0); opacity:0 } 15%{opacity:1} 85%{opacity:1} 100%{ transform:translateY(-186px); opacity:0 } }
@keyframes cwm-marq { to { transform:translateX(-50%); } }
@keyframes cwm-zap { 0%,86%,100%{ opacity:0 } 88%,95%{ opacity:1 } }
@keyframes cwm-dock { 0%{ transform:translateX(20px); opacity:0 } 22%,82%{ transform:translateX(0); opacity:1 } 100%{ transform:translateX(20px); opacity:0 } }
@keyframes cwm-status { 0%,26%{ opacity:1; transform:translateY(0) } 33%,100%{ opacity:0; transform:translateY(4px) } }
@keyframes cwm-ignite { 0%,100%{ box-shadow:0 0 24px -8px rgba(127,227,255,.35) } 50%{ box-shadow:0 0 32px -4px rgba(127,227,255,.6) } }
@keyframes cwm-drift { 0%{ transform:translate(0,0) } 50%{ transform:translate(4%,3%) } 100%{ transform:translate(0,0) } }
@keyframes cwm-float { 0%{ transform:translateY(0); opacity:.25 } 50%{ transform:translateY(-22px); opacity:.6 } 100%{ transform:translateY(0); opacity:.25 } }
@keyframes cwm-heroline { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.cwm-scroll::-webkit-scrollbar{ display:none; }
.cwm-scroll{ -ms-overflow-style:none; scrollbar-width:none; }

/* ---- Reduced motion: disable typing, reveals, parallax, ambient motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .cw-typeline { width:auto !important; border-right:none !important; }
  .cw-rv { opacity:1 !important; transform:none !important; }
  [data-parallax] { transform:none !important; }
}

/* ===========================================================================
   Responsive switch - one site, two structures.
   Desktop layout at wide widths; the purpose-built mobile layout on phones and
   tablet-portrait. Content is identical; only layout and interaction differ.
   =========================================================================== */
.cw-mobile { display:none; }
@media (max-width: 900px) {
  .cw-desktop { display:none !important; }
  .cw-mobile  { display:block !important; }
}

/* Legal pages (privacy / terms) - simple, on-brand, readable measure */
.legal-wrap { max-width:760px; margin:0 auto; padding:64px 24px 96px; font-family:'Hanken Grotesk',sans-serif; color:#c7d2da; }
.legal-nav { max-width:760px; margin:0 auto; padding:22px 24px; }
.legal-wrap h1 { font-weight:300; font-size:44px; letter-spacing:-0.035em; color:#FAF9F6; margin:0 0 8px; }
.legal-wrap h2 { font-weight:500; font-size:22px; letter-spacing:-0.01em; color:#eaf0f4; margin:40px 0 12px; }
.legal-wrap p, .legal-wrap li { font-size:16px; line-height:1.72; color:#aebcc7; }
.legal-wrap p { margin:0 0 16px; }
.legal-wrap ul { margin:0 0 16px; padding-left:22px; }
.legal-wrap li { margin-bottom:8px; }
.legal-wrap a { color:#7cc3df; border-bottom:1px solid rgba(124,195,223,.4); }
.legal-wrap .eff { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#7cc3df; margin:0 0 40px; }
.legal-wrap strong { color:#dbe4ea; font-weight:600; }
@media (max-width:640px){ .legal-wrap h1{ font-size:34px; } }

/* Footer link hover (design used a runtime style-hover; reproduced here) */
.cw-foot-link:hover { color:#FAF9F6 !important; }

/* FAQ page — centered questions, lighter answers beneath, premium dark */
.faq-wrap { max-width:760px; margin:0 auto; padding:76px 24px 100px; text-align:center; }
.faq-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:#7cc3df; margin-bottom:20px; }
.faq-h1 { font-weight:300; font-size:52px; line-height:1.06; letter-spacing:-0.035em; color:#FAF9F6; margin:0 0 22px; }
.faq-lead { font-size:18px; line-height:1.65; color:#9fb0bd; max-width:600px; margin:0 auto; }
.faq-group { margin-top:80px; }
.faq-group-label { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:#7cc3df; margin:0 0 10px; }
.faq-group-rule { width:44px; height:2px; background:#2E9BC9; margin:0 auto 8px; opacity:.75; }
.faq-item { padding:34px 0; border-bottom:1px solid rgba(46,155,201,.10); }
.faq-item:last-child { border-bottom:none; }
.faq-q { font-weight:600; font-size:24px; line-height:1.3; letter-spacing:-0.015em; color:#FAF9F6; margin:0 0 14px; }
.faq-a { font-weight:400; font-size:16.5px; line-height:1.75; color:#9fb0bd; max-width:640px; margin:0 auto; }
.faq-cta { margin-top:72px; padding-top:44px; border-top:1px solid rgba(46,155,201,.15); display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){
  .faq-wrap { padding:52px 22px 84px; }
  .faq-h1 { font-size:34px; }
  .faq-q { font-size:20px; }
}