/* GACP.ai Landing Styles */
:root{
  --bg:#0b0c10; /* deep charcoal */
  --card:#111318;
  --text:#e6e8ee;
  --muted:#a6adbb;
  --brand:#3de0a6; /* mint green accent */
  --brand-2:#00a3ff; /* cyan-blue accent */
  --primary:linear-gradient(90deg,var(--brand),var(--brand-2));
  --radius:14px;
  --card-2:#0e1116;
  --divider:rgba(255,255,255,.06);
  --hero-zoom:1.2; /* increase to zoom video (e.g., 1.2 = 120%) */
  --cta-zoom:1.0; /* zoom for CTA section video */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Quicksand', Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-optical-sizing:auto;
  font-weight:300;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--brand-2-bg, rgba(0,163,255,.15)), transparent 60%),
    radial-gradient(1000px 500px at -10% 20%, var(--brand-bg, rgba(61,224,166,.15)), transparent 60%),
    var(--bg);
}

.container{max-width:1120px;padding:0 20px;margin:0 auto}
.flex{display:flex}
.between{justify-content:space-between}
.center{align-items:center}
.wrap{flex-wrap:wrap;gap:12px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(11,12,16,.75);backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .container{min-height:68px;padding:10px 20px}
.site-header .brand{display:flex;gap:12px;align-items:center;font-weight:700}
.site-header .brand span{letter-spacing:.2px}
.nav a{color:var(--text);text-decoration:none;margin-left:18px;opacity:.9;line-height:1;padding:6px 0;font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:.2px}
.nav a:hover{opacity:1}
/* Slightly smaller button inside header for better proportions */
.site-header .btn{padding:10px 14px}
.site-header .btn.btn-primary{box-shadow:0 6px 18px rgba(0,163,255,.18),0 2px 7px rgba(61,224,166,.16)}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);text-decoration:none;color:var(--text);transition:transform .05s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);border:0;box-shadow:0 8px 24px rgba(0,163,255,.22),0 2px 8px rgba(61,224,166,.18)}
.btn-ghost{background:transparent}

/* Hero */
.hero{position:relative;min-height:500px;max-height:800px;height:70vh;display:block;isolation:isolate}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;padding:96px 0 48px;min-height:500px;max-height:800px;height:70vh;align-items:center}
.hero h1{font-size:clamp(32px,5.2vw,56px);line-height:1.08;margin:0 0 12px}
.hero h1, h2, h3, .brand span{font-family:'Economica', 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif}
.lead{font-size:18px;color:var(--muted);max-width:680px;font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;font-weight:500}
.cta{display:flex;gap:12px;margin:18px 0 8px}
.subnote{color:var(--muted);font-size:14px;margin-top:8px}
.hero-art{display:flex;justify-content:center;align-items:center;position:relative}
.hero-logo{width:100%;max-width:420px;opacity:.95}
/* Video background */
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--hero-zoom));transform-origin:center}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(800px 400px at 12% 10%, rgba(11,12,16,.45), transparent 60%),
  radial-gradient(900px 500px at 90% 20%, rgba(11,12,16,.45), transparent 60%),
  linear-gradient(180deg, rgba(11,12,16,.6), rgba(11,12,16,.35) 30%, rgba(11,12,16,.4))}

/* Sections */
.section{padding:56px 0;border-top:1px solid var(--divider)}
.section h2{font-size:28px;margin:0 0 12px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px}
.features{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:18px;border-radius:var(--radius);min-height:130px}
.card h3{margin-top:0}

/* Full-bleed section background helper */
.bg-bleed{position:relative;z-index:0}
.bg-bleed::before{
  content:"";position:absolute;inset:0;left:50%;width:100vw;transform:translateX(-50%);
  background-image:var(--section-bg, none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  z-index:-1
}
/* Optional overlay for better text contrast */
.bg-bleed::after{
  content:var(--section-overlay, "");
}

/* Problem section specific background */
.bg-problem-section{--section-bg:url('/media/images/gacp-bg.jpg')}
.bg-problem-section{position:relative}
.bg-problem-section::before{content:""}

/* Features section specific background */
.bg-features-section{position:relative}
.bg-features-section::before{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background-image:url('/media/images/gacp-power.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-1;
}
.bg-features-section::after{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(11,12,16,.75), rgba(11,12,16,.65));
  z-index:-1;
}

/* Pakete section specific background */
.bg-pakete-section{position:relative}
.bg-pakete-section::before{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background-image:url('/media/images/gacp-genetics.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-1;
}
.bg-pakete-section::after{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(11,12,16,.75), rgba(11,12,16,.65));
  z-index:-1;
}

/* Footer specific background */
.bg-footer-section{position:relative}
.bg-footer-section::before{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background-image:url('/media/images/gacp-solution.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-1;
}
.bg-footer-section::after{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(11,12,16,.8), rgba(11,12,16,.75));
  z-index:-1;
}

/* CTA section with video background like features section */
.bg-cta-section{position:relative}
.bg-cta-section .cta-video-bg{
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:-2;
  overflow:hidden;
}
.bg-cta-section .cta-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(var(--cta-zoom));
  transform-origin:center;
}
.bg-cta-section::after{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(11,12,16,.65), rgba(11,12,16,.55));
  z-index:-1;
}
.bg-cta-section .content{
  max-width:600px;
  text-align:left;
}
.bg-cta-section .content h2{
  font-size:clamp(36px,4.5vw,48px);
  line-height:1.1;
  margin-bottom:18px;
}
.bg-cta-section .content p{
  font-size:18px;
  line-height:1.6;
  margin-bottom:24px;
  color:var(--muted);
}
.bg-cta-section .cta{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.steps{margin:0;padding-left:18px;color:var(--muted)}
.steps li{margin:10px 0}

/* Contact */
.contact .form-grid{grid-template-columns:1fr 1fr}
.contact input,.contact textarea{
  width:100%;padding:12px 14px;background:#0e1014;border:1px solid rgba(255,255,255,.1);color:var(--text);
  border-radius:12px;outline:none
}
.contact input:focus,.contact textarea:focus{border-color:rgba(61,224,166,.55);box-shadow:0 0 0 3px rgba(61,224,166,.15)}
.col-span-2{grid-column:1 / span 2}
.privacy{color:var(--muted);font-size:12px;margin-top:10px}
/* Tall section variant (hero-like) */
.section.tall{padding:96px 0}
.section.tall .split{gap:40px}
.section.tall .content h2{font-size:clamp(30px,4.6vw,44px)}
.section.tall .content p{font-size:18px;line-height:1.65}
.section.tall .steps{font-size:18px;line-height:1.65}
.section.tall .art{min-height:420px}
.section.tall .art.fullwidth{min-height:520px}
/* Spacing below form grid to the submit button */
.contact .contact-form button[type="submit"]{margin-top:12px}

/* Split Sections with Art */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:stretch}
.split.alt{grid-template-columns:.95fr 1.05fr}
.section .content h2{margin-top:0}
.art{position:relative;min-height:220px;height:100%;border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--card-2);border:1px solid var(--divider)}
.art.plain{background:transparent;border:0}
.art.fullwidth{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;border-radius:0;background:transparent;border:0}
.art.fullwidth.bg-problem{background-image:url('/media/images/gacp-power.png');background-size:cover;background-position:center;background-repeat:no-repeat}
.art.fullwidth.bg-problem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,12,16,.18), rgba(11,12,16,.32));pointer-events:none}
.art .img-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.art img{max-width:90%;max-height:90%;opacity:.95;filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}
/* Fullwidth art: make image scale to available height, keep aspect, no crop */
.art.fullwidth .img-wrap img{width:auto;height:100%;max-height:100%;max-width:none;object-fit:contain}
/* Testimonial video in section columns: keep full view, no crop */
.testimonial-video{width:100%;height:100%;object-fit:contain;border-radius:var(--radius);box-shadow:0 10px 24px rgba(0,0,0,.25);aspect-ratio:16/9;background:rgba(0,0,0,.2)}

/* Parallax Utilities */
.parallax{position:relative;overflow:hidden}
.parallax-layer{position:absolute;will-change:transform;transform:translate3d(0, calc(var(--y, 0px)), 0);z-index:0}
.p-blob{width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(61,224,166,.25), transparent 60%)}
.p-blob.blue{background:radial-gradient(circle at 70% 40%, rgba(0,163,255,.25), transparent 60%)}

/* Alternating backgrounds for sections */
.section.alt-bg{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));}

/* Full-bleed band utilities for clearer section separation */
.band{position:relative}
.band-dark{--band: #0e1116}
.band-light{--band: #0c0e13}
.band, .band-dark, .band-light{box-shadow:none;clip-path:none;background:transparent}
.band.has-divider{border-top:1px solid var(--divider)}

/* Plans (Pakete) */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan-card{position:relative;display:flex;flex-direction:column;min-height:220px;padding:20px;border-radius:var(--radius);background:var(--card);border:1px solid var(--divider);transition:border-color .2s ease, box-shadow .2s ease, transform .05s ease}
.plan-card:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.plan-card.selected{border-color:rgba(61,224,166,.7);box-shadow:0 0 0 3px rgba(61,224,166,.25), 0 14px 36px rgba(0,163,255,.15)}
.plan-card h3{margin:0 0 8px}
.plan-card p{color:var(--muted)}
.plan-actions{margin-top:auto;padding-top:12px}
.btn-plan{width:100%;text-align:center}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0;color:var(--muted)}
.site-footer > .container:first-child{padding-bottom:14px;border-bottom:1px solid var(--divider)}
.site-footer .links{display:flex;flex-wrap:wrap;gap:14px}
.site-footer .links a{color:var(--muted);text-decoration:none}
.site-footer .container.flex{gap:18px;align-items:center}
/* Newsletter footer */
.newsletter{padding-top:18px}
.newsletter-card{background:var(--card);border:1px solid var(--divider);border-radius:var(--radius);padding:16px}
.newsletter-card .n-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center}
.n-head{display:flex;align-items:center;gap:12px}
.n-icon{color:var(--brand);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(61,224,166,.08);border:1px solid rgba(61,224,166,.25)}
.n-icon i{font-size:18px;line-height:1}
/* Duotone coloring using brand variables */
.fa-duotone{
  --fa-primary-color: var(--brand);
  --fa-secondary-color: var(--brand-2);
  --fa-secondary-opacity: .85;
}
.n-copy h3{margin:4px 0 4px}
.newsletter-form .newsletter-grid{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:520px}
.newsletter-form input[type="email"]{
  width:100%;padding:12px 14px;background:#0e1014;border:1px solid rgba(255,255,255,.1);color:var(--text);
  border-radius:999px;outline:none
}
.newsletter-form .privacy{display:block;margin-bottom:8px}
.newsletter-form input[type="email"]:focus{border-color:rgba(61,224,166,.55);box-shadow:0 0 0 3px rgba(61,224,166,.15)}

@media (prefers-reduced-motion: reduce){
  .parallax-layer{transform:none !important}
}
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr;gap:14px}
  .features{grid-template-columns:1fr 1fr}
  .col-span-2{grid-column:auto}
  .split,.split.alt{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .newsletter-card .n-layout{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .features{grid-template-columns:1fr}
  .cta{flex-direction:column}
  .bg-cta-section .cta{
    flex-direction:column;
    gap:12px;
  }
}