/* ===== PAFARS COMPANY — Immersive Digital Showroom ===== */
:root{
  --bg:#03060d;
  --bg-2:#060b16;
  --ink:#e8f4ff;
  --muted:#7e93b0;
  --cyan:#19e9ff;
  --blue:#2b6bff;
  --blue-deep:#0b1f4d;
  --line:rgba(120,180,255,.14);
  --glass:rgba(12,22,42,.55);
  --glow:0 0 40px rgba(25,233,255,.35);
  --font:'Space Grotesk',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:radial-gradient(1200px 800px at 80% -10%,#0b1d40 0%,transparent 55%),
             radial-gradient(900px 700px at -10% 20%,#06122b 0%,transparent 50%),
             var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.05}
section{position:relative;z-index:2}

/* ===== AMBIENT LAYERS ===== */
.grid-overlay{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1000px 800px at 50% 10%,#000 30%,transparent 80%);
          mask-image:radial-gradient(1000px 800px at 50% 10%,#000 30%,transparent 80%);
}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;filter:blur(80px);opacity:.6}
.orb{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 18s ease-in-out infinite}
.orb-1{width:520px;height:520px;background:radial-gradient(circle,#19e9ff,transparent 60%);top:-120px;left:55%}
.orb-2{width:460px;height:460px;background:radial-gradient(circle,#2b6bff,transparent 60%);top:40%;left:-120px;animation-delay:-6s}
.orb-3{width:380px;height:380px;background:radial-gradient(circle,#7a2bff,transparent 60%);bottom:-100px;right:5%;animation-delay:-12s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}
.scanline{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(to bottom,#fff 0 1px,transparent 1px 3px)}

/* ===== BRAND MARK ===== */
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;width:26px;height:26px;flex:0 0 auto}
.brand-mark i{display:block;border-radius:3px;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:var(--glow)}
.brand-mark i:nth-child(2){opacity:.5}
.brand-mark i:nth-child(3){opacity:.7}
.brand-text{font-weight:700;letter-spacing:.18em;font-size:.92rem}
.brand-text em{font-style:normal;color:var(--cyan);font-weight:400;margin-left:.35em;opacity:.85}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:18px clamp(20px,5vw,64px);
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(3,6,13,.85),rgba(3,6,13,.2));
  border-bottom:1px solid transparent;transition:.3s;
}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(3,6,13,.9)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:.82rem;letter-spacing:.04em}
.nav-links a{color:var(--muted);transition:.25s;position:relative;padding:4px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--cyan);transition:.25s;box-shadow:var(--glow)}
.nav-links a:hover::after{width:100%}
.nav-privacy{color:var(--cyan)!important}
.nav-cta{margin-left:8px}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.3s}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:.82rem;font-weight:600;
  letter-spacing:.06em;padding:13px 24px;border-radius:10px;cursor:pointer;transition:.25s;border:1px solid transparent;text-transform:uppercase}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#021018;box-shadow:0 8px 30px rgba(25,233,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(25,233,255,.55)}
.btn-line,.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-line:hover,.btn-ghost:hover{border-color:var(--cyan);box-shadow:var(--glow);color:var(--cyan)}
.btn.full{width:100%;justify-content:center}

/* ===== KICKERS / HEADS ===== */
.kicker{font-size:.74rem;letter-spacing:.28em;color:var(--cyan);font-weight:500;text-transform:uppercase}
.kicker.light{color:var(--cyan)}
.section-head{max-width:760px;margin:0 0 48px;padding:0 clamp(20px,5vw,64px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(1.9rem,4vw,3.1rem);margin-top:14px}
.section-head .sub{color:var(--muted);margin-top:12px}

/* ===== HERO ===== */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  min-height:100vh;padding:140px clamp(20px,5vw,64px) 80px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.24em;
  color:var(--cyan);border:1px solid var(--line);border-radius:30px;padding:8px 16px;background:rgba(25,233,255,.05)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:var(--glow);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:clamp(2.6rem,6vw,4.8rem);margin:24px 0;font-weight:700}
.grad{background:linear-gradient(110deg,var(--cyan),var(--blue) 60%,#9b6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);font-size:1.05rem;max-width:520px}
.hero-actions{display:flex;gap:14px;margin:32px 0;flex-wrap:wrap}
.hero-ticker{list-style:none;display:flex;gap:24px;flex-wrap:wrap;font-size:.7rem;letter-spacing:.22em;color:var(--muted);
  border-top:1px solid var(--line);padding-top:20px}
.hero-ticker li{position:relative;padding-left:16px}
.hero-ticker li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);transform:translateY(-50%);box-shadow:var(--glow)}

/* ===== SCREEN MOCK ===== */
.hero-stage{position:relative;height:520px}
.screen-mock{position:relative}
.screen-mock.big{position:absolute;inset:10% 0 10% 6%;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.screen-bezel{position:relative;height:100%;border-radius:18px;padding:12px;
  background:linear-gradient(145deg,#0c1730,#05080f);
  border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.03),var(--glow)}
.screen-glass{position:absolute;inset:12px;border-radius:10px;overflow:hidden;
  background:var(--img) center/cover;}
.screen-glass::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(25,233,255,.25),transparent 40%),
            linear-gradient(0deg,rgba(3,6,13,.7),transparent 60%)}
.screen-hud{position:absolute;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;
  font-size:.66rem;letter-spacing:.2em;z-index:3}
.hud-tag{background:rgba(3,6,13,.6);border:1px solid var(--line);padding:6px 10px;border-radius:6px;color:var(--cyan)}
.hud-live{display:flex;align-items:center;gap:7px;background:rgba(3,6,13,.6);border:1px solid var(--line);padding:6px 10px;border-radius:6px}
.hud-live i{width:7px;height:7px;border-radius:50%;background:#ff4f6d;box-shadow:0 0 10px #ff4f6d;animation:pulse 1.4s infinite}
.screen-bars{position:absolute;left:24px;right:24px;bottom:24px;display:flex;gap:6px;align-items:flex-end;height:60px;z-index:3}
.screen-bars i{flex:1;background:linear-gradient(to top,var(--blue),var(--cyan));border-radius:3px 3px 0 0;
  animation:eq 1.2s ease-in-out infinite;opacity:.8}
.screen-bars i:nth-child(2){animation-delay:.15s}.screen-bars i:nth-child(3){animation-delay:.3s}
.screen-bars i:nth-child(4){animation-delay:.45s}.screen-bars i:nth-child(5){animation-delay:.6s}
.screen-bars i:nth-child(6){animation-delay:.75s}.screen-bars i:nth-child(7){animation-delay:.9s}
@keyframes eq{0%,100%{height:25%}50%{height:95%}}

/* floating panels */
.float-panel{position:absolute;background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:150px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);animation:floaty 6s ease-in-out infinite}
.float-panel .fp-label{font-size:.6rem;letter-spacing:.2em;color:var(--muted)}
.float-panel strong{display:block;font-size:1.2rem;margin:4px 0 8px;color:var(--ink)}
.fp-meter{height:5px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.fp-meter i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:var(--glow)}
.fp-a{top:2%;right:-2%;animation-delay:-1s}
.fp-b{bottom:14%;left:-6%;animation-delay:-3s}
.fp-c{bottom:-4%;right:8%;animation-delay:-2s}
.spark{height:24px;background:
  linear-gradient(90deg,transparent,var(--cyan)) no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24'%3E%3Cpolyline points='0,18 12,10 24,14 36,4 48,12 60,6 72,16 84,8 100,12' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== CONTROL DECK ===== */
.deck{padding:90px 0}
.deck-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 clamp(20px,5vw,64px)}
.glass{background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;
  position:relative;overflow:hidden;transition:.3s}
.glass:hover{border-color:rgba(25,233,255,.4);box-shadow:0 0 60px rgba(25,233,255,.12)}
.card-wide{grid-column:span 2;grid-row:span 2;min-height:340px;
  background:var(--glass),var(--img);background-size:cover;background-position:center}
.card-wide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,13,.3),rgba(3,6,13,.92))}
.card-body{position:relative;z-index:2;padding:28px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.card-body h3{font-size:1.5rem;margin:14px 0 10px}
.card-body p{color:var(--muted);font-size:.95rem;max-width:440px}
.chip{display:inline-block;font-size:.62rem;letter-spacing:.2em;color:var(--cyan);border:1px solid var(--line);
  padding:5px 10px;border-radius:20px;background:rgba(25,233,255,.06);width:fit-content}
.stat-card{padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.stat-card.alt{background:linear-gradient(160deg,rgba(43,107,255,.18),var(--glass))}
.stat-num{font-size:2.8rem;font-weight:700;background:linear-gradient(120deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat-unit{font-size:1.1rem;color:var(--cyan);font-weight:600}
.stat-card p{color:var(--muted);font-size:.82rem;margin-top:10px}
.console{grid-column:span 2;padding:22px 24px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.console-row{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;letter-spacing:.05em;
  color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:9px}
.console-row b{font-size:.66rem;letter-spacing:.15em;padding:4px 9px;border-radius:5px}
.console-row .ok{color:#19ffae;background:rgba(25,255,174,.1)}
.console-row .warn{color:#ffcf5c;background:rgba(255,207,92,.12)}
.console-graph{display:flex;gap:5px;align-items:flex-end;height:46px;margin-top:6px}
.console-graph i{flex:1;background:linear-gradient(to top,var(--blue-deep),var(--cyan));border-radius:2px;animation:eq 1.5s ease-in-out infinite}
.console-graph i:nth-child(odd){animation-delay:.3s}.console-graph i:nth-child(3n){animation-delay:.6s}

/* ===== SYSTEMS SHOWCASE ===== */
.systems{padding:90px 0}
.showcase{padding:0 clamp(20px,5vw,64px)}
.showcase-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.tab{font-family:var(--font);font-size:.82rem;font-weight:500;color:var(--muted);cursor:pointer;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:30px;padding:11px 18px;transition:.25s;
  display:flex;align-items:center;gap:8px}
.tab span{font-size:.66rem;color:var(--cyan);opacity:.7}
.tab:hover{color:var(--ink);border-color:rgba(25,233,255,.4)}
.tab.active{background:linear-gradient(135deg,rgba(25,233,255,.16),rgba(43,107,255,.16));color:var(--ink);
  border-color:var(--cyan);box-shadow:var(--glow)}
.showcase-stage{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
.showcase-visual{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 40px 100px rgba(0,0,0,.6)}
.visual-frame{position:absolute;inset:0;background:var(--img) center/cover;transition:opacity .5s,transform 6s ease}
.visual-frame.swap{opacity:0}
.showcase-visual:hover .visual-frame{transform:scale(1.06)}
.visual-glow{position:absolute;inset:0;background:linear-gradient(120deg,rgba(25,233,255,.2),transparent 45%),
  linear-gradient(0deg,rgba(3,6,13,.5),transparent 55%);pointer-events:none}
.visual-corner{position:absolute;width:26px;height:26px;border:2px solid var(--cyan);opacity:.8}
.visual-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.visual-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.visual-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.visual-corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
.showcase-info h3{font-size:2rem;margin-bottom:14px}
.showcase-info p{color:var(--muted);margin-bottom:22px}
.spec-list{list-style:none;margin-bottom:26px;display:flex;flex-direction:column;gap:0}
.spec-list li{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.spec-list span{color:var(--muted)}
.spec-list b{color:var(--cyan);font-weight:500}

/* ===== MEDIA WALL ===== */
.wall{padding:60px clamp(20px,5vw,64px) 90px}
.wall-frame{position:relative;border-radius:24px;overflow:hidden;min-height:520px;
  background:var(--img) center/cover;border:1px solid var(--line);
  box-shadow:0 50px 140px rgba(0,0,0,.7)}
.wall-frame::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,6,13,.95) 0%,rgba(3,6,13,.6) 45%,transparent 80%)}
.wall-overlay{position:relative;z-index:3;max-width:560px;padding:clamp(30px,5vw,64px)}
.wall-overlay h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:16px 0}
.wall-overlay p{color:#bcd0ee}
.wall-readout{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.wall-readout div{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px}
.wall-readout span{display:block;font-size:.6rem;letter-spacing:.2em;color:var(--muted)}
.wall-readout b{font-size:1.15rem;color:var(--cyan)}
.wall-tiles{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(2,1fr);opacity:.25;pointer-events:none}
.wall-tiles i{border:1px solid rgba(25,233,255,.18);animation:tileglow 4s ease-in-out infinite}
.wall-tiles i:nth-child(3n){animation-delay:1s}.wall-tiles i:nth-child(2n){animation-delay:2s}
@keyframes tileglow{0%,100%{background:transparent}50%{background:rgba(25,233,255,.06)}}

/* ===== DEPLOYMENTS ===== */
.env{padding:60px 0 90px}
.env-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px;padding:0 clamp(20px,5vw,64px)}
.env-tile{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--img) center/cover;transition:.4s}
.env-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,6,13,.92),transparent 55%);transition:.4s}
.env-tile:hover{transform:translateY(-4px);border-color:rgba(25,233,255,.5);box-shadow:0 0 50px rgba(25,233,255,.18)}
.env-tile.tall{grid-row:span 2}
.env-tile.wide{grid-column:span 2}
.env-tile figcaption{position:absolute;left:0;bottom:0;z-index:2;padding:20px}
.env-tile figcaption strong{display:block;font-size:1.1rem;margin:10px 0 4px}
.env-tile figcaption p{color:var(--muted);font-size:.8rem}

/* ===== CONNECT ===== */
.connect{padding:40px clamp(20px,5vw,64px) 100px}
.connect-card{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:clamp(30px,4vw,56px)}
.connect-copy h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:16px 0}
.connect-copy p{color:var(--muted);max-width:440px}
.connect-meta{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.connect-meta div{display:flex;flex-direction:column}
.connect-meta span{font-size:.62rem;letter-spacing:.2em;color:var(--muted)}
.connect-meta b{color:var(--cyan);font-weight:500}
.connect-form{display:flex;flex-direction:column;gap:14px}
.connect-form label{display:flex;flex-direction:column;gap:7px;font-size:.74rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.connect-form input,.connect-form select,.connect-form textarea{
  font-family:var(--font);background:rgba(3,6,13,.6);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--ink);font-size:.95rem;transition:.25s;text-transform:none;letter-spacing:0}
.connect-form input:focus,.connect-form select:focus,.connect-form textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,233,255,.12)}
.connect-form textarea{resize:vertical}
.form-note{font-size:.82rem;color:var(--cyan);min-height:1em;text-transform:none;letter-spacing:0}

/* ===== FOOTER ===== */
.footer{position:relative;z-index:2;border-top:1px solid var(--line);
  background:linear-gradient(0deg,#04080f,transparent);padding:60px clamp(20px,5vw,64px) 30px}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid var(--line)}
.footer-brand{max-width:340px}
.footer-brand .brand-mark{margin-bottom:14px}
.footer-brand p{color:var(--muted);font-size:.88rem;margin-top:12px}
.footer-nav{display:flex;flex-wrap:wrap;gap:22px;align-items:center;font-size:.85rem}
.footer-nav a{color:var(--muted);transition:.25s}
.footer-nav a:hover{color:var(--cyan)}
.footer-privacy{color:var(--cyan)!important}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;
  font-size:.78rem;color:var(--muted)}
.footer-bottom a{color:var(--cyan)}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;gap:60px}
  .hero-stage{height:440px;max-width:560px}
  .deck-grid{grid-template-columns:repeat(2,1fr)}
  .card-wide{grid-column:span 2;grid-row:auto;min-height:280px}
  .console{grid-column:span 2}
  .showcase-stage{grid-template-columns:1fr;gap:24px}
  .env-grid{grid-template-columns:repeat(2,1fr)}
  .connect-card{grid-template-columns:1fr;gap:32px}
}
@media(max-width:680px){
  .nav-links,.nav-cta{display:none}
  .nav.open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:rgba(3,6,13,.97);padding:20px clamp(20px,5vw,64px);gap:18px;border-bottom:1px solid var(--line)}
  .nav-toggle{display:flex}
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .deck-grid{grid-template-columns:1fr}
  .card-wide,.console{grid-column:auto}
  .env-grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .env-tile.tall,.env-tile.wide{grid-row:auto;grid-column:auto}
  .hero-stage{height:380px}
  .float-panel{transform:scale(.85)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}