/*
Theme Name: Cyclonix Agency
Theme URI: https://cyclonixdesigns.co.za
Author: Cyclonix Designs
Description: Single-page landing website with dedicated quote page for Cyclonix Designs (Pty) Ltd.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: cyclonix-agency
*/
:root{--blue:#1c58ae;--blue-2:#2c71d3;--electric:#48b9ff;--navy:#071326;--navy-2:#0b1c35;--navy-3:#102743;--line:#28425e;--text:#f4f7fb;--muted:#aec1d7;--muted-2:#d7e6f8;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font-family:Inter,Segoe UI,Arial,sans-serif;font-size:16px;line-height:1.65}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}button,input,textarea,select{font:inherit}
.container{width:min(1170px,calc(100% - 44px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,19,38,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.head{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:20px;position:relative}
.brand{font-weight:900;letter-spacing:.08em;font-size:1.15rem;line-height:1.2}.brand span{display:block;color:var(--muted);letter-spacing:.17em;font-size:.57rem;margin-top:5px}
.nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.nav a{font-size:.86rem;font-weight:700;color:var(--muted-2)}.nav a:hover,.nav a:focus{color:var(--electric)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:10px;border:1px solid var(--blue);background:var(--blue);color:white!important;font-weight:800;cursor:pointer;transition:.2s}.btn:hover{background:var(--blue-2);transform:translateY(-2px)}.btn-outline{background:transparent;border-color:#728bab}.btn-outline:hover{background:#132b49}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-weight:800;font-size:.76rem;color:var(--electric)}h1,h2,h3,p,ul{margin-top:0}h1{font-size:clamp(2.9rem,6vw,5.7rem);line-height:1.02;letter-spacing:-.05em}h2{font-size:clamp(2rem,4vw,3.35rem);line-height:1.1;letter-spacing:-.038em}h3{font-size:1.34rem;line-height:1.3}.lead{font-size:1.12rem;color:#bdcfe3;max-width:720px}
.hero{background:radial-gradient(ellipse at 78% 25%,rgba(28,88,174,.35),transparent 48%),radial-gradient(ellipse at 10% 85%,rgba(72,185,255,.16),transparent 45%),linear-gradient(180deg,#09172d 0%,#0b2140 100%);overflow:hidden}
.hero-grid{min-height:730px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:85px 0}.hero h1 strong{color:#6acaff}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.hero-points span{display:inline-flex;padding:8px 12px;border-radius:999px;background:#0e2747;border:1px solid #2a4b73;color:#d7e7f6;font-size:.84rem;font-weight:700}
.hero-showcase{display:flex;justify-content:center}.hero-stack{position:relative;max-width:500px;width:100%}.mock-screen{padding:26px;border-radius:28px;background:linear-gradient(155deg,#143763,#0a1b33);box-shadow:0 28px 80px #0008}.mock-top{height:10px;width:86px;border-radius:999px;background:#5b87bd;margin-bottom:22px;opacity:.75}.mock-logo-wrap{display:grid;place-items:center;min-height:290px;border-radius:20px;background:linear-gradient(145deg,#0b1d35,#15365f);border:1px solid #2f537e}.mock-logo-wrap img{max-width:280px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.3))}.mock-lines{display:grid;gap:10px;margin-top:18px}.mock-lines span{display:block;height:10px;border-radius:999px;background:#26486f}.mock-lines span:nth-child(2){width:82%}.mock-lines span:nth-child(3){width:65%}
.small-card{position:absolute;right:-20px;bottom:-25px;max-width:280px}
.section{padding:95px 0}.section-tight{padding-top:0}.section-alt{background:#0d203b}.section-contact{background:linear-gradient(180deg,rgba(11,28,53,0),#09192d)}.section-heading{max-width:760px;margin-bottom:35px}.muted{color:var(--muted)}.mini{color:#9dc4ec;font-size:.84rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{padding:30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(140deg,#142b49,#0b1d35);box-shadow:0 15px 40px #0002}.card p{color:#b7c8da}.symbol{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#1c58ae55;color:#83d5ff;font-weight:900;font-size:23px;margin-bottom:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.align-start{align-items:start}.highlight{border-left:4px solid var(--electric);padding-left:20px;color:#d0e2f4}.feature-list{padding-left:18px;margin-bottom:0}.feature-list li{margin-bottom:10px;color:#c7d6e6}
.band{background:linear-gradient(110deg,#15417b,#1c58ae);border-radius:22px;padding:50px;display:flex;align-items:center;justify-content:space-between;gap:30px}.band p{margin:0;color:#dceeff}
.page-hero{padding:105px 0 55px;background:linear-gradient(115deg,#0a1b33,#143763)}.page-hero h1{max-width:950px}
.tile{min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border:1px solid #365777;border-radius:16px;background:linear-gradient(165deg,#173f6d,#09192d);position:relative;overflow:hidden}.tile:before{content:'CYCLONIX';position:absolute;top:25px;right:-35px;transform:rotate(24deg);font-size:3rem;opacity:.05;font-weight:900}.tile p{color:#bcd0e2;margin-bottom:0}
.apparel-grid{margin-bottom:26px}.mockups-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}.mockup-card{padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#132845,#0a1b31)}
.jersey-shape{position:relative;margin:0 auto 22px;width:230px;height:250px;background:linear-gradient(180deg,#1c58ae,#0d2d55);clip-path:polygon(28% 0,72% 0,83% 11%,100% 18%,88% 33%,88% 100%,12% 100%,12% 33%,0 18%,17% 11%);border:1px solid #4172aa}.jersey-collar{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:70px;height:34px;background:#091a30;border-radius:0 0 18px 18px}.jersey-logo{position:absolute;left:50%;top:78px;transform:translateX(-50%);width:118px;height:118px;display:grid;place-items:center}.jersey-logo img{max-width:100px}.jersey-stripes{position:absolute;left:18px;right:18px;bottom:34px;height:56px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 16px,rgba(72,185,255,.18) 16px 32px);border-radius:14px}
.brand-board{border-radius:16px;padding:18px;background:#f7fbff;color:#082040;min-height:352px;display:flex;flex-direction:column;align-items:center;justify-content:center}.brand-board-top{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:#4d6a8f;margin-bottom:16px}.brand-board img{max-width:180px;margin-bottom:24px}.swatch-row{display:flex;gap:10px}.swatch-row span{display:block;width:44px;height:44px;border-radius:10px;background:var(--blue)}.swatch-row span:nth-child(2){background:#071326}.swatch-row span:nth-child(3){background:#7d8fa9}.swatch-row span:nth-child(4){background:#d7e6f8}
.phone-frame{width:210px;margin:0 auto 22px;padding:12px;border-radius:34px;background:#050b14;border:1px solid #364a64;box-shadow:0 18px 35px rgba(0,0,0,.3)}.phone-notch{width:92px;height:18px;border-radius:0 0 14px 14px;background:#0e1928;margin:0 auto}.phone-screen{min-height:340px;border-radius:24px;background:linear-gradient(180deg,#173f6d,#09192d);padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.phone-screen img{max-width:116px}.phone-text{padding:10px 12px;background:rgba(255,255,255,.1);border-radius:999px;font-weight:700;font-size:.92rem;color:#dcecff}
.steps-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.contact-list p{margin-bottom:18px}.teaser-card{min-height:100%;display:flex;flex-direction:column;justify-content:center}.portfolio-grid .tile{min-height:250px}
.form-wrap{max-width:820px;margin:auto;padding:38px;border-radius:18px;background:var(--navy-3);border:1px solid #2d4a6a}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{margin-bottom:17px}label{display:block;margin-bottom:7px;font-size:.9rem;font-weight:700}input,textarea,select{width:100%;background:#091a30;border:1px solid #3e5876;color:white;border-radius:8px;padding:13px;min-height:49px}textarea{min-height:150px;resize:vertical}.notice{padding:16px 20px;background:#123e36;border:1px solid #3a9879;border-radius:8px;margin-bottom:24px}.error{background:#4b2429;border-color:#b25e64}.sr-only{position:absolute;left:-9999px}
.footer{border-top:1px solid var(--line);padding:58px 0 22px;background:#06101f}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:45px}.footer a{display:block;color:#c3d2e5;margin:7px 0}.footer-bottom{border-top:1px solid #253954;padding-top:20px;margin-top:40px;color:#90a7bd;font-size:.85rem}.legal{max-width:850px}.legal h2{font-size:1.5rem;margin-top:34px}.legal p,.legal li{color:#bacde1}
.mobile-toggle{display:none}.wp-block-image img{height:auto}
@media(max-width:980px){.hero-grid,.split{grid-template-columns:1fr}.hero-grid{padding:60px 0;min-height:auto}.grid,.mockups-grid{grid-template-columns:repeat(2,1fr)}.small-card{position:static;margin-top:18px;max-width:none}.steps-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.mobile-toggle{display:block;border:1px solid #496483;background:transparent;border-radius:7px;color:white;padding:8px 12px}.nav{display:none;position:absolute;top:81px;left:0;right:0;background:#071326;padding:18px 24px;flex-direction:column;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.band{flex-direction:column;align-items:flex-start}}
@media(max-width:700px){.grid,.mockups-grid,.fields,.footer-grid,.steps-grid{grid-template-columns:1fr}.container{width:min(100% - 28px,1170px)}.section{padding:70px 0}.band{padding:30px}.form-wrap{padding:22px}.hero-points{gap:8px}.hero-points span{font-size:.78rem}.phone-frame{width:100%;max-width:240px}}