/* ═══════════════════════════════════════════════════════
   MAPHAKE AUTOMATION — style.css
   Theme  : Black · Gold · White
   Author : Mpho Maphake
   Email  : info@maphakeautomation.com
═══════════════════════════════════════════════════════ */

:root {
  --bk : #000000; --d1 : #060400; --d2 : #0A0700; --d3 : #0F0B00;
  --gd : #D4AF37; --gb : #F5E27A; --gp : #FFD700; --gm : #C8A840;
  --gd2: #8A6A00; --gd3: #3A2800; --gd4: #1E1600;
  --wh : #FFFFFF; --ow : #F0E8CC; --mu : #7A6020;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  { background: var(--bk); color: var(--wh); font-family: 'DM Sans', sans-serif; overflow-x: hidden; cursor: none; }

/* ── CURSOR ── */
#cur  { position: fixed; width: 10px; height: 10px; background: var(--gd); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); will-change: transform; }
#ring { position: fixed; width: 32px; height: 32px; border: 1px solid rgba(212,175,55,.4); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: transform .18s ease; will-change: transform; }

/* ── CANVAS + NOISE ── */
#pcanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .7; }
.noise   { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .022; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); }

/* ── SCROLL LINE ── */
.scroll-line { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg,var(--gd),var(--gb)); z-index: 1000; width: 0; }

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between; padding: 22px 64px; transition: all .4s; border-bottom: 1px solid transparent; }
nav.on { background: rgba(0,0,0,.95); backdrop-filter: blur(20px); padding: 13px 64px; border-bottom-color: rgba(212,175,55,.08); }

.nlogo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nwm   { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--wh); }
.nwm b { color: var(--gd); }

.nlinks   { display: flex; align-items: center; gap: 28px; }
.nlinks a { color: var(--mu); text-decoration: none; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; transition: color .2s; cursor: none; position: relative; }
.nlinks a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--gd); transition: width .25s; }
.nlinks a:hover { color: var(--wh); }
.nlinks a:hover::after { width: 100%; }

.nbtn { background: var(--gd); color: var(--bk); padding: 10px 22px; border-radius: 3px; font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: all .25s; cursor: none; }
.nbtn:hover { background: var(--gb); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,175,55,.28); }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; z-index: 2; padding: 0 64px; gap: 40px; }

.ho1 { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle,rgba(212,175,55,.07) 0%,transparent 70%); top: -250px; right: -200px; pointer-events: none; animation: orbDrift 18s ease-in-out infinite; }
.ho2 { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle,rgba(212,175,55,.05) 0%,transparent 70%); bottom: -100px; left: -100px; pointer-events: none; animation: orbDrift 14s ease-in-out infinite reverse; }
@keyframes orbDrift { 0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-20px)}66%{transform:translate(-20px,30px)} }

.hero-left { flex: 1; max-width: 640px; position: relative; z-index: 1; padding-top: 90px; }

.htag { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(212,175,55,.2); border-radius: 100px; padding: 7px 18px; font-size: 10px; font-weight: 500; letter-spacing: 3px; color: var(--gd); text-transform: uppercase; margin-bottom: 38px; background: rgba(212,175,55,.05); animation: fu .9s .15s both; }
.hpulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gd); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.5)} }

.hh { font-family: 'Bebas Neue', sans-serif; font-size: clamp(64px,9.5vw,114px); line-height: .92; letter-spacing: 2px; margin-bottom: 26px; animation: fu .9s .28s both; }
.hh .w { display: block; color: var(--wh); }
.hh .g { display: block; background: linear-gradient(90deg,var(--gd),var(--gb),var(--gp)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hh .o { display: block; color: var(--ow); font-family: 'Syne', sans-serif; font-size: .35em; font-weight: 300; letter-spacing: 6px; text-transform: uppercase; -webkit-text-fill-color: var(--ow); }

.hsub { font-size: 16px; color: var(--gm); line-height: 1.85; max-width: 490px; margin-bottom: 42px; font-weight: 300; animation: fu .9s .4s both; }

.hbtns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; animation: fu .9s .52s both; }
.hb1 { background: var(--gd); color: var(--bk); padding: 14px 30px; border-radius: 3px; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: all .25s; display: inline-flex; align-items: center; gap: 10px; cursor: none; }
.hb1:hover { background: var(--gb); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,175,55,.3); }
.hb1 svg { width: 16px; height: 16px; fill: var(--bk); }
.hb2 { border: 1px solid rgba(255,255,255,.16); color: var(--wh); padding: 13px 28px; border-radius: 3px; font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: all .25s; cursor: none; }
.hb2:hover { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.04); }

.hstats { display: flex; gap: 44px; animation: fu .9s .64s both; }
.hs-n { font-family: 'Bebas Neue', sans-serif; font-size: 40px; letter-spacing: 1px; background: linear-gradient(135deg,var(--gd),var(--gb)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.hs-l { font-size: 10px; color: var(--mu); letter-spacing: 2px; margin-top: 3px; text-transform: uppercase; }

@keyframes fu { from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)} }

/* ── HERO CARD STACK ── */
.hero-right { flex-shrink: 0; width: 400px; position: relative; z-index: 1; padding-top: 90px; animation: fu .9s .35s both; }
.emp-cards  { position: relative; height: 500px; }
.ec         { position: absolute; width: 340px; border-radius: 20px; overflow: hidden; transition: all .5s ease; }
.ec3 { top: 36px; left: 0;    z-index: 1; transform: scale(.91);  opacity: .65; }
.ec2 { top: 18px; left: 20px; z-index: 2; transform: scale(.955); opacity: .82; }
.ec1 { top: 0;    left: 40px; z-index: 3; }

.emp-card { background: var(--d2); border: 1px solid rgba(212,175,55,.15); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 70px rgba(212,175,55,.09); position: relative; }
.emp-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg,transparent,var(--gd),transparent); }

.ec-head { background: var(--d3); padding: 15px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(212,175,55,.07); }
.ec-av   { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--gd),var(--gd2)); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 800; color: var(--bk); flex-shrink: 0; }
.ec-nm   { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--wh); }
.ec-rl   { font-size: 10px; color: var(--gd); margin-top: 1px; }
.ec-status { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--gd); letter-spacing: 1px; text-transform: uppercase; }
.ec-dot    { width: 6px; height: 6px; border-radius: 50%; background: var(--gd); animation: pulse 2s ease-in-out infinite; }

.ec-body { padding: 16px 16px 20px; }
.ec-task { background: rgba(212,175,55,.06); border: 1px solid rgba(212,175,55,.1); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.ec-tl   { font-size: 9px; color: var(--mu); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.ec-tv   { font-size: 12.5px; color: var(--ow); }

.ec-bar-lbl      { display: flex; justify-content: space-between; margin: 10px 0 5px; }
.ec-bar-lbl span { font-size: 9px; color: var(--mu); }
.ec-bar-lbl b    { font-size: 10px; color: var(--gd); font-weight: 700; }
.ec-track { height: 4px; background: rgba(212,175,55,.1); border-radius: 2px; overflow: hidden; }
.ec-fill  { height: 100%; border-radius: 2px; background: linear-gradient(90deg,var(--gd2),var(--gd),var(--gb)); animation: barG 2.5s ease forwards; }
@keyframes barG { from{width:0}to{width:var(--w,100%)} }

.ec-chips { display: flex; gap: 6px; margin-top: 12px; }
.ec-chip  { background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.12); border-radius: 20px; padding: 3px 9px; font-size: 9px; color: var(--gm); letter-spacing: 1px; text-transform: uppercase; }
.ec-live  { position: absolute; top: 10px; right: 10px; background: var(--gd); color: var(--bk); font-family: 'Syne', sans-serif; font-size: 8px; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: 2px; }

.fl  { position: absolute; background: var(--d2); border: 1px solid rgba(212,175,55,.2); border-radius: 12px; padding: 11px 15px; box-shadow: 0 8px 28px rgba(212,175,55,.1); }
.fl1 { bottom: 52px; right: -14px; animation: floatUD 4s ease-in-out infinite; }
.fl2 { bottom: -14px; left: 26px; animation: floatUD 4s ease-in-out 2.1s infinite; }
@keyframes floatUD { 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)} }

.fl-ic { font-size: 18px; margin-bottom: 3px; }
.fl-n  { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; color: var(--gd); line-height: 1; }
.fl-l  { font-size: 9px; color: var(--mu); letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; }

/* ══════════════════════════════════════════
   TICKER
══════════════════════════════════════════ */
.ticker { position: relative; z-index: 2; border-top: 1px solid var(--gd4); border-bottom: 1px solid var(--gd4); padding: 13px 0; overflow: hidden; background: var(--d1); }
.ttr    { display: flex; animation: ta 30s linear infinite; width: max-content; will-change: transform; }
@keyframes ta { from{transform:translateX(0)}to{transform:translateX(-50%)} }
.ti     { display: flex; align-items: center; gap: 10px; padding: 0 42px; font-size: 10px; color: var(--mu); letter-spacing: 3px; white-space: nowrap; text-transform: uppercase; font-weight: 500; }
.td     { width: 4px; height: 4px; border-radius: 50%; background: var(--gd); }
.ti .hi { color: var(--gb); font-weight: 700; }

/* ══════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════ */
section { position: relative; z-index: 2; }
.sec    { padding: 108px 64px; }
.si     { max-width: 1180px; margin: 0 auto; }

.stg        { font-size: 9px; letter-spacing: 6px; color: var(--gd); text-transform: uppercase; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.stg::before{ content: ''; width: 18px; height: 1px; background: var(--gd); }

.h2    { font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px,5.8vw,80px); line-height: .95; letter-spacing: 1px; margin-bottom: 18px; color: var(--wh); }
.h2 em { color: var(--gd); font-style: normal; }
.ld    { font-size: 15.5px; color: var(--gm); line-height: 1.9; max-width: 530px; margin-bottom: 52px; font-weight: 300; }

.bg-alt        { background: var(--d1); }
.bg-alt::before{ content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(212,175,55,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.03) 1px,transparent 1px); background-size: 40px 40px; pointer-events: none; }

/* ══════════════════════════════════════════
   AI EMPLOYEES GRID
══════════════════════════════════════════ */
.emp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 52px; }

.eg { background: var(--d1); border: 1px solid var(--gd4); border-radius: 18px; padding: 28px 22px; cursor: none; position: relative; overflow: hidden; transition: all .35s; }
.eg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--gd4),transparent); transition: background .35s; }
.eg::after  { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%,rgba(212,175,55,.07) 0%,transparent 55%); opacity: 0; transition: opacity .35s; }
.eg:hover   { background: var(--d2); border-color: var(--gd2); transform: translateY(-6px); box-shadow: 0 18px 50px rgba(212,175,55,.08); }
.eg:hover::before { background: linear-gradient(90deg,transparent,var(--gd),transparent); }
.eg:hover::after  { opacity: 1; }

.eg-icon  { font-size: 34px; margin-bottom: 16px; display: block; }
.eg-name  { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; color: var(--wh); margin-bottom: 2px; position: relative; z-index: 1; }
.eg-role  { font-size: 10px; color: var(--gd); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; font-weight: 600; position: relative; z-index: 1; }
.eg-desc  { font-size: 13px; color: var(--mu); line-height: 1.75; position: relative; z-index: 1; }
.eg-tasks { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.eg-t     { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(200,168,64,.65); }
.eg-t::before { content: '◆'; font-size: 7px; color: var(--gd3); flex-shrink: 0; }
.eg-badge { display: inline-block; margin-top: 14px; font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--gd); border: 1px solid rgba(212,175,55,.18); padding: 4px 12px; border-radius: 20px; background: rgba(212,175,55,.05); text-transform: uppercase; position: relative; z-index: 1; }

/* ══════════════════════════════════════════
   INDIVIDUAL SERVICES
══════════════════════════════════════════ */
.srv-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 72px; }
.srv-intro-left .h2 { margin-bottom: 16px; }
.srv-intro-left .ld { margin-bottom: 0; }

.srv-right-note { background: var(--d2); border: 1px solid rgba(212,175,55,.14); border-radius: 16px; padding: 28px 24px; position: relative; overflow: hidden; }
.srv-right-note::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg,transparent,var(--gd),transparent); }
.srv-right-note p { font-size: 14px; color: var(--gm); line-height: 1.85; margin-bottom: 16px; font-weight: 300; }
.srv-right-note p:last-child { margin-bottom: 0; }
.srv-right-note strong { color: var(--wh); font-weight: 600; }

.srv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

.srv-card { background: var(--d1); border: 1px solid var(--gd4); border-radius: 18px; padding: 28px 22px; display: flex; flex-direction: column; cursor: none; position: relative; overflow: hidden; transition: all .35s; }
.srv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--gd4),transparent); transition: background .35s; }
.srv-card:hover   { background: var(--d2); border-color: var(--gd2); transform: translateY(-6px); box-shadow: 0 18px 50px rgba(212,175,55,.08); }
.srv-card:hover::before { background: linear-gradient(90deg,transparent,var(--gd),transparent); }

.srv-icon  { font-size: 32px; margin-bottom: 14px; display: block; }
.srv-name  { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; color: var(--wh); margin-bottom: 4px; }
.srv-price { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 1px; color: var(--gd); margin-bottom: 4px; line-height: 1; }
.srv-price-note { font-size: 10px; color: var(--mu); margin-bottom: 14px; letter-spacing: .5px; }
.srv-divider { height: 1px; background: var(--gd4); margin-bottom: 14px; }
.srv-desc  { font-size: 13px; color: var(--mu); line-height: 1.75; margin-bottom: 14px; flex: 1; }

.srv-includes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.srv-inc      { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: rgba(200,168,64,.7); line-height: 1.5; }
.srv-inc::before { content: '◆'; font-size: 7px; color: var(--gd3); flex-shrink: 0; margin-top: 3px; }

.srv-cta      { margin-top: auto; }
.srv-cta a    { display: block; text-align: center; border: 1px solid rgba(212,175,55,.25); color: var(--gd); padding: 11px; border-radius: 50px; font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-decoration: none; text-transform: uppercase; transition: all .25s; cursor: none; }
.srv-cta a:hover { background: var(--gd); color: var(--bk); border-color: var(--gd); }

/* ══════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════ */
.hw-grid  { display: grid; grid-template-columns: 1.08fr 1fr; gap: 70px; align-items: center; }
.hw-steps { display: flex; flex-direction: column; }
.hw-s     { display: flex; gap: 20px; padding: 22px 16px; border-left: 2px solid var(--gd4); cursor: none; position: relative; transition: background .25s; border-radius: 0 8px 8px 0; }
.hw-s:hover { background: rgba(212,175,55,.02); }
.hw-s.on  { border-left-color: var(--gd); }
.hw-sn    { font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 1px; color: var(--gd4); flex-shrink: 0; line-height: 1; margin-top: 2px; transition: color .3s; }
.hw-s.on .hw-sn { color: var(--gd); }
.hw-st    { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 700; color: rgba(255,255,255,.38); margin-bottom: 6px; transition: color .3s; }
.hw-s.on .hw-st { color: var(--wh); }
.hw-sd    { font-size: 13px; color: var(--mu); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .4s ease, opacity .4s ease; opacity: 0; }
.hw-s.on .hw-sd { max-height: 120px; opacity: 1; }

.hw-vis        { background: var(--d2); border: 1px solid rgba(212,175,55,.1); border-radius: 22px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hw-vis::before{ content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(212,175,55,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.04) 1px,transparent 1px); background-size: 24px 24px; }
.hw-vc { position: relative; z-index: 1; text-align: center; padding: 34px; }
.hw-vi { font-size: 62px; display: block; animation: floatUD 4s ease-in-out infinite; margin-bottom: 18px; }
.hw-vl { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; color: var(--wh); margin-bottom: 8px; }
.hw-vs { font-size: 13px; color: var(--mu); line-height: 1.6; }

/* ══════════════════════════════════════════
   LIVE DEMO
══════════════════════════════════════════ */
.demo-wrap  { display: grid; grid-template-columns: 1fr 1.08fr; gap: 66px; align-items: center; }
.demo-phone { background: var(--d2); border-radius: 26px; overflow: hidden; border: 1px solid rgba(212,175,55,.15); box-shadow: 0 0 0 1px rgba(212,175,55,.04), 0 36px 90px rgba(212,175,55,.09); }

.dp-hd { background: var(--d3); padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(212,175,55,.06); }
.dp-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--gd),var(--gd2)); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 14px; color: var(--bk); position: relative; flex-shrink: 0; }
.dp-av::after { content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: var(--gd); border-radius: 50%; border: 2px solid var(--d3); }
.dp-nm { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--wh); }
.dp-st { font-size: 10px; color: var(--gd); margin-top: 1px; }

.dp-body { padding: 18px 14px; min-height: 320px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; }

.dm       { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.6; opacity: 0; transform: translateY(7px); transition: all .45s ease; }
.dm.show  { opacity: 1; transform: translateY(0); }
.dm.b     { background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.13); color: var(--ow); border-bottom-left-radius: 3px; align-self: flex-start; }
.dm.b .sb { font-size: 9px; color: var(--gd); font-weight: 700; margin-bottom: 3px; letter-spacing: 1px; text-transform: uppercase; }
.dm.u     { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: var(--wh); border-bottom-right-radius: 3px; align-self: flex-end; }
.dmt      { font-size: 9px; color: var(--mu); margin-top: 3px; text-align: right; }

.dtyp     { display: flex; gap: 4px; align-items: center; padding: 10px 13px; background: rgba(212,175,55,.05); border: 1px solid rgba(212,175,55,.1); border-radius: 14px; border-bottom-left-radius: 3px; align-self: flex-start; opacity: 0; transition: opacity .25s; max-width: 66px; }
.dtyp.show { opacity: 1; }
.dtyp span { width: 5px; height: 5px; border-radius: 50%; background: var(--gd); animation: tb 1.2s ease-in-out infinite; }
.dtyp span:nth-child(2) { animation-delay: .2s; }
.dtyp span:nth-child(3) { animation-delay: .4s; }
@keyframes tb { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)} }

.dp-ft  { background: var(--d3); border-top: 1px solid rgba(212,175,55,.06); padding: 12px 14px; display: flex; align-items: center; gap: 9px; }
.dp-inp { flex: 1; background: rgba(212,175,55,.05); border: 1px solid rgba(212,175,55,.1); border-radius: 22px; padding: 8px 14px; font-size: 11px; color: rgba(255,255,255,.28); font-family: 'DM Sans', sans-serif; }
.dp-snd { width: 34px; height: 34px; border-radius: 50%; background: var(--gd); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dp-snd svg { width: 13px; height: 13px; fill: var(--bk); }

.demo-right { display: flex; flex-direction: column; gap: 16px; }
.ben        { background: var(--d2); border: 1px solid rgba(212,175,55,.08); border-radius: 13px; padding: 18px 16px; display: flex; align-items: flex-start; gap: 14px; transition: all .25s; cursor: none; }
.ben:hover  { border-color: rgba(212,175,55,.2); background: var(--d3); transform: translateX(5px); }
.ben-ic     { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.ben-tt     { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--wh); margin-bottom: 3px; }
.ben-ds     { font-size: 12px; color: var(--mu); line-height: 1.65; }
.ben-tg     { display: inline-block; margin-top: 7px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--gd); text-transform: uppercase; }

/* ══════════════════════════════════════════
   RESULTS
══════════════════════════════════════════ */
.res-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border: 1px solid var(--gd4); border-radius: 18px; overflow: hidden; margin-top: 52px; }
.rb       { background: var(--d1); padding: 40px 20px; text-align: center; transition: background .3s; cursor: none; }
.rb:hover { background: var(--d2); }
.rn { font-family: 'Bebas Neue', sans-serif; font-size: 54px; letter-spacing: 1px; background: linear-gradient(135deg,var(--gd),var(--gb)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 7px; }
.rl { font-size: 10px; color: var(--mu); letter-spacing: 2px; text-transform: uppercase; }

/* ══════════════════════════════════════════
   PACKAGES
══════════════════════════════════════════ */
.pk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 72px; }

.pk          { background: var(--d1); border: 1px solid var(--gd4); border-radius: 18px; padding: 30px 22px 26px; position: relative; display: flex; flex-direction: column; transition: all .35s; cursor: none; overflow: visible; }
.pk::before  { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--gd4),transparent); border-radius: 18px 18px 0 0; transition: background .35s; }
.pk:hover:not(.hot) { border-color: var(--gd2); transform: translateY(-6px); box-shadow: 0 20px 52px rgba(212,175,55,.08); }
.pk:hover::before, .pk.hot::before { background: linear-gradient(90deg,transparent,var(--gd),transparent); }
.pk.hot      { background: var(--d2); border-color: var(--gd); box-shadow: 0 0 60px rgba(212,175,55,.1); }

.pk-badge    { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg,var(--gd2),var(--gd),var(--gb)); color: var(--bk); font-family: 'Bebas Neue', sans-serif; font-size: 14px; padding: 4px 22px; border-radius: 20px; letter-spacing: 2px; white-space: nowrap; box-shadow: 0 4px 16px rgba(212,175,55,.35); z-index: 10; }

.pk-nm  { font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 1px; color: var(--wh); margin-bottom: 2px; }
.pk.hot .pk-nm { color: var(--gd); }
.pk-sub { font-size: 12px; color: var(--mu); margin-bottom: 16px; line-height: 1.5; }
.pk-pr  { font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 1px; color: var(--wh); line-height: 1; margin-bottom: 2px; }
.pk.hot .pk-pr { color: var(--gd); }
.pk-mo  { font-size: 11px; color: var(--mu); margin-bottom: 4px; }
.pk-sf  { font-size: 11px; color: var(--gd); margin-bottom: 20px; font-weight: 500; }
.pk-div { height: 1px; background: var(--gd4); margin-bottom: 16px; }

.pk-f         { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; font-size: 12px; color: rgba(200,168,64,.65); line-height: 1.5; }
.pk-f::before { content: '◆'; color: var(--gd3); font-size: 7px; margin-top: 3px; flex-shrink: 0; }
.pk.hot .pk-f         { color: var(--gm); }
.pk.hot .pk-f::before { color: var(--gd); }

.pk-cta   { margin-top: auto; padding-top: 18px; }
.pk-cta a { display: block; text-align: center; border: 1px solid rgba(212,175,55,.25); color: var(--gd); padding: 12px; border-radius: 50px; font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-decoration: none; text-transform: uppercase; transition: all .25s; cursor: none; }
.pk-cta a:hover           { background: var(--gd); color: var(--bk); border-color: var(--gd); }
.pk.hot .pk-cta a         { background: var(--gd); color: var(--bk); border-color: var(--gd); }
.pk.hot .pk-cta a:hover   { background: var(--gb); }

/* ══════════════════════════════════════════
   FOUNDER
══════════════════════════════════════════ */
.founder-wrap  { display: grid; grid-template-columns: auto 1fr; gap: 52px; align-items: start; }
.founder-card  { background: var(--d2); border: 1px solid rgba(212,175,55,.14); border-radius: 22px; padding: 36px 28px; text-align: center; width: 270px; position: relative; overflow: hidden; flex-shrink: 0; }
.founder-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg,transparent,var(--gd),transparent); }
.founder-av    { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg,var(--gd),var(--gd2)); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 38px; color: var(--bk); margin: 0 auto 16px; border: 2px solid rgba(212,175,55,.3); }
.founder-name  { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; color: var(--wh); margin-bottom: 2px; }
.founder-title { font-size: 10px; color: var(--gd); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.founder-divider { height: 1px; background: rgba(212,175,55,.1); margin-bottom: 14px; }
.founder-contact a { display: block; font-size: 12px; color: var(--mu); text-decoration: none; margin-bottom: 6px; transition: color .2s; cursor: none; }
.founder-contact a:hover { color: var(--gd); }
.founder-badge { display: inline-block; margin-top: 12px; font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--gd); border: 1px solid rgba(212,175,55,.18); padding: 4px 12px; border-radius: 20px; background: rgba(212,175,55,.05); text-transform: uppercase; }

.founder-right p   { font-size: 14.5px; color: var(--gm); line-height: 1.95; margin-bottom: 16px; font-weight: 300; }
.founder-right p b { color: var(--wh); font-weight: 600; }
.founder-right p em { color: var(--gd); font-style: normal; font-weight: 500; }

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.t-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 52px; }

.tc          { background: var(--d1); border: 1px solid var(--gd4); border-radius: 18px; padding: 28px 22px; transition: all .35s; cursor: none; position: relative; overflow: hidden; }
.tc::before  { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--gd4),transparent); transition: background .35s; }
.tc:hover    { border-color: var(--gd2); transform: translateY(-5px); box-shadow: 0 18px 48px rgba(212,175,55,.07); }
.tc:hover::before { background: linear-gradient(90deg,transparent,var(--gd),transparent); }

.tc-stars { color: var(--gd); font-size: 13px; margin-bottom: 14px; letter-spacing: 3px; }
.tc-q     { font-size: 13px; color: var(--ow); line-height: 1.85; margin-bottom: 20px; font-weight: 300; font-style: italic; }
.tc-auth  { display: flex; align-items: center; gap: 12px; }
.tc-av    { width: 40px; height: 40px; border-radius: 50%; background: var(--d3); border: 1px solid var(--gd3); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 800; color: var(--gd); flex-shrink: 0; }
.tc-nm    { font-size: 12.5px; font-weight: 600; color: var(--wh); }
.tc-bz    { font-size: 11px; color: var(--mu); margin-top: 2px; }

/* ══════════════════════════════════════════
   WHY US
══════════════════════════════════════════ */
.why-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.wr        { display: flex; flex-direction: column; gap: 14px; }
.wr-block  { background: var(--d2); border: 1px solid rgba(212,175,55,.08); border-radius: 13px; padding: 20px 18px; display: flex; align-items: flex-start; gap: 14px; transition: all .25s; cursor: none; }
.wr-block:hover { border-color: rgba(212,175,55,.2); background: var(--d3); transform: translateX(-5px); }
.wr-ic { font-size: 24px; flex-shrink: 0; }
.wr-tt { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700; color: var(--wh); margin-bottom: 4px; }
.wr-ds { font-size: 12.5px; color: var(--mu); line-height: 1.65; }

/* ══════════════════════════════════════════
   CTA
══════════════════════════════════════════ */
.cta-sec  { text-align: center; position: relative; overflow: hidden; }
.cta-orb  { position: absolute; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle,rgba(212,175,55,.07) 0%,transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.cta-in   { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.cta-h    { font-family: 'Bebas Neue', sans-serif; font-size: clamp(56px,8vw,100px); line-height: .92; letter-spacing: 1px; margin-bottom: 18px; color: var(--wh); }
.cta-h em { color: var(--gd); font-style: normal; }
.cta-sub  { font-size: 16px; color: var(--gm); line-height: 1.85; margin-bottom: 42px; font-weight: 300; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer { background: var(--d1); border-top: 1px solid var(--gd4); padding: 36px 64px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; position: relative; z-index: 2; }
.fw   { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--wh); }
.fw b { color: var(--gd); }
.fm   { font-size: 10px; color: var(--mu); letter-spacing: 2px; text-transform: uppercase; }
.fr   { font-size: 11px; color: var(--mu); }

/* ══════════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════════ */
.rv      { opacity: 0; transform: translateY(30px);  transition: opacity .8s ease, transform .8s ease; will-change: opacity,transform; }
.rv.up   { opacity: 1; transform: translateY(0); }
.rv-l    { opacity: 0; transform: translateX(-30px); transition: opacity .8s ease, transform .8s ease; }
.rv-l.up { opacity: 1; transform: translateX(0); }
.rv-r    { opacity: 0; transform: translateX(30px);  transition: opacity .8s ease, transform .8s ease; }
.rv-r.up { opacity: 1; transform: translateX(0); }
.d1 { transition-delay: .07s !important; }
.d2 { transition-delay: .15s !important; }
.d3 { transition-delay: .23s !important; }
.d4 { transition-delay: .31s !important; }
.d5 { transition-delay: .39s !important; }
.d6 { transition-delay: .47s !important; }

/* ══════════════════════════════════════════
   HAMBURGER BUTTON
══════════════════════════════════════════ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 600;
  position: relative;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--wh);
  border-radius: 2px;
  transition: all .3s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--gd); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--gd); }

/* ══════════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════════ */
.mob-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.97);
  backdrop-filter: blur(24px);
  z-index: 550;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.77,0,.18,1);
  border-left: 1px solid rgba(212,175,55,.08);
}
.mob-drawer.open { transform: translateX(0); }

.mob-drawer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gd), transparent);
}

.mob-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 40px;
}

.mob-nav-links a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px 20px;
  color: var(--mu);
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(212,175,55,.06);
  transition: color .2s, background .2s;
}
.mob-nav-links a:first-child { border-top: 1px solid rgba(212,175,55,.06); }
.mob-nav-links a:hover, .mob-nav-links a:active { color: var(--gd); background: rgba(212,175,55,.04); }

.mob-nav-cta {
  margin-top: 28px;
  background: var(--gd);
  color: var(--bk);
  padding: 14px 40px;
  border-radius: 3px;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .25s;
}
.mob-nav-cta:hover { background: var(--gb); }
.mob-nav-cta svg { width: 16px; height: 16px; fill: var(--bk); }

.mob-drawer-footer {
  position: absolute;
  bottom: 40px;
  font-size: 11px;
  color: var(--gd4);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

/* ══════════════════════════════════════════
   BOTTOM NAV BAR (mobile only)
══════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  background: rgba(6,4,0,.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(212,175,55,.1);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}

.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
}

.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background .2s;
  min-width: 52px;
}
.bnav-item:active { background: rgba(212,175,55,.08); }

.bnav-icon { font-size: 20px; line-height: 1; }
.bnav-label { font-size: 9px; color: var(--mu); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; transition: color .2s; text-align: center; }
.bnav-item.active .bnav-label { color: var(--gd); }
.bnav-item.active .bnav-icon  { filter: drop-shadow(0 0 4px rgba(212,175,55,.6)); }

.bnav-cta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 4px 8px;
  min-width: 52px;
}
.bnav-cta-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gd);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(212,175,55,.4);
  transition: background .2s, transform .2s;
  margin-top: -18px;
}
.bnav-cta-item:active .bnav-cta-wrap { background: var(--gb); transform: scale(.95); }
.bnav-cta-wrap svg { width: 20px; height: 20px; fill: var(--bk); }
.bnav-cta-label { font-size: 9px; color: var(--gd); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; text-align: center; }

/* ══════════════════════════════════════════
   RESPONSIVE LAYOUT
══════════════════════════════════════════ */
@media (max-width: 1020px) {
  nav { padding: 14px 20px; }
  nav.on { padding: 10px 20px; }
  .nlinks { display: none; }
  .nbtn   { display: none; }
  .hamburger { display: flex; }
  .bottom-nav { display: block; }

  .sec { padding: 68px 20px 100px; }
  .hero {
    flex-direction: column;
    padding: 80px 20px 60px;
    text-align: center;
    padding-bottom: 100px;
  }
  .hero-left { max-width: 100%; }
  .hero-right { display: none; }
  .hstats { justify-content: center; }
  .hbtns  { justify-content: center; }

  .hw-grid, .demo-wrap, .why-grid,
  .founder-wrap, .srv-intro { grid-template-columns: 1fr; }

  .founder-card { width: 100%; max-width: 320px; margin: 0 auto; }

  .emp-grid, .srv-grid,
  .pk-grid,  .t-grid   { grid-template-columns: 1fr 1fr; }
  .res-grid             { grid-template-columns: 1fr 1fr; }

  footer {
    padding: 24px 20px 100px;
    flex-direction: column;
    text-align: center;
  }

  /* stack demo side-by-side on tablet */
  .demo-wrap { gap: 40px; }
}

@media (max-width: 600px) {
  .emp-grid, .srv-grid,
  .pk-grid,  .t-grid   { grid-template-columns: 1fr; }

  .hh { font-size: clamp(52px,14vw,80px); }
  .h2 { font-size: clamp(40px,11vw,60px); }

  .sec { padding: 56px 16px 100px; }

  /* Package cards full-width on small screens */
  .pk-badge { font-size: 12px; padding: 3px 16px; }
}
EOF
echo "style.css written — $(wc -l < /home/claude/maphake-v2/style.css) lines"