/* =========================================================
   VRAXON THEME — TECHNOLOGY PAGE STYLES (unique sections only)
   Shared vars / reset / header / footer live in base.css
   ========================================================= */

body.page-technology{
  --radius: 18px;
  --grad-primary: linear-gradient(100deg, var(--blue) 0%, var(--violet) 55%, var(--pink) 100%);
}
body.page-technology .eyebrow{ color:var(--mint); }

/* HERO */
.tech-hero{
  position:relative; padding:86px 0 70px; overflow:hidden;
  background:
    linear-gradient(120deg, rgba(139,92,246,0.09), rgba(59,130,246,0.05) 40%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(11,12,20,0.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(11,12,20,0.035) 0 1px, transparent 1px 64px);
}
.tech-hero::before{
  content:""; position:absolute; top:-180px; left:-140px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.14), transparent 70%);
}
.tech-hero::after{
  content:""; position:absolute; top:-120px; right:-160px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,238,0.13), transparent 70%);
}
.tech-hero-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.85fr; gap:56px; align-items:center;
}
.tech-hero h1{font-size:47px; font-weight:700;}
.tech-hero p.lede{margin-top:24px; font-size:16.5px; color:var(--ink-soft); max-width:480px; line-height:1.65;}
.hero-art{
  border-radius:22px; overflow:hidden; height:290px; box-shadow:var(--shadow-card);
  position:relative; background:linear-gradient(135deg,#161a3d,#3c3a86);
}
.hero-art img{opacity:0.92;}

/* CODE PANEL SECTION */
.code-section{padding:60px 0 90px;}
.code-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:52px; align-items:center;}
.terminal{
  background:linear-gradient(155deg,#181330,#2c2154 60%,#3a2456);
  border-radius:20px; padding:26px 28px 30px; box-shadow:0 24px 60px -20px rgba(40,20,90,0.45);
  color:#e7e6f7; font-family:'JetBrains Mono', monospace; font-size:13.3px; line-height:1.85;
}
.term-dots{display:flex; align-items:center; gap:8px; margin-bottom:18px;}
.term-dots span{width:11px; height:11px; border-radius:50%; display:inline-block;}
.term-dots span:nth-child(1){background:#ff5f56;}
.term-dots span:nth-child(2){background:#ffbd2e;}
.term-dots span:nth-child(3){background:#27c93f;}
.term-dots b{margin-left:10px; font-size:11.5px; letter-spacing:0.1em; color:#9d97c9; font-weight:600;}
.terminal .c-key{color:#8fb2ff;}
.terminal .c-str{color:#8fe3a8;}
.terminal .c-mut{color:#ffd479;}
.terminal .c-ok{color:#4fd68c;}
.terminal .c-arrow{color:#ff7ad6;}
.terminal .c-num{color:#ffb454;}
.terminal .c-dim{color:#867fb0;}
.terminal pre{white-space:pre-wrap; word-break:break-word;}

.code-copy h2{font-size:30px; font-weight:700;}
.code-copy p{margin-top:16px; color:var(--ink-soft); font-size:15.5px; line-height:1.65; max-width:460px;}
.mini-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px;}
.mini-stat{background:var(--paper-dim); border-radius:14px; padding:16px 18px;}
.mini-stat span{display:block; font-size:10.5px; font-weight:800; letter-spacing:0.1em; color:#9a9ca8; margin-bottom:6px;}
.mini-stat b{font-family:'Bricolage Grotesque',sans-serif; font-size:22px; font-weight:700;}
.mini-stat.pink b{color:var(--pink);}
.mini-stat.violet b{color:var(--violet);}
.mini-stat.mint b{color:var(--mint);}

/* MODULES */
.modules-section{padding:30px 0 90px;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:38px; font-weight:700;}
.mod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.mod-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; background:#fff;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mod-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:transparent;}
.mod-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px;}
.mod-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px;
}
.mod-tag{font-size:10px; font-weight:800; letter-spacing:0.08em; color:#9a9ca8; text-transform:uppercase; margin-top:8px;}
.mod-card h3{font-size:19px; font-weight:700; margin-bottom:10px;}
.mod-card p{font-size:14px; color:var(--ink-soft); line-height:1.58;}

.mi-1{background:#e7edff; color:#3b5bff;}
.mi-2{background:#e0f8ec; color:#0da35d;}
.mi-3{background:#f0e7ff; color:#8b3ce0;}
.mi-4{background:#ffe3ec; color:#e0367f;}
.mi-5{background:#fff3d0; color:#c9820f;}
.mi-6{background:#dff6fa; color:#0c9ea3;}

/* CTA BANNER */
.live-strip{padding:10px 0 100px;}
.live-banner{
  border-radius:26px; padding:42px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px;
  background:linear-gradient(110deg, #e2f7ee 0%, #e7f1ff 55%, #f3e9ff 100%);
  position:relative; overflow:hidden;
}
.live-banner h2{font-size:30px; font-weight:700;}
.live-banner .eyebrow{margin-bottom:10px; color:var(--violet);}

@media (max-width: 980px){
  .tech-hero-grid, .code-grid{grid-template-columns:1fr;}
  .mod-grid{grid-template-columns:1fr 1fr;}
  .tech-hero h1{font-size:34px;}
  .live-banner{flex-direction:column; text-align:center;}
  .mini-stats{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width: 620px){
  .mod-grid{grid-template-columns:1fr;}
}