/* =========================================================
   VENTUREEX — Section styles
   ========================================================= */

/* ---------- Nav ---------- */
.p-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 1.1rem 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  transition: background .3s ease, padding .3s ease, backdrop-filter .3s ease;
}
.p-nav .container{ display:flex; align-items:center; justify-content:space-between; }
.p-nav.is-scrolled{ background: rgba(0,0,0,.82); border-bottom: 1px solid var(--panel-line); padding: .8rem 0; backdrop-filter: blur(10px); }
.p-logo, .custom-logo-link{ display:flex; align-items:center; gap:.55rem; font-family: var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:.01em; }
.p-logo-mark{ width:26px; height:26px; flex:none; }
.p-logo-img, .custom-logo-link img{ height: var(--vx-logo-nav-h); width:auto; max-width: 220px; display:block; object-fit: contain; }
.p-footer-brand .p-logo-img, .p-footer-brand .custom-logo-link img{ height: var(--vx-logo-footer-h); }
.p-nav-links{ display:flex; gap:2rem; font-family: var(--font-mono); font-size:.82rem; }
.p-nav-links a{ position:relative; color: var(--starlight-70); transition: color .25s ease; }
.p-nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background: var(--ion-cyan); transition: width .3s var(--ease-out); }
.p-nav-links a:hover{ color: var(--starlight); }
.p-nav-links a:hover::after{ width:100%; }
.p-nav-links a.is-active{ color: var(--starlight); }
.p-nav-links a.is-active::after{ width:100%; background: var(--ray-violet); }
.p-nav-cta{ display:flex; align-items:center; gap:1.5rem; }
.p-nav-toggle{
  display:none; width:38px; height:38px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--panel-line); border-radius:10px; color: var(--starlight); cursor:pointer;
}
.p-nav-toggle svg{ width:18px; height:18px; }
@media (max-width: 860px){
  .p-nav-toggle{ display:flex; }
  .p-nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background: rgba(0,0,0,.97);
    border-bottom: 1px solid var(--panel-line);
    padding: .5rem clamp(1.25rem,4vw,2.5rem) 1.2rem;
  }
  .p-nav-links.is-open{ display:flex; }
  .p-nav-links a{ padding: .85rem 0; border-bottom: 1px solid var(--panel-line); }
  .p-nav-links a::after{ display:none; }
}

/* ---------- Buttons ---------- */
.p-btn{
  --btnpad-y: .9rem; --btnpad-x: 1.6rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: var(--btnpad-y) var(--btnpad-x);
  border-radius: 999px;
  font-family: var(--font-mono); font-size:.85rem; letter-spacing:.02em;
  border: 1px solid var(--panel-line);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s var(--ease-out), border-color .25s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.p-btn-primary{
  background: linear-gradient(135deg, var(--ray-violet), var(--ion-cyan));
  color: #04050a; font-weight:600; border: none;
}
.p-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--ray-violet-soft); }
.p-btn-ghost{ color: var(--starlight); background: rgba(237,239,247,.02); }
.p-btn-ghost:hover{ border-color: var(--ion-cyan); color: var(--ion-cyan); transform: translateY(-2px); }
.p-btn svg{ width:14px; height:14px; transition: transform .3s var(--ease-out); }
.p-btn:hover svg{ transform: translate(3px,-3px); }

/* ---------- Hero ---------- */
.p-hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center;
  padding-top: 5.5rem;
  padding-bottom: 3rem;
}
.p-hero-inner{ position:relative; z-index:2; max-width: 880px; }
.p-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  color: var(--ion-cyan);
  border: 1px solid rgba(0,255,56,.3);
  background: rgba(0,255,56,.06);
  padding: .45rem .9rem; border-radius: 999px;
  margin-bottom: 1.6rem;
}
.p-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--ion-cyan); box-shadow: 0 0 8px 2px var(--ion-cyan); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.p-hero h1 .line{ display:block; }
.p-hero h1{
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0 0 1.4rem;
}
.p-hero h1 em{
  font-style: normal;
  background: linear-gradient(120deg, var(--ion-cyan), var(--ray-violet));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.p-hero-sub{ font-size: var(--fs-body); color: var(--starlight-70); max-width: 46ch; margin-bottom: 2.4rem; }
.p-hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom: 3.2rem; }

.p-hero-stats{ display:flex; gap: clamp(1.5rem,3vw,3rem); flex-wrap:wrap; }
.p-hero-stat b{ display:block; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--starlight); }
.p-hero-stat span{ font-family: var(--font-mono); font-size:.75rem; color: var(--starlight-45); text-transform: uppercase; letter-spacing:.06em; }

.p-scroll-cue{
  position:absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family: var(--font-mono); font-size:.7rem; color: var(--starlight-45);
  z-index:2;
}
.p-scroll-cue .line{ width:1px; height:34px; background: linear-gradient(var(--ion-cyan), transparent); animation: scrolldrop 1.8s ease-in-out infinite; }
@keyframes scrolldrop{ 0%{ transform: scaleY(0); transform-origin: top; opacity:0;} 40%{transform:scaleY(1); transform-origin:top; opacity:1;} 60%{transform:scaleY(1); transform-origin:bottom; opacity:1;} 100%{transform:scaleY(0); transform-origin:bottom; opacity:0;} }

/* ---------- Marquee (trusted by) ---------- */
.p-marquee-wrap{ border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line); padding: 1.8rem 0; overflow:hidden; position:relative; }
.p-marquee-label{ position:absolute; left: clamp(1.25rem,4vw,2.5rem); top:50%; transform: translateY(-50%); font-family: var(--font-mono); font-size:.7rem; color: var(--starlight-45); background: var(--void); padding-right: 1.5rem; z-index:2; text-transform:uppercase; letter-spacing:.08em; }
.p-marquee-track{ display:flex; gap:4.5rem; width:max-content; animation: marquee 28s linear infinite; padding-left: 12rem; }
.p-marquee-track span{ font-family: var(--font-display); font-size:1.3rem; color: var(--starlight-20); white-space:nowrap; transition: color .3s ease; }
.p-marquee-track span:hover{ color: var(--starlight-70); }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- Section shell ---------- */
.p-section{ padding-block: var(--space-section); position:relative; }
.p-section-head{ max-width: 640px; margin-bottom: clamp(1.8rem,3vw,3rem); }
.p-kicker{ font-family: var(--font-mono); font-size:.78rem; color: var(--ion-cyan); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.9rem; display:block; }
.p-section-head h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight:800; letter-spacing:-.015em; line-height:1.08; margin:0 0 .9rem; }
.p-section-head p{ color: var(--starlight-70); font-size: var(--fs-body); max-width: 54ch; }

/* ---------- Services (3D tilt cards) ---------- */
.p-services-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-gap); perspective: 1400px; }
.p-services-grid.is-3col{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 980px){ .p-services-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .p-services-grid, .p-services-grid.is-3col{ grid-template-columns: 1fr;} }
.p-card{
  background: linear-gradient(160deg, var(--panel), rgba(14,19,48,.4));
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem 2rem;
  transform-style: preserve-3d;
  transition: transform .18s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
  will-change: transform;
  position: relative;
}
.p-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(140deg, var(--ray-violet-soft), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .3s ease;
}
.p-card:hover{ border-color: rgba(0,255,56,.35); box-shadow: 0 20px 50px -20px rgba(0,255,56,.25); }
.p-card:hover::before{ opacity:1; }
.p-card-icon{ width:42px; height:42px; margin-bottom:1.3rem; color: var(--ion-cyan); }
.p-card h3{ font-family: var(--font-display); font-size:1.15rem; margin: 0 0 .6rem; font-weight:700; }
.p-card p{ font-size:.92rem; color: var(--starlight-45); margin:0; }
.p-card-index{ position:absolute; top:1.6rem; right:1.6rem; font-family: var(--font-mono); font-size:.72rem; color: var(--starlight-20); }

/* ---------- Process (numbered path — real sequence) ---------- */
.p-process{ position:relative; }
.p-process-track-wrap{ height:2px; background: var(--panel-line); border-radius:2px; margin-bottom: 2.6rem; overflow:hidden; }
.p-process-track{ height:100%; width:100%; background: linear-gradient(90deg, var(--ray-violet), var(--ion-cyan)); transform: scaleX(0); }
.p-process-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-gap); counter-reset: step; }
@media (max-width: 860px){ .p-process-list{ grid-template-columns: 1fr; gap: 2.5rem; } }
.p-process-item{ position:relative; padding-top: 1rem; border-top: 1px solid var(--panel-line); }
.p-process-item::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size:.85rem; color: var(--ray-violet);
  position:absolute; top:-.65rem; left:0; background: var(--void); padding-right:.6rem;
}
.p-process-item h3{ font-family: var(--font-display); font-size:1.1rem; margin: 1.1rem 0 .5rem; }
.p-process-item p{ font-size:.9rem; color: var(--starlight-45); }

/* ---------- Work (3D depth cards, scroll parallax) ---------- */
.p-work-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-gap); perspective: 1600px; }
@media (max-width: 980px){ .p-work-grid{ grid-template-columns: 1fr; } }
.p-work-card{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid var(--panel-line);
  transform-style: preserve-3d;
  will-change: transform;
}
.p-work-card .p-work-bg{
  position:absolute; inset:0;
  background: radial-gradient(120% 100% at 20% 0%, var(--ray-violet-soft), transparent 55%),
              radial-gradient(120% 100% at 90% 100%, var(--ion-cyan-soft), transparent 55%),
              var(--panel);
  transition: transform .5s var(--ease-out);
  overflow:hidden;
}
.p-work-card .p-work-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: top center; display:block; }
.p-work-card .p-work-bg::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(4,5,10,.08) 0%, rgba(4,5,10,.58) 60%, rgba(4,5,10,.95) 100%);
}
.p-work-card:hover .p-work-bg{ transform: scale(1.08); }
.p-work-card-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding: 1.6rem; }
.p-work-tag{ font-family: var(--font-mono); font-size:.7rem; color: var(--ion-cyan); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; }
.p-work-card h3{ font-family: var(--font-display); font-size:1.35rem; font-weight:700; margin:0 0 .5rem; }
.p-work-metric{ font-family: var(--font-mono); font-size:.82rem; color: var(--starlight-70); display:flex; align-items:center; gap:.4rem; }
.p-work-metric b{ color: var(--solar-amber); }
.p-work-arrow{ position:absolute; top:1.4rem; right:1.4rem; width:34px; height:34px; border-radius:50%; border:1px solid var(--panel-line); display:flex; align-items:center; justify-content:center; z-index:2; transition: transform .3s var(--ease-out), background .3s ease; }
.p-work-card:hover .p-work-arrow{ transform: rotate(45deg); background: var(--ion-cyan); color:#04050a; }
.p-work-arrow svg{ width:14px; height:14px; }

/* ---------- Tech stack (floating badges) ---------- */
.p-stack-cloud{ display:flex; flex-wrap:wrap; gap:.9rem; }
.p-pill{
  font-family: var(--font-mono); font-size:.85rem;
  border: 1px solid var(--panel-line); border-radius: 999px;
  padding: .65rem 1.2rem;
  background: rgba(237,239,247,.02);
  transition: transform .35s var(--ease-out), border-color .3s ease, color .3s ease;
  will-change: transform;
}
.p-pill:hover{ border-color: var(--ray-violet); color: var(--ion-cyan); }

/* ---------- Testimonials ---------- */
.p-testi{ position:relative; max-width: 760px; margin-inline:auto; text-align:center; }
.p-testi-track{ position:relative; min-height: 220px; }
.p-testi-slide{ position:absolute; inset:0; opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); pointer-events:none; }
.p-testi-slide.is-active{ opacity:1; transform:none; pointer-events:auto; }
.p-testi-quote{ font-family: var(--font-display); font-size: clamp(1.25rem,1rem + 1.2vw,1.7rem); line-height:1.4; margin: 0 0 1.6rem; }
.p-testi-author{ font-family: var(--font-mono); font-size:.82rem; color: var(--starlight-45); }
.p-testi-author b{ color: var(--starlight); }
.p-testi-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:2rem; }
.p-testi-dots button{ width:8px; height:8px; border-radius:50%; border:none; background: var(--starlight-20); cursor:pointer; transition: background .3s ease, transform .3s ease; padding:0; }
.p-testi-dots button.is-active{ background: var(--ion-cyan); transform: scale(1.3); }

/* ---------- CTA ---------- */
.p-cta{ position:relative; border-radius: 32px; overflow:hidden; margin-inline: clamp(1.25rem,4vw,2.5rem); padding: clamp(3rem,6vw,6rem) clamp(1.5rem,4vw,3rem); text-align:center; border: 1px solid var(--panel-line); }
.p-cta-inner{ position:relative; z-index:2; }
.p-cta h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight:800; margin: 0 0 1rem; }
.p-cta p{ color: var(--starlight-70); max-width: 46ch; margin: 0 auto 2.2rem; }

/* ---------- Footer ---------- */
.p-footer{ padding-top: var(--space-section); padding-bottom: 2.5rem; border-top: 1px solid var(--panel-line); margin-top: var(--space-section); }
.p-footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:3rem; margin-bottom: 3.5rem; }
.p-footer-brand p{ max-width: 32ch; color: var(--starlight-45); margin-top: 1rem; font-size:.9rem; }
.p-footer-cols{ display:flex; gap: clamp(2rem,5vw,5rem); flex-wrap:wrap; }
.p-footer-col h4{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--starlight-45); margin: 0 0 1rem; }
.p-footer-col a{ display:block; font-size:.92rem; color: var(--starlight-70); padding: .35rem 0; transition: color .25s ease; }
.p-footer-col a:hover{ color: var(--ion-cyan); }
.p-footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family: var(--font-mono); font-size:.75rem; color: var(--starlight-20); }

/* ---------- Reveal utility (JS toggles .is-visible) ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   Inner-page header (Services / Portfolio / About / Contact)
   Shorter than the homepage hero, same ray-field treatment.
   ========================================================= */
.p-pagehead{
  position: relative;
  padding-top: 7.5rem;
  padding-bottom: 3rem;
  overflow: hidden;
}
.p-pagehead-inner{ position:relative; z-index:2; max-width: 760px; }
.p-pagehead h1{
  font-family: var(--font-display); font-weight:800; letter-spacing:-.02em;
  font-size: clamp(2.3rem, 1.8rem + 3vw, 4rem); line-height:1.06; margin: 0 0 1.1rem;
}
.p-pagehead h1 .line{ display:block; }
.p-pagehead-sub{ color: var(--starlight-70); max-width: 56ch; font-size: var(--fs-body); margin-bottom: 1.8rem; }
.p-pagehead-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }
.p-breadcrumb{ font-family: var(--font-mono); font-size:.78rem; color: var(--starlight-45); margin-bottom:1.4rem; display:block; }
.p-breadcrumb a{ color: var(--ion-cyan); }
.p-breadcrumb a:hover{ text-decoration: underline; }

/* =========================================================
   Stat counters (About / Portfolio)
   ========================================================= */
.p-stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-gap); }
@media (max-width: 860px){ .p-stats-grid{ grid-template-columns: repeat(2,1fr); } }
.p-stat-card{ border: 1px solid var(--panel-line); border-radius: var(--radius-lg); padding: 1.8rem; background: linear-gradient(160deg, var(--panel), rgba(14,19,48,.35)); }
.p-stat-card b{ display:block; font-family: var(--font-display); font-size: var(--fs-stat); background: linear-gradient(120deg, var(--ion-cyan), var(--ray-violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.p-stat-card span{ font-family: var(--font-mono); font-size:.78rem; color: var(--starlight-45); text-transform:uppercase; letter-spacing:.06em; }
.p-stat-card p{ font-size:.85rem; color: var(--starlight-45); margin: .5rem 0 0; }

/* =========================================================
   Team grid (About)
   ========================================================= */
.p-team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-gap); perspective: 1400px; }
@media (max-width: 860px){ .p-team-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .p-team-grid{ grid-template-columns: 1fr; } }
.p-team-card{
  border: 1px solid var(--panel-line); border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem; text-align:left;
  background: linear-gradient(160deg, var(--panel), rgba(14,19,48,.35));
  transition: border-color .3s ease, transform .18s var(--ease-out), box-shadow .3s ease;
}
.p-team-card:hover{ border-color: rgba(0,255,56,.4); box-shadow: 0 20px 45px -22px var(--ray-violet-soft); }
.p-team-avatar{
  width:56px; height:56px; border-radius:50%; margin-bottom: 1.1rem;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:600; font-size:1.2rem;
  background: linear-gradient(135deg, var(--ray-violet), var(--ion-cyan)); color:#04050a;
}
.p-team-card h3{ font-family: var(--font-display); font-size:1.1rem; margin: 0 0 .3rem; }
.p-team-card span{ font-family: var(--font-mono); font-size:.76rem; color: var(--ion-cyan); text-transform:uppercase; letter-spacing:.05em; }

/* =========================================================
   Trusted-by logo strip (text wordmarks — About)
   ========================================================= */
.p-logo-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 1.2rem; align-items:center; }
@media (max-width: 860px){ .p-logo-grid{ grid-template-columns: repeat(3,1fr); } }
.p-logo-chip{
  border: 1px solid var(--panel-line); border-radius: var(--radius-md); padding: 1.2rem .8rem;
  text-align:center; font-family: var(--font-mono); font-size:.78rem; color: var(--starlight-45);
  transition: color .3s ease, border-color .3s ease;
}
.p-logo-chip:hover{ color: var(--starlight); border-color: var(--ion-cyan); }

/* =========================================================
   Pricing (Services)
   ========================================================= */
.p-pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-gap); perspective: 1400px; align-items:start; }
@media (max-width: 980px){ .p-pricing-grid{ grid-template-columns: 1fr; max-width:480px; margin-inline:auto; } }
.p-price-card{
  border: 1px solid var(--panel-line); border-radius: var(--radius-lg);
  padding: 2rem 1.8rem; background: linear-gradient(160deg, var(--panel), rgba(14,19,48,.35));
  position:relative; transition: border-color .3s ease, transform .18s var(--ease-out), box-shadow .3s ease;
}
.p-price-card:hover{ border-color: rgba(0,255,56,.35); }
.p-price-card.is-popular{ border-color: var(--ray-violet); box-shadow: 0 25px 60px -25px var(--ray-violet-soft); }
.p-price-badge{
  position:absolute; top:-.8rem; right:1.6rem; font-family: var(--font-mono); font-size:.68rem;
  background: linear-gradient(135deg, var(--ray-violet), var(--ion-cyan)); color:#04050a;
  padding:.3rem .7rem; border-radius:999px; letter-spacing:.04em; text-transform:uppercase;
}
.p-price-card h3{ font-family: var(--font-display); font-size:1.25rem; margin: 0 0 .5rem; }
.p-price-card p.p-price-desc{ font-size:.85rem; color: var(--starlight-45); min-height: 2.6em; }
.p-price-amount{ font-family: var(--font-display); font-size: clamp(2rem,1.7rem + 1vw,2.6rem); margin: 1.1rem 0 .1rem; }
.p-price-amount span{ font-family: var(--font-mono); font-size:.78rem; color: var(--starlight-45); font-weight:400; }
.p-price-billed{ font-family: var(--font-mono); font-size:.72rem; color: var(--starlight-20); margin-bottom:1.4rem; display:block; }
.p-price-list{ margin: 1.5rem 0; display:flex; flex-direction:column; gap:.65rem; }
.p-price-list li{ display:flex; align-items:center; gap:.6rem; font-size:.86rem; color: var(--starlight-70); }
.p-price-list svg{ width:15px; height:15px; flex:none; color: var(--ion-cyan); }
.p-price-card .p-btn{ width:100%; }

/* =========================================================
   Portfolio filters + project grid
   ========================================================= */
.p-filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: 2.4rem; }
.p-filter-btn{
  font-family: var(--font-mono); font-size:.78rem; padding:.5rem 1.1rem; border-radius:999px;
  border: 1px solid var(--panel-line); background: transparent; color: var(--starlight-45); cursor:pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.p-filter-btn:hover{ color: var(--starlight); }
.p-filter-btn.is-active{ color:#04050a; background: linear-gradient(135deg, var(--ray-violet), var(--ion-cyan)); border-color: transparent; }
.p-project-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-gap); perspective: 1600px; }
@media (max-width: 980px){ .p-project-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .p-project-grid{ grid-template-columns: 1fr; } }
.p-project-grid[data-hidden]{ display:none; }
.p-project-card{ display:none; }
.p-project-card.is-shown{ display:block; }

/* =========================================================
   Contact page
   ========================================================= */
.p-contact-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem,4vw,4rem); align-items:stretch; }
@media (max-width: 900px){ .p-contact-grid{ grid-template-columns: 1fr; } }
.p-contact-info{ display:flex; flex-direction:column; gap:1.1rem; height:100%; }
.p-contact-info .p-contact-item{ flex:1; display:flex; }
.p-form{ height:100%; display:flex; flex-direction:column; }
.p-form-note{ margin-top:auto; padding-top:.8rem; }
.p-contact-item{
  display:flex; gap:1rem; align-items:flex-start;
  border: 1px solid var(--panel-line); border-radius: var(--radius-md); padding: 1.2rem;
  background: linear-gradient(160deg, var(--panel), rgba(14,19,48,.3));
  transition: border-color .3s ease;
}
.p-contact-item:hover{ border-color: rgba(0,255,56,.35); }
.p-contact-item svg{ width:20px; height:20px; color: var(--ion-cyan); flex:none; margin-top:.15rem; }
.p-contact-item h4{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--starlight-45); margin: 0 0 .3rem; }
.p-contact-item p, .p-contact-item a{ font-size:.95rem; color: var(--starlight); }

.p-form{ border: 1px solid var(--panel-line); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.4rem); background: linear-gradient(160deg, var(--panel), rgba(14,19,48,.3)); }
.p-form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px){ .p-form-row{ grid-template-columns: 1fr; } }
.p-field{ margin-bottom: 1.1rem; }
.p-field label{ display:block; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--starlight-45); margin-bottom:.5rem; }
.p-field input, .p-field textarea{
  width:100%; background: rgba(237,239,247,.03); border: 1px solid var(--panel-line); border-radius: 10px;
  padding: .85rem 1rem; color: var(--starlight); font-family: var(--font-body); font-size:.95rem;
  transition: border-color .25s ease, background .25s ease;
}
.p-field input:focus, .p-field textarea:focus{ outline:none; border-color: var(--ion-cyan); background: rgba(0,255,56,.04); }
.p-field textarea{ resize: vertical; min-height: 130px; }
.p-form-note{ font-size:.78rem; color: var(--starlight-20); margin-top:.8rem; }

/* =========================================================
   Newsletter (footer)
   ========================================================= */
.p-newsletter{ display:flex; gap:.6rem; max-width: 360px; margin-top: 1.2rem; }
.p-newsletter input{
  flex:1; background: rgba(237,239,247,.03); border: 1px solid var(--panel-line); border-radius: 999px;
  padding: .7rem 1.1rem; color: var(--starlight); font-family: var(--font-body); font-size:.85rem;
}
.p-newsletter input:focus{ outline:none; border-color: var(--ion-cyan); }

/* =========================================================
   Split panel (text + decorative ray panel)
   ========================================================= */
.p-split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width: 860px){ .p-split{ grid-template-columns: 1fr; } }
.p-split-visual{
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid var(--panel-line);
  background: radial-gradient(120% 100% at 20% 0%, var(--ray-violet-soft), transparent 55%),
              radial-gradient(120% 100% at 90% 100%, var(--ion-cyan-soft), transparent 55%),
              var(--panel);
}
.p-split-visual b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: clamp(2.5rem,2rem + 3vw,4.5rem);
  background: linear-gradient(120deg, var(--ion-cyan), var(--ray-violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.p-split h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight:800; margin: 0 0 1rem; letter-spacing:-.015em; }
.p-split p{ color: var(--starlight-70); margin-bottom: 1.8rem; }

/* =========================================================
   Checklist (used in CTA / support panels)
   ========================================================= */
.p-checklist{ display:flex; flex-direction:column; gap:.9rem; margin: 1.6rem 0 2rem; text-align:left; max-width: 480px; margin-inline:auto; }
.p-checklist li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.92rem; color: var(--starlight-70); }
.p-checklist svg{ width:18px; height:18px; flex:none; color: var(--ion-cyan); margin-top:.1rem; }

/* =========================================================
   Hero enhancements: orbit rings, floating badges, shimmer text
   ========================================================= */
.p-hero-orbit{
  position:absolute; z-index:1; pointer-events:none;
  border-radius:50%; border:1px solid rgba(0,255,56,.18);
  mix-blend-mode: screen;
}
.p-hero-orbit.o1{ width:760px; height:760px; top:-150px; right:-190px; animation: spin-slow 60s linear infinite; border-color: rgba(0,255,56,.18); }
.p-hero-orbit.o2{ width:500px; height:500px; top:-50px; right:-50px; animation: spin-slow 40s linear infinite reverse; }
.p-hero-orbit.o1::before, .p-hero-orbit.o2::before{
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background: var(--ion-cyan); box-shadow:0 0 12px 3px var(--ion-cyan);
  top:-4px; left:50%;
}
@keyframes spin-slow{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@media (max-width: 900px){ .p-hero-orbit{ display:none; } }

.p-hero-badges{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.p-hero-badges .p-float-badge{ pointer-events:auto; }

.p-float-badge{
  position:absolute; z-index:2; display:flex; align-items:center; gap:.55rem;
  background: rgba(14,19,48,.7); border:1px solid var(--panel-line); backdrop-filter: blur(8px);
  border-radius:999px; padding:.55rem 1rem .55rem .55rem; font-family: var(--font-mono); font-size:.74rem; color: var(--starlight-70);
  animation: float-badge 5s ease-in-out infinite;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
}
.p-float-badge .dot{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--ray-violet), var(--ion-cyan)); color:#04050a; font-family:var(--font-display); font-weight:800; font-size:.8rem; flex:none; }
.p-float-badge.b1{ top:14%; right:6%; animation-delay: 0s; }
.p-float-badge.b2{ top:52%; right:-2%; animation-delay: 1.2s; }
.p-float-badge.b3{ top:78%; right:14%; animation-delay: 2.4s; }
@keyframes float-badge{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
@media (max-width: 1100px){ .p-float-badge{ display:none; } }

.p-shimmer{
  background: linear-gradient(110deg, var(--ion-cyan) 20%, var(--starlight) 40%, var(--ray-violet) 60%, var(--ion-cyan) 80%);
  background-size: 250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmer-sweep 6s linear infinite;
}
@keyframes shimmer-sweep{ from{ background-position: 0% 0;} to{ background-position: -250% 0;} }

/* =========================================================
   Card shine sweep on hover (services + work + team + price)
   ========================================================= */
.p-card, .p-work-card, .p-team-card, .p-price-card{ position: relative; overflow: hidden; }
.p-card::after, .p-work-card::after, .p-team-card::after, .p-price-card::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.09), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--ease-out);
  pointer-events:none; z-index:1;
}
.p-card:hover::after, .p-work-card:hover::after, .p-team-card:hover::after, .p-price-card:hover::after{ left:130%; }

/* =========================================================
   Portfolio spotlight (large featured project panel)
   ========================================================= */
.p-spotlight-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--space-gap); margin-bottom: clamp(2.5rem,4vw,4rem); }
@media (max-width: 860px){ .p-spotlight-grid{ grid-template-columns: 1fr; } }
.p-spotlight{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; border: 1px solid var(--panel-line);
  min-height: 260px; display:flex; flex-direction:column; justify-content:flex-end;
  background: radial-gradient(120% 100% at 15% 0%, var(--ray-violet-soft), transparent 55%),
              radial-gradient(120% 100% at 100% 100%, var(--ion-cyan-soft), transparent 55%),
              var(--panel);
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.p-spotlight:hover{ transform: translateY(-6px); border-color: rgba(0,255,56,.4); }
.p-spotlight-bg{ position:absolute; inset:0; z-index:0; }
.p-spotlight-bg img{ width:100%; height:100%; object-fit:cover; object-position: top center; display:block; transition: transform .5s var(--ease-out); }
.p-spotlight:hover .p-spotlight-bg img{ transform: scale(1.06); }
.p-spotlight-bg::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(4,5,10,.15) 0%, rgba(4,5,10,.6) 55%, rgba(4,5,10,.95) 100%);
}
.p-spotlight-content{ position:relative; z-index:2; padding: clamp(1.8rem,3vw,2.6rem); }
.p-spotlight .p-work-tag{ margin-bottom: .8rem; }
.p-spotlight h3{ font-family: var(--font-display); font-weight:800; font-size: clamp(1.5rem,1.2rem + 1.5vw,2.1rem); margin: 0 0 .6rem; }
.p-spotlight p{ color: var(--starlight-70); font-size:.95rem; max-width: 46ch; margin: 0 0 1.2rem; }

/* =========================================================
   Stat strip (short inline stat row, e.g. above/below a CTA)
   ========================================================= */
.p-stat-strip{ display:flex; flex-wrap:wrap; gap: 1.6rem; justify-content:center; font-family: var(--font-mono); font-size:.82rem; color: var(--starlight-45); margin-top: 1.4rem; }
.p-stat-strip b{ color: var(--ion-cyan); }

/* =========================================================
   Spotlight quote (About — team member callout)
   ========================================================= */
.p-quote-panel{
  display:grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items:center;
  border: 1px solid var(--panel-line); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.4rem);
  background: linear-gradient(160deg, var(--panel), rgba(14,19,48,.3));
}
@media (max-width: 640px){ .p-quote-panel{ grid-template-columns: 1fr; text-align:center; } }
.p-quote-avatar{
  width:76px; height:76px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:1.5rem;
  background: linear-gradient(135deg, var(--ray-violet), var(--ion-cyan)); color:#04050a;
  margin-inline: auto;
}
.p-quote-panel p{ font-family: var(--font-display); font-size:1.15rem; font-weight:500; margin:0 0 .6rem; }
.p-quote-panel span{ font-family: var(--font-mono); font-size:.78rem; color: var(--starlight-45); }

/* =========================================================
   Map embed placeholder (Contact)
   ========================================================= */
.p-map{
  border-radius: var(--radius-lg); overflow:hidden; border: 1px solid var(--panel-line);
  aspect-ratio: 16/8; margin-top: 1.6rem;
}
.p-map iframe{ width:100%; height:100%; border:0; filter: grayscale(1) invert(.92) contrast(.85); }