/* =========================================================
   Alano DT Website — Main Stylesheet
   Modern, mobile-first, dependency-free CSS
   ========================================================= */

:root{
  --clr-primary:#6c1fd6;
  --clr-primary-dark:#4a0f9e;
  --clr-primary-light:#9a5ff0;
  --clr-accent:#ffb300;
  --clr-accent-dark:#e69500;
  --clr-dark:#181022;
  --clr-text:#2b2440;
  --clr-muted:#655d7a;
  --clr-bg:#faf8ff;
  --clr-card:#ffffff;
  --clr-border:#e7e1f7;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(24,16,34,.08);
  --shadow-md:0 8px 30px rgba(24,16,34,.12);
  --maxw:1180px;
  --ff:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff);
  color:var(--clr-text);
  background:var(--clr-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--clr-primary);text-decoration:none;}
a:hover{color:var(--clr-primary-dark);}
ul,ol{padding-left:1.3rem;}
h1,h2,h3,h4{line-height:1.25;color:var(--clr-dark);margin:0 0 .6em;}
h1{font-size:2rem;}
h2{font-size:1.6rem;margin-top:2.2em;}
h3{font-size:1.25rem;margin-top:1.6em;}
p{margin:0 0 1em;}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;z-index:999;}
.skip-link:focus{left:10px;top:10px;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--clr-border);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo-link{display:flex;align-items:center;gap:10px;}
.logo-img{border-radius:8px;}
.logo-text{font-size:1.35rem;font-weight:800;color:var(--clr-dark);}
.logo-text span{color:var(--clr-primary);}

.main-nav{display:flex;align-items:center;gap:22px;}
.main-nav a{
  font-weight:600;font-size:.97rem;color:var(--clr-text);
  padding:6px 2px;border-bottom:2px solid transparent;
}
.main-nav a:hover,.main-nav a.active{color:var(--clr-primary);border-color:var(--clr-primary);}
.btn-nav-download{
  background:var(--clr-primary);color:#fff !important;
  padding:10px 20px !important;border-radius:999px;border:none !important;
  box-shadow:var(--shadow-sm);
}
.btn-nav-download:hover{background:var(--clr-primary-dark);}

.menu-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:none;border:1px solid var(--clr-border);
  border-radius:8px;cursor:pointer;
}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--clr-dark);margin:0 auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:14px 30px;border-radius:999px;
  font-weight:700;font-size:1.02rem;cursor:pointer;border:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent-dark));color:#3a2400 !important;box-shadow:0 8px 20px rgba(255,179,0,.35);}
.btn-outline{background:#fff;border:2px solid var(--clr-primary) !important;color:var(--clr-primary) !important;}
.btn-block{display:block;width:100%;text-align:center;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-primary-dark) 100%);
  color:#fff;padding:50px 0 60px;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero h1{color:#fff;font-size:2.3rem;}
.hero p.lead{font-size:1.08rem;color:#efe7ff;max-width:52ch;}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px;}
.hero-badge{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  padding:6px 14px;border-radius:999px;font-size:.85rem;font-weight:600;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;}
.hero-rating{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:.95rem;}
.stars{color:var(--clr-accent);letter-spacing:2px;font-size:1.1rem;}
.hero-media img{border-radius:var(--radius-lg);box-shadow:0 20px 50px rgba(0,0,0,.35);}

/* ---------- App info bar ---------- */
.app-info-bar{
  background:var(--clr-card);border:1px solid var(--clr-border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  margin-top:-34px;position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.app-info-item{padding:16px 10px;text-align:center;border-right:1px solid var(--clr-border);}
.app-info-item:last-child{border-right:none;}
.app-info-item .label{display:block;font-size:.75rem;color:var(--clr-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.app-info-item .value{font-weight:700;color:var(--clr-dark);font-size:.95rem;}

/* ---------- Sections ---------- */
.section{padding:56px 0;}
.section-alt{background:#fff;}
.section-head{max-width:720px;margin:0 auto 34px;text-align:center;}
.section-head h2{margin-top:0;}
.section-head p{color:var(--clr-muted);}
.eyebrow{
  display:inline-block;background:#f1e9ff;color:var(--clr-primary);
  padding:5px 14px;border-radius:999px;font-size:.78rem;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px;
}

/* ---------- Cards / Grid ---------- */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--clr-card);border:1px solid var(--clr-border);
  border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm);
}
.card h3{margin-top:0;}
.card .icon{
  width:46px;height:46px;border-radius:12px;background:#f1e9ff;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:14px;
}

/* ---------- Steps ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;}
.steps li{
  counter-increment:step;position:relative;padding:16px 16px 16px 58px;
  background:#fff;border:1px solid var(--clr-border);border-radius:var(--radius-md);
  margin-bottom:14px;
}
.steps li::before{
  content:counter(step);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;background:var(--clr-primary);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;
}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;}
table.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);}
table.spec-table th,table.spec-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--clr-border);}
table.spec-table th{background:#f6f1ff;color:var(--clr-primary-dark);width:35%;}

/* ---------- Reviews ---------- */
.rating-summary{
  display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--clr-border);
  border-radius:var(--radius-md);padding:26px;box-shadow:var(--shadow-sm);flex-wrap:wrap;
}
.rating-score{font-size:3rem;font-weight:800;color:var(--clr-dark);line-height:1;}
.rating-bars{flex:1;min-width:220px;}
.rating-bar-row{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--clr-muted);margin-bottom:5px;}
.rating-bar-track{flex:1;background:#f0ebfb;border-radius:999px;height:8px;overflow:hidden;}
.rating-bar-fill{background:var(--clr-accent);height:100%;border-radius:999px;}

.review-card{background:#fff;border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm);}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.review-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--clr-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.review-name{font-weight:700;font-size:.95rem;}
.review-meta{font-size:.78rem;color:var(--clr-muted);}
.review-stars{color:var(--clr-accent);font-size:.9rem;}

/* ---------- FAQ ---------- */
.faq-item{background:#fff;border:1px solid var(--clr-border);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;}
.faq-question{
  width:100%;text-align:left;background:none;border:none;padding:18px 22px;
  font-weight:700;font-size:1rem;color:var(--clr-dark);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq-question::after{content:"+";font-size:1.4rem;color:var(--clr-primary);flex-shrink:0;transition:transform .2s ease;}
.faq-item.open .faq-question::after{transform:rotate(45deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 22px;}
.faq-item.open .faq-answer{padding-bottom:18px;}
.faq-answer p{color:var(--clr-muted);margin:0;}

/* ---------- Pros/Cons ---------- */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.proscons .card ul{padding-left:0;list-style:none;}
.proscons .card li{padding:8px 0 8px 28px;position:relative;border-bottom:1px dashed var(--clr-border);}
.proscons .card li:last-child{border-bottom:none;}
.pros li::before{content:"✔";position:absolute;left:0;color:#1c9b5b;font-weight:700;}
.cons li::before{content:"✕";position:absolute;left:0;color:#d64545;font-weight:700;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent-dark));
  border-radius:var(--radius-lg);padding:40px;text-align:center;color:#3a2400;
}
.cta-banner h2{color:#3a2400;margin-top:0;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.85rem;color:var(--clr-muted);padding:14px 0;}
.breadcrumb a{color:var(--clr-muted);}
.breadcrumb a:hover{color:var(--clr-primary);}

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:#fff;border-top:1px solid var(--clr-border);box-shadow:0 -6px 20px rgba(0,0,0,.1);
  padding:10px 16px;display:none;
}
.sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:var(--maxw);margin:0 auto;}
.sticky-cta-text{font-size:.8rem;color:var(--clr-muted);font-weight:600;}
.btn-download-sticky{
  background:var(--clr-primary);color:#fff;padding:11px 20px;border-radius:999px;
  font-weight:700;font-size:.9rem;white-space:nowrap;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--clr-dark);color:#cfc7e2;padding:50px 0 0;margin-top:40px;}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 20px 30px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;
}
.footer-col h4{color:#fff;font-size:.95rem;margin-bottom:14px;}
.footer-col a{display:block;color:#cfc7e2;margin-bottom:9px;font-size:.9rem;}
.footer-col a:hover{color:var(--clr-accent);}
.footer-brand{display:flex;flex-direction:column;gap:10px;}
.footer-brand p{font-size:.85rem;color:#a89fc2;}
.footer-bottom{border-top:1px solid #2e2440;padding:18px 20px;text-align:center;font-size:.8rem;color:#9c93b8;}

/* ---------- Misc content page ---------- */
.content-page{padding:40px 0 60px;}
.content-page h1{margin-bottom:.3em;}
.updated-date{color:var(--clr-muted);font-size:.85rem;margin-bottom:2em;}
.content-page h2{border-bottom:2px solid var(--clr-border);padding-bottom:8px;}
.content-page ul li{margin-bottom:8px;}

/* ---------- Contact form ---------- */
.contact-form{background:#fff;border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-sm);}
.form-row{margin-bottom:16px;}
.form-row label{display:block;font-weight:600;margin-bottom:6px;font-size:.9rem;}
.form-row input,.form-row textarea{
  width:100%;padding:12px 14px;border:1px solid var(--clr-border);border-radius:var(--radius-sm);
  font-family:var(--ff);font-size:.95rem;background:#faf8ff;
}
.form-row textarea{min-height:130px;resize:vertical;}
.form-note{background:#f1e9ff;border-radius:var(--radius-sm);padding:12px 16px;font-size:.85rem;color:var(--clr-primary-dark);}
.alert-success{background:#e6f8ee;color:#177a4d;padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:18px;font-weight:600;}
.alert-error{background:#fdeaea;color:#b3261e;padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:18px;font-weight:600;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .app-info-bar{grid-template-columns:repeat(5,1fr);}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width: 720px){
  .main-nav{
    position:fixed;top:65px;left:0;right:0;bottom:0;background:#fff;
    flex-direction:column;align-items:flex-start;gap:0;padding:10px 20px;
    transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--clr-border) !important;}
  .btn-nav-download{margin-top:12px;text-align:center;}
  .menu-toggle{display:flex;}
  .app-info-bar{grid-template-columns:repeat(2,1fr);}
  .app-info-item:nth-child(2n){border-right:none;}
  .app-info-item{border-bottom:1px solid var(--clr-border);}
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
  .proscons{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .sticky-cta{display:block;}
  body{padding-bottom:64px;}
  .hero h1{font-size:1.7rem;}
}