/* ============================================================
   Sadid Afarin — Products Page Styles
   ============================================================ */

/* --- Page Hero --- */
.page-hero{
    padding:100px 0 80px;
    text-align:center;
    position:relative;
    overflow:hidden;
    background:var(--bg);
    border-bottom:1px solid var(--border);
  }
  .page-hero::before{
    content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
    width:900px; height:900px; border-radius:50%;
    background:radial-gradient(circle,rgba(59,130,246,.12),transparent 60%);
    pointer-events:none;
  }
  .page-hero h1{
    font-size:clamp(2.4rem, 5vw, 4rem);
    font-weight:800; letter-spacing:-.03em; line-height:1.1;
    color:#fff; margin-bottom:20px;
  }
  .page-hero h1 .grad{
    background:var(--gradient-hero);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .page-hero p{
    font-size:1.15rem; color:var(--muted); max-width:680px;
    margin:0 auto; line-height:1.6;
  }
  
  /* --- Product Section Layout --- */
  .product-section{
    padding:100px 0;
    border-bottom:1px solid var(--border);
    position:relative;
  }
  .product-section:last-of-type{ border-bottom:none; }
  .product-section:nth-child(even){ background:var(--bg-soft); }
  
  .product-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
  }
  .product-layout.reverse .product-visual{ order:2; }
  .product-layout.reverse .product-content{ order:1; }
  
  /* --- Product Content --- */
  .product-content{ max-width:540px; }
  .product-number{
    font-size:1rem; font-weight:800; color:var(--primary);
    letter-spacing:.1em; text-transform:uppercase;
    margin-bottom:16px; display:block;
  }
  .product-content h2{
    font-size:clamp(2rem, 3.5vw, 2.8rem);
    font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.2;
    margin-bottom:24px;
  }
  .product-content h2 .grad{
    background:var(--gradient-hero);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .product-desc{
    font-size:1.05rem; color:var(--muted); margin-bottom:34px; line-height:1.7;
  }
  
  /* --- Feature List --- */
  .feature-list{
    list-style:none; display:flex; flex-direction:column; gap:20px;
    margin-bottom:40px;
  }
  .feature-list li{
    display:flex; align-items:flex-start; gap:16px;
  }
  .feature-icon{
    width:36px; height:36px; border-radius:10px;
    background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.2);
    display:grid; place-items:center; flex-shrink:0;
    color:#93c5fd; font-size:1.1rem; font-weight:800;
  }
  .feature-icon--green{
    background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.2);
    color:#86efac;
  }
  .feature-icon--purple{
    background:rgba(139,92,246,.1); border-color:rgba(139,92,246,.2);
    color:#c4b5fd;
  }
  .feature-text h4{
    font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:4px;
  }
  .feature-text p{
    font-size:.92rem; color:var(--muted); line-height:1.6;
  }
  
  /* --- Product Visual (Mockup Area) --- */
  .product-visual{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:var(--card);
    border:1px solid var(--border-strong);
    border-radius:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:40px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.4);
  }
  
  /* Visual 1: Network QoS */
  /* ============================================================
   NEW ENGAGING QOS VISUAL
   ============================================================ */

  .vis-qos {
    background: radial-gradient(circle at 50% 50%, #0f1524 0%, #070b14 100%);
    padding: 24px;
    border-color: rgba(59,130,246,.2);
  }
  
  .qos-dashboard {
    width: 100%;
    height: 100%;
    background: rgba(19, 26, 43, 0.8);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
  }
  
  /* Header */
  .qos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .qos-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .qos-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: qosPulse 2s infinite;
  }
  @keyframes qosPulse { 50% { opacity: .4; } }
  .qos-time {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: monospace;
    background: rgba(255,255,255,.05);
    padding: 4px 8px;
    border-radius: 4px;
  }
  
  /* Chart */
  .qos-chart-wrap {
    position: relative;
    margin-bottom: 30px;
    height: 80px;
  }
  .qos-metric {
    position: absolute;
    top: -10px; left: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .qos-val { font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1; }
  .qos-unit { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
  .qos-badge {
    font-size: 0.65rem; font-weight: 700; color: #86efac;
    background: rgba(34,197,94,.15); padding: 2px 6px; border-radius: 4px;
    margin-left: 8px;
  }
  .qos-chart {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%; height: 60px;
    overflow: visible;
  }
  .qos-chart-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawLine 3s ease-out forwards;
  }
  @keyframes drawLine { to { stroke-dashoffset: 0; } }
  
  /* Network Nodes */
  .qos-network {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 0 10px;
  }
  .qos-flow-line {
    position: absolute;
    top: 50%; left: 20px; right: 20px;
    height: 2px;
    background: rgba(59,130,246,.2);
    z-index: 1;
    transform: translateY(-50%);
  }
  .qos-flow-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0; height: 100%; width: 30%;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
    animation: dataFlow 2s linear infinite;
  }
  @keyframes dataFlow {
    0% { left: -30%; }
    100% { left: 100%; }
  }
  
  .qos-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--card);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: transform 0.2s;
  }
  .qos-node:hover { transform: translateY(-2px); }
  .qos-node-icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(59,130,246,.1);
    color: #93c5fd;
    font-size: 1.1rem;
  }
  .qos-node span {
    font-size: 0.65rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
  }
  
  /* Warning Node */
  .qos-node--warn {
    border-color: rgba(239,68,68,.4);
    background: rgba(239,68,68,.05);
  }
  .qos-node--warn .qos-node-icon {
    background: rgba(239,68,68,.15);
    color: #fca5a5;
  }
  .qos-tooltip {
    position: absolute;
    top: -48px; left: 50%;
    transform: translateX(-50%);
    background: #0a0e1a;
    border: 1px solid rgba(239,68,68,.5);
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,.6);
    animation: tooltipFloat 3s ease-in-out infinite;
  }
  @keyframes tooltipFloat {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -4px); }
  }
  .qos-tooltip::after {
    content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 8px; height: 8px; background: #0a0e1a;
    border-bottom: 1px solid rgba(239,68,68,.5); border-right: 1px solid rgba(239,68,68,.5);
  }
  .qos-tooltip strong { font-size: 0.7rem; color: #fca5a5; }
  .qos-tooltip span { font-size: 0.6rem; color: var(--muted); }
  
  /* Bottom Stats */
  .qos-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: rgba(255,255,255,.03);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.05);
  }
  .qos-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .qos-stat span { font-size: 0.65rem; color: var(--muted); font-weight: 600; text-transform: uppercase; }
  .qos-stat strong { font-size: 0.9rem; color: #fff; font-family: monospace; }
  .qos-text-green { color: #86efac !important; }
  
  /* Responsive */
  @media(max-width:1024px) {
    .vis-qos { aspect-ratio: auto; min-height: 400px; }
  }
  @media(max-width:640px) {
    .qos-dashboard { padding: 16px; }
    .qos-network { padding: 0; }
    .qos-node { padding: 8px; gap: 4px; }
    .qos-node-icon { width: 26px; height: 26px; font-size: 0.9rem; }
    .qos-node span { font-size: 0.6rem; }
    .qos-tooltip { display: none; /* hide on mobile to avoid clutter */ }
    .qos-stats { padding: 10px; }
    .qos-val { font-size: 1.4rem; }
  }
  .network-diagram{
    position:relative; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
  }
  .net-node{
    position:absolute;
    background:var(--bg-soft); border:1px solid var(--border-strong);
    border-radius:12px; padding:10px 16px; font-size:.8rem; font-weight:700; color:#fff;
    display:flex; align-items:center; gap:8px;
    box-shadow:0 10px 24px rgba(0,0,0,.4); z-index:2;
  }
  .net-node::before{
    content:''; width:8px; height:8px; border-radius:50%;
    background:#22c55e; box-shadow:0 0 10px #22c55e;
  }
  .net-node.warn::before{ background:#ef4444; box-shadow:0 0 10px #ef4444; }
  .net-node.warn{ border-color:rgba(239,68,68,.4); }
  .net-node.n1{ top:10%; left:10%; }
  .net-node.n2{ top:10%; right:10%; }
  .net-node.n3{ bottom:10%; left:10%; }
  .net-node.n4{ bottom:10%; right:10%; }
  .net-center{
    width:100px; height:100px; border-radius:50%;
    background:rgba(59,130,246,.1); border:2px solid rgba(59,130,246,.3);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    z-index:3; position:relative;
  }
  .net-center::after{
    content:''; position:absolute; inset:-15px; border-radius:50%;
    border:1px dashed rgba(59,130,246,.2);
    animation:spin 20s linear infinite;
  }
  @keyframes spin{ 100%{ transform:rotate(360deg); } }
  .net-center span{ font-size:.7rem; font-weight:800; color:#93c5fd; letter-spacing:.1em; }
  .net-line{
    position:absolute; background:rgba(59,130,246,.2); z-index:1;
  }
  .net-line.l1{ width:2px; height:30%; top:20%; left:20%; transform:rotate(-45deg); }
  .net-line.l2{ width:2px; height:30%; top:20%; right:20%; transform:rotate(45deg); }
  .net-line.l3{ width:2px; height:30%; bottom:20%; left:20%; transform:rotate(45deg); }
  .net-line.l4{ width:2px; height:30%; bottom:20%; right:20%; transform:rotate(-45deg); }
  
  /* Visual 2: Intelligent Monitoring */
  .vis-ai{
    background:radial-gradient(circle at 50% 50%, #1a1033 0%, #0a0e1a 100%);
    align-items:center;
  }
  .ai-hub{
    position:relative;
    width:120px; height:120px; border-radius:36%;
    background:radial-gradient(circle at 30% 30%, #2d2d44, #131323);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 0 60px rgba(139,92,246,.4), 0 0 100px rgba(6,182,212,.2);
    z-index:3; margin-bottom:40px;
  }
  .ai-hub span{ font-size:2rem; font-weight:900; color:#fff; line-height:1; }
  .ai-hub small{ font-size:.55rem; font-weight:700; color:#c4b5fd; letter-spacing:.1em; margin-top:4px; }
  .ai-connections{
    display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%;
    position:relative; z-index:2;
  }
  .ai-conn{
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:10px; padding:10px 14px; font-size:.75rem; font-weight:600;
    color:#e5e7eb; display:flex; align-items:center; gap:8px;
  }
  .ai-conn::before{
    content:''; width:6px; height:6px; border-radius:50%; background:#c4b5fd;
  }
  
  /* Visual 3: Transaction Monitoring */
  .vis-finance{
    background:radial-gradient(circle at 50% 50%, #072a1c 0%, #0a0e1a 100%);
  }
  .fin-grid{
    display:flex; flex-direction:column; gap:12px; width:100%; z-index:2;
  }
  .fin-card{
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
    border-radius:10px; padding:16px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .fin-card-left{ display:flex; align-items:center; gap:12px; }
  .fin-icon{
    width:32px; height:32px; border-radius:8px; background:rgba(34,197,94,.15);
    display:grid; place-items:center; color:#86efac; font-size:1rem;
  }
  .fin-text strong{ display:block; font-size:.85rem; color:#fff; }
  .fin-text span{ font-size:.7rem; color:var(--muted); }
  .fin-status{
    font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    padding:4px 10px; border-radius:6px;
  }
  .fin-status.ok{ background:rgba(34,197,94,.15); color:#86efac; }
  .fin-status.warn{ background:rgba(239,68,68,.15); color:#fca5a5; }
  .fin-status.check{ background:rgba(245,158,11,.15); color:#fde68a; }
  
  /* --- Responsive --- */
  @media(max-width:1024px){
    .product-layout, .product-layout.reverse{
      grid-template-columns:1fr;
      gap:50px;
    }
    .product-layout.reverse .product-visual{ order:1; }
    .product-layout.reverse .product-content{ order:2; }
    .product-visual{ aspect-ratio:1.5/1; }
    .product-content{ max-width:100%; text-align:center; }
    .feature-list li{ text-align:left; }
    .page-hero{ padding:80px 0 60px; }
    .product-section{ padding:70px 0; }
  }
  @media(max-width:640px){
    .feature-list{ gap:16px; }
    .feature-icon{ width:32px; height:32px; font-size:1rem; }
    .feature-text h4{ font-size:.95rem; }
    .product-visual{ padding:24px; aspect-ratio:1.2/1; }
    .net-node{ padding:8px 12px; font-size:.7rem; }
    .net-center{ width:80px; height:80px; }
    .net-center span{ font-size:.6rem; }
    .ai-connections{ grid-template-columns:1fr; }
  }