/* ─────────────────────────────────────────
   KELVRIX.COM.MY — Global Stylesheet v2
   ───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

:root {
  --black:     #050508;
  --deep:      #090912;
  --panel:     #0e0e1a;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.14);
  --cyan:      #00e5ff;
  --cyan-dim:  rgba(0,229,255,0.12);
  --amber:     #f59e0b;
  --amber-dim: rgba(245,158,11,0.12);
  --white:     #f0f0f8;
  --muted:     rgba(240,240,248,0.48);
  --faint:     rgba(240,240,248,0.07);
  --green:     #00e676;
  --grid:      rgba(0,229,255,0.03);
  --nav-h:     64px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Barlow',sans-serif;background:var(--black);color:var(--white);overflow-x:hidden;min-height:100vh;}

body::before{content:'';position:fixed;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;z-index:0;}

h1,h2,h3,.bebas{font-family:'Bebas Neue',sans-serif;letter-spacing:0.02em;}
.condensed{font-family:'Barlow Condensed',sans-serif;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;height:var(--nav-h);background:rgba(5,5,8,0.9);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:0.06em;color:var(--white);text-decoration:none;display:flex;align-items:center;}
.nav-logo-mark{width:1.5em;height:1.5em;margin-right:0.4rem;}
.nav-logo .accent{color:var(--cyan);}
.nav-logo sup{font-family:'Barlow Condensed',sans-serif;font-size:0.55rem;font-weight:600;letter-spacing:0.1em;color:var(--cyan);vertical-align:super;margin-left:1px;}
.nav-links{list-style:none;display:flex;gap:2rem;}
.nav-links a{text-decoration:none;color:var(--muted);font-size:0.8rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;transition:color 0.2s;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform 0.2s;}
.nav-links a:hover,.nav-links a.active{color:var(--cyan);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{background:transparent;border:1px solid var(--cyan);color:var(--cyan);padding:0.5rem 1.3rem;
  font-family:'Barlow Condensed',sans-serif;font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;transition:all 0.2s;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);}
.nav-cta:hover{background:var(--cyan);color:var(--black);}

.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;}
.nav-hamburger span{display:block;width:24px;height:1.5px;background:var(--white);transition:all 0.3s;}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
.nav-drawer{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(5,5,8,0.97);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:2rem 3rem;z-index:199;flex-direction:column;gap:1.5rem;}
.nav-drawer.open{display:flex;}
.nav-drawer a{font-family:'Barlow Condensed',sans-serif;font-size:1.2rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.nav-drawer a:hover,.nav-drawer a.active{color:var(--cyan);}
.nav-drawer .nav-cta{width:fit-content;margin-top:0.5rem;}

/* ── LAYOUT ── */
.page-wrap{position:relative;z-index:1;padding-top:var(--nav-h);}
.section{padding:6rem 3rem;position:relative;z-index:1;}
.section-deep{background:var(--deep);}
.section-black{background:var(--black);}
.section-panel{background:var(--panel);}
.container{max-width:1100px;margin:0 auto;}

/* ── EYEBROW ── */
.eyebrow{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;}
.eyebrow-line{width:24px;height:1px;background:var(--cyan);flex-shrink:0;}
.eyebrow-line.amber{background:var(--amber);}
.eyebrow-text{font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--cyan);}
.eyebrow-text.amber{color:var(--amber);}

/* ── TYPOGRAPHY ── */
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,4vw,3.5rem);line-height:0.95;letter-spacing:0.02em;margin-bottom:1rem;}
.section-sub{font-size:0.95rem;color:var(--muted);line-height:1.75;max-width:500px;font-weight:300;}
.page-hero{padding:5rem 3rem 4rem;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.page-hero::after{content:'';position:absolute;top:0;right:0;width:40%;height:100%;
  background:radial-gradient(ellipse at 80% 50%,rgba(0,229,255,0.06) 0%,transparent 65%);pointer-events:none;}
.page-hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,6vw,6rem);line-height:0.92;letter-spacing:0.02em;margin-bottom:1.2rem;}
.page-hero-title .outline{-webkit-text-stroke:1px var(--cyan);color:transparent;display:block;}
.page-hero-title .outline-amber{-webkit-text-stroke:1px var(--amber);color:transparent;display:block;}
.page-hero-title .solid{display:block;}
.page-hero-sub{font-size:1rem;color:var(--muted);line-height:1.75;max-width:480px;font-weight:300;border-left:2px solid var(--cyan);padding-left:1rem;}

/* ── PILLAR TAGS ── */
.pillar-tag{display:inline-flex;align-items:center;gap:0.5rem;
  font-family:'Barlow Condensed',sans-serif;font-size:0.65rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;padding:0.25rem 0.75rem;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);}
.pillar-tag.ai{background:var(--cyan-dim);color:var(--cyan);border:1px solid rgba(0,229,255,0.25);}
.pillar-tag.revenue{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,158,11,0.25);}

/* ── BUTTONS ── */
.btn-primary{background:var(--cyan);color:var(--black);padding:0.85rem 2rem;
  font-family:'Barlow Condensed',sans-serif;font-size:0.85rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;text-decoration:none;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all 0.2s;display:inline-block;}
.btn-primary:hover{background:#fff;transform:translateY(-2px);}
.btn-amber{background:var(--amber);color:var(--black);padding:0.85rem 2rem;
  font-family:'Barlow Condensed',sans-serif;font-size:0.85rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;text-decoration:none;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all 0.2s;display:inline-block;}
.btn-amber:hover{background:#fcd34d;transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--border2);color:var(--muted);padding:0.85rem 2rem;
  font-family:'Barlow Condensed',sans-serif;font-size:0.85rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;text-decoration:none;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all 0.2s;display:inline-block;}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;}

/* ── MARQUEE ── */
.marquee-wrap{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--panel);overflow:hidden;padding:0.75rem 0;position:relative;z-index:1;}
.marquee-track{display:flex;gap:3rem;animation:marquee 30s linear infinite;white-space:nowrap;}
.marquee-item{font-family:'Barlow Condensed',sans-serif;font-size:0.72rem;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
.marquee-item::before{content:'◆';color:var(--cyan);font-size:0.5rem;}
.marquee-item.amber::before{color:var(--amber);}

/* ── FOOTER ── */
site-footer{display:block;background:var(--black);border-top:1px solid var(--border);position:relative;z-index:1;}
.footer-inner{padding:3rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;border-bottom:1px solid var(--border);}
.footer-brand-logo{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:0.06em;margin-bottom:0.75rem;display:flex;align-items:center;}
.footer-logo-mark{width:1.5rem;height:1.5rem;margin-right:0.5rem;}
.footer-brand-logo span{color:var(--cyan);}
.footer-brand-logo sup{font-family:'Barlow Condensed',sans-serif;font-size:0.55rem;color:var(--cyan);letter-spacing:0.1em;vertical-align:super;}
.footer-tagline{font-size:0.83rem;color:var(--muted);line-height:1.65;font-weight:300;}
.footer-col-title{font-family:'Barlow Condensed',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem;}
.footer-col-title.amber{color:var(--amber);}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.6rem;}
.footer-links a{font-size:0.83rem;color:var(--muted);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--white);}
.footer-contact-item{font-size:0.83rem;color:var(--muted);margin-bottom:0.6rem;font-weight:300;}
.footer-contact-item a{color:var(--cyan);text-decoration:none;}
.footer-bottom{padding:1.2rem 3rem;display:flex;justify-content:space-between;align-items:center;}
.footer-copy{font-size:0.73rem;color:rgba(240,240,248,0.25);}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.fade-up{animation:fadeUp 0.5s ease both;}
.fade-up-1{animation:fadeUp 0.5s 0.1s ease both;}
.fade-up-2{animation:fadeUp 0.5s 0.2s ease both;}
.fade-up-3{animation:fadeUp 0.5s 0.3s ease both;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{padding:0 1.5rem;}
  .nav-links,.nav-cta{display:none;}
  .nav-hamburger{display:flex;}
  .section{padding:4rem 1.5rem;}
  .page-hero{padding:4rem 1.5rem 3rem;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem;padding:2rem 1.5rem;}
  .footer-bottom{padding:1rem 1.5rem;flex-direction:column;gap:0.5rem;text-align:center;}
}
@media(max-width:600px){
  .footer-inner{grid-template-columns:1fr;}
  .btn-row{flex-direction:column;align-items:flex-start;}
}