/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Base 17px — renders properly on Android */
body{background:#07081a;color:#e8e6ff;font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.65;overflow-x:hidden;width:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#0d0e2a}
::-webkit-scrollbar-thumb{background:#7c5cfc;border-radius:3px}

/* ===== NAV — taller, logo stacked ===== */
nav{position:sticky;top:0;z-index:9999;background:rgba(7,8,26,0.97);border-bottom:1px solid rgba(120,100,255,0.22);width:100%}
.nav-wrap{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:70px}

/* Logo: icon + stacked text */
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none}
.logo-box{width:40px;height:40px;min-width:40px;border-radius:10px;background:linear-gradient(135deg,#7c5cfc,#a259ff);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;font-weight:900}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:800;color:#e8e6ff;letter-spacing:0.01em}
.logo-name span{color:#a259ff}
.logo-sub{font-size:0.7rem;color:#787aaa;font-weight:500;letter-spacing:0.08em;text-transform:uppercase}

.desktop-nav{display:flex;align-items:center;gap:2px}
.desktop-nav a{color:#b0aed6;font-size:0.88rem;padding:7px 12px;border-radius:7px;font-weight:500;white-space:nowrap}
.desktop-nav a:hover{color:#e8e6ff;background:rgba(124,92,252,0.15)}
.nav-btn{background:linear-gradient(135deg,#7c5cfc,#a259ff)!important;color:#fff!important;font-weight:700!important;padding:8px 18px!important;border-radius:8px!important;font-size:0.85rem!important}

/* HAMBURGER SVG */
.ham{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0;border-radius:8px;width:42px;height:42px;align-items:center;justify-content:center}
.ham:hover{background:rgba(124,92,252,0.15)}
.mob-nav{display:none;position:fixed;top:70px;left:0;right:0;background:#060718;border-bottom:1px solid rgba(120,100,255,0.2);padding:8px 18px 22px;z-index:9998}
.mob-nav.show{display:block}
.mob-nav a{display:flex;align-items:center;gap:11px;color:#b0aed6;padding:14px 12px;border-bottom:1px solid rgba(120,100,255,0.1);font-size:1.02rem;font-weight:500;border-radius:8px}
.mob-nav a:last-child{border:none;color:#a259ff;font-weight:700;margin-top:6px;background:rgba(124,92,252,0.1)}

/* ===== HERO ===== */
.hero{min-height:92vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d0e2a 0%,#1a0a3c 50%,#07081a 100%);position:relative;overflow:hidden;padding:80px 20px 60px;text-align:center;width:100%}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 70% 30%,rgba(162,89,255,0.13) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 20% 70%,rgba(56,189,248,0.08) 0%,transparent 55%),radial-gradient(ellipse 55% 40% at 50% 5%,rgba(124,92,252,0.1) 0%,transparent 55%)}
.hero-dots{position:absolute;inset:0;pointer-events:none;opacity:0.025;background-image:linear-gradient(#7c5cfc 1px,transparent 1px),linear-gradient(90deg,#7c5cfc 1px,transparent 1px);background-size:40px 40px}
.hero-inner{max-width:820px;width:100%;margin:0 auto;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(124,92,252,0.13);border:1px solid rgba(120,100,255,0.3);border-radius:999px;padding:7px 16px;font-size:0.85rem;color:#a259ff;font-weight:600;margin-bottom:26px;letter-spacing:0.04em}
.live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;flex-shrink:0}

/* Heading font: Barlow Condensed — tall narrow letters, saves width, looks bold */
.hero h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.6rem,9vw,5rem);font-weight:800;line-height:1.08;margin-bottom:20px;color:#e8e6ff;letter-spacing:0.01em}
.grad{background:linear-gradient(135deg,#a259ff 0%,#7c5cfc 40%,#38bdf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:clamp(1rem,2.5vw,1.12rem);color:#b0aed6;max-width:580px;margin:0 auto 34px;line-height:1.7}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:50px}
.btn-p{background:linear-gradient(135deg,#7c5cfc,#a259ff);color:#fff;padding:15px 32px;border-radius:11px;font-size:1rem;font-weight:700;font-family:'DM Sans',sans-serif;border:none;cursor:pointer;display:inline-block}
.btn-o{background:rgba(255,255,255,0.05);color:#e8e6ff;border:1px solid rgba(120,100,255,0.32);padding:15px 32px;border-radius:11px;font-size:1rem;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;display:inline-block}
.btn-p:hover{opacity:0.88}
.btn-o:hover{background:rgba(124,92,252,0.12)}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(120,100,255,0.18);border-radius:14px;background:rgba(15,16,48,0.8);overflow:hidden}
.stat{padding:22px 12px;text-align:center;border-right:1px solid rgba(120,100,255,0.18)}
.stat:last-child{border-right:none}
.stat .n{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.7rem,5vw,2.1rem);font-weight:800;color:#a259ff}
.stat .l{font-size:0.78rem;color:#787aaa;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-top:3px}

/* ===== SECTIONS ===== */
.sec{padding:70px 20px;width:100%}
.sec-wrap{max-width:1200px;margin:0 auto}
.bg2{background:#0d0e2a}
.bg3{background:#111236}
.slabel{font-size:0.76rem;color:#a259ff;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px}
/* Section headings: Barlow Condensed — narrow, tall, saves horizontal space */
.stitle{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.9rem,5vw,2.8rem);font-weight:800;color:#e8e6ff;margin-bottom:10px;letter-spacing:0.01em;line-height:1.05}
.ssub{font-size:clamp(0.93rem,2vw,1rem);color:#b0aed6;max-width:540px;line-height:1.65}
.shead{margin-bottom:40px}
.divider{width:46px;height:3px;background:linear-gradient(135deg,#7c5cfc,#a259ff);border-radius:2px;margin:10px 0 24px}

/* ===== FEATURED CARD ===== */
.feat-card{background:linear-gradient(135deg,#321375 0%,#141641 60%,#0b505c 100%);border:1px solid rgb(0, 225, 255);border-radius:16px;padding:30px 26px;margin-bottom:22px}
.feat-card h3{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.4rem,4vw,1.7rem);font-weight:800;color:#e8e6ff;margin-bottom:10px;letter-spacing:0.01em}
.feat-card p{color:#b0aed6;font-size:clamp(0.93rem,2vw,0.98rem);line-height:1.65;max-width:520px}
.gold-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(245,200,66,0.12);border:1px solid rgba(245,200,66,0.28);color:#f5c842;font-size:0.8rem;font-weight:700;padding:5px 12px;border-radius:999px;margin-bottom:12px}

/* ===== TOOL CARDS ===== */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:16px}
.tool-card{background:linear-gradient(145deg,#131440,#0f1030);border:1px solid rgb(0, 247, 255);border-radius:14px;padding:26px 22px}
.tool-card:hover{border-color:rgba(124,92,252,0.55)}
.tc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:8px}
.tc-icon{width:46px;height:46px;min-width:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.35rem}
.badge{font-size:0.7rem;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:0.05em;text-transform:uppercase;white-space:nowrap}
.b-new{background:rgba(162,89,255,0.14);color:#a259ff;border:1px solid rgba(162,89,255,0.28)}
.b-hot{background:rgba(251,146,60,0.12);color:#fb923c;border:1px solid rgba(251,146,60,0.22)}
.b-live{background:rgba(74,222,128,0.12);color:#4ade80;border:1px solid rgba(74,222,128,0.22)}
.tool-card h3{font-family:'Barlow Condensed',sans-serif;font-size:1.18rem;font-weight:700;color:#e8e6ff;margin-bottom:8px;letter-spacing:0.01em}
.tool-card p{font-size:0.93rem;color:#b0aed6;line-height:1.6;margin-bottom:18px}
/* ===== TOOL BUTTONS WITH BG COLOR ===== */
.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #7c5cfc, #a259ff);
    color: #ffffff;
    font-size: 0.87rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(124, 92, 252, 0.2);
}

.tool-btn:hover {
    background: linear-gradient(135deg, #8d6cff, #b26bff);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px rgba(124, 92, 252, 0.3);
    transform: translateY(-1px);
    color: #ffffff;
}

.tool-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 92, 252, 0.2);
}
/* ===== WHY GRID ===== */
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px}
.why-card{background:linear-gradient(145deg,#131440,#0f1030);border:1px solid rgba(120,100,255,0.18);border-radius:14px;padding:26px 22px}
.why-icon{width:46px;height:46px;min-width:46px;border-radius:11px;background:rgba(124,92,252,0.11);border:1px solid rgba(120,100,255,0.16);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px}
.why-card h3{font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;font-weight:700;color:#e8e6ff;margin-bottom:8px;letter-spacing:0.01em}
.why-card p{font-size:0.92rem;color:#b0aed6;line-height:1.65}

/* ===== TERMINAL ===== */
.term-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.term-box{background:#06071a;border:1px solid rgba(120,100,255,0.18);border-radius:14px;overflow:hidden}
.term-top{background:#0d0e28;padding:12px 16px;display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(120,100,255,0.15)}
.td{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.term-body{padding:20px 18px;font-family:'Courier New',monospace;font-size:0.88rem;line-height:2.1;overflow-x:auto}
.tp{color:#7c5cfc}.tc2{color:#e8e6ff}.ti{color:#a259ff}.tl{color:#38bdf8}.tdn{color:#4ade80}
.tcur{display:inline-block;width:8px;height:14px;background:#7c5cfc;vertical-align:middle}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.ms-card{background:linear-gradient(145deg,#131440,#0f1030);border:1px solid rgba(120,100,255,0.18);border-radius:12px;padding:20px;text-align:center}
.ms-card .n{font-family:'Barlow Condensed',sans-serif;font-size:1.9rem;font-weight:800;color:#a259ff}
.ms-card .l{font-size:0.74rem;color:#787aaa;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-top:3px}

/* ===== BLOG ===== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.blog-card{background:linear-gradient(145deg,#131440,#0f1030);border:1px solid rgba(120,100,255,0.18);border-radius:14px;padding:24px 22px;display:block;color:inherit}
.blog-card:hover{border-color:rgba(124,92,252,0.5)}
.btag{font-size:0.73rem;font-weight:700;color:#a259ff;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;display:block}
.blog-card h3{font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;font-weight:700;color:#e8e6ff;margin-bottom:9px;line-height:1.3;letter-spacing:0.01em}
.blog-card p{font-size:0.9rem;color:#b0aed6;line-height:1.6}
.blog-read{display:inline-flex;align-items:center;gap:5px;color:#a259ff;font-size:0.87rem;font-weight:600;margin-top:14px}

/* ===== VALUES ===== */
.val-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:16px}
.val-card{background:linear-gradient(145deg,#131440,#0f1030);border:1px solid rgba(120,100,255,0.18);border-top:3px solid transparent;border-radius:14px;padding:24px 22px}
.val-card:nth-child(1){border-top-color:#7c5cfc}
.val-card:nth-child(2){border-top-color:#38bdf8}
.val-card:nth-child(3){border-top-color:#4ade80}
.val-card:nth-child(4){border-top-color:#f5c842}
.val-card:nth-child(5){border-top-color:#fb923c}
.val-card:nth-child(6){border-top-color:#a259ff}
.val-card h3{font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;font-weight:700;color:#e8e6ff;margin-bottom:8px;letter-spacing:0.01em}
.val-card p{font-size:0.91rem;color:#b0aed6;line-height:1.65}

/* ===== FAQ ===== */
.faq-wrap{max-width:740px;margin:0 auto}
.fi{border:1px solid rgba(120,100,255,0.18);border-radius:12px;margin-bottom:9px;overflow:hidden}
.fq{width:100%;text-align:left;background:#0f1030;color:#e8e6ff;font-size:1rem;font-weight:600;padding:18px 20px;cursor:pointer;border:none;display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:1.4}
.fq:hover{background:#131440}
.fq .arr{font-size:0.95rem;color:#a259ff;flex-shrink:0}
.fq.open .arr{transform:rotate(180deg)}
.fa{background:#0f1030;color:#b0aed6;font-size:0.93rem;line-height:1.7;max-height:0;overflow:hidden;padding:0 20px}
.fa.open{max-height:260px;padding:0 20px 18px}

/* ===== RELATED SEARCHES ===== */
.rtags{display:flex;flex-wrap:wrap;gap:9px}
.rtag{background:rgba(124,92,252,0.09);border:1px solid rgba(120,100,255,0.18);color:#b0aed6;font-size:0.88rem;padding:9px 16px;border-radius:999px;font-weight:500}
.rtag:hover{background:rgba(124,92,252,0.18);border-color:rgba(124,92,252,0.45);color:#e8e6ff}

/* ===== CONTACT ===== */
.con-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:start}
.con-info h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.8rem,5vw,2.4rem);font-weight:800;color:#e8e6ff;margin-bottom:14px;letter-spacing:0.01em}
.con-info p{color:#b0aed6;font-size:0.96rem;line-height:1.7;margin-bottom:28px}
.cdet{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.cicon{width:42px;height:42px;min-width:42px;background:rgba(124,92,252,0.11);border:1px solid rgba(120,100,255,0.18);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.cdet strong{display:block;font-size:0.78rem;color:#787aaa;text-transform:uppercase;letter-spacing:0.07em;font-weight:600}
.cdet span{font-size:0.93rem;color:#b0aed6}
.form-box{background:linear-gradient(145deg,#131440,#0f1030);border:1px solid rgba(120,100,255,0.18);border-radius:16px;padding:30px 26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:15px}
.fgrp{margin-bottom:15px}
label{display:block;font-size:0.8rem;color:#b0aed6;font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.06em}
input,textarea{width:100%;background:#0f1030;border:1px solid rgba(120,100,255,0.2);border-radius:10px;color:#e8e6ff;padding:13px 15px;font-size:1rem;font-family:'DM Sans',sans-serif;outline:none;-webkit-appearance:none}
input::placeholder,textarea::placeholder{color:#787aaa}
input:focus,textarea:focus{border-color:#7c5cfc}
textarea{resize:vertical;min-height:120px}

/* ===== FOOTER ===== */
footer{background:#060716;border-top:1px solid rgba(120,100,255,0.18);padding:58px 20px 26px;width:100%}
.foot-wrap{max-width:1200px;margin:0 auto}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:36px}
.fbrand p{color:#787aaa;font-size:0.9rem;line-height:1.7;margin-top:12px;max-width:270px}
.fcol h4{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;color:#e8e6ff;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.07em}
.fcol a{display:block;color:#787aaa;font-size:0.9rem;margin-bottom:10px}
.fcol a:hover{color:#a259ff}
.foot-bot{border-top:1px solid rgba(120,100,255,0.18);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.foot-bot p{color:#787aaa;font-size:0.85rem}

 
/* ===== RESPONSIVE ===== */
@media(max-width:960px){
  .term-grid{grid-template-columns:1fr}
  .con-grid{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:768px){
  .desktop-nav{display:none}
  .ham{display:flex}
  .sec{padding:56px 18px}
  .hero{padding:68px 18px 52px;min-height:auto}
  .hero-btns{flex-direction:column;align-items:center;gap:12px}
  .btn-p,.btn-o{width:100%;max-width:340px;text-align:center;padding:16px 28px;font-size:1.02rem}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stats-row .stat:nth-child(2){border-right:none}
  .stats-row .stat:nth-child(1),.stats-row .stat:nth-child(2){border-bottom:1px solid rgba(120,100,255,0.18)}
  .frow{grid-template-columns:1fr}
  .shead.fhead{flex-direction:column;align-items:flex-start;gap:8px}
  .tool-card p,.why-card p,.blog-card p,.val-card p{font-size:0.95rem}
}
@media(max-width:480px){
  .nav-wrap{padding:0 16px}
  .sec{padding:46px 16px}
  .hero{padding:58px 16px 44px}
  .hero h1{font-size:2.5rem}
  .hero p{font-size:1rem}
  .hero-badge{font-size:0.83rem}
  .feat-card{padding:24px 18px}
  .tool-card,.why-card,.blog-card,.val-card{padding:22px 18px}
  .form-box{padding:24px 18px}
  .stats-row{border-radius:12px}
  .stat{padding:20px 10px}
  .stat .n{font-size:1.8rem}
  .stat .l{font-size:0.74rem}
  .foot-grid{grid-template-columns:1fr;gap:22px}
  .foot-bot{flex-direction:column;align-items:flex-start}
  .tools-grid,.why-grid,.blog-grid,.val-grid{grid-template-columns:1fr}
  .term-body{font-size:0.85rem}
  .mini-stats{grid-template-columns:1fr 1fr} 
  .stitle{font-size:1.9rem}
}
@media(max-width:360px){
  .hero h1{font-size:2.2rem}
  .stitle{font-size:1.75rem}
  .logo-name{font-size:1.15rem}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}



















/* qr