/*
  =============================================================
  Nexus Flash Lab — styles.css
  =============================================================

  This file contains your existing theme + components.
  NEW in this version:
  - "Models window" (macOS-like) styles used by the Devices board.

  EDIT GUIDE:
  - If you want faster/slower open/minimize animation, change:
      --models-dur
  - If you want more/less blur, change:
      backdrop-filter in .models-overlay
*/

:root{
  --bg:#0a0f0d;
  --bg-raised:#0f1613;
  --surface:#131b18;
  --surface-2:#182220;
  --line:#22322c;
  --accent:#3dffa0;
  --accent-dim:#1f8f5c;
  --accent-2:#4fc3ff;
  --text:#e7f2ec;
  --text-mute:#7e948b;
  --danger:#ff5468;
  --amber:#ffb545;
  --radius:10px;
  --mono:'JetBrains Mono', monospace;
  --disp:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;

  /* NEW: Models window animation duration (keep in sync with JS)
     - Open/close speed control (আপনি ইচ্ছামতো এখান থেকে speed কম/বেশি করবেন)
     - Example: 250ms (fast), 450ms (smooth), 650ms (slow)
  */
  --models-dur: 520ms;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(circle at 15% 0%, rgba(61,255,160,0.06), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(79,195,255,0.05), transparent 45%),
    var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.5;
  webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
::selection{background:var(--accent); color:#03110a;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* circuit trace background pattern */
.circuit-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:0.35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%);
}

/* ---------- NAV ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,15,13,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:1180px;
  margin:0 auto;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--disp);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.02em;
}
.logo .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.nav-links{display:flex; gap:28px; font-size:0.88rem; color:var(--text-mute); font-weight:500;}
.nav-links a:hover{color:var(--accent);}
.nav-cta{display:flex; gap:10px;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  font-size:0.85rem;
  font-family:var(--body);
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:#03110a; box-shadow:0 0 0 rgba(61,255,160,0);}
.btn-primary:hover{box-shadow:0 6px 24px rgba(61,255,160,0.25);}
.btn-ghost{border:1px solid var(--line); color:var(--text); background:transparent;}
.btn-ghost:hover{border-color:var(--accent-2); color:var(--accent-2);}
.burger{display:none;}

/* ---------- HERO ---------- */
.hero{padding:76px 0 60px; position:relative;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
  color:var(--accent);
  background:rgba(61,255,160,0.08);
  border:1px solid rgba(61,255,160,0.25);
  padding:6px 12px;
  border-radius:100px;
  margin-bottom:20px;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent);}

h1{
  font-family:var(--disp);
  font-size:clamp(2.3rem, 4.6vw, 3.6rem);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:18px;
}

h1 span{color:var(--accent);}
.hero p.sub{color:var(--text-mute); font-size:1.05rem; max-width:520px; margin-bottom:30px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px;}
.hero-stats{display:flex; gap:32px; font-family:var(--mono);}
.hero-stats div b{display:block; font-size:1.4rem; color:var(--accent); font-weight:700;}
.hero-stats div span{font-size:0.72rem; color:var(--text-mute); letter-spacing:0.04em;}

/* console signature element */
.console{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.console-top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,0.2);
}
.console-top .tdot{width:9px; height:9px; border-radius:50%; background:#3a4640;}
.console-top span.title{margin-left:8px; font-family:var(--mono); font-size:0.72rem; color:var(--text-mute);}
.console-body{padding:22px 20px; font-family:var(--mono); font-size:0.82rem; min-height:260px;}
.console-line{color:var(--text-mute); margin-bottom:9px; opacity:0; animation:typeIn .4s ease forwards;}
.console-line.ok{color:var(--accent);} 
.console-line.info{color:var(--accent-2);} 
.console-line.warn{color:var(--amber);} 
.console-line b{color:var(--text);} 
@keyframes typeIn{to{opacity:1;}}

.bar-track{height:6px; background:var(--surface-2); border-radius:100px; overflow:hidden; margin:6px 0 14px; border:1px solid var(--line);}
.bar-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius:100px; animation:fill 2.2s ease forwards 1.4s;}
@keyframes fill{to{width:87%;}}
.cursor{display:inline-block; width:7px; height:14px; background:var(--accent); animation:blink 1s infinite; vertical-align:middle;}
@keyframes blink{50%{opacity:0;}}

/* ---------- SECTION HEADS ---------- */
section{padding:70px 0;}
.section-head{margin-bottom:38px; max-width:640px;}
.kicker{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; color:var(--accent-2); text-transform:uppercase; margin-bottom:10px; display:block;}
h2{font-family:var(--disp); font-size:clamp(1.6rem, 3vw, 2.1rem); font-weight:700; margin-bottom:10px;}
.section-head p{color:var(--text-mute);}

/* ---------- SERVICES ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.chip-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:relative; transition:border-color .15s ease, transform .15s ease;}
.chip-card::before{content:''; position:absolute; top:0; left:22px; width:24px; height:3px; background:var(--line); border-radius:0 0 3px 3px;}
.chip-card:hover{border-color:var(--accent-dim); transform:translateY(-2px);}
.chip-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px;}
.chip-head h3{font-family:var(--disp); font-size:1.02rem; font-weight:600;}
.status-on{font-family:var(--mono); font-size:0.65rem; color:var(--accent); border:1px solid var(--accent-dim); padding:3px 8px; border-radius:100px; background:rgba(61,255,160,0.06); letter-spacing:0.05em; white-space:nowrap;}
.status-new{font-family:var(--mono); font-size:0.65rem; color:var(--amber); border:1px solid rgba(255,181,69,0.4); padding:3px 8px; border-radius:100px; background:rgba(255,181,69,0.08); letter-spacing:0.05em; white-space:nowrap;}
.chip-card p{color:var(--text-mute); font-size:0.87rem;}

/* ---------- DEVICES: live status board ---------- */
.board{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); position:relative;}
.board-head{
  display:grid;
  grid-template-columns:2fr 2fr 1fr auto;
  gap:16px;
  padding:14px 22px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--text-mute);
  text-transform:uppercase;
}
.board-row{
  display:grid;
  grid-template-columns:2fr 2fr 1fr auto;

  /* Column spacing একটু কমালে SERVER টেক্সট/ব্যাজ বামে সুন্দর বসে */
  gap:12px;

  align-items:center;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.board-row:last-child{border-bottom:none;}
.board-row:hover{background:rgba(61,255,160,0.03);}
.board-brand{display:flex; align-items:center; gap:12px;}
.brand-dot{width:8px; height:8px; min-width:8px; border-radius:2px; background:var(--accent-2); box-shadow:0 0 8px rgba(79,195,255,0.5);}
.board-brand h4{font-family:var(--disp); font-size:0.98rem; font-weight:600;}
.board-sub{font-family:var(--mono); font-size:0.72rem; color:var(--text-mute);}
.board-tags{display:flex; flex-wrap:wrap; gap:8px;}
.tag-pill{font-family:var(--mono); font-size:0.7rem; color:var(--text-mute); border:1px solid var(--line); padding:4px 10px; border-radius:100px; white-space:nowrap;}

/* SERVER column layout */
.board-status{
  display:flex;
  align-items:center;
  gap:8px;

  /* ONLINE + LOW একই লাইনে থাকবে */
  flex-wrap:nowrap;
  white-space:nowrap;

  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--accent);
  letter-spacing:0.04em;
}

/* Updated text সবসময় নিচের লাইনে যাবে (আপনার screenshot এর মতো) */
.updated-text{
  display:block;
  flex-basis:100%;

  /* first line থেকে একটু নিচে gap */
  margin-top:4px;

  color:var(--text-mute);
  font-size:0.68rem;
  letter-spacing:0.02em;
  white-space:nowrap;
}

.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:pulse 1.8s infinite;
}

/* "ONLINE" text */
.status-text{color:var(--accent);}

/* Load badge: data-load = low | med | high */
.load-pill{
  border:1px solid var(--line);
  padding:3px 8px;
  border-radius:999px;
  font-size:0.68rem;
  line-height:1;
  background:rgba(10,15,13,0.35);
  color:var(--text-mute);
}

.load-pill[data-load="low"]{
  border-color:rgba(61,255,160,0.35);
  color:var(--accent);
  background:rgba(61,255,160,0.06);
}

.load-pill[data-load="med"]{
  border-color:rgba(255,181,69,0.35);
  color:var(--amber);
  background:rgba(255,181,69,0.07);
}

.load-pill[data-load="high"]{
  border-color:rgba(255,84,104,0.35);
  color:var(--danger);
  background:rgba(255,84,104,0.07);
}

/* Last updated text
   NOTE: Removed duplicate .updated-text block.
   The full .updated-text definition is earlier (display:block + flex-basis:100% + white-space:nowrap)
   so 'Updated just now' stays on ONE LINE on hosting too.
*/

.board-btn{padding:8px 16px; font-size:0.78rem; justify-self:end;}

@media (max-width: 760px){
  .board-head{display:none;}
  .board-row{grid-template-columns:1fr; gap:12px; align-items:flex-start;}
  .board-btn{justify-self:start;}
}

/* =============================================================
   NEW: Models overlay + macOS-like window
   =============================================================

   IMPORTANT:
   - Overlay is placed INSIDE .board.
   - It uses position:absolute so it stays confined.

   Animation idea:
   - Open: fade + scale + slight translate
   - Minimize: shrink toward top-right corner
*/

.models-overlay{
  /* Hidden by default */
  display:none;

  /* Confine within board */
  position:absolute;
  inset:0;
  z-index:10;

  /* Dim background inside the board */
  background:rgba(10,15,13,0.62);
  backdrop-filter:blur(8px);

  /* Smooth transitions */
  opacity:0;
  pointer-events:none;
  transition:opacity var(--models-dur) ease;
}

/* When visible */
.models-overlay.is-visible{
  display:block;
  opacity:1;
  pointer-events:auto;
}

.models-window{
  /* Centered window */
  width:min(720px, calc(100% - 44px));
  height:min(420px, calc(100% - 44px));
  margin:22px auto;

  background:linear-gradient(180deg, rgba(24,34,32,0.92), rgba(19,27,24,0.96));
  border:1px solid rgba(79,195,255,0.22);
  border-radius:16px;
  box-shadow:0 28px 80px rgba(0,0,0,0.55);
  overflow:hidden;

  /* Open animation start state */
  transform:translateY(10px) scale(0.985);
  opacity:0;

  transition:
    transform var(--models-dur) cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity var(--models-dur) ease;
}

/* When overlay is visible, window animates in */
.models-overlay.is-visible .models-window{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Minimize animation: shrink toward top-right */
.models-overlay.is-minimized{opacity:0; pointer-events:none;}
.models-overlay.is-minimized .models-window{
  transform:translate(240px, -140px) scale(0.2);
  opacity:0;
}

.models-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:14px 16px;
  border-bottom:1px solid rgba(34,50,44,0.9);
  background:rgba(0,0,0,0.18);
}

.models-title{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.models-title-strong{
  font-family:var(--disp);
  font-weight:700;
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.models-title-sub{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--text-mute);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.models-minimize{
  /* Top-right "minimize" control */
  width:36px;
  height:28px;
  border-radius:10px;

  border:1px solid rgba(79,195,255,0.25);
  background:rgba(79,195,255,0.08);
  color:var(--accent-2);

  font-family:var(--mono);
  font-weight:700;
  cursor:pointer;

  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}

.models-minimize:hover{
  transform:translateY(-1px);
  border-color:rgba(79,195,255,0.45);
  background:rgba(79,195,255,0.12);
}

.models-body{
  padding:16px;
  height:calc(100% - 58px);
  overflow:auto;
}

.models-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.models-item{
  border:1px solid rgba(34,50,44,0.9);
  background:rgba(10,15,13,0.35);
  border-radius:12px;
  padding:12px 12px;

  color:var(--text);
  font-family:var(--mono);
  font-size:0.78rem;

  transition:border-color .15s ease, transform .15s ease;
}

.models-item:hover{
  border-color:rgba(61,255,160,0.28);
  transform:translateY(-1px);
}

.models-hint{
  /* Hint text ("Tip: ...") hide করতে চাইলে display:none রাখুন */
  display:none;

  /* নিচেরগুলো future-এ আবার show করতে চাইলে কাজে লাগবে */
  margin-top:12px;
  color:var(--text-mute);
  font-size:0.86rem;
}

@media (max-width: 760px){
  .models-list{grid-template-columns:1fr;}
  .models-window{height:min(520px, calc(100% - 44px));}
}

/* ---------- STEPS ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.step{border-left:2px solid var(--line); padding-left:16px;}
.step .num{font-family:var(--mono); color:var(--accent); font-size:0.8rem; margin-bottom:6px; display:block;}
.step h4{font-family:var(--disp); font-weight:600; margin-bottom:6px; font-size:0.98rem;}
.step p{color:var(--text-mute); font-size:0.85rem;}

/* ---------- PAYMENT + REQUIREMENTS ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.panel h3{font-family:var(--disp); font-size:1.05rem; margin-bottom:16px;}
.list-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:0.9rem; color:var(--text-mute);}
.list-row:last-child{border-bottom:none;}
.list-row .ico{color:var(--accent); font-family:var(--mono);}

/* ---------- NOTICE ---------- */
.notice{border:1px solid rgba(255,84,104,0.3); background:rgba(255,84,104,0.06); border-radius:var(--radius); padding:20px 22px; display:flex; gap:14px; align-items:flex-start;}
.notice .flag{color:var(--danger); font-family:var(--mono); font-weight:700;}
.notice p{color:var(--text-mute); font-size:0.88rem;}
.notice p b{color:var(--text);}

/* ---------- CONTACT ---------- */
.contact-band{border-radius:16px; border:1px solid var(--line); background:linear-gradient(135deg, rgba(61,255,160,0.08), rgba(79,195,255,0.04)); padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.contact-band h3{font-family:var(--disp); font-size:1.5rem; margin-bottom:6px;}
.contact-band p{color:var(--text-mute);}
.contact-actions{display:flex; gap:12px;}

footer{border-top:1px solid var(--line); padding:34px 0; margin-top:20px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color:var(--text-mute); font-size:0.82rem;}
.foot-social{display:flex; gap:16px;}
.foot-social a:hover{color:var(--accent);}

/* back-to-top */
.to-top{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:60;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:1rem;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.to-top.show{opacity:1; pointer-events:auto;}
.to-top:hover{transform:translateY(-3px); border-color:var(--accent-dim);}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .device-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .nav-links{display:none;}
}
@media (max-width: 520px){
  .services-grid{grid-template-columns:1fr;}
  .device-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap; gap:20px;}
  .contact-band{padding:28px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition:none !important;}
}