/* ===============================================================
   WEBSITE GENERATION LTD — PRODUCTION CSS v9.9.3
   + Full unified mobile navbar (matches vinyl.css)
   + Contact + footer restored
   + Extra hamburger margin below 420px
   + Sharper transitions and spacing
================================================================ */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:100%}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#0a0b1e;color:#e0f0ff;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease}
p{margin-bottom:1rem}
ul{list-style:none}

/* ---------- TOKENS ---------- */
:root{
  --brand:hsl(215 85% 62%);
  --accent:hsl(330 95% 68%);
  --bg:#0a0b1e;
  --surface:#11131f;
  --text:#e0f0ff;
  --muted:#a4acc4;
  --outline:#1a1c2b;
  --radius:16px;
  --transition:all .3s cubic-bezier(.25,.8,.25,1);
}

/* ---------- GLOBAL ---------- */
.container{width:min(1180px,92vw);margin:auto;padding-inline:1rem}
.section{padding:100px 0;position:relative}
.section-alt{background:#0f1022}
.text-center{text-align:center}
h1,h2,h3,h4{font-weight:800;line-height:1.2;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(2rem,5vw,2.6rem);margin-bottom:.6em}
h3{font-size:1.25rem}
::selection{background:var(--accent);color:#000}

/* ---------- BACKGROUND BLOBS ---------- */
.bg-gradients{position:fixed;inset:0;z-index:-1;filter:blur(28px) saturate(120%);pointer-events:none}
.blob{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:.15;animation:float 32s ease-in-out infinite}
.b1{width:38vw;height:38vw;top:-8vh;left:-12vw;background:radial-gradient(circle,var(--brand),transparent)}
.b2{width:36vw;height:36vw;bottom:-12vh;right:-10vw;background:radial-gradient(circle,var(--accent),transparent);animation-duration:40s}
.b3{width:42vw;height:42vw;top:50vh;left:18vw;background:radial-gradient(circle,hsl(200 95% 65%),transparent);animation-duration:46s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  background:rgba(10,11,30,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:var(--transition);
}
.header-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding-block:18px;gap:28px;flex-wrap:nowrap;position:relative;
}
.brand{display:flex;align-items:center;gap:18px;flex-shrink:0}
.brand-mark{height:96px;width:auto;transition:height .25s ease,transform .25s ease;will-change:height,transform}
.site-header.shrink .brand-mark{height:64px;transform:translateY(2px) scale(.95)}
.brand span{
  font-weight:800;font-size:1.7rem;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.brand .suffix{font-weight:500;font-size:.9rem;opacity:.8}
.site-header.shrink .brand span{font-size:1.45rem}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;white-space:nowrap}
.nav-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:8px;font-weight:600;color:var(--muted);
  transition:var(--transition);flex-shrink:0;
}
.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}

/* ---------- BUTTONS ---------- */
.btn{
  padding:12px 24px;border-radius:10px;font-weight:700;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;transition:transform .25s ease,filter .25s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn-outline{background:none;border:1.5px solid var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}

/* ---------- BURGER ---------- */
.burger{
  display:none;width:42px;height:42px;position:relative;border:0;background:none;
  cursor:pointer;z-index:1001;
}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--accent);transition:.3s}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.scrollbar{
  position:absolute;bottom:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,#00ff9d,#3a86ff,#ff4da6);
  transition:width .15s ease;
}

/* ============================================================
   HERO SECTION — PREMIUM LEFT-ALIGNED VERSION
   - More top margin
   - Left-aligned content
   - Transparent animated background logo
   - Hover spin (desktop) + tap spin (mobile)
============================================================ */

/* ============================================================
   HERO SECTION — FULL UPDATED VERSION
   + Left-aligned text
   + Giant background logo
   + Visible through gradient
   + Spin on hover (desktop)
   + Bigger + clearer opacity
   + Correct z-index stacking
============================================================ */

/* ---------- BASE HERO ---------- */
.hero {
  position: relative;
  padding: 260px 0 160px; /* More top & bottom padding for space */
  background: linear-gradient(
    -45deg,
    rgba(10, 11, 30, 0.92),
    rgba(21, 23, 41, 0.88),
    rgba(10, 11, 30, 0.92)
  );
  background-size: 400% 400%;
  animation: heroGradient 18s ease infinite;
  overflow: hidden;
  z-index: 50; /* Forces hero section ABOVE blobs */
}

/* Gradient animation */
@keyframes heroGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- HERO INNER (LEFT ALIGN) ---------- */
.hero-inner {
  max-width: 760px;
  text-align: left;
  margin-left: 4rem;       /* Move writing further left */
  position: relative;
  z-index: 5;              /* ABOVE logo */
}

@media (max-width: 600px) {
  .hero-inner {
    margin-left: 1.4rem;
    max-width: 90%;
  }
}

/* ---------- TEXT ---------- */
.hero-title {
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 18px;
}

.hero-lead {
  color: var(--muted);
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: 2.8rem;
}

/* ---------- METRICS ---------- */
.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 2.8rem;
}

.metric strong {
  color: var(--accent);
  font-size: 1.4rem;
  display: block;
}

/* ---------- CTA BUTTONS ---------- */
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   BACKGROUND LOGO — GIANT + VISIBLE + ROTATES
============================================================ */

.hero-logo-spin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Don't block hero hover */
  z-index: 1;           /* BELOW text, ABOVE gradient */
}

/* The giant logo */
.hero-logo-spin img {
  width: 85vw;             /* Even bigger */
  max-width: 1100px;
  opacity: 0.22;           /* MUCH more visible */
  mix-blend-mode: screen;  /* Makes dark logos visible on dark BG */
  filter: blur(1px);
  transform-origin: center;
  transition: transform 1.3s cubic-bezier(.22,1,.36,1);
}

/* Hover rotation (desktop) */
.hero:hover .hero-logo-spin img {
  transform: rotate(360deg);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .hero-logo-spin img {
    width: 120vw;
    max-width: 1400px;
    opacity: 0.26;
  }
}



/* ---------- PROJECTS ---------- */
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;margin-top:48px}
.project-card{
  background:var(--surface);border:1px solid var(--outline);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .3s,border-color .3s;
}
.project-card:hover{transform:translateY(-6px);border-color:var(--accent)}
.img-wrapper{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:14px}
.img-wrapper.white-bg{background:#fff}.img-wrapper.black-bg{background:#000}
.project-card h3{margin:16px;color:var(--brand)}
.project-card p{margin:0 16px 24px;color:var(--muted);font-size:.96rem}

/* ---------- MEGA CTA ---------- */
.mega-cta-section{padding:100px 0;background:linear-gradient(135deg,#fafbff,#f0f3ff);text-align:center;color:#222}
.mega-cta-title{
  background:linear-gradient(90deg,var(--brand),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  font-size:2.5rem;margin-bottom:14px;
}
.mega-cta-subtitle{font-size:1.1rem;color:#444;max-width:700px;margin:0 auto 36px}
.mega-btn-group{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.mega-btn{
  min-width:280px;padding:22px 38px;font-size:1.3rem;font-weight:700;
  border-radius:14px;transition:transform .3s ease;
}
.mega-btn-primary{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff}
.mega-btn-secondary{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.mega-btn:hover{transform:translateY(-3px)}



/* ============================================================
   SERVICES SECTION — PREMIUM, GAP-FREE, LOCAL ONLY
   Targets ONLY: #services.services-section and its children
============================================================ */

#services.services-section {
  margin-top: 80px;
  padding: 80px 10% 110px;
  position: relative;
  overflow: hidden;
  color: #fff;
  z-index: 2;
}

/* Aurora / gradient background */
#services.services-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(66,130,255,0.20), transparent 60%),
    radial-gradient(circle at 85% 85%, rgba(255,80,160,0.18), transparent 70%),
    linear-gradient(135deg, rgba(12,16,40,0.9), rgba(6,9,22,1));
  filter: blur(18px);
  z-index: -1;
  animation: servicesAurora 18s ease-in-out infinite;
  pointer-events: none;
}

@keyframes servicesAurora {
  0%   { transform: scale(1) translateY(0); }
  50%  { transform: scale(1.04) translateY(-10px); }
  100% { transform: scale(1) translateY(0); }
}

/* TEXT HEADER */
#services .services-title {
  font-size: 2.6rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 12px;
  background: linear-gradient(90deg,#4ea8ff,#ff4da6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

#services .services-subtitle {
  text-align: center;
  font-size: 1.05rem;
  opacity: 0.78;
  max-width: 640px;
  margin: 0 auto 40px;
}

/* ============================================================
   GRID — 3 / 2 / 1 COLUMNS, NO WEIRD GAPS
============================================================ */

#services .services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
  align-items: stretch;
}

/* Tablet */
@media (max-width: 1024px) {
  #services .services-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* Mobile */
@media (max-width: 640px) {
  #services .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CARDS
============================================================ */

#services .service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  padding: 34px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transform: translateY(18px);
  opacity: 0;
  animation: servicesFadeUp .8s forwards ease;
}

/* stagger entrance */
#services .service-card:nth-child(1) { animation-delay: .05s; }
#services .service-card:nth-child(2) { animation-delay: .10s; }
#services .service-card:nth-child(3) { animation-delay: .15s; }
#services .service-card:nth-child(4) { animation-delay: .20s; }
#services .service-card:nth-child(5) { animation-delay: .25s; }
#services .service-card:nth-child(6) { animation-delay: .30s; }
#services .service-card:nth-child(7) { animation-delay: .35s; }
#services .service-card:nth-child(8) { animation-delay: .40s; }
#services .service-card:nth-child(9) { animation-delay: .45s; }

@keyframes servicesFadeUp {
  0%   { opacity: 0; transform: translateY(18px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* glow overlay */
#services .service-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(120,170,255,0.22), transparent 70%);
  opacity: 0;
  transition: .4s ease;
  pointer-events: none; /* ensure links/buttons stay clickable */
}

#services .service-card:hover::before {
  opacity: 1;
}

/* hover lift */
#services .service-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  border-color: #4ea8ff;
}

/* ICONS */
#services .service-card i {
  font-size: 2.3rem;
  margin-bottom: 16px;
  color: #4ea8ff;
  transition: .3s ease;
}

#services .service-card:hover i {
  transform: translateY(-4px) scale(1.1);
  filter: brightness(1.2);
}

/* TITLES + TEXT */
#services .service-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-weight: 700;
}

#services .service-card p {
  font-size: .96rem;
  opacity: .85;
  line-height: 1.45;
}

/* CTA CARD SPECIAL */
#services .service-card.contact-cta {
  background: linear-gradient(135deg,#2563eb55,#1d4ed877);
  border-color: rgba(90,150,255,0.5);
}

#services .service-card.contact-cta:hover {
  background: linear-gradient(135deg,#2563eb99,#1d4ed899);
}

/* CTA BUTTON INSIDE CARD */
#services .services-cta-button {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 24px;
  border-radius: 10px;
  background: #3b82f6;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: .25s ease;
}

#services .services-cta-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.15);
}

/* Small screen spacing tweaks */
@media (max-width: 768px) {
  #services.services-section {
    padding: 70px 6% 90px;
    margin-top: 60px;
  }

  #services .services-title {
    font-size: 2.2rem;
  }
}







/* ---------- SERVICES ---------- */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-top:44px}
.skill-item{
  background:var(--surface);border:1px solid var(--outline);
  border-radius:var(--radius);padding:28px;transition:.3s;
}
.skill-item:hover{border-color:var(--accent);transform:translateY(-4px)}

/* ---------- ABOUT ---------- */
.founder-text{max-width:760px;margin:18px auto 32px;color:var(--muted);font-size:1.05rem}
.founder-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------- CONTACT ---------- */
.contact-intro{color:var(--muted);margin-bottom:36px}
.contact-grid{display:flex;justify-content:center}
.contact-form{
  width:100%;max-width:640px;background:var(--surface);
  border:1px solid var(--outline);border-radius:var(--radius);
  padding:36px 40px;box-shadow:0 6px 16px rgba(0,0,0,.25);
  font-family:"Poppins","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.contact-form label{
  display:block;margin-bottom:6px;font-weight:700;
  color:var(--accent);font-family:"Poppins","Inter",system-ui;
}
.contact-form input,.contact-form textarea{
  width:100%;padding:14px 16px;margin-bottom:16px;
  background:#0f1124;color:var(--text);
  border:1.4px solid var(--outline);border-radius:10px;transition:border-color .2s ease;
  font-family:"Poppins","Inter",system-ui;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);outline:none}
#submitBtn{
  width:100%;margin-top:8px;padding:14px;border:0;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  color:#fff;font-weight:700;cursor:pointer;transition:.25s ease;
}
#submitBtn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.form-status{margin-top:10px;min-height:24px;font-weight:600;font-size:.9rem;color:var(--accent)}

/* ---------- FOOTER ---------- */
.footer{background:#0d0f20;padding:70px 0 36px;color:var(--muted);border-top:1px solid var(--outline)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;margin-bottom:32px}
.footer h4,.footer h5{color:var(--accent);margin-bottom:10px}
.footer a:hover{color:#fff}
.footer-bottom{text-align:center;font-size:.88rem;color:var(--muted)}
.footer-bottom a{color:var(--accent)}
.footer-bottom a:hover{color:#fff}



/* ---------- REVEAL ---------- */
.reveal-up{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal-up.visible{opacity:1;transform:translateY(0)}

/* ---------- PAGE TRANSITION ---------- */
.page-transition{
  position:fixed;inset:0;z-index:9999;background:#0a0b1e;
  opacity:0;pointer-events:none;transition:opacity .6s ease;
}
.page-transition.active{opacity:1}

/* =======================================================================
   >>>>>>>>>>>>>>>>>>>>>  MOBILE OVERRIDES START HERE  <<<<<<<<<<<<<<<<<<
======================================================================= */

@media(max-width:920px){
  .burger{display:block!important}
  .nav{
    position:fixed!important;top:76px;left:0;right:0;
    background:#0a0b1eef!important;backdrop-filter:blur(14px)!important;
    display:grid!important;gap:14px;padding:28px!important;
    transform:translateY(-120%)!important;
    opacity:0!important;visibility:hidden!important;
    z-index:1000!important;transition:transform .35s ease,opacity .35s ease!important;
  }
  .nav.open{
    transform:translateY(0)!important;
    opacity:1!important;visibility:visible!important;
  }
  .nav-link{
    display:block!important;font-size:1.05rem!important;
    padding:14px 0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
    text-align:center!important;
  }
  .nav-link:last-child{border:none!important}
}

@media(max-width:768px){
  .brand span,.brand .suffix{display:none!important}
  .header-inner{padding-left:10px!important;padding-right:6px!important}
  .burger{display:block!important;margin-left:auto!important;margin-right:6px!important}
  .brand-mark{height:78px}
  .site-header.shrink .brand-mark{height:54px}
  .section{padding:80px 0}
  .mega-btn{min-width:240px;font-size:1.15rem;padding:18px 28px}
}

@media(max-width:480px){
  .header-inner{padding-right:4px!important}
  .burger{
    width:38px!important;height:38px!important;
    margin-right:4px!important;margin-top:4px!important;
  }
  .burger span{left:7px!important;right:7px!important}
  .burger span:nth-child(1){top:10px!important}
  .burger span:nth-child(2){top:18px!important}
  .burger span:nth-child(3){top:26px!important}
  .brand-mark{height:64px}
  .site-header.shrink .brand-mark{height:48px}
  .hero{padding-top:150px}
  .cta-group{flex-direction:column;gap:10px}
  .btn{width:100%;justify-content:center}
  .footer-grid{grid-template-columns:1fr}
}

/* below 420px: extra spacing for burger */
@media(max-width:420px){
  .burger{
    margin-right:8px!important;
    margin-top:6px!important;
  }
}

/* tiny screens */
@media(max-width:340px){
  .header-inner{padding-right:3px!important}
  .burger{width:34px!important;height:34px!important;margin-right:4px!important}
  .burger span{left:6px!important;right:6px!important}
  .burger span:nth-child(1){top:9px!important}
  .burger span:nth-child(2){top:17px!important}
  .burger span:nth-child(3){top:25px!important}
}

@media(max-width:320px){
  .header-inner{padding-right:2px!important}
  .burger{width:32px!important;height:32px!important;margin-right:2px!important}
  .burger span{left:6px!important;right:6px!important}
  .burger span:nth-child(1){top:8px!important}
  .burger span:nth-child(2){top:16px!important}
  .burger span:nth-child(3){top:24px!important}
}


/* ===============================================================
   AGGRESSIVE NAV SPACE SAVER — YOUR REQUEST
   1. Hide full logo text below 1500px
   2. Ultra-tight squeeze below 1280px with !important
================================================================ */
@media (max-width: 1500px) {
  .brand span,
  .brand .suffix {
    display: none !important;               /* kills "Website Generation.co.uk" text */
  }
  .brand {
    gap: 0 !important;                       /* removes gap that was there before */
  }
  .brand-mark {
    margin-right: 0 !important;
  }
}

@media (max-width: 1280px) {
  .header-inner {
    padding-inline: 12px !important;         /* tighter container */
  }
  .nav {
    gap: 8px !important;                     /* ultra-tight gap between links */
  }
  .nav-link {
    padding: 9px 7px !important;             /* tiny horizontal padding */
    font-size: 0.89rem !important;           /* slightly smaller text */
    border-radius: 6px !important;
  }
}

/* Optional: even tighter below 1100px if you want to push it further */
@media (max-width: 1100px) {
  .nav {
    gap: 6px !important;
  }
  .nav-link {
    padding: 9px 5px !important;
    font-size: 0.86rem !important;
  }
}