:root {
  --brand: #FF6B00;
  --brand-2: #FF8C38;
  --bg: #06060e;
  --surface: #0f0f1a;
  --surface-2: #161625;
  --text: #e2e8f0;
  --muted: #64748b;
  --border: rgba(255,107,0,0.12);
  --glow: rgba(255,107,0,0.18);
}

*{box-sizing:border-box;margin:0;padding:0}

::selection { background: rgba(255,107,0,0.3); color: inherit; }

html{scroll-behavior:smooth}

body{
  font-family:'Syne',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  cursor:none;
}

/* Custom cursor */
#cursor{
  position:fixed;width:12px;height:12px;
  background:var(--brand);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform 0.1s,width 0.2s,height 0.2s,opacity 0.2s;
  mix-blend-mode:normal;
}
@media (pointer: coarse) { #cursor, #cursor-ring { display: none !important; } body { cursor: auto !important; } }
#cursor-ring{
  position:fixed;width:36px;height:36px;
  border:1.5px solid rgba(255,107,0,0.5);
  border-radius:50%;pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform 0.18s ease,width 0.25s,height 0.25s;
}
body:has(a:hover) #cursor,
body:has(button:hover) #cursor{width:20px;height:20px;}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring{width:56px;height:56px;border-color:rgba(255,107,0,0.3);}

/* ─── Noise overlay ─── */
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:1;opacity:0.4;
}

/* ─── Navbar ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 4rem;
  background:rgba(6,6,14,0.8);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav-logo{
  display:flex;align-items:center;gap:0.75rem;
  font-weight:800;font-size:1.15rem;letter-spacing:-0.5px;color:#fff;
  text-decoration:none;
}
.nav-logo-icon{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,#FF6B00,#FF8C38);
  display:flex;align-items:center;justify-content:center;
}
.nav-links{display:flex;gap:2.5rem;}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:0.85rem;
  font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
  transition:color 0.2s;
}
.nav-links a:hover{color:var(--brand);}
.nav-cta{
  background:linear-gradient(135deg,#FF6B00,#FF8C38);
  color:#fff;border:none;padding:0.55rem 1.3rem;border-radius:8px;
  font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;
  cursor:pointer;letter-spacing:0.03em;
  box-shadow:0 0 20px rgba(255,107,0,0.3);
  transition:transform 0.15s,box-shadow 0.2s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(255,107,0,0.5);}

/* ─── Hero ─── */
#hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8rem 4rem 4rem;
  position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,107,0,0.08) 0%, transparent 70%),
    radial-gradient(circle 400px at 80% 60%, rgba(255,107,0,0.04) 0%, transparent 70%);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,107,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,0,0.04) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:rgba(255,107,0,0.08);border:1px solid rgba(255,107,0,0.2);
  padding:0.4rem 1rem;border-radius:99px;
  font-size:0.75rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--brand-2);
  margin-bottom:1.5rem;
  animation:fadeUp 0.6s ease both;
}
.hero-eyebrow span{
  width:6px;height:6px;border-radius:50%;background:var(--brand);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

.hero-title{
  font-size:clamp(3rem,7vw,6.5rem);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-3px;
  text-align:center;
  margin-bottom:1.5rem;
  animation:fadeUp 0.6s 0.1s ease both;
}
.hero-title .line-1{color:#fff;display:block;}
.hero-title .line-2{
  display:block;
  background:linear-gradient(90deg,#FF6B00,#FF8C38,#FFB347);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-sub{
  font-size:1.1rem;color:var(--muted);text-align:center;
  max-width:520px;line-height:1.6;font-weight:400;
  font-family:'DM Mono',monospace;
  margin-bottom:2.5rem;
  animation:fadeUp 0.6s 0.2s ease both;
}
.hero-actions{
  display:flex;gap:1rem;margin-bottom:4rem;
  animation:fadeUp 0.6s 0.3s ease both;
}
.btn-hero{
  padding:0.85rem 2rem;border-radius:10px;
  font-family:'Syne',sans-serif;font-weight:700;font-size:0.9rem;
  cursor:pointer;border:none;letter-spacing:0.02em;
  transition:transform 0.15s,box-shadow 0.2s;
}
.btn-hero-primary{
  background:linear-gradient(135deg,#FF6B00,#FF8C38);color:#fff;
  box-shadow:0 0 30px rgba(255,107,0,0.35);
}
.btn-hero-primary:hover{transform:translateY(-3px);box-shadow:0 0 45px rgba(255,107,0,0.5);}
.btn-hero-outline{
  background:transparent;color:var(--text);
  border:1px solid rgba(255,255,255,0.12)!important;
}
.btn-hero-outline:hover{background:rgba(255,255,255,0.05);transform:translateY(-2px);}

/* ─── Dashboard mockup ─── */
.dashboard-frame{
  width: 100%; max-width: 900px;
  border-radius:16px;
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,0.6), 0 0 80px rgba(255,107,0,0.06);
  animation:fadeUp 0.8s 0.4s ease both;
  position:relative;
}
.frame-bar{
  background:#0f0f1a;
  padding:0.7rem 1rem;
  display:flex;align-items:center;gap:0.5rem;
  border-bottom:1px solid rgba(255,107,0,0.08);
}
.frame-dot{width:10px;height:10px;border-radius:50%;}
.frame-inner{
  background:var(--bg);padding:1.5rem;
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0.75rem;
}
.mock-kpi{
  background:linear-gradient(135deg,#161625,#1e1e30);
  border:1px solid rgba(255,107,0,0.15);
  border-radius:12px;padding:1rem;
}
.mock-kpi-label{font-size:0.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.4rem;font-family:'DM Mono',monospace;}
.mock-kpi-val{font-size:1.3rem;font-weight:800;color:#fff;}
.mock-kpi-sub{font-size:0.6rem;color:#4ade80;margin-top:0.3rem;font-family:'DM Mono',monospace;}
.mock-chart-row{
  grid-column:1/-1;
  display:grid;grid-template-columns:2fr 1fr;gap:0.75rem;
}
.mock-chart{
  background:rgba(22,22,37,0.85);border:1px solid rgba(255,107,0,0.1);
  border-radius:12px;padding:1rem;height:120px;position:relative;overflow:hidden;
}
.mock-chart-title{font-size:0.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;font-family:'DM Mono',monospace;}
.mock-bars{display:flex;align-items:flex-end;gap:6px;height:80px;}
.mock-bar{
  flex:1;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#FF6B00,#CC5500);
  animation:barGrow 1s ease both;
  transform-origin:bottom;
}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.mock-donut{
  background:rgba(22,22,37,0.85);border:1px solid rgba(255,107,0,0.1);
  border-radius:12px;padding:1rem;height:120px;
  display:flex;align-items:center;justify-content:center;
}

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

/* ─── Stats strip ─── */
#stats{
  padding:2.5rem 4rem;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex;justify-content:center;gap:4rem;
  position:relative;z-index:2;
}
.stat{text-align:center;}
.stat-num{
  font-size:2.2rem;font-weight:800;
  background:linear-gradient(90deg,#FF6B00,#FF8C38);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;letter-spacing:-1px;
}
.stat-label{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-top:0.2rem;font-family:'DM Mono',monospace;}

/* ─── Features section ─── */
#features{
  padding:7rem 4rem;
  max-width:1200px;margin:0 auto;
}
.section-label{
  font-size:0.72rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--brand);
  font-family:'DM Mono',monospace;margin-bottom:1rem;
}
.section-title{
  font-size:clamp(2rem,4vw,3.2rem);font-weight:800;
  color:#fff;letter-spacing:-1.5px;line-height:1.05;
  max-width:500px;margin-bottom:1rem;
}
.section-sub{color:var(--muted);max-width:440px;line-height:1.65;font-size:0.95rem;font-family:'DM Mono',monospace;font-weight:300;}

.features-header{margin-bottom:4rem;}
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:20px;overflow:hidden;
}
.feature-card{
  background:var(--surface);
  padding:2.5rem;
  position:relative;overflow:hidden;
  transition:background 0.25s;
}
.feature-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%), rgba(255,107,0,0.07), transparent);
  opacity:0;transition:opacity 0.3s;
}
.feature-card:hover::before{opacity:1;}
.feature-card:hover{background:#181828;}
.feature-icon{
  width:48px;height:48px;border-radius:12px;
  background:rgba(255,107,0,0.08);border:1px solid rgba(255,107,0,0.2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;font-size:1.3rem;
}
.feature-name{font-size:1rem;font-weight:700;color:#fff;margin-bottom:0.5rem;letter-spacing:-0.3px;}
.feature-desc{font-size:0.82rem;color:var(--muted);line-height:1.6;font-family:'DM Mono',monospace;font-weight:300;}
.feature-tag{
  display:inline-block;margin-top:1rem;
  font-size:0.65rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--brand);
  font-family:'DM Mono',monospace;
}

/* ─── Tech stack ─── */
#stack{
  padding:5rem 4rem;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stack-inner{max-width:1100px;margin:0 auto;}
.stack-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:3rem;
}
.stack-grid{
  display:flex;flex-wrap:wrap;gap:0.75rem;
}
.stack-pill{
  display:flex;align-items:center;gap:0.6rem;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);
  padding:0.6rem 1.1rem;border-radius:99px;
  font-size:0.8rem;font-weight:600;color:var(--text);
  font-family:'DM Mono',monospace;
  transition:border-color 0.2s,background 0.2s,transform 0.15s;
}
.stack-pill:hover{
  border-color:rgba(255,107,0,0.35);
  background:rgba(255,107,0,0.06);
  transform:translateY(-2px);
}
.stack-pill-dot{width:7px;height:7px;border-radius:50%;}

/* ─── Screens section ─── */
#screens{
  padding:7rem 4rem;
  max-width:1200px;margin:0 auto;
}
.screens-header{margin-bottom:3.5rem;}
.screens-tabs{
  display:flex;gap:0.5rem;margin-bottom:2rem;
  background:var(--surface);border:1px solid var(--border);
  padding:0.35rem;border-radius:12px;width:fit-content;
}
.screen-tab{
  padding:0.5rem 1.2rem;border-radius:8px;
  font-family:'Syne',sans-serif;font-size:0.8rem;font-weight:600;
  border:none;cursor:pointer;letter-spacing:0.03em;
  transition:all 0.2s;
}
.screen-tab.active{
  background:linear-gradient(135deg,#FF6B00,#FF8C38);color:#fff;
  box-shadow:0 0 15px rgba(255,107,0,0.3);
}
.screen-tab:not(.active){background:transparent;color:var(--muted);}
.screen-tab:not(.active):hover{color:var(--text);background:rgba(255,255,255,0.05);}

.screens-content{position:relative;}
.screen-panel{display:none;}
.screen-panel.active{display:block;}
.screen-mockup{
  background:var(--surface);
  border:1px solid var(--border);border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.screen-topbar{
  background:#0f0f1a;padding:0.6rem 1rem;
  display:flex;align-items:center;gap:0.75rem;
  border-bottom:1px solid rgba(255,107,0,0.06);
}
.screen-url{
  flex:1;background:rgba(255,255,255,0.04);border-radius:6px;
  padding:0.25rem 0.75rem;font-size:0.7rem;color:var(--muted);
  font-family:'DM Mono',monospace;
}

/* POS screen content */
.pos-layout{display:flex;height:380px;}
.pos-sidebar{
  width:200px;background:#0f0f1a;border-right:1px solid rgba(255,107,0,0.06);
  padding:1rem 0;display:flex;flex-direction:column;gap:2px;
}
.pos-nav-item{
  padding:0.6rem 1rem;font-size:0.72rem;font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:0.6rem;cursor:pointer;
}
.pos-nav-item.active{
  color:var(--brand);background:rgba(255,107,0,0.1);
  border-left:2px solid var(--brand);
}
.pos-main{flex:1;padding:1.5rem;overflow:hidden;position:relative;}
.pos-view { display: none; height: 100%; }
.pos-view.active { display: flex; flex-direction: column; gap: 1rem; animation: viewIn 0.3s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pos-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;}
.pos-kpi{
  background:linear-gradient(135deg,#161625,#1e1e30);
  border:1px solid rgba(255,107,0,0.15);border-radius:10px;padding:0.75rem;
}
.pkv{font-size:1.1rem;font-weight:800;color:#fff;}
.pkl{font-size:0.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-family:'DM Mono',monospace;}
.pos-charts{display:grid;grid-template-columns:2fr 1fr;gap:0.75rem;}
.pos-chart-card{
  background:rgba(22,22,37,0.85);border:1px solid rgba(255,107,0,0.08);
  border-radius:10px;padding:0.85rem;
}
.pcc-title{font-size:0.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;font-family:'DM Mono',monospace;}
.mini-bars{display:flex;align-items:flex-end;gap:4px;height:60px;}
.mini-bar{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#FF6B00,#CC5500);}

/* Bill screen */
.bill-layout{display:flex;height:380px;gap:0;}
.bill-left{flex:1;padding:1.25rem;background:var(--bg);}
.bill-right{width:220px;background:#0f0f1a;border-left:1px solid rgba(255,107,0,0.08);padding:1rem;}
.bill-section{margin-bottom:1rem;}
.bill-section-title{font-size:0.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.5rem;font-family:'DM Mono',monospace;}
.bill-input-row{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;}
.bill-input{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;padding:0.4rem 0.6rem;
  font-size:0.65rem;color:var(--muted);font-family:'DM Mono',monospace;
}
.bill-products{display:flex;flex-direction:column;gap:0.4rem;}
.bill-prod-btn{
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);
  border-radius:6px;padding:0.4rem 0.6rem;text-align:left;cursor:pointer;
}
.bpb-name{font-size:0.65rem;font-weight:600;color:var(--text);}
.bpb-price{font-size:0.6rem;color:var(--brand);font-family:'DM Mono',monospace;}
.cart-title{font-size:0.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;font-family:'DM Mono',monospace;}
.cart-item{
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
  border-radius:6px;padding:0.4rem 0.5rem;margin-bottom:0.3rem;
  display:flex;justify-content:space-between;align-items:center;
}
.ci-name{font-size:0.6rem;font-weight:600;color:var(--text);}
.ci-price{font-size:0.6rem;color:var(--brand);font-family:'DM Mono',monospace;}
.cart-total-row{
  margin-top:auto;padding-top:0.75rem;
  border-top:1px solid rgba(255,255,255,0.06);
}
.ct-line{display:flex;justify-content:space-between;font-size:0.6rem;color:var(--muted);margin-bottom:0.3rem;font-family:'DM Mono',monospace;}
.ct-total{display:flex;justify-content:space-between;font-size:0.82rem;font-weight:800;color:#fff;}
.ct-total span:last-child{color:var(--brand);}
.checkout-btn{
  width:100%;margin-top:0.6rem;
  background:linear-gradient(135deg,#FF6B00,#FF8C38);color:#fff;
  border:none;border-radius:8px;padding:0.55rem;
  font-family:'Syne',sans-serif;font-size:0.75rem;font-weight:700;cursor:pointer;
  box-shadow:0 0 15px rgba(255,107,0,0.3);
}

/* Analytics screen */
.analytics-layout{height:380px;padding:1.25rem;background:var(--bg);overflow:hidden;}
.analytics-filters{display:flex;gap:0.5rem;margin-bottom:1rem;}
.analytics-filter{
  background:var(--surface);border:1px solid rgba(255,107,0,0.3);
  border-radius:8px;padding:0.3rem 0.75rem;
  font-size:0.65rem;font-weight:600;color:var(--text);font-family:'DM Mono',monospace;
}
.analytics-grid{display:grid;grid-template-columns:2fr 1fr;gap:0.75rem;margin-bottom:0.75rem;}
.analytics-grid-2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;}
.an-card{
  background:rgba(22,22,37,0.85);border:1px solid rgba(255,107,0,0.08);
  border-radius:10px;padding:0.85rem;
}
.an-title{font-size:0.55rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.6rem;font-family:'DM Mono',monospace;}
.line-chart{height:70px;position:relative;}
.line-svg{width:100%;height:100%;}

/* ─── Receipt preview ─── */
#receipt{
  padding:7rem 4rem;
  background:linear-gradient(180deg,var(--bg),var(--surface));
  border-top:1px solid var(--border);
}
.receipt-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:center;
}
.receipt-card{
  background:#fff;
  width:220px;margin:0 auto;border-radius:8px;
  padding:1.25rem 1rem;
  box-shadow:0 30px 80px rgba(0,0,0,0.5),0 0 40px rgba(255,107,0,0.08);
  transform:rotate(-2deg);
  font-family:'DM Mono',monospace;color:#4E2000;
}
.receipt-header{
  background:#FF6B00;margin:-1.25rem -1rem 0.75rem;
  padding:0.75rem;border-radius:8px 8px 0 0;text-align:center;
}
.receipt-header h3{color:#fff;font-size:0.85rem;font-family:'Syne',sans-serif;font-weight:700;}
.receipt-header p{color:rgba(255,255,255,0.8);font-size:0.55rem;}
.receipt-meta{font-size:0.6rem;margin-bottom:0.5rem;color:#4E2000;}
.receipt-divider{border:none;border-top:1px dashed #FF6B00;margin:0.5rem 0;}
.receipt-row{display:flex;justify-content:space-between;font-size:0.6rem;padding:0.15rem 0;}
.receipt-row.header{color:#FF8F00;font-weight:700;font-size:0.55rem;text-transform:uppercase;letter-spacing:0.05em;}
.receipt-total-row{
  background:#FF6B00;color:#fff;
  margin:0.5rem -1rem 0;padding:0.5rem 1rem;
  display:flex;justify-content:space-between;
  font-weight:700;font-size:0.7rem;border-radius:0 0 2px 2px;
}
.receipt-qr{
  width:60px;height:60px;background:#f5f5f5;margin:0.6rem auto 0.3rem;
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  border-radius:4px;overflow:hidden;padding:4px;
}
.qr-px{background:var(--q,#4E2000);}
.receipt-upi{text-align:center;font-size:0.55rem;color:#FF6B00;font-weight:700;}

.receipt-copy{padding-left:2rem;}
.receipt-copy .section-label{margin-bottom:0.75rem;}
.receipt-copy .section-title{margin-bottom:1rem;}
.receipt-copy p{color:var(--muted);font-size:0.88rem;line-height:1.7;font-family:'DM Mono',monospace;font-weight:300;margin-bottom:1rem;}
.receipt-feature{
  display:flex;align-items:flex-start;gap:0.75rem;margin-top:1.25rem;
}
.rf-icon{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  background:rgba(255,107,0,0.08);border:1px solid rgba(255,107,0,0.2);
  display:flex;align-items:center;justify-content:center;font-size:0.9rem;margin-top:0.1rem;
}
.rf-text h4{font-size:0.88rem;font-weight:700;color:#fff;margin-bottom:0.2rem;}
.rf-text p{font-size:0.78rem;color:var(--muted);font-family:'DM Mono',monospace;font-weight:300;}

/* ─── CTA ─── */
#cta{
  padding:7rem 4rem;text-align:center;
  position:relative;overflow:hidden;
}
#cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,107,0,0.06), transparent);
}
.cta-inner{position:relative;z-index:1;}
.cta-title{font-size:clamp(2rem,5vw,4rem);font-weight:800;letter-spacing:-2px;margin-bottom:1rem;}
.cta-sub{font-size:0.95rem;color:var(--muted);margin-bottom:2.5rem;font-family:'DM Mono',monospace;}
.cta-actions{display:flex;justify-content:center;gap:1rem;}

/* ─── Footer ─── */
footer{
  padding:2rem 4rem;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);
}
.footer-copy{font-size:0.75rem;color:var(--muted);font-family:'DM Mono',monospace;}
.footer-copy a{color:var(--brand);text-decoration:none;}
.footer-badges{display:flex;gap:0.5rem;}
.badge{
  font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:0.25rem 0.6rem;border-radius:99px;font-family:'DM Mono',monospace;
}
.badge-mit{background:rgba(34,197,94,0.1);color:#4ade80;border:1px solid rgba(34,197,94,0.2);}
.badge-v{background:rgba(255,107,0,0.1);color:var(--brand);border:1px solid rgba(255,107,0,0.2);}

/* ─── Scroll reveal ─── */
.reveal{opacity:0;}
html { scroll-behavior: smooth; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,107,0,0.6); }

@media(max-width:768px){
  nav{padding:1rem 1.5rem;}
  .nav-links{display:none;}
  #hero{padding:6rem 1.5rem 3rem;}
  .hero-title { font-size: 3rem; letter-spacing: -1px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .btn-hero { width: 100%; text-align: center; }
  .dashboard-frame { width: 100%; }
  .frame-inner { grid-template-columns: 1fr 1fr; }
  .mock-chart-row { grid-template-columns: 1fr; }
  .mock-donut { display: none; }
  #stats{padding:2rem 1.5rem;gap:1.5rem;flex-wrap:wrap; justify-content: center;}
  .stat { flex: 1 1 120px; }
  #features{padding:4rem 1.5rem;}
  .features-grid{grid-template-columns:1fr;}
  #stack{padding:3rem 1.5rem;}
  .stack-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  #screens{padding:4rem 1.5rem;}
  .screens-tabs { width: 100%; overflow-x: auto; padding: 0.5rem; }
  .pos-layout, .bill-layout, .analytics-layout { height: auto; flex-direction: column; }
  .pos-sidebar, .bill-right { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,107,0,0.06); border-left: none; }
  .pos-sidebar { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pos-sidebar::-webkit-scrollbar { display: none; }
  .pos-sidebar span { display: none; }
  .pos-nav-item { flex: 0 0 auto; border-left: none !important; border-bottom: 2px solid transparent; padding: 0.8rem 1.25rem; }
  .pos-nav-item.active { border-left: none !important; border-bottom: 2px solid var(--brand); }
  .pos-kpi-row, .analytics-stats-row, .analytics-charts-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .pos-charts { grid-template-columns: 1fr; }
  .bill-left { padding: 1rem; }
  .bill-input-row { grid-template-columns: 1fr; }
  .receipt-inner{grid-template-columns:1fr;gap:2rem;}
  .receipt-copy{padding-left:0;}
  #cta{padding:4rem 1.5rem;}
  .cta-actions { flex-direction: column; width: 100%; }
  footer{flex-direction:column;gap:1rem;padding:1.5rem; text-align: center;}
  .footer-badges { justify-content: center; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.5rem; }
  .frame-inner { grid-template-columns: 1fr; }
  .pos-kpi-row { grid-template-columns: 1fr; }
  .stat-num { font-size: 1.8rem; }
}

/* ── ROADMAP ── */
#roadmap {
  padding: 6rem 0;
  background: var(--bg);
  border-top: 1px solid rgba(255,107,0,0.1);
}
.roadmap-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.roadmap-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.roadmap-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.75rem;
  line-height: 1.6;
}

/* Progress bar */
.rm-progress-wrap {
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
.rm-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  margin-bottom: 0.5rem;
}
.rm-progress-track {
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.rm-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), #FF8C38);
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 10px rgba(255,107,0,0.4);
}
.rm-progress-pct {
  text-align: right;
  font-size: 0.7rem;
  color: var(--brand);
  font-family: 'DM Mono', monospace;
  margin-top: 0.4rem;
  font-weight: 700;
}

/* Board */
.rm-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.rm-col {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.rm-col-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rm-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rm-dot-live {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}
.rm-dot-next {
  background: var(--brand);
  box-shadow: 0 0 6px rgba(255,107,0,0.6);
  animation: rmDotPulse 2s ease-in-out infinite;
}
.rm-dot-backlog {
  background: #64748b;
}
@keyframes rmDotPulse {
  0%,100% { box-shadow: 0 0 6px rgba(255,107,0,0.6); }
  50%     { box-shadow: 0 0 14px rgba(255,107,0,0.9); }
}
.rm-col-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
  flex: 1;
}
.rm-label-done    { color: #22c55e; }
.rm-label-next    { color: var(--brand); }
.rm-label-backlog { color: #64748b; }
.rm-count {
  font-size: 0.65rem;
  font-family: 'DM Mono', monospace;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
}

/* Cards */
.rm-cards {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,0.2) transparent;
}
.rm-cards::-webkit-scrollbar { width: 4px; }
.rm-cards::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.2); border-radius: 2px; }

.rm-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(10px);
  cursor: default;
  transition: background 0.2s, transform 0.15s;
  border: 1px solid transparent;
}
.rm-card:hover { transform: translateY(-1px); }

.rm-card-done {
  background: rgba(34,197,94,0.05);
  border-color: rgba(34,197,94,0.12);
}
.rm-card-done:hover { background: rgba(34,197,94,0.08); }

.rm-card-next {
  background: rgba(255,107,0,0.06);
  border-color: rgba(255,107,0,0.18);
  box-shadow: 0 0 12px rgba(255,107,0,0.05);
}
.rm-card-next:hover { background: rgba(255,107,0,0.1); box-shadow: 0 0 20px rgba(255,107,0,0.1); }

.rm-card-backlog {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.rm-card-backlog:hover { background: rgba(255,255,255,0.06); }

.rm-card-big {
  border-color: rgba(139,92,246,0.2);
  background: rgba(139,92,246,0.05);
  box-shadow: 0 0 10px rgba(139,92,246,0.05);
}
.rm-card-big:hover { background: rgba(139,92,246,0.08); box-shadow: 0 0 18px rgba(139,92,246,0.1); }

.rm-card-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rm-card-icon i {
  width: 14px;
  height: 14px;
  stroke-width: 2.5px;
}
.rm-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.rm-card-done .rm-card-title {
  color: rgba(255,255,255,0.45);
}
.rm-card-tag {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  flex-shrink: 0;
}
.rm-tag-live {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.2);
}
.rm-tag-next {
  background: rgba(255,107,0,0.12);
  color: var(--brand);
  border: 1px solid rgba(255,107,0,0.2);
}
.rm-big-tag {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  border-radius: 99px;
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.25);
}

@media (max-width: 900px) {
  .rm-board { grid-template-columns: 1fr; }
  .rm-cards { max-height: 260px; }
}