/* ============================================================
   GrowthAlliz — Homepage styles
   Brand: Charcoal #0E1522 · Royal Blue #2563EB · Sora + Manrope
   Global resets, keyframes, media queries and focus states.
   (Layout is authored with utility-level inline styles in index.html,
   following the finalized design system.)
   ============================================================ */

html{scroll-behavior:smooth;}
body{margin:0;background:#0B1018;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:#fff;}
*{box-sizing:border-box;}
::selection{background:#2563EB;color:#fff;}
input,textarea{outline:none;}
input:focus,textarea:focus{border-color:#3A4E72 !important;}
a{-webkit-tap-highlight-color:transparent;}
/* Skip-to-content link — visually hidden until keyboard-focused */
.skip-link{position:fixed;top:-100px;left:16px;z-index:1200;background:#2563EB;color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;padding:12px 20px;border-radius:10px;text-decoration:none;box-shadow:0 8px 24px rgba(37,99,235,0.45);transition:top .18s ease;}
.skip-link:focus{top:16px;outline:2px solid #fff;outline-offset:2px;}
.svc-track{scrollbar-width:thin;scrollbar-color:#2B3A56 transparent;-webkit-overflow-scrolling:touch;}
.svc-track::-webkit-scrollbar{height:8px;}
.svc-track::-webkit-scrollbar-thumb{background:#2B3A56;border-radius:99px;}
.svc-track::-webkit-scrollbar-track{background:transparent;}
summary::-webkit-details-marker{display:none;}
summary::marker{content:"";}
details[open] .faq-plus{transform:rotate(45deg);}

@media (max-width:1080px){ .wrap{padding-left:32px !important;padding-right:32px !important;} }
@media (max-width:920px){
  .why-grid{grid-template-columns:1fr !important;}
  .start-grid{grid-template-columns:1fr !important;gap:44px !important;}
  .case-narr{grid-template-columns:1fr !important;gap:26px !important;}
  .case-foot{justify-content:flex-start !important;}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr !important;}
  .foot-brand{grid-column:1 / -1 !important;max-width:520px !important;}
  .journey{grid-template-columns:1fr 1fr !important;gap:44px 0 !important;}
  .journey-line{display:none !important;}
  .nav-links{display:none !important;}
  .nav-signin{display:none !important;}
}
@media (max-width:640px){
  .wrap{padding-left:20px !important;padding-right:20px !important;}
  .sec{padding-top:76px !important;}
  .hero-wrap{padding-top:64px !important;padding-bottom:64px !important;}
  .trust-grid{grid-template-columns:1fr 1fr !important;}
  .trust-grid > div{border-right:none !important;}
  .form-grid{grid-template-columns:1fr !important;}
  .footer-grid{grid-template-columns:1fr 1fr !important;}
  .case-visual-grid{grid-template-columns:1fr !important;}
  .cta-bar{flex-direction:column !important;align-items:flex-start !important;}
  .journey{grid-template-columns:1fr !important;gap:0 !important;}
  .hero-ctas{flex-direction:column !important;align-items:stretch !important;}
  .hero-ctas a{text-align:center !important;}
}
@media (max-width:400px){
  .trust-grid{grid-template-columns:1fr !important;}
  .footer-grid{grid-template-columns:1fr !important;}
}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #5B87F0;outline-offset:3px;border-radius:6px;}
input::placeholder,textarea::placeholder{color:#5C6B82;}
.field-error{border-color:#EF4444 !important;}
#inquiry-success:focus{outline:none;}
.field-error:focus{border-color:#EF4444 !important;}
@keyframes gaPop{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.ga-panel{animation:gaPop .22s cubic-bezier(.16,.84,.44,1);transform-origin:bottom right;}
.ga-launch{transition:transform .18s ease,box-shadow .18s ease;}
.ga-launch:hover{transform:scale(1.06);}
.ga-opt{transition:border-color .18s,background .18s;}
@media (max-width:640px){
  .ga-panel{width:calc(100vw - 32px) !important;}
  #ga-support{right:16px !important;bottom:16px !important;}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}}

/* ============================================================
   OUR WORK — showcase carousel + demo modal
   ============================================================ */
/* Track holds the project list twice; the JS engine wraps `pos` by one copy
   width so the loop is seamless (translating by a full copy renders identically). */
/* Movement is driven ENTIRELY by the rAF engine in js/main.js (single source
   of truth: one `pos` value written to translate3d). No CSS animation — auto
   scroll, arrows, swipe and pagination all read/write that same transform. */
.work-track.is-dragging{cursor:grabbing;}

/* Desktop: 3 full cards + a ~15-20% peek of the 4th (encourages interaction) */
.work-card{flex:0 0 auto;width:clamp(320px,calc((100vw - 80px) / 3.0 - 24px),440px);text-align:left;background:#0E1626;border:1px solid #1B2740;border-radius:20px;overflow:hidden;cursor:pointer;color:inherit;font:inherit;padding:0;display:block;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.work-card:hover,.work-card:focus-within{transform:scale(1.02);border-color:#2B3A56;box-shadow:0 26px 60px rgba(0,0,0,0.5);}
.work-card-hit{position:absolute;inset:0;z-index:3;width:100%;height:100%;background:transparent;border:0;padding:0;margin:0;cursor:pointer;border-radius:20px;}
.work-thumb{position:relative;width:100%;aspect-ratio:16/9;background:#0A0F1A;overflow:hidden;}
.work-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.work-play{position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;background:rgba(37,99,235,0.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(37,99,235,0.4);transition:box-shadow .22s ease,transform .22s ease,background .22s ease;}
.work-card:hover .work-play,.work-card:focus-within .work-play{background:#2563EB;box-shadow:0 0 0 10px rgba(37,99,235,0.18),0 10px 34px rgba(37,99,235,0.6);transform:scale(1.06);}
.work-play svg{margin-left:3px;}

/* prefers-reduced-motion → static, user-scrollable strip (no auto-scroll) */
@media (prefers-reduced-motion:reduce){
  .work-marquee{overflow-x:auto !important;-webkit-mask-image:none !important;mask-image:none !important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
  .work-track{transform:none !important;}
  .work-card{scroll-snap-align:start;}
}

.work-modal.is-open{display:flex !important;}
.work-modal.is-open .work-modal-backdrop{opacity:1;}
.work-modal.is-open .work-modal-panel{opacity:1;transform:scale(1);}
.work-modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Tablet: 2 full cards */
@media (max-width:1024px){
  .work-card{width:calc((100vw - 104px) / 2);}
}
/* Mobile: exactly 1 full-width card */
@media (max-width:640px){
  .work-card{width:calc(100vw - 68px);max-width:400px;}
  .work-track{padding-left:20px !important;padding-right:20px !important;}
}

/* ---- Prev / Next navigation (premium dark glass) ---- */
.work-nav{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(14,22,38,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #2B3A56;color:#DDE3EC;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,0.42);transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;}
.work-nav:hover{transform:translateY(-50%) scale(1.06);}
.work-nav:active{transform:translateY(-50%) scale(0.97);}
.work-nav:focus-visible{outline:2px solid #5B87F0;outline-offset:3px;}
.work-nav-prev{left:24px;}
.work-nav-next{right:24px;}
@media (max-width:640px){
  .work-nav{width:42px;height:42px;background:rgba(14,22,38,0.85);}
  .work-nav-prev{left:10px;}
  .work-nav-next{right:10px;}
}

/* ---- Progress dots ---- */
.work-dot{width:7px;height:7px;border-radius:50%;background:#2B3A56;border:0;padding:0;cursor:pointer;transition:background .3s ease,width .3s ease;}
.work-dot:hover{background:#3A4E72;}
.work-dot.is-active{width:24px;border-radius:5px;background:#2563EB;}
.work-dot:focus-visible{outline:2px solid #5B87F0;outline-offset:3px;}

/* Hover states — applied by js/main.js via [data-hover] (see main.js).
   Kept as a data-attribute runtime so hover styling lives with the
   element it targets and survives content edits. */