/*
Theme Name: FireCipher
Theme URI: https://firecipher.eu
Author: FireCipher
Description: FireCipher egyedi téma — sötét, modern, animált sematikus ábrákkal. Az interaktív szimulátorokat a FireCipher Interactive plugin adja (shortcode: [fc_sim]).
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: firecipher
*/

/* ---- Tokens ---- */
:root{
--bg:#0B0A10;--surface:#13111A;--surface2:#1A1724;--line:rgba(255,255,255,.08);
--text:#EEEBF4;--muted:#A9A2B8;--brand:#7B1FA2;--glow:#C77DFF;
--good:#4ADE80;--warn:#FBBF24;--bad:#F87171;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Grotesk',system-ui,sans-serif;overflow-x:hidden;max-width:100%}
/* A fényfoltok (orb) ne okozzanak vízszintes görgetést: a szakaszok levágják a kilógó részt. */
main section{overflow-x:clip}
svg{max-width:100%}
a{color:#D9A6FF}a:hover{color:#fff}
img{max-width:100%;height:auto}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.gridbg{background-image:linear-gradient(rgba(199,125,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(199,125,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%)}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;pointer-events:none}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;text-decoration:none;font-weight:600;font-size:16px;font-family:inherit;cursor:pointer;border:0;transition:transform .25s,box-shadow .25s,background .25s}
.btn-p{background:var(--brand);color:#fff;box-shadow:0 0 0 1px rgba(199,125,255,.4),0 10px 40px -10px rgba(199,125,255,.7)}
.btn-p:hover{color:#fff;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(199,125,255,.7),0 16px 50px -8px rgba(199,125,255,.9)}
.btn-g{color:var(--text);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.btn-g:hover{color:#fff;border-color:rgba(199,125,255,.5);background:rgba(199,125,255,.08)}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(11,10,16,.72);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-weight:600;font-size:18px;flex-shrink:0}
.brand .mark{width:36px;height:36px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(199,125,255,.5)}
.main-nav{margin-left:auto}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-links li{position:relative}
.nav-links a{color:var(--muted);text-decoration:none;font-size:15px;display:inline-flex;align-items:center;gap:6px;padding:8px 0}
.nav-links a:hover,.nav-links .current-menu-item>a,.nav-links .current-menu-parent>a{color:var(--text)}
.nav-links .menu-item-has-children>a::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.nav-links .sub-menu{position:absolute;top:100%;left:-16px;min-width:240px;list-style:none;margin:0;padding:8px;background:#141019;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);display:none;flex-direction:column;gap:2px}
.nav-links li:hover>.sub-menu,.nav-links li:focus-within>.sub-menu{display:flex}
.nav-links .sub-menu a{display:block;padding:10px 14px;border-radius:8px;font-size:14px;color:var(--muted)}
.nav-links .sub-menu a:hover{background:rgba(199,125,255,.1);color:#fff}
.header-cta{min-height:44px;padding:0 20px;font-size:15px;flex-shrink:0}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;color:var(--text);cursor:pointer;align-items:center;justify-content:center;margin-left:auto}
.nav-toggle svg{width:22px;height:22px}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--line);padding:40px 0}
.site-footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;font-size:14px;color:var(--muted)}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:#fff}

/* ---- Layout helpers ---- */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--text);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,background .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(199,125,255,.45);background:var(--surface2);color:var(--text)}
.card:hover .ico{background:var(--brand);color:#fff;box-shadow:0 0 30px rgba(199,125,255,.6)}
.card:hover .arrow{transform:translateX(4px);opacity:1}
.arrow{transition:transform .3s,opacity .3s;opacity:.5}
.ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(199,125,255,.1);color:#D9A6FF;transition:all .35s}
.warn{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(251,191,36,.1);color:var(--warn);flex-shrink:0;font-weight:700}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--glow);letter-spacing:.12em}
.lead{font-size:18px;line-height:1.65;color:var(--muted)}
.cta-box{position:relative;overflow:hidden;border-radius:32px;padding:clamp(40px,6vw,80px);background:var(--brand);box-shadow:0 50px 140px -40px rgba(199,125,255,.7)}

/* ---- Hero terminal (home) ---- */
.term{position:relative;background:rgba(19,17,26,.85);border:1px solid rgba(199,125,255,.25);border-radius:22px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(123,31,162,.6)}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#3A3546;display:inline-block}
.term-body{padding:24px 22px;display:flex;flex-direction:column;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:14px}
.term-row{display:flex;justify-content:space-between;gap:12px}
.term-scan{position:absolute;left:0;right:0;height:60px;background:linear-gradient(180deg,transparent,rgba(199,125,255,.08),transparent);pointer-events:none;top:0}
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden}
.marquee{display:flex;gap:64px;width:max-content;font-family:'IBM Plex Mono',monospace;font-size:15px;color:#6F6883;white-space:nowrap}

/* ---- Animations ---- */
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 12px var(--good);display:inline-block}
.motion .dot{animation:fc-pulse 2.2s ease-in-out infinite}
.motion .rise{opacity:0;animation:fc-rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.motion .d1{animation-delay:.1s}.motion .d2{animation-delay:.25s}.motion .d3{animation-delay:.4s}.motion .d4{animation-delay:.55s}.motion .d5{animation-delay:.75s}
.motion .orb{animation:fc-drift 14s ease-in-out infinite alternate}
.motion .term-scan{animation:fc-scan 4s linear infinite}
.motion .marquee{animation:fc-marq 30s linear infinite}
.motion .tline{opacity:0;animation:fc-typein .4s ease forwards}
.motion .t1{animation-delay:.9s}.motion .t2{animation-delay:1.3s}.motion .t3{animation-delay:1.7s}.motion .t4{animation-delay:2.1s}.motion .t5{animation-delay:2.5s}.motion .t6{animation-delay:3s}
.fc-flow{stroke-dasharray:4 6}
.motion .fc-flow{animation:fc-flowmove 1.2s linear infinite}
@supports (animation-timeline:view()){
.motion .reveal{animation:fc-rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.motion .reveal-l{animation:fc-slidel linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
.motion .reveal-r{animation:fc-slider linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
.motion .grow{animation:fc-growx linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
}
@keyframes fc-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fc-slidel{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes fc-slider{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes fc-growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fc-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fc-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}
@keyframes fc-flowmove{to{stroke-dashoffset:-20}}
@keyframes fc-scan{from{top:0}to{top:100%}}
@keyframes fc-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fc-typein{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.motion *{animation:none!important;opacity:1!important;transform:none!important}}

/* ---- Responsive ---- */
@media (max-width:980px){
.nav-toggle{display:flex}
.main-nav{position:absolute;top:76px;left:0;right:0;background:#0E0C14;border-bottom:1px solid var(--line);margin:0;display:none;max-height:calc(100vh - 76px);overflow:auto}
.main-nav.open{display:block}
.nav-links{flex-direction:column;gap:0;padding:12px 32px}
.nav-links li{border-bottom:1px solid var(--line)}
.nav-links a{padding:14px 0;font-size:16px}
.nav-links .sub-menu{position:static;display:flex;min-width:0;border:0;box-shadow:none;background:transparent;padding:0 0 8px 14px}
.header-cta{display:none}
}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr);gap:40px}.three,.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.three,.svc{grid-template-columns:minmax(0,1fr)}.wrap{padding:0 16px}}