/* =========================================================
   SecureOrder.co — Design System
   ========================================================= */
:root{
  --navy-950:#0a0a1a;
  --navy-900:#0f0e24;
  --purple-900:#1a1440;
  --purple-700:#4c3fd9;
  --purple-600:#5b4de8;
  --purple-500:#6d5df5;
  --purple-400:#8b7bff;
  --indigo-glow:#7c6cf0;
  --white:#ffffff;
  --gray-50:#f7f7fb;
  --gray-100:#eef0f7;
  --gray-300:#c9ccdb;
  --gray-500:#6b7086;
  --gray-700:#3a3d52;
  --gray-900:#16172b;
  --green-100:#e3f7ec; --green-600:#1fa15a;
  --blue-100:#e6f0ff;  --blue-600:#2f6fed;
  --pink-100:#ffe6ee;  --pink-600:#e23577;
  --orange-100:#fff1e2;--orange-600:#e8830f;
  --purple-100:#efeaff;--purple-ic:#6d5df5;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-card:0 10px 30px rgba(20,15,60,0.08);
  --shadow-card-hover:0 16px 40px rgba(20,15,60,0.14);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  color:var(--gray-900);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:1280px;margin:0 auto;padding:0 24px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:12px;font-weight:600;font-size:15px;
  border:none;transition:all .2s ease;white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--purple-600),var(--purple-500));
  color:#fff;box-shadow:0 8px 20px rgba(93,79,232,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(93,79,232,.45);}
.btn-outline{
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;
}
.btn-outline:hover{background:rgba(255,255,255,.16);}
.btn-light{background:var(--white);color:var(--purple-600);}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);}
.btn-block{width:100%;justify-content:center;}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,26,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff;}
.logo .logo-icon{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--purple-500),var(--purple-700));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(109,93,245,.5);
}
.logo span{color:var(--purple-400);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{color:var(--gray-300);font-weight:500;font-size:15px;transition:color .2s;position:relative;}
.nav-links a:hover{color:#fff;}
.nav-actions{display:flex;align-items:center;gap:16px;}
.hamburger{display:none;background:none;border:none;color:#fff;font-size:24px;}
.dropdown{position:relative;}
.dropdown-menu{
  position:absolute;top:130%;left:0;background:var(--navy-900);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;min-width:200px;
  padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:all .2s ease;box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-menu a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;}
.dropdown-menu a:hover{background:rgba(255,255,255,.06);}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(circle at 15% 20%,rgba(124,108,240,.35),transparent 45%),
    radial-gradient(circle at 85% 60%,rgba(109,93,245,.28),transparent 50%),
    linear-gradient(180deg,var(--navy-950),var(--purple-900) 120%);
  padding:90px 0 70px;color:#fff;position:relative;overflow:hidden;
}
.hero-content{text-align:center;max-width:820px;margin:0 auto;}
.hero h1{font-size:clamp(32px,5vw,52px);font-weight:800;line-height:1.15;margin-bottom:18px;}
.hero h1 .accent{
  background:linear-gradient(135deg,var(--purple-400),#a99bff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{font-size:18px;color:var(--gray-300);margin-bottom:8px;}
.search-box{
  display:flex;gap:10px;max-width:680px;margin:34px auto 0;
  background:#fff;border-radius:16px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.search-box input{
  flex:1;border:none;outline:none;padding:14px 16px;font-size:15px;border-radius:10px;color:var(--gray-900);
}
.trust-badges{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  max-width:1100px;margin:56px auto 0;
}
.trust-badge{display:flex;align-items:flex-start;gap:14px;text-align:left;}
.trust-badge .icon{
  width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid rgba(255,255,255,.12);
}
.trust-badge h4{font-size:15px;margin-bottom:4px;color:#fff;}
.trust-badge p{font-size:13.5px;color:var(--gray-300);margin:0;}

/* ---------- Sections ---------- */
.section{padding:64px 0;}
.section-grid{display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:24px;align-items:start;}
.panel{
  background:var(--gray-50);border:1px solid var(--gray-100);
  border-radius:var(--radius-lg);padding:28px;
}
.panel h2{font-size:22px;font-weight:800;margin-bottom:20px;}

/* help category grid */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.help-card{
  background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-md);
  padding:20px;transition:all .2s ease;box-shadow:var(--shadow-card);
}
.help-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--purple-400);}
.help-card .icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;font-size:19px;
}
.help-card h3{font-size:15.5px;font-weight:700;margin-bottom:4px;}
.help-card p{font-size:13px;color:var(--gray-500);}
.view-all{
  grid-column:1/-1;text-align:center;margin-top:6px;
  background:#fff;border:1.5px solid var(--purple-500);color:var(--purple-600);
  border-radius:12px;padding:13px;font-weight:700;
}
.view-all:hover{background:var(--purple-100);}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--gray-100);}
.faq-question{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:16px 4px;background:none;border:none;font-weight:600;font-size:15px;text-align:left;
}
.faq-question .chev{transition:transform .25s ease;color:var(--purple-500);}
.faq-item.open .chev{transform:rotate(90deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:14px;color:var(--gray-500);}
.faq-item.open .faq-answer{max-height:220px;padding-bottom:16px;}

/* popular links */
.link-item{
  display:flex;align-items:center;gap:14px;padding:14px 6px;
  border-bottom:1px solid var(--gray-100);transition:background .2s;
}
.link-item:last-child{border-bottom:none;}
.link-item:hover{background:var(--gray-50);border-radius:10px;}
.link-item .icon{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.link-item h4{font-size:14.5px;font-weight:700;}
.link-item p{font-size:12.5px;color:var(--gray-500);}
.link-item .arrow{margin-left:auto;color:var(--gray-300);}

/* icon color variants */
.bg-purple{background:var(--purple-100);color:var(--purple-ic);}
.bg-green{background:var(--green-100);color:var(--green-600);}
.bg-blue{background:var(--blue-100);color:var(--blue-600);}
.bg-pink{background:var(--pink-100);color:var(--pink-600);}
.bg-orange{background:var(--orange-100);color:var(--orange-600);}

/* CTA strip */
.cta-strip{
  background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius-lg);
  padding:28px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
  margin:0 auto 64px;max-width:1280px;
}
.cta-strip .left{display:flex;align-items:center;gap:16px;}
.cta-strip .icon-round{
  width:56px;height:56px;border-radius:50%;background:var(--purple-100);color:var(--purple-ic);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.cta-strip h3{font-size:18px;font-weight:800;}
.cta-strip p{font-size:13.5px;color:var(--gray-500);}
.cta-actions{display:flex;gap:12px;}
.btn-ghost{background:#fff;border:1.5px solid var(--gray-100);color:var(--gray-900);}
.btn-ghost:hover{border-color:var(--purple-400);}

/* ---------- Footer ---------- */
footer{background:var(--navy-950);color:var(--gray-300);padding:44px 0 24px;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;}
.footer-links{display:flex;gap:26px;flex-wrap:wrap;}
.footer-links a{font-size:14px;color:var(--gray-300);}
.footer-links a:hover{color:#fff;}
.footer-social{display:flex;gap:12px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);
}
.footer-social a:hover{background:var(--purple-600);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);margin-top:28px;padding-top:20px;
  font-size:13px;color:var(--gray-500);text-align:center;
}

/* ---------- Generic inner pages ---------- */
.page-hero{
  background:linear-gradient(180deg,var(--navy-950),var(--purple-900));
  color:#fff;padding:64px 0;text-align:center;
}
.page-hero h1{font-size:clamp(28px,4vw,42px);font-weight:800;}
.page-hero p{color:var(--gray-300);margin-top:10px;}
.content-block{max-width:860px;margin:0 auto;padding:56px 24px;}
.content-block h2{font-size:22px;margin:28px 0 12px;font-weight:800;}
.content-block p, .content-block li{color:var(--gray-700);font-size:15.5px;margin-bottom:10px;}
.content-block ul{padding-left:20px;list-style:disc;}
.breadcrumb{font-size:13px;color:var(--gray-300);margin-bottom:10px;}
.breadcrumb a{color:var(--gray-300);}
.breadcrumb a:hover{color:#fff;}

/* ---------- Forms (support system) ---------- */
.form-card{
  max-width:680px;margin:-60px auto 0;background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card-hover);padding:36px;position:relative;z-index:2;
}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--gray-100);border-radius:10px;
  font-size:14.5px;font-family:inherit;outline:none;transition:border .2s;background:var(--gray-50);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--purple-500);background:#fff;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.file-drop{
  border:1.8px dashed var(--gray-300);border-radius:10px;padding:20px;text-align:center;
  font-size:13.5px;color:var(--gray-500);background:var(--gray-50);cursor:pointer;
}
.alert{padding:14px 16px;border-radius:10px;font-size:14px;margin-bottom:20px;}
.alert-success{background:var(--green-100);color:var(--green-600);}
.alert-error{background:var(--pink-100);color:var(--pink-600);}
.ticket-code{
  display:inline-block;background:var(--purple-100);color:var(--purple-ic);
  padding:6px 14px;border-radius:8px;font-weight:800;letter-spacing:.5px;
}

/* admin */
.admin-shell{display:flex;min-height:100vh;background:var(--gray-50);}
.admin-sidebar{width:240px;background:var(--navy-950);color:#fff;padding:24px 18px;flex-shrink:0;}
.admin-sidebar h2{font-size:16px;margin-bottom:24px;}
.admin-sidebar a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--gray-300);margin-bottom:4px;}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.08);color:#fff;}
.admin-main{flex:1;padding:32px;overflow-x:auto;}
table.tickets{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card);}
table.tickets th,table.tickets td{padding:12px 14px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--gray-100);}
table.tickets th{background:var(--gray-50);font-weight:700;}
.badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;}
.badge-open{background:var(--blue-100);color:var(--blue-600);}
.badge-in_progress{background:var(--orange-100);color:var(--orange-600);}
.badge-resolved,.badge-closed{background:var(--green-100);color:var(--green-600);}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.animate{animation:fadeUp .6s ease both;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .section-grid{grid-template-columns:1fr;}
  .trust-badges{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .nav-links,.nav-actions .btn-primary{display:none;}
  .hamburger{display:block;}
  .help-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .cta-strip{flex-direction:column;align-items:flex-start;}
  .admin-sidebar{display:none;}
}
.mobile-menu{
  display:none;flex-direction:column;gap:4px;background:var(--navy-900);
  padding:16px;border-top:1px solid rgba(255,255,255,.08);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{color:var(--gray-300);padding:10px 6px;font-size:15px;}
.mobile-menu .btn{margin-top:8px;}