/* =============================================================
   Z2One.ai — Main Stylesheet
   Global resets, typography, animations, reveal transitions,
   interactive states and responsive rules.
   ============================================================= */

:root {
  --bg:            #07070e;
  --text:          #ffffff;
  --accent:        #a855f7;   /* purple  */
  --accent-2:      #6366f1;   /* indigo  */
  --accent-3:      #3b82f6;   /* blue    */
  --font-display:  'Yeseva One', serif;
  --font-body:     'Belleza', system-ui, sans-serif;
  --maxw:          1200px;

  /* Line-height scale — sized to clear Syne's deep descenders */
  --lh-display:    1.14;   /* hero h1                */
  --lh-heading:    1.28;   /* section h2             */
  --lh-card:       1.4;    /* card h3                */

  /* Spacing rhythm */
  --section-y:     110px;
  --section-y-sm:  64px;
  --pad-x:         5%;
  --gap:           20px;
  --gap-sm:        14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { text-decoration: none; color: inherit; }
a:hover { color: var(--accent); }

img { display: block; max-width: 100%; }

/* ---------- Layout / typography utilities ---------- */
.section    { padding: var(--section-y) var(--pad-x); }
.section-sm { padding: var(--section-y-sm) var(--pad-x); }
.container  { max-width: var(--maxw); margin: 0 auto; }

.eyebrow {
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); font-weight: 400; margin-bottom: 14px;
}
.h-section {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: -.01em; line-height: var(--lh-heading);
}

/* Gradient display text — root fix for descender (g,y,p,j) clipping.
   display:inline-block gives the glyph its own paint box; the padding-bottom
   keeps descenders inside it so background-clip:text never crops them. */
.grad-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  -webkit-background-clip: text;  background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
  padding-bottom: 0.14em;
  line-height: 1.2;
}

/* ---------- Accessibility: keyboard focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(168,85,247,.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Keyframes ---------- */
@keyframes orb1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,-55px) scale(1.12); } }
@keyframes orb2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-55px,45px) scale(1.08); } }
@keyframes orb3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,35px) scale(1.06); } 66% { transform: translate(-45px,-25px) scale(0.96); } }
@keyframes badge-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,.4); } 50% { box-shadow: 0 0 0 7px rgba(168,85,247,0); } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Scroll reveal ---------- */
.reveal      { opacity:0; transform:translateY(36px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in   { opacity:1; transform:none; }
.reveal-l    { opacity:0; transform:translateX(-32px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-l.in { opacity:1; transform:none; }
.reveal-r    { opacity:0; transform:translateX(32px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-r.in { opacity:1; transform:none; }

.d1 { transition-delay:.08s !important; }
.d2 { transition-delay:.16s !important; }
.d3 { transition-delay:.24s !important; }
.d4 { transition-delay:.32s !important; }
.d5 { transition-delay:.40s !important; }
.d6 { transition-delay:.48s !important; }

/* ---------- Interactive states ---------- */
.nav-link          { position:relative; transition:color .2s; }
.nav-link:hover    { color:#fff !important; }
.nav-link.active   { color:#fff !important; }
.nav-link.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.svc-card       { transition:transform .3s, border-color .3s, background .3s; }
.svc-card:hover { transform:translateY(-5px); border-color:rgba(168,85,247,.35) !important; background:rgba(168,85,247,.05) !important; }

.proj-card       { transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s; }
.proj-card:hover { transform:translateY(-5px); border-color:rgba(99,102,241,.4) !important; }

.proj-tile       { transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.proj-tile:hover { transform:translateY(-6px); box-shadow:0 28px 64px rgba(0,0,0,.55) !important; }

.carousel-arrow:hover { opacity:1 !important; }

/* Featured Projects: native horizontal scrolling */
.projects-carousel-viewport {
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.projects-carousel-viewport .proj-slide { scroll-snap-align: start; }

.blog-card       { transition:transform .3s, border-color .3s; cursor:pointer; }
.blog-card:hover { transform:translateY(-4px); border-color:rgba(168,85,247,.25) !important; }

.cta-pill       { transition:transform .2s, box-shadow .2s !important; }
.cta-pill:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(168,85,247,.4) !important; }

.ghost-btn:hover { background:rgba(255,255,255,.07) !important; }

.social-ic       { transition:color .2s, transform .2s, border-color .2s; }
.social-ic:hover { color:#a855f7 !important; transform:translateY(-2px); border-color:rgba(168,85,247,.35) !important; }

.logo-item       { transition:opacity .3s, filter .3s; }
.logo-item:hover { opacity:1 !important; filter:grayscale(0%) !important; }

input:focus, textarea:focus { border-color:rgba(168,85,247,.5) !important; outline:none; }
input, textarea { transition:border-color .2s; }

/* ---------- Contact form fields ---------- */
.field-input { transition:border-color .2s, box-shadow .2s, background .2s; }
.field-input::placeholder { color:rgba(255,255,255,.28); }
.field-input:focus {
  border-color:rgba(168,85,247,.55) !important;
  box-shadow:0 0 0 3px rgba(168,85,247,.14);
  background:rgba(255,255,255,.05) !important;
}
.field-wrap:focus-within .field-icon { color:var(--accent); }
.field-icon { transition:color .2s; }
.send-btn { transition:transform .2s, box-shadow .2s, filter .2s; }
.send-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 34px rgba(168,85,247,.42); }
.send-btn:active:not(:disabled) { transform:translateY(0); }
.send-btn:disabled { opacity:.65; cursor:not-allowed; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#07070e; }
::-webkit-scrollbar-thumb { background:rgba(168,85,247,.35); border-radius:3px; }

/* ---------- Responsive ----------
   Rules only fire below desktop widths — desktop layout (>1024px) is untouched.
   Pattern: className hook + !important overrides inline JSX styles. */

/* Tablet ≤1024px */
@media (max-width:1024px) {
  :root { --section-y:84px; }               /* trim section rhythm, desktop stays 110 */
  .modal-stats { grid-template-columns:repeat(2,1fr) !important; }  /* 3→2 col */
}
@media (max-width:900px) {
  .desk-nav  { display:none !important; }
  .mob-btn   { display:flex !important; }
  .two-col   { grid-template-columns:1fr !important; gap:48px !important; }
  .stats-2x2 { grid-template-columns:1fr 1fr !important; }
  .proj-row  { flex-direction:column !important; gap:20px !important; }
}
@media (min-width:901px) {
  .mob-btn   { display:none !important; }
  .mob-menu  { display:none !important; }
}
/* Phone ≤760px */
@media (max-width:760px) {
  :root { --section-y:64px; }
  .proj-slide { flex-basis:100% !important; }
  .modal-meta, .modal-feat { grid-template-columns:1fr !important; }
  .modal-stats { grid-template-columns:1fr !important; }   /* 2→1 col */
  .form-row { grid-template-columns:1fr !important; }
  .carousel-arrow { display:none !important; }              /* off-screen on phone; dots + swipe remain */
  .stats-2x2 > div { padding:20px !important; }             /* tighten stat cards */
}
/* Small phone ≤480px — reduce card / modal padding */
@media (max-width:480px) {
  .form-card  { padding: 24px !important; }
  .modal-body { padding: 20px 20px 28px !important; }
}
/* Small phone ≤380px — stats stack so numbers+labels don't collide */
@media (max-width:380px) {
  .stats-2x2 { grid-template-columns:1fr !important; }
}