/* =============================================================
   20 SalesCube Defense Services — PURE HTML/CSS (ZERO JavaScript)
   Isometric 3D cubes via CSS transforms, filters via radio-hack
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --text-xs:   clamp(0.7rem,  0.65rem + 0.25vw, 0.8rem);
  --text-sm:   clamp(0.8rem,  0.75rem + 0.25vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem  + 0.25vw, 1.05rem);
  --text-lg:   clamp(1.1rem,  1rem    + 0.5vw,  1.35rem);
  --text-xl:   clamp(1.4rem,  1.1rem  + 1vw,    2rem);
  --bg: #0a0a0a;
  --surface: #111;
  --surface-2: #1a1a1a;
  --border: #2a2a2a;
  --border-lt: #333;
  --text: #e8e8e8;
  --text-m: #888;
  --text-f: #555;
  --blue:   #4A90D9;
  --orange: #E8A838;
  --red:    #D94F4F;
  --green:  #4CAF50;
  --radius: 0.75rem;
  --radius-xl: 1rem;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:80px}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-display);line-height:1.15}
ul{list-style:none}

/* ---------- Hide radio inputs (filter engine) ---------- */
.filter-radio{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(10,10,10,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.header-inner{max-width:1400px;margin:0 auto;padding:.65rem 1.5rem;display:flex;align-items:center;gap:1.25rem}
.logo-img{height:44px;border-radius:4px}
.header-title h1{font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em}
.header-title .subtitle{font-size:var(--text-xs);color:var(--text-m);letter-spacing:.1em;text-transform:uppercase;margin-top:1px}

/* ---------- Section titles ---------- */
.section-title{font-size:var(--text-xl);font-weight:700;text-align:center;letter-spacing:-.02em;margin-bottom:2.5rem}

/* =============================================================
   HERO — Filter bar + Isometric cubes
   ============================================================= */
.hero-section{padding:5rem 1rem 3rem;max-width:1400px;margin:0 auto}

/* Filter bar */
.filter-bar{display:flex;justify-content:center;gap:.5rem;margin-bottom:3rem;flex-wrap:wrap}
.fbtn{display:inline-block;padding:.5rem 1.15rem;border-radius:var(--radius);font-size:var(--text-sm);font-weight:500;color:var(--text-m);border:1px solid var(--border);cursor:pointer;transition:all .25s ease;user-select:none}
.fbtn:hover{color:var(--text);border-color:var(--border-lt);background:var(--surface-2)}
/* Active states via radio hack */
#filter-all:checked ~ .hero-section .fbtn-all,
#filter-org:checked ~ .hero-section .fbtn-org,
#filter-vtb:checked ~ .hero-section .fbtn-vtb,
#filter-mkt:checked ~ .hero-section .fbtn-mkt,
#filter-pr:checked  ~ .hero-section .fbtn-pr{color:#fff;background:var(--surface-2);border-color:var(--text-f)}

/* ---------- Cubes landscape layout ---------- */
.cubes-landscape{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem;max-width:1200px;margin:0 auto}

/* ---------- Cube group ---------- */
.cube-group{position:relative;display:flex;flex-direction:column;align-items:center;transition:opacity .4s ease, filter .4s ease}

/* Filter dimming logic */
#filter-org:checked ~ .hero-section .area-vtb,
#filter-org:checked ~ .hero-section .area-mkt,
#filter-org:checked ~ .hero-section .area-pr,
#filter-vtb:checked ~ .hero-section .area-org,
#filter-vtb:checked ~ .hero-section .area-mkt,
#filter-vtb:checked ~ .hero-section .area-pr,
#filter-mkt:checked ~ .hero-section .area-org,
#filter-mkt:checked ~ .hero-section .area-vtb,
#filter-mkt:checked ~ .hero-section .area-pr,
#filter-pr:checked  ~ .hero-section .area-org,
#filter-pr:checked  ~ .hero-section .area-vtb,
#filter-pr:checked  ~ .hero-section .area-mkt{opacity:.1;filter:grayscale(1);pointer-events:none}

/* Card filter */
#filter-org:checked ~ .cards-section .area-vtb,
#filter-org:checked ~ .cards-section .area-mkt,
#filter-org:checked ~ .cards-section .area-pr,
#filter-vtb:checked ~ .cards-section .area-org,
#filter-vtb:checked ~ .cards-section .area-mkt,
#filter-vtb:checked ~ .cards-section .area-pr,
#filter-mkt:checked ~ .cards-section .area-org,
#filter-mkt:checked ~ .cards-section .area-vtb,
#filter-mkt:checked ~ .cards-section .area-pr,
#filter-pr:checked  ~ .cards-section .area-org,
#filter-pr:checked  ~ .cards-section .area-vtb,
#filter-pr:checked  ~ .cards-section .area-mkt{display:none}

/* ---------- Area badge ---------- */
.area-badge{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:999px;color:#fff;margin-bottom:1rem;white-space:nowrap}
.badge-org{background:var(--blue);box-shadow:0 0 18px rgba(74,144,217,.25)}
.badge-vtb{background:var(--orange);box-shadow:0 0 18px rgba(232,168,56,.25)}
.badge-mkt{background:var(--red);box-shadow:0 0 18px rgba(217,79,79,.25)}
.badge-pr{background:var(--green);box-shadow:0 0 18px rgba(76,175,80,.25)}

/* =============================================================
   ISOMETRIC CSS CUBE
   Pure CSS 3D with perspective, no JS
   ============================================================= */
.cube-wrapper{display:block;width:110px;height:110px;perspective:600px;margin:0 auto .5rem;cursor:pointer;text-decoration:none;transition:transform .25s ease,filter .25s ease}
a.cube-wrapper:hover{transform:scale(1.08);filter:brightness(1.15) drop-shadow(0 0 14px rgba(255,255,255,.25))}
a.cube-wrapper:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px}
.iso-cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-25deg) rotateY(40deg);animation:cube-spin 18s linear infinite}
@keyframes cube-spin{0%{transform:rotateX(-25deg) rotateY(40deg)}100%{transform:rotateX(-25deg) rotateY(400deg)}}

.face{position:absolute;width:110px;height:110px;border:1.5px solid rgba(255,255,255,.12)}

/* Positions */
.face.front {transform:translateZ(55px)}
.face.back  {transform:rotateY(180deg) translateZ(55px)}
.face.left  {transform:rotateY(-90deg) translateZ(55px)}
.face.right {transform:rotateY(90deg)  translateZ(55px)}
.face.top   {transform:rotateX(90deg)  translateZ(55px)}
.face.bottom{transform:rotateX(-90deg) translateZ(55px)}

/* === Camouflage patterns (SVG data URIs — no JS needed) === */

/* Organisation — Blue camo */
.cube-org .face{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect fill='%234A90D9' width='120' height='120'/%3E%3Cpolygon points='20,10 45,25 30,50 5,35' fill='%233670A8' opacity='.7'/%3E%3Cpolygon points='60,5 90,15 80,45 50,35' fill='%235BA3E8' opacity='.6'/%3E%3Cpolygon points='10,55 40,60 35,90 5,85' fill='%232D5F8A' opacity='.65'/%3E%3Cpolygon points='55,50 85,55 80,85 50,80' fill='%236CB4F0' opacity='.5'/%3E%3Cpolygon points='90,70 115,80 105,110 80,100' fill='%233A7AC0' opacity='.6'/%3E%3Cpolygon points='30,80 55,95 40,115 15,105' fill='%234488CC' opacity='.55'/%3E%3C/svg%3E") center/cover}

/* Vertrieb — Orange/Gold camo */
.cube-vtb .face{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect fill='%23E8A838' width='120' height='120'/%3E%3Cpolygon points='15,8 42,22 28,48 3,32' fill='%23C08020' opacity='.7'/%3E%3Cpolygon points='58,3 88,13 78,43 48,33' fill='%23F0C060' opacity='.6'/%3E%3Cpolygon points='8,52 38,58 33,88 3,82' fill='%23A06818' opacity='.65'/%3E%3Cpolygon points='53,48 83,53 78,83 48,78' fill='%23F5D080' opacity='.5'/%3E%3Cpolygon points='88,68 113,78 103,108 78,98' fill='%23D09830' opacity='.6'/%3E%3Cpolygon points='28,78 53,93 38,113 13,103' fill='%23B88828' opacity='.55'/%3E%3C/svg%3E") center/cover}

/* Marketing — Red camo */
.cube-mkt .face{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect fill='%23D94F4F' width='120' height='120'/%3E%3Cpolygon points='18,10 43,25 30,50 5,35' fill='%23A83030' opacity='.7'/%3E%3Cpolygon points='60,5 88,15 78,45 50,35' fill='%23E87070' opacity='.6'/%3E%3Cpolygon points='10,55 38,60 33,88 5,82' fill='%23902020' opacity='.65'/%3E%3Cpolygon points='55,48 83,53 78,83 50,78' fill='%23F08888' opacity='.5'/%3E%3Cpolygon points='88,68 113,78 103,108 80,98' fill='%23C04040' opacity='.6'/%3E%3Cpolygon points='28,78 53,93 38,113 13,103' fill='%23B83838' opacity='.55'/%3E%3C/svg%3E") center/cover}

/* PR — Green camo */
.cube-pr .face{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect fill='%234CAF50' width='120' height='120'/%3E%3Cpolygon points='18,10 43,25 30,50 5,35' fill='%23388038' opacity='.7'/%3E%3Cpolygon points='60,5 88,15 78,45 50,35' fill='%2368D068' opacity='.6'/%3E%3Cpolygon points='10,55 38,60 33,88 5,82' fill='%23286828' opacity='.65'/%3E%3Cpolygon points='55,48 83,53 78,83 50,78' fill='%2380E080' opacity='.5'/%3E%3Cpolygon points='88,68 113,78 103,108 80,98' fill='%23409840' opacity='.6'/%3E%3Cpolygon points='28,78 53,93 38,113 13,103' fill='%23389038' opacity='.55'/%3E%3C/svg%3E") center/cover}

/* =============================================================
   PRODUCT NODES with STANGEN (connecting rods)
   ============================================================= */
.products-ring{position:relative;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .4rem;margin-top:.25rem}

.product-node{position:relative;display:flex;align-items:flex-start;gap:.35rem}

/* The connecting rod / stange */
.stange{width:24px;min-height:2px;height:2px;margin-top:9px;flex-shrink:0;border-radius:1px}
.area-org .stange{background:var(--blue)}
.area-vtb .stange{background:var(--orange)}
.area-mkt .stange{background:var(--red)}
.area-pr  .stange{background:var(--green)}

/* The dot at the connection point */
.node-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px}
.area-org .node-dot{background:var(--blue);box-shadow:0 0 6px var(--blue)}
.area-vtb .node-dot{background:var(--orange);box-shadow:0 0 6px var(--orange)}
.area-mkt .node-dot{background:var(--red);box-shadow:0 0 6px var(--red)}
.area-pr  .node-dot{background:var(--green);box-shadow:0 0 6px var(--green)}

/* Label card */
.node-label{background:rgba(17,17,17,.9);border:1px solid var(--border);border-radius:6px;padding:4px 9px;white-space:nowrap}
.area-org .node-label{border-left:3px solid var(--blue)}
.area-vtb .node-label{border-left:3px solid var(--orange)}
.area-mkt .node-label{border-left:3px solid var(--red)}
.area-pr  .node-label{border-left:3px solid var(--green)}

.nl-name{display:block;font-weight:700;font-size:var(--text-xs);color:#fff;line-height:1.35}
.nl-func{display:block;font-size:.65rem;color:var(--text-m);line-height:1.3}

/* =============================================================
   PRODUCT CARDS GRID
   ============================================================= */
.cards-section{padding:4rem 1.5rem 5rem;max-width:1400px;margin:0 auto}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;position:relative;overflow:hidden;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.pcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--c)}
.pcard:hover{border-color:var(--border-lt);transform:translateY(-2px);box-shadow:var(--shadow)}
.pc-nr{position:absolute;top:1rem;right:1rem;font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;color:var(--text-f)}
.pc-area{display:inline-block;font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:.65rem;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.pcard h3{font-size:var(--text-lg);font-weight:700;color:#fff;margin-bottom:2px;letter-spacing:-.01em}
.pcard p{font-size:var(--text-sm);color:var(--text-m);margin-bottom:1rem}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tags span{font-size:.65rem;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-m);border:1px solid var(--border)}

/* =============================================================
   ROADMAP
   ============================================================= */
.roadmap-section{padding:3rem 1.5rem 5rem;max-width:1400px;margin:0 auto}
.roadmap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.phase{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;position:relative;overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.phase::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--pc)}
.phase:hover{border-color:var(--border-lt);transform:translateY(-2px);box-shadow:var(--shadow)}
.phase-tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--pc) 15%,transparent);color:var(--pc);margin-bottom:.4rem}
.phase-time{display:block;font-size:var(--text-xs);color:var(--text-f);margin-bottom:.6rem}
.phase h3{font-size:var(--text-lg);font-weight:700;color:#fff;margin-bottom:1rem}
.phase ul{display:flex;flex-direction:column;gap:.5rem}
.phase li{font-size:var(--text-sm);color:var(--text-m);padding-left:1rem;position:relative}
.phase li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--pc);opacity:.6}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:2rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem;text-align:center}
.footer-logo{height:30px;border-radius:4px}
.site-footer p{font-size:var(--text-xs);color:var(--text-f)}
.no-js-badge{display:inline-block;padding:3px 12px;border-radius:999px;border:1px solid var(--green);color:var(--green);font-size:.6rem;font-weight:600;letter-spacing:.06em;text-decoration:none;transition:background .2s ease,color .2s ease}
a.no-js-badge:hover{background:var(--green);color:#0a0a0a}
a.no-js-badge:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media(max-width:768px){
  .header-inner{padding:.5rem 1rem;gap:.75rem}
  .logo-img{height:34px}
  .header-title h1{font-size:var(--text-sm)}
  .cubes-landscape{grid-template-columns:1fr;gap:3rem}
  .card-grid{grid-template-columns:1fr}
  .roadmap-grid{grid-template-columns:1fr}
  .filter-bar{gap:.35rem}
  .fbtn{padding:.35rem .75rem;font-size:var(--text-xs)}
  .site-footer{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}