/*
Theme Name: SWICKtech
Theme URI: https://github.com/coder999999999/swicktech-web
Author: SWICK Technologies
Description: Custom block theme for swicktech.com — implements homepage Concept D on the SWICKtech brand system (Midnight ground, brand orange/blue, Montserrat).
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: swicktech
*/

/* ---------- tokens (mirrors theme.json; kept here for non-block CSS) ---------- */
:root{
  --midnight:#181818; --panel:#212121; --panel-2:#292929; --hairline:#373737;
  --blue:#008BFF; --sky:#00B1FF; --orange:#FC6104; --orange-hot:#FF6308;
  --tangerine:#FF824D; --teal:#3CD4D0;
  --tx:#F5F6F6; --tx-2:#CBD0D3; --tx-3:#93999D;
  --head:"Montserrat","Century Gothic","Segoe UI",Arial,sans-serif;
  --body:"Montserrat","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:rgba(0,139,255,.45); color:#fff}
body{margin:0; background:var(--midnight); color:var(--tx-2); font-family:var(--body); font-size:16px; line-height:1.75}
a{color:var(--sky); text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
img{max-width:100%; height:auto}
h1,h2,h3,h4{font-family:var(--head); color:#fff; line-height:1.14; text-wrap:balance; margin:0}
h1{font-size:clamp(2.2rem,4.8vw,3.6rem); font-weight:800; text-transform:uppercase}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:800; text-transform:uppercase; letter-spacing:.01em}
h3{font-size:1.06rem; font-weight:700}
p{margin:0}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px}
.rule{display:flex; gap:6px; margin:18px 0 22px}
.rule i{height:4px; border-radius:2px; display:block}
.rule i:first-child{width:44px; background:var(--blue)}
.rule i:last-child{width:18px; background:var(--orange)}

.rv{opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ---------- buttons ---------- */
.btn,.wp-block-button__link{display:inline-block; background:var(--orange); color:#fff; font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; padding:15px 30px; border-radius:3px; border:none; cursor:pointer; transition:transform .2s var(--ease), background .2s, box-shadow .2s}
.btn:hover,.wp-block-button__link:hover{background:var(--orange-hot); transform:translateY(-2px); box-shadow:0 10px 24px rgba(252,97,4,.25); text-decoration:none; color:#fff}
.btn.line,.is-style-outline .wp-block-button__link{background:transparent; border:1.5px solid var(--hairline); color:#fff; box-shadow:none}
.btn.line:hover,.is-style-outline .wp-block-button__link:hover{border-color:var(--sky); color:var(--sky); background:transparent; box-shadow:none}

/* ---------- utility bar + header ---------- */
.utility{background:#101010; font-size:.73rem; letter-spacing:.09em}
.utility-in{display:flex; gap:28px; justify-content:flex-end; padding:9px 0; text-transform:uppercase; font-weight:600}
.utility a{color:var(--orange)} .utility a:hover{color:var(--tangerine)}
.utility span{color:var(--tx-3)}
.site-nav{background:rgba(14,14,14,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:30; transition:box-shadow .3s}
.site-nav.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.45)}
.nav-in{display:flex; align-items:center; gap:36px; height:84px; transition:height .3s var(--ease)}
.site-nav.scrolled .nav-in{height:66px}
.nav-in .logo img{height:46px; width:auto; display:block; transition:height .3s var(--ease)}
.site-nav.scrolled .logo img{height:38px}
.nav-in .wp-block-navigation{margin-left:auto}
.nav-in .wp-block-navigation .wp-block-navigation-item__content{color:#fff; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:6px 0; border-bottom:2px solid transparent; transition:border-color .2s}
.nav-in .wp-block-navigation .wp-block-navigation-item__content:hover{border-color:var(--orange)}
.nav-in .wp-block-navigation ul{gap:30px}
.edge-tab{position:fixed; right:0; top:44%; z-index:40; background:var(--orange); color:#fff; writing-mode:vertical-rl; font-family:var(--head); font-weight:700; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; padding:20px 11px; border-radius:4px 0 0 4px; transition:padding .2s}
.edge-tab:hover{padding-right:17px; text-decoration:none; color:#fff}
.admin-bar .site-nav{top:32px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--hairline); background:#121212; min-height:88vh; display:flex; align-items:center}
.hero #net{position:absolute; inset:0; opacity:.5; width:100%; height:100%}
.hero-cube{position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:min(52vw,880px); aspect-ratio:16/9; background:url(assets/img/cube-dark.png) center/contain no-repeat; opacity:.42}
.hero-fade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,14,14,.97) 0%, rgba(14,14,14,.86) 46%, rgba(14,14,14,.25) 100%)}
.hero-in{position:relative; padding:90px 0; max-width:700px}
.kicker{font-family:var(--head); font-weight:700; font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sky)}
.hero-in h1{margin:20px 0 24px}
.hero-in h1 .l{display:block; opacity:0; transform:translateY(24px); animation:rise .7s var(--ease) forwards}
.hero-in h1 .l:nth-child(2){animation-delay:.12s}
.hero-in h1 .l:nth-child(3){animation-delay:.24s; color:var(--tangerine)}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .hero-in h1 .l{animation:none; opacity:1; transform:none} }
.hero-in p{font-size:1.1rem; max-width:52ch; font-weight:300}
.hero-cta{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:46px}
.chip{border:1px solid var(--hairline); border-radius:3px; padding:7px 14px; font-size:.7rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-3); background:rgba(18,18,18,.65)}
.chip b{color:var(--tx-2)}

/* ---------- sections ---------- */
.section{padding:100px 0}
.section.tight{padding-top:36px}
.section.flush{padding-top:0}
.lead{max-width:64ch; margin-bottom:46px}
.lead p{font-weight:300; font-size:1.02rem}

/* router */
.router{display:grid; grid-template-columns:300px 1fr; border:1px solid var(--hairline); border-radius:6px; overflow:hidden; background:var(--panel)}
.router-rail{display:flex; flex-direction:column; border-right:1px solid var(--hairline); background:#1C1C1C}
.rbtn{appearance:none; background:none; border:none; border-left:4px solid transparent; border-bottom:1px solid #262626; text-align:left; padding:22px 22px; cursor:pointer; font-family:var(--head); transition:background .2s}
.rbtn:last-child{border-bottom:none}
.rbtn .who{display:block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3)}
.rbtn .t{display:block; color:#fff; font-weight:600; font-size:.95rem; margin-top:4px}
.rbtn:hover{background:#222}
.rbtn[aria-selected="true"]{background:var(--panel); border-left-color:var(--rc,var(--blue))}
.rbtn[aria-selected="true"] .who{color:var(--rc,var(--blue))}
.rc-blue{--rc:var(--blue)} .rc-orange{--rc:var(--orange)} .rc-sky{--rc:var(--sky)} .rc-tang{--rc:var(--tangerine)} .rc-teal{--rc:var(--teal)}
.router-panel{padding:44px 48px}
.rpane{display:none}
.rpane.active{display:block; animation:fadein .35s var(--ease)}
@keyframes fadein{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .rpane.active{animation:none} }
.rpane .who{font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--pc,var(--blue))}
.rpane h3{font-size:1.5rem; text-transform:uppercase; margin:10px 0 14px}
.rpane p.intro{font-weight:300; max-width:56ch}
.rpane ul{list-style:none; padding:0; margin:20px 0 26px; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px}
.rpane li{padding-left:26px; position:relative; font-size:.92rem; font-weight:300}
.rpane li::before{content:"✓"; position:absolute; left:0; color:var(--pc,var(--blue)); font-weight:700}
.rpane .btn{background:var(--pc,var(--blue))}
.rpane .btn:hover{filter:brightness(1.12)}
.pc-blue{--pc:var(--blue)} .pc-orange{--pc:var(--orange)} .pc-sky{--pc:var(--sky)} .pc-tang{--pc:var(--tangerine)} .pc-teal{--pc:var(--teal)}

/* stats band */
.band{background:var(--panel); border-block:1px solid var(--hairline)}
.band-in{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:48px 0}
.stat b{color:#fff; display:block; font-family:var(--head); font-weight:800; font-size:2.1rem; font-variant-numeric:tabular-nums; line-height:1.1}
.stat b small{font-size:1.1rem; font-weight:700}
.stat span{font-size:.77rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-3); font-weight:600}
.stat i{display:block; width:26px; height:3px; border-radius:2px; margin:10px 0 8px}
.stat:nth-child(1) i{background:var(--blue)} .stat:nth-child(2) i{background:var(--orange)}
.stat:nth-child(3) i{background:var(--sky)} .stat:nth-child(4) i{background:var(--teal)}

/* industries */
.industries{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.ind{background:var(--panel); border:1px solid var(--hairline); border-radius:5px; padding:26px 14px; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; transition:border-color .2s, transform .25s var(--ease)}
.ind:hover{border-color:var(--orange); transform:translateY(-3px); text-decoration:none}
.ind svg{width:30px; height:30px; stroke:var(--orange); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ind span{font-family:var(--head); font-weight:600; font-size:.71rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tx-2)}

/* process steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step}
.step{background:var(--panel); border:1px solid var(--hairline); border-radius:5px; padding:30px 28px}
.step::before{counter-increment:step; content:"0" counter(step); font-family:var(--head); font-weight:800; font-size:2.6rem; color:transparent; -webkit-text-stroke:1.5px var(--hairline); display:block; line-height:1; margin-bottom:16px}
.step:nth-child(1)::before{-webkit-text-stroke-color:var(--blue)}
.step:nth-child(2)::before{-webkit-text-stroke-color:var(--orange)}
.step:nth-child(3)::before{-webkit-text-stroke-color:var(--teal)}
.step h3{text-transform:uppercase; font-size:.95rem; letter-spacing:.05em}
.step p{font-size:.9rem; font-weight:300; margin-top:8px}
.step .dur{display:inline-block; margin-top:14px; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3); border:1px solid var(--hairline); border-radius:3px; padding:4px 10px}

/* why + photo */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center}
.checks{list-style:none; padding:0; margin:26px 0 0}
.checks li{padding:12px 0 12px 36px; position:relative; font-weight:300; border-bottom:1px solid #272727}
.checks li:last-child{border-bottom:none}
.checks li b{color:#fff; font-weight:600}
.checks li::before{content:"✓"; position:absolute; left:4px; top:12px; color:var(--teal); font-weight:700}
.photo{background:linear-gradient(155deg,#252b30,#181c1f); border:1px solid var(--hairline); border-radius:6px; min-height:410px; position:relative; overflow:hidden; margin:0}
.photo::after{content:""; position:absolute; inset:0; background:url(assets/img/cube-dark.png) center 30%/140% no-repeat; opacity:.13}
.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.photo figcaption{position:absolute; left:16px; bottom:16px; right:16px; background:rgba(14,14,14,.92); border:1px solid var(--hairline); border-radius:4px; padding:10px 16px; font-size:.75rem; color:var(--tx-3); z-index:2}

/* testimonials */
.testis{display:grid; grid-template-columns:1.2fr 1fr; gap:20px}
.t-video{position:relative; border:1px solid var(--hairline); border-radius:6px; overflow:hidden; min-height:350px; background:linear-gradient(120deg,#22282e,#141719); display:flex; align-items:center; justify-content:center}
.t-video .playbig{width:78px; height:78px; border-radius:50%; background:rgba(252,97,4,.94); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; padding-left:6px; transition:transform .25s var(--ease), box-shadow .25s}
.t-video:hover .playbig{transform:scale(1.1); box-shadow:0 0 0 12px rgba(252,97,4,.15)}
.t-video .t-meta{position:absolute; left:20px; bottom:18px}
.t-video .t-meta b{font-family:var(--head); color:#fff; display:block}
.t-video .t-meta span{font-size:.8rem; color:var(--tx-3)}
.t-video .badge{position:absolute; top:14px; right:14px; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; background:rgba(14,14,14,.8); border:1px solid var(--hairline); border-radius:3px; padding:5px 10px; color:var(--tx-3)}
.t-quote{border:1px solid var(--hairline); border-radius:6px; background:var(--panel); padding:38px 36px; display:flex; flex-direction:column; justify-content:center; margin:0}
.t-quote p{font-size:1.2rem; line-height:1.55; color:#fff; font-weight:300}
.t-quote p b{color:var(--sky); font-weight:600}
.t-quote footer{margin-top:18px; font-size:.82rem; color:var(--tx-3)}

/* resources (query loop) */
.res-head{display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px}
.res-head .lead{margin-bottom:0}
.cards .wp-block-post-template{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; padding:0; margin:0}
.cards .wp-block-post{background:var(--panel); border:1px solid var(--hairline); border-radius:5px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease), border-color .25s; margin:0}
.cards .wp-block-post:hover{transform:translateY(-5px); border-color:var(--blue)}
.cards .wp-block-post-featured-image{height:150px; background:linear-gradient(135deg,rgba(0,139,255,.32),#191919); position:relative; margin:0}
.cards .wp-block-post-featured-image img{width:100%; height:150px; object-fit:cover}
.cards .wp-block-post-featured-image:not(:has(img))::after{content:""; position:absolute; inset:0; background:url(assets/img/cube-dark.png) 85% 40%/60% no-repeat; opacity:.25}
.cards .card-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.cards .wp-block-post-terms{font-size:.67rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue)}
.cards .wp-block-post-terms a{color:var(--blue)}
.cards .wp-block-post-title{font-size:1.02rem; line-height:1.35; font-family:var(--head); font-weight:700; text-transform:none}
.cards .wp-block-post-title a{color:#fff}
.cards .wp-block-post-excerpt{font-size:.88rem; font-weight:300; flex:1}
.cards .wp-block-post-excerpt__more-text{display:none}
.cards .wp-block-post-date{font-size:.74rem; color:var(--tx-3)}

/* cta */
.cta-final{background:linear-gradient(100deg, rgba(0,139,255,.15), rgba(252,97,4,.15)), var(--panel); border-block:1px solid var(--hairline)}
.cta-in{display:flex; align-items:center; gap:40px; flex-wrap:wrap; padding:76px 0}
.cta-in .copy{flex:1; min-width:320px}
.cta-in p{margin-top:12px; font-weight:300; max-width:52ch}

/* contact strip + footer */
.contact-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; padding:66px 0 6px}
.cell{display:flex; flex-direction:column; align-items:center; gap:10px}
.cell svg{width:30px; height:30px; stroke:var(--orange); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.cell .k{font-family:var(--head); font-weight:700; font-size:.71rem; letter-spacing:.13em; text-transform:uppercase; color:#fff}
.cell .v{font-size:.84rem; color:var(--tx-3)}
.site-footer{border-top:1px solid var(--hairline); margin-top:58px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding:58px 0 42px}
.foot-grid img{height:40px; width:auto}
.foot-grid .blurb{font-size:.85rem; font-weight:300; color:var(--tx-3); margin-top:16px; max-width:36ch}
.foot-grid h4{font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; margin-bottom:14px; color:var(--tx-3)}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:.88rem}
.foot-grid ul a{color:var(--tx-2)} .foot-grid ul a:hover{color:var(--sky)}
.newsletter p{font-size:.85rem; font-weight:300; color:var(--tx-3); margin-bottom:14px}
.nl-row{display:flex; gap:8px}
.nl-row input{flex:1; background:#181818; border:1px solid var(--hairline); border-radius:3px; color:var(--tx); padding:12px 14px; font-family:var(--body); font-size:.88rem; min-width:0}
.nl-row .btn{padding:12px 18px}
.foot-base{border-top:1px solid #262626; padding:20px 0 36px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.76rem; color:var(--tx-3)}

/* ---------- inner pages / posts ---------- */
.page-hero{background:#121212; border-bottom:1px solid var(--hairline); padding:72px 0 56px}
.page-hero h1{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.page-hero .kicker{display:block; margin-bottom:14px}
.entry{padding:64px 0 96px}
.entry .wp-block-post-content,.entry .prose{max-width:72ch}
.entry .wp-block-post-content>*+*{margin-top:1.1em}
.entry h2{font-size:1.5rem; margin-top:2em}
.entry h3{font-size:1.15rem; margin-top:1.6em}
.entry a{text-decoration:underline; text-underline-offset:3px}
.entry ul,.entry ol{padding-left:1.3em}
.entry blockquote{border-left:3px solid var(--orange); padding-left:20px; color:#fff; font-weight:300; margin:1.5em 0}
.entry .wp-block-post-featured-image img{border-radius:6px; border:1px solid var(--hairline)}
.entry .wp-block-post-date,.entry .wp-block-post-terms{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-3)}
.archive-list .wp-block-post-template{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; padding:0; margin:0}
.wp-block-query-pagination{margin-top:40px; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .router{grid-template-columns:1fr}
  .router-rail{flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--hairline)}
  .rbtn{border-left:none; border-bottom:3px solid transparent; flex:none}
  .rbtn[aria-selected="true"]{border-left:none; border-bottom-color:var(--rc,var(--blue))}
  .router-panel{padding:30px 26px}
  .rpane ul{grid-template-columns:1fr}
  .testis,.steps,.cards .wp-block-post-template,.archive-list .wp-block-post-template{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .industries{grid-template-columns:repeat(3,1fr)}
  .band-in{grid-template-columns:repeat(2,1fr)}
  .contact-strip,.foot-grid{grid-template-columns:1fr 1fr}
  .nav-in .wp-block-navigation{margin-left:auto}
  .edge-tab{display:none}
  .hero{min-height:0}
  .hero-cube{opacity:.2}
  .utility-in span{display:none}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .contact-strip,.foot-grid,.industries,.band-in{grid-template-columns:1fr}
  .nav-in{gap:16px}
  .nav-in .btn{display:none}
}