/* ================================
   Synergy Ventures — PRO Preview Theme
   Adds: depth layers, motion system, micro-animations, particles behind logo
   IMPORTANT: This file is used ONLY by index-pro.html.
   ================================ */

:root{
  /* Motion system */
  --ease: cubic-bezier(.2,.9,.2,1);
  --dur-logo: 1200ms;
  --dur-text: 800ms;
  --dur-scroll: 600ms;
  --dur-hover: 220ms;

  /* Spacing rhythm (8px grid) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;

  /* Colors */
  --navy0: #050a14;
  --navy1: #071026;
  --navy2: #0b1a3f;
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --hair: rgba(255,255,255,.16);
  --card: rgba(246,247,251,.96);
  --cardText: #111827;
  --danger: #e35d6a;
  --dangerBg: rgba(227,93,106,.10);
  --glow: rgba(255,255,255,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; width:100%; overflow-x:hidden; }
body{
  margin:0;
  color: var(--ink);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--navy0);
  overflow-x:hidden;
  -webkit-text-size-adjust: 100%;
}

/* Depth layer 1 — background */
.bg-layer{
  position:fixed; inset:0; z-index:-3;
  background: radial-gradient(1200px 700px at 25% 30%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(900px 500px at 70% 60%, rgba(255,255,255,.04), transparent 60%),
              linear-gradient(120deg, #050b18, #040a1a 45%, #07142f);
  animation: bgShift 28s var(--ease) infinite alternate;
  transform: translateZ(0);
}
@keyframes bgShift{
  0%{ filter: brightness(1); transform: scale(1); }
  100%{ filter: brightness(1.06); transform: scale(1.02); }
}

/* Depth layer 2 — subtle overlay glow */
.glow-layer{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background: radial-gradient(60% 60% at 20% 30%, rgba(255,255,255,.12), transparent 60%);
  opacity:.35;
  transform: translateZ(0) scale(1.1);
}

.wrap{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: var(--s6) calc(var(--s3) + env(safe-area-inset-right)) var(--s6) calc(var(--s3) + env(safe-area-inset-left));
}
.shell{
  width:min(1180px, 100%);
}

/* Layout */
.hero{
  width: min(1200px, 100%);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 520px;
  gap: var(--s6);
  /* Keep left and right columns visually aligned */
  align-items:center;
}
@media (max-width: 1024px){
  .hero{ width: 100%; grid-template-columns: 1fr; gap: var(--s4); }
  .wrap{ padding: var(--s4) calc(var(--s3) + env(safe-area-inset-right)) var(--s4) calc(var(--s3) + env(safe-area-inset-left)); }

  /* Mobile UX: keep the page clean on initial load.
     The request form reveals ONLY after tapping the CTA (hash targets #request). */
  #request{
    max-height: 0;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    overflow: hidden;
    pointer-events: none;
    transition:
      max-height 520ms var(--ease),
      opacity 260ms var(--ease),
      transform 520ms var(--ease);
    will-change: max-height, opacity, transform;
  }
  /* JS-driven reveal (more reliable than :target on some mobile Safari builds) */
  body.show-request #request{
    max-height: 2200px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
  #request:target{
    max-height: 2200px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
}

.hero-left{
  display:flex;
  flex-direction:column;
  /* Avoid forcing extra vertical height on desktop now that the form is shorter */
  min-height:0;
  align-items:center;
  text-align:center;
}

/* Keep CTA lower, but center the brand block vertically */
.hero-left-top{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:none;
  padding-top: 10px;
}
@media (min-width: 1025px){
  .hero-left-top{ transform: translateY(-16px); }
}
.hero-left-bottom{
  margin-top:auto;
  padding-top:26px;
}

/* Logo + particles */
.logo-wrap{
  width:320px;
  height:320px;
  position:relative;
  margin-bottom:18px;
  transform-origin: 50% 55%;
  animation: svFloat 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes svFloat{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg); }
  45%{ transform: translate3d(0,-6px,0) rotate(-0.15deg); }
  70%{ transform: translate3d(0,-2px,0) rotate(0.12deg); }
}
@media (prefers-reduced-motion: reduce){
  .logo-wrap{ animation:none; }
}
@media (max-width:1024px){
  .logo-wrap{ width:260px; height:260px; margin:0 auto 18px; }
}
.particles{
  position:absolute;
  inset:-40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  opacity:.40;
  filter: blur(.0px);
  z-index:0;
  pointer-events:none;
}
.logo{
  position:relative;
  z-index:2;
  width: 300px;
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.38));
}

/* Ultra subtle high-end glow pulse behind SV mark */
.logo-glow::before{
  content:"";
  position:absolute;
  inset:-26%;
  background:radial-gradient(circle at 50% 52%, rgba(255,255,255,.16), rgba(255,255,255,0) 64%);
  filter:blur(16px);
  opacity:.16;
  transform:scale(.92);
  z-index:1;
  animation:svGlow 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes svGlow{
  0%,100%{opacity:.14; transform:scale(.92)}
  45%{opacity:.24; transform:scale(1.02)}
  70%{opacity:.18; transform:scale(.98)}
}

@media (max-width: 820px){
  .logo-wrap{ width: 280px; height: 280px; }
  .logo{ width: 260px; }
  .hero-left{ min-height: auto; }
  .hero-left-top{ transform: translateY(-8px); }
  .hero-left-bottom{ padding-top: 18px; }
}

@media (max-width: 480px){
  .logo-wrap{ width: 250px; height: 250px; }
  .logo{ width: 230px; }
  .hero-left-bottom{ padding-top: 14px; }
}

/* Typography */
.h1{
  margin:0 0 6px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: clamp(26px, 3vw, 36px);
  line-height:1.12;
  /* Allow wrapping on narrow mobile widths (prevents horizontal overflow/centering drift).
     Keep only the suffix together via .nowrap span in the markup. */
  white-space: normal;
}

/* Utility: keep small fragments together (used for L.L.C.-FZ) */
.nowrap{ white-space:nowrap; }
@media (max-width: 480px){
  .h1{ font-size: 24px; letter-spacing:.08em; }
}
.sub{
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin: 0 0 14px;
}
.tagline{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: .2px;
  color: rgba(255,255,255,.90);
  margin: 0 0 18px;
}
.tagline::after{
  content:"";
  display:block;
  width: 140px;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
@media (max-width:1024px){
  .tagline::after{ width: 110px; margin-top: 12px; }
}
@media (max-width: 480px){
  .tagline{ font-size: 22px; }
}

.bullets{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height:1.6;
}
.dot{
  width:4px; height:4px; border-radius:50%;
  background: rgba(255,255,255,.55);
  display:inline-block;
}

.address{
  margin-top: var(--s2);
  font-size: 12px;
  line-height:1.6;
  color: rgba(255,255,255,.70);
  text-align:center;
}
.address strong{ color: rgba(255,255,255,.92); font-weight:600; }
.address a{ color: rgba(255,255,255,.92); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25); }
.address a:hover{ border-bottom-color: rgba(255,255,255,.6); }

/* CTA — light sweep */
.cta, .btnPrimary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration:none;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(10,22,51,.22);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  width: fit-content;
}
@media (max-width: 1024px){
  .cta{ margin: 0 auto; }
}

.btnPrimary{
  width: 100%;
  border: 0;
  background: #0b1a3f;
  cursor:pointer;
}
.btnPrimary:active{ transform: scale(.985); }

.btn-sweep{
  position:relative;
  overflow:hidden;
  transition: transform var(--dur-hover) var(--ease), filter var(--dur-hover) var(--ease);
}
.btn-sweep::before{
  content:"";
  position:absolute;
  inset:-2px;
  transform: translateX(-120%);
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
  transition: transform 700ms var(--ease);
}
.btn-sweep:hover::before{ transform: translateX(120%); }
.btn-sweep:hover{ filter: brightness(1.06); transform: translateY(-2px); }
.btn-sweep:active{ transform: translateY(-1px) scale(.992); }

/* Card */
.card{
  background: var(--card);
  color: var(--cardText);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.55);
  padding: 22px;
  max-height: calc(100vh - 120px);
  overflow:auto;
  position: relative;
}

/* Glass panel shine sweep (subtle, premium) */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.18) 38%,
    rgba(255,255,255,.06) 50%,
    transparent 62%);
  transform: translateX(-140%) skewX(-12deg);
  opacity:.45;
  pointer-events:none;
  animation: glassShine 12s var(--ease) infinite;
}
@keyframes glassShine{
  0%,72%{ transform: translateX(-140%) skewX(-12deg); opacity:.0; }
  76%{ opacity:.22; }
  86%{ opacity:.18; }
  100%{ transform: translateX(140%) skewX(-12deg); opacity:0; }
}
@media (max-width: 1024px){
  .card{ max-height: none; }
}

.card-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.card-title{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: 12px;
  opacity:.75;
}
.card-note{
  font-size: 12px;
  color: rgba(17,24,39,.55);
}

/* Form */
.form{ margin:0; }
.grid{ display:grid; grid-template-columns: 1fr; gap: 12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-size:12px; color: rgba(17,24,39,.60); }
input, select, textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.14);
  padding: 12px 12px;
  font-size: 14px;
  outline:none;
  background:#fff;
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
textarea{ resize: vertical; min-height: 120px; }

/* Form focus glow (expensive feel) */
input:focus, select:focus, textarea:focus{
  border-color: rgba(11,26,63,.38);
  box-shadow: 0 0 0 4px rgba(11,26,63,.08);
}

/* Phone row */
.phoneRow{
  display:grid;
  grid-template-columns: 1.25fr .9fr 1.45fr;
  gap: 10px;
}
@media (max-width: 520px){
  .phoneRow{ grid-template-columns: 1fr; }
}

/* Validation errors — red fill + message */
.err{
  display:none;
  font-size:12px;
  color: var(--danger);
}
.field.error input,
.field.error select,
.field.error textarea{
  border-color: rgba(227,93,106,.95);
  background: var(--dangerBg);
  box-shadow: 0 0 0 4px rgba(227,93,106,.10);
}
.field.error .err{ display:block; }

.fine{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(17,24,39,.55);
  line-height:1.4;
}

.hp{ position:absolute; left:-9999px; top:-9999px; opacity:0; }

/* ===================
   Scroll reveal system (expensive rhythm)
   =================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-scroll) var(--ease),
    transform var(--dur-scroll) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in{
  opacity:1;
  transform: translateY(0);
}
/* Stagger */
[data-reveal="text"].in{ transition-duration: var(--dur-text); }
[data-reveal="logo"]{
  transform: translateY(20px) scale(.98);
  transition-duration: var(--dur-logo);
}
[data-reveal="logo"].in{ transform: translateY(0) scale(1); }
[data-reveal="card"]{ transform: translateY(26px); }


.svlogo{width: 120px; height: auto; display:block; filter: drop-shadow(0 8px 28px rgba(0,0,0,.35));}
@media (min-width: 1024px){.svlogo{width: 150px;}}


.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:48px;
  align-items:stretch;
}


.logo-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

/* --- Production v3_2 tweaks --- */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; gap:22px; align-items:start; }
  .hero-left{ justify-content:flex-start; }
  .logo-wrap{ width:190px; height:190px; margin: 0 auto 14px; }
  .brand-name, .tagline, .hero-meta{ text-align:center; }
  .pill-row{ justify-content:center; }
  .cta-row{ justify-content:center; }
}

/* Thank you page */
.page-thank{
  min-height:100vh;
}
.thank-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 18px;
  position:relative;
  z-index:2;
}
.thank-card{
  width:min(640px, 92vw);
  padding:36px 34px 30px;
  text-align:center;
  border-radius:20px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.52);
  backdrop-filter: blur(10px);
  position: relative;
  animation: tyIn 720ms var(--ease) both;
}

@keyframes tyIn{
  from{ opacity:0; transform: translateY(14px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.thank-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.18) 38%,
    rgba(255,255,255,.06) 50%,
    transparent 62%);
  transform: translateX(-140%) skewX(-12deg);
  opacity:.35;
  pointer-events:none;
  animation: glassShine 12s var(--ease) infinite;
}

.ty-logo-wrap{ margin:0 auto 6px; display:flex; align-items:center; justify-content:center; }
.page-thank .logo{ margin:0 auto; }
.ty-title{
  margin: -6px 0 10px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(34px, 5vw, 46px);
  letter-spacing: .4px;
}
.ty-text{
  margin: 0 auto 18px;
  max-width: 52ch;
  color: rgba(255,255,255,.80);
  line-height: 1.6;
}
.ty-link{
  color: rgba(255,255,255,.9);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:2px;
}
.ty-link:hover{ border-bottom-color: rgba(255,255,255,.7); }
@media (max-width: 540px){
  .thank-card{ padding:26px 18px 22px; }
  .ty-logo-wrap{ margin-bottom: 14px; }
}


/* Thank-you page particles: keep inside glass + slightly lower */
.page-thank .particles{ inset:-30px -40px -80px -40px; }
@media (max-width:600px){
  .page-thank .particles{ inset:-20px -30px -90px -30px; }
}

/* Success overlay (animated checkmark) */
.success-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2,6,14,.55);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
  z-index: 50;
  padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.success-overlay.on{ opacity: 1; pointer-events: auto; }
.success-panel{
  width: min(520px, 100%);
  max-width: 520px;
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  padding: 26px 22px 22px;
  text-align: center;
}
.success-check{ display:flex; justify-content:center; margin-bottom: 12px; }
.check-svg{ width: 64px; height: 64px; }
.check-circle{
  stroke: rgba(255,255,255,.85);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: stroke 280ms var(--ease) forwards;
}
.check-mark{
  stroke: rgba(255,255,255,.92);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 220ms var(--ease) 120ms forwards;
}
@keyframes stroke{ to { stroke-dashoffset: 0; } }
.success-title{ font-size: 18px; font-weight: 600; letter-spacing: .2px; color: rgba(255,255,255,.92); }
.success-sub{ margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.75); }

@media (prefers-reduced-motion: reduce){
  .card::before, .thank-card::before{ animation: none; }
  .thank-card{ animation:none; }
  .check-circle, .check-mark{ animation: none; stroke-dashoffset: 0; }
}