/*
Theme Name: IT IAN Knowledge Hub Premium V2
Theme URI: https://itianknowledge.com
Author: Ian Findlay / NZTHRILLVIBES
Description: Premium V2 WordPress theme for IT IAN Knowledge Hub. Includes polished hero, premium module cards, NZTHRILLVIBES showcase, course sections, blog preview, YouTube area, newsletter and footer.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: itian-premium-v2
Tags: education, portfolio, photography, custom-colors, responsive-layout
*/

:root{
  --bg:#0B1F3A;
  --hero:#061424;
  --ink:#040B14;
  --card:#102542;
  --card2:#12325A;
  --lime:#7ED957;
  --lime2:#B8FF8A;
  --gold:#D4AF37;
  --white:#FFFFFF;
  --muted:#BFD3E8;
  --soft:#EAF6FF;
  --line:rgba(255,255,255,.13);
  --shadow:0 28px 90px rgba(0,0,0,.38);
  --radius:28px;
  --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(126,217,87,.12), transparent 28%),
    radial-gradient(circle at top right, rgba(52,182,255,.12), transparent 28%),
    var(--bg);
  color:var(--white);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:auto;padding:0 24px}
.topbar{
  position:sticky;top:0;z-index:80;
  background:rgba(4,11,20,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px;font-weight:1000;min-width:240px}
.logo{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;text-align:center;
  line-height:.88;background:linear-gradient(145deg,var(--lime),#34b6ff);
  color:#061424;font-weight:1000;letter-spacing:-1px;box-shadow:0 0 0 5px rgba(126,217,87,.13)
}
.brand-title{font-size:16px}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:800;margin-top:2px}
.links{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:14px;font-weight:900}
.links a{color:var(--muted)}
.links a:hover{color:var(--lime)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--lime),var(--lime2));
  color:#061424!important;font-weight:1000;box-shadow:0 15px 40px rgba(126,217,87,.28)
}
.btn.alt{background:transparent;color:var(--white)!important;border:1px solid var(--line);box-shadow:none}
.btn.gold{background:linear-gradient(135deg,#FFD96A,var(--gold));color:#07101d!important}

.hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,rgba(6,20,36,.96),rgba(6,20,36,.72),rgba(11,31,58,.96)),
    radial-gradient(circle at 72% 32%,rgba(126,217,87,.24),transparent 26%),
    radial-gradient(circle at 38% 20%,rgba(0,173,255,.20),transparent 28%),
    linear-gradient(135deg,#061424,#0B1F3A 55%,#05101e);
}
.hero:after{
  content:"";position:absolute;inset:auto -15% -45% -15%;height:420px;
  background:radial-gradient(ellipse at center,rgba(126,217,87,.18),transparent 68%);
  pointer-events:none;
}
.heroGrid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center;min-height:720px;padding:86px 0 96px}
.eyebrow{color:var(--lime);font-weight:1000;letter-spacing:.4px;margin-bottom:18px}
h1{font-size:clamp(52px,7.2vw,98px);line-height:.92;margin:0 0 24px;letter-spacing:-4px}
h1 em{font-style:normal;color:var(--lime)}
.lead{font-size:clamp(21px,2.3vw,31px);font-weight:900;color:#F7FBFF;margin:0 0 22px;max-width:760px}
.sub{font-size:17px;color:var(--muted);max-width:690px;margin:0 0 32px}
.heroStats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px;max-width:710px}
.stat{border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:20px;padding:16px}
.stat strong{display:block;font-size:28px;color:var(--lime)}
.stat span{display:block;color:var(--muted);font-weight:800;font-size:13px}
.premiumPanel{
  background:linear-gradient(180deg,rgba(16,37,66,.86),rgba(6,20,36,.95));
  border:1px solid rgba(255,255,255,.18);
  border-radius:34px;padding:28px;box-shadow:var(--shadow)
}
.panelTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.panelTop h2{font-size:32px;margin:0}
.badge{border:1px solid rgba(126,217,87,.45);color:var(--lime);padding:8px 12px;border-radius:999px;font-weight:1000;font-size:12px}
.featureList{display:grid;gap:12px}
.feature{
  display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:18px;padding:15px;color:var(--muted);font-weight:850
}
.tick{color:var(--lime);font-weight:1000}
section{padding:84px 0}
.sectionHead{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:30px}
h2{font-size:clamp(34px,4vw,58px);line-height:1.02;margin:0;letter-spacing:-1.4px}
.sectionHead p{max-width:560px;color:var(--muted);font-size:17px;margin:0}
.moduleGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.module{
  position:relative;overflow:hidden;min-height:235px;display:block;
  background:linear-gradient(180deg,var(--card),#07182d);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:0 14px 38px rgba(0,0,0,.22);transition:.18s ease
}
.module:before{content:"";position:absolute;inset:-40% -40% auto auto;width:160px;height:160px;background:rgba(126,217,87,.14);border-radius:50%}
.module:hover{transform:translateY(-5px);border-color:rgba(126,217,87,.6)}
.icon{font-size:36px;margin-bottom:18px}
.module h3{margin:0 0 10px;font-size:22px;color:white}
.module p{margin:0;color:var(--muted)}
.module small{display:inline-block;margin-top:18px;color:var(--lime);font-weight:1000}

.splitShowcase{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:26px;align-items:stretch;
}
.visualCard{
  min-height:470px;border-radius:36px;padding:28px;display:flex;align-items:end;position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.58)),
    radial-gradient(circle at 48% 22%,rgba(212,175,55,.9) 0 5%,transparent 18%),
    linear-gradient(145deg,#03101d,#17466d 46%,#050e19);
  border:1px solid rgba(212,175,55,.35);box-shadow:var(--shadow)
}
.visualCard:after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.42))}
.visualCard div{position:relative;z-index:2}
.visualCard h3{font-size:42px;line-height:1;margin:0;color:var(--gold)}
.visualCard p{color:#FFEAB0;font-weight:850}
.showcaseText{
  border:1px solid var(--line);border-radius:36px;background:linear-gradient(135deg,#08182c,#12325A);
  padding:34px;box-shadow:var(--shadow)
}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
.pill{border:1px solid rgba(212,175,55,.48);color:#FFEAB0;border-radius:999px;padding:9px 13px;font-weight:900}

.courseGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.course{
  background:#071A30;border:1px solid var(--line);border-radius:26px;padding:26px;min-height:260px;
  display:flex;flex-direction:column;justify-content:space-between
}
.course strong{color:var(--lime)}
.course h3{font-size:26px;margin:12px 0}
.course p{color:var(--muted)}
.course .btn{align-self:flex-start;margin-top:12px}

.featureBand{
  background:linear-gradient(135deg,rgba(126,217,87,.14),rgba(52,182,255,.12));
  border-block:1px solid var(--line)
}
.bandGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bandItem{background:rgba(4,11,20,.35);border:1px solid var(--line);border-radius:22px;padding:20px}
.bandItem strong{display:block;font-size:20px;color:white;margin-bottom:8px}
.bandItem p{margin:0;color:var(--muted)}

.searchBox{
  background:#071A30;border:1px solid var(--line);border-radius:30px;padding:28px;
  display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)
}
.searchBox input{
  width:100%;padding:18px 20px;border-radius:999px;border:1px solid var(--line);
  background:#061424;color:white;font-size:17px;outline:none
}

.blogGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.postCard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px}
.postCard .date{color:var(--gold);font-weight:1000}
.postCard h3{font-size:24px;margin:12px 0}
.postCard p{color:var(--muted)}

.videoBox{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;
  background:linear-gradient(135deg,#071A30,#102542);border:1px solid var(--line);border-radius:34px;padding:34px
}
.playMock{
  min-height:310px;border-radius:26px;background:linear-gradient(145deg,#101010,#233C5B);
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.14)
}
.playMock span{width:92px;height:92px;border-radius:50%;background:#ff0033;display:grid;place-items:center;font-weight:1000;font-size:30px}

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
blockquote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;color:var(--muted)}
blockquote strong{display:block;color:white;margin-top:18px}

.newsletter{
  text-align:center;background:
    radial-gradient(circle at 50% 0,rgba(126,217,87,.24),transparent 40%),
    linear-gradient(135deg,rgba(126,217,87,.15),rgba(52,182,255,.11));
  border:1px solid var(--line);border-radius:38px;padding:56px 30px;box-shadow:var(--shadow)
}
.newsletter .sub{margin-left:auto;margin-right:auto}
.site-footer{background:#050E1A;border-top:1px solid var(--line);padding:52px 0;color:var(--muted)}
.footerGrid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:28px}
.site-footer h4{color:white;margin:0 0 12px}
.site-footer a{display:block;margin:8px 0;color:var(--muted)}
.copyright{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;font-size:14px}
.page-content{padding:70px 0;min-height:60vh}
.page-content .wrap{max-width:900px}
@media(max-width:980px){
  .heroGrid,.splitShowcase,.videoBox{grid-template-columns:1fr}
  .moduleGrid{grid-template-columns:repeat(2,1fr)}
  .courseGrid,.blogGrid,.testimonials,.footerGrid{grid-template-columns:1fr}
  .bandGrid,.heroStats{grid-template-columns:repeat(2,1fr)}
  .links{display:none}
  .heroGrid{min-height:auto}
}
@media(max-width:560px){
  .moduleGrid,.bandGrid,.heroStats{grid-template-columns:1fr}
  h1{letter-spacing:-2px}
  .searchBox{display:block}
  .searchBox .btn{margin-top:12px;width:100%}
}