/*
Theme Name: Conversion Digital Pro V2
Theme URI: https://conversiondigital.co.uk/
Author: OpenAI for Conversion Digital
Description: V2 custom WordPress theme for Conversion Digital with an animated homepage hero, richer internal page layouts and premium performance-agency styling.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: conversion-digital-pro
*/

:root{
  --cd-bg:#061f24;
  --cd-bg-2:#0a3138;
  --cd-teal:#0fc0df;
  --cd-teal-2:#5de1e6;
  --cd-ink:#0d1720;
  --cd-text:#23323d;
  --cd-muted:#64748b;
  --cd-line:rgba(15,192,223,.14);
  --cd-white:#ffffff;
  --cd-shell:#f8fbfc;
  --cd-card:#ffffff;
  --cd-shadow:0 18px 50px rgba(2,18,24,.08);
  --cd-radius:22px;
  --cd-container:min(1180px, calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--cd-text);
  background:var(--cd-white);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:var(--cd-container);margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(15,192,223,.08);
}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px}
.branding{display:flex;align-items:center;gap:16px;flex-shrink:0}
.branding img{height:80px;width:auto}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav ul{display:flex;gap:26px;list-style:none;padding:0;margin:0;align-items:center}
.main-nav li{position:relative}
.main-nav a{font-weight:500;color:#1f2c35}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--cd-teal)}
.header-cta,.button,.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:14px;border:1px solid transparent;
  background:linear-gradient(135deg,var(--cd-teal),#0f8eaa);
  color:#fff;font-weight:700;box-shadow:0 14px 30px rgba(15,192,223,.28);
}
.button.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none}
.button.light{color:var(--cd-ink);background:#fff;border-color:rgba(15,192,223,.2);box-shadow:var(--cd-shadow)}
.header-cta:hover,.button:hover{transform:translateY(-1px)}
.menu-toggle{display:none;background:none;border:0;font-size:28px}

.hero{
  position:relative;overflow:hidden;background:
  radial-gradient(circle at 80% 20%, rgba(93,225,230,.18), transparent 22%),
  radial-gradient(circle at 20% 0%, rgba(15,192,223,.12), transparent 25%),
  linear-gradient(135deg, #05161b 0%, #07242a 50%, #0a2d35 100%);
  color:#fff;
}
.hero::before,.hero::after{
  content:"";position:absolute;inset:auto -10% 0 -10%;height:360px;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(93,225,230,.12), transparent 60%);
  animation:heroFloat 12s ease-in-out infinite alternate;
}
.hero::after{bottom:20%;height:260px;animation-duration:16s;opacity:.8}
@keyframes heroFloat{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,-20px,0)}}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:84px 0 68px;position:relative;z-index:1}
.hero-copy h1{font-size:clamp(2.8rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 18px;font-weight:800}
.hero-copy h1 span{color:var(--cd-teal-2)}
.hero-copy p{font-size:1.18rem;color:rgba(255,255,255,.82);max-width:740px;margin:0 0 28px}
.hero-bullets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0 0 32px;padding:0;list-style:none}
.hero-bullets li{display:flex;align-items:center;gap:10px;font-weight:600;color:#f6fdff}
.hero-bullets .tick{width:26px;height:26px;border-radius:50%;background:rgba(93,225,230,.15);display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(93,225,230,.28);color:var(--cd-teal-2)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.16);border-radius:26px;padding:28px;box-shadow:0 24px 80px rgba(0,0,0,.25);backdrop-filter:blur(10px)}
.chart-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.chart-heading h3{margin:0;font-size:1.25rem}
.chart-chip{padding:8px 12px;border-radius:999px;background:rgba(93,225,230,.12);color:#dffbff;font-size:.85rem;border:1px solid rgba(93,225,230,.25)}
.chart-shell{position:relative;height:290px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));overflow:hidden}
.chart-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px, transparent 1px);background-size:100% 25%,25% 100%}
.chart-line{position:absolute;left:8%;right:8%;bottom:18%;top:14%}
.chart-line svg{width:100%;height:100%}
.chart-meta{display:flex;justify-content:space-between;color:rgba(255,255,255,.7);font-size:.95rem;margin-top:14px}
.chart-points{display:flex;justify-content:space-between;margin-top:8px;color:#fff;font-weight:600}
.hero-logos{border-top:1px solid rgba(255,255,255,.08);padding:28px 0 36px;position:relative;z-index:1}
.eyebrow{font-size:.9rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--cd-teal);margin-bottom:14px}
.logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:center}
.logo-pill{display:flex;align-items:center;justify-content:center;min-height:74px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.03);font-size:1.45rem;font-weight:700;letter-spacing:.03em;color:#fff;opacity:.92}

section{padding:88px 0}
.section-heading{max-width:740px;margin:0 auto 48px;text-align:center}
.section-heading h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08;margin:0 0 14px;color:var(--cd-ink);letter-spacing:-.03em}
.section-heading p{margin:0;color:var(--cd-muted);font-size:1.08rem}
.stats-band{background:linear-gradient(180deg,#fafdff,#eef9fb);border-top:1px solid rgba(15,192,223,.08);border-bottom:1px solid rgba(15,192,223,.08)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat-card{background:#fff;border-radius:24px;padding:32px;border:1px solid rgba(15,192,223,.12);box-shadow:var(--cd-shadow);text-align:center}
.stat-number{font-size:clamp(2.4rem,4vw,4rem);font-weight:800;color:var(--cd-ink);letter-spacing:-.04em;margin-bottom:10px}
.stat-number span{color:var(--cd-teal)}
.stat-label{color:var(--cd-muted);font-weight:500}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--cd-card);border:1px solid rgba(15,192,223,.1);border-radius:24px;padding:30px;box-shadow:var(--cd-shadow)}
.card-icon{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg, rgba(15,192,223,.15), rgba(93,225,230,.28));display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:18px}
.card h3{font-size:1.45rem;line-height:1.15;margin:0 0 12px;color:var(--cd-ink)}
.card p{margin:0 0 16px;color:var(--cd-muted)}
.feature-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.feature-list li{display:flex;align-items:flex-start;gap:10px;color:#334155}
.feature-list li::before{content:"✓";color:var(--cd-teal);font-weight:700}
.section-cta{text-align:center;margin-top:28px}
.framework{background:linear-gradient(180deg,#fff,#f8fcfd)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{padding:26px;background:#fff;border-radius:24px;border:1px solid rgba(15,192,223,.1);box-shadow:var(--cd-shadow)}
.step-number{font-size:1rem;font-weight:800;color:var(--cd-teal);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.step h3{margin:0 0 10px;font-size:1.25rem;color:var(--cd-ink)}
.step p{margin:0;color:var(--cd-muted)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case-card{position:relative;overflow:hidden;min-height:280px;border-radius:28px;padding:26px;color:#fff;background:linear-gradient(145deg,#0c2d34,#06151b);box-shadow:0 20px 50px rgba(3,22,28,.16)}
.case-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(93,225,230,.2), transparent 28%),linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 100%)}
.case-card > *{position:relative;z-index:1}
.case-type{font-size:.88rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:700}
.case-value{font-size:clamp(2rem,3vw,3.2rem);font-weight:800;letter-spacing:-.04em;margin:24px 0 10px}
.case-title{font-size:1.5rem;font-weight:700;margin-top:50px}
.publisher-strip{background:linear-gradient(180deg,#fff,#f8fbfd)}
.publisher-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;background:#fff;border-radius:26px;padding:22px;border:1px solid rgba(15,192,223,.1);box-shadow:var(--cd-shadow)}
.publisher-item{display:flex;align-items:center;justify-content:center;min-height:66px;border-radius:16px;background:linear-gradient(180deg,#fff,#f6fbfd);font-weight:700;color:#364152;border:1px solid rgba(15,192,223,.08)}
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{border:1px solid rgba(15,192,223,.1);border-radius:24px;padding:28px;background:#fff;box-shadow:var(--cd-shadow)}
.post-tag{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(15,192,223,.1);color:#0b8298;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.post-card h3{margin:0 0 12px;font-size:1.4rem;color:var(--cd-ink)}
.post-card p{margin:0 0 18px;color:var(--cd-muted)}
.cta-panel{background:linear-gradient(135deg,#061a1f,#0a3138);color:#fff;border-radius:34px;padding:54px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 30px 80px rgba(3,22,28,.2)}
.cta-panel h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;margin:0 0 10px;color:#fff}
.cta-panel p{margin:0;color:rgba(255,255,255,.78);max-width:670px}
.site-footer{background:#071418;color:#d5e7ed;padding:36px 0 26px;margin-top:80px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
.site-footer h4{margin:0 0 14px;color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site-footer a{color:#d5e7ed}
.footer-meta{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.95rem;color:#98adba}
.page-hero{background:linear-gradient(135deg,#061a1f,#0a3138);color:#fff;padding:88px 0 56px}
.page-hero h1{font-size:clamp(2.5rem,4vw,4.2rem);line-height:1.04;margin:0 0 14px;letter-spacing:-.04em}
.page-hero p{max-width:760px;margin:0;color:rgba(255,255,255,.82);font-size:1.1rem}
.content-wrap{padding:70px 0}
.rich-content{max-width:920px;margin:0 auto}
.rich-content h2,.rich-content h3{color:var(--cd-ink);line-height:1.12;letter-spacing:-.03em}
.rich-content h2{font-size:2rem;margin-top:2.2em}
.rich-content h3{font-size:1.35rem;margin-top:1.6em}
.rich-content p,.rich-content li{color:#334155;font-size:1.05rem}
.rich-content ul{padding-left:22px}
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px}
.contact-card{background:#fff;border:1px solid rgba(15,192,223,.1);box-shadow:var(--cd-shadow);border-radius:24px;padding:28px}
.contact-list{display:grid;gap:18px}
.contact-item strong{display:block;color:var(--cd-ink);margin-bottom:6px}
.form-grid{display:grid;gap:14px}
.form-grid input,.form-grid textarea{width:100%;padding:14px 16px;border:1px solid rgba(15,192,223,.16);border-radius:14px;font:inherit}
.form-grid textarea{min-height:160px;resize:vertical}
.notice{padding:14px 16px;border-radius:14px;background:rgba(15,192,223,.08);color:#0a5260;font-size:.96rem}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.archive-card{padding:28px;border-radius:24px;background:#fff;border:1px solid rgba(15,192,223,.12);box-shadow:var(--cd-shadow)}
.archive-card h2{font-size:1.35rem;margin:0 0 10px}
.archive-card .meta{color:var(--cd-muted);font-size:.9rem;margin-bottom:12px}
.archive-card p{margin:0 0 16px;color:#334155}
@media (max-width: 1080px){
  .hero-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .cards-3,.case-grid,.insights-grid,.archive-grid,.steps,.publisher-bar,.stats-grid{grid-template-columns:repeat(2,1fr)}
  .logo-row{grid-template-columns:repeat(3,1fr)}
  .cta-panel{flex-direction:column;align-items:flex-start}
}
@media (max-width: 760px){
  .site-header .inner{min-height:72px}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid rgba(15,192,223,.08);padding:18px 20px 24px;box-shadow:0 20px 30px rgba(2,18,24,.08)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:14px}
  .header-cta{display:none}
  .hero-grid{padding:56px 0 40px}
  .hero-bullets,.cards-3,.case-grid,.insights-grid,.archive-grid,.steps,.publisher-bar,.stats-grid,.logo-row{grid-template-columns:1fr}
  section{padding:70px 0}
  .cta-panel{padding:36px 26px}
  .stat-card,.card,.case-card,.post-card,.archive-card,.step,.contact-card{padding:24px}
}


/* ===== V2 enhancements ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in-view{opacity:1;transform:none}
.hero{
  position:relative;
  overflow:hidden;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
}
.hero::before{
  width:52vw;
  height:52vw;
  min-width:560px;
  min-height:560px;
  right:-14vw;
  top:-16vw;
  background:radial-gradient(circle at center, rgba(93,225,230,.28), rgba(93,225,230,0) 62%);
  filter:blur(12px);
  animation:cdpFloat 14s ease-in-out infinite;
}
.hero::after{
  left:-18vw;
  bottom:-22vw;
  width:58vw;
  height:58vw;
  min-width:620px;
  min-height:620px;
  background:radial-gradient(circle at center, rgba(15,192,223,.20), rgba(15,192,223,0) 62%);
  filter:blur(14px);
  animation:cdpFloatAlt 18s ease-in-out infinite;
}
@keyframes cdpFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-18px,22px,0) scale(1.04)}
}
@keyframes cdpFloatAlt{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(16px,-20px,0) scale(1.05)}
}
.hero-grid,.hero-logos .container,.stats-grid,.cards-3,.steps,.case-grid,.publisher-bar,.insights-grid,.cta-panel,.contact-grid,.footer-grid,.rich-content,.page-hero .container{position:relative;z-index:2}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:#d9f9fb;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  font-size:.92rem;
  letter-spacing:.02em;
}
.hero-kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cd-teal-2);
  box-shadow:0 0 0 6px rgba(93,225,230,.12);
}
.hero-card{
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(7,36,42,.72), rgba(5,22,28,.82));
}
.chart-shell{position:relative}
.chart-shell::after{
  content:"";
  position:absolute;
  inset:18% 6% auto auto;
  width:38%;
  aspect-ratio:1;
  background:radial-gradient(circle at center, rgba(93,225,230,.25), rgba(93,225,230,0) 68%);
  filter:blur(10px);
}
.logo-pill,.publisher-item{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.logo-pill:hover,.publisher-item:hover{
  transform:translateY(-3px);
  border-color:rgba(15,192,223,.32);
  box-shadow:0 16px 30px rgba(2,18,24,.10);
}
.mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin:30px 0 18px;
}
.mini-card{
  background:var(--cd-card);
  border:1px solid rgba(15,192,223,.12);
  border-radius:20px;
  padding:26px;
  box-shadow:var(--cd-shadow);
}
.mini-card h3,.resource-tile h3,.job-card h3,.contact-card h2{margin-top:0}
.mini-card p:last-child,.resource-tile p:last-child,.job-card p:last-child{margin-bottom:0}
.pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:26px 0;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(15,192,223,.08);
  color:#0f5f6b;
  font-weight:600;
  font-size:.95rem;
}
.kpi-band{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:28px 0;
}
.kpi{
  background:linear-gradient(180deg,#0a2a31,#071c22);
  color:#fff;
  border-radius:20px;
  padding:22px;
  box-shadow:0 20px 45px rgba(4,20,25,.18);
}
.kpi strong{
  display:block;
  font-size:2rem;
  line-height:1;
  margin-bottom:8px;
  color:var(--cd-teal-2);
}
.opportunity-panel,
.resource-grid,
.roles-grid{
  margin:30px 0;
}
.opportunity-panel{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:24px;
  align-items:stretch;
}
.panel-dark{
  background:linear-gradient(145deg, #08252c, #0d3840);
  color:#fff;
  border-radius:24px;
  padding:30px;
  box-shadow:0 24px 50px rgba(3,20,24,.18);
}
.panel-dark h3{margin-top:0}
.panel-dark ul{padding-left:18px}
.panel-dark li{margin-bottom:10px}
.panel-light{
  background:linear-gradient(180deg,#f9feff,#eefbfc);
  border:1px solid rgba(15,192,223,.14);
  border-radius:24px;
  padding:30px;
  box-shadow:var(--cd-shadow);
}
.resource-grid,
.roles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.resource-tile,
.job-card{
  background:#fff;
  border:1px solid rgba(15,192,223,.12);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--cd-shadow);
}
.resource-tag,
.job-tag{
  display:inline-flex;
  align-items:center;
  margin-bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,192,223,.08);
  color:#0f5f6b;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.timeline{
  display:grid;
  gap:18px;
  margin:30px 0;
}
.timeline-item{
  position:relative;
  padding:22px 22px 22px 72px;
  background:#fff;
  border:1px solid rgba(15,192,223,.12);
  border-radius:18px;
  box-shadow:var(--cd-shadow);
}
.timeline-item::before{
  content:attr(data-step);
  position:absolute;
  left:22px;
  top:22px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,var(--cd-teal),var(--cd-teal-2));
  color:#032126;
  font-weight:800;
}
.contact-note{
  margin-top:18px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(15,192,223,.08);
  color:#0f5f6b;
}
@media (max-width: 960px){
  .mini-grid,.resource-grid,.roles-grid,.kpi-band,.opportunity-panel{grid-template-columns:1fr}
}