/* ===================================================
   Al-Ahsan Tech Studio - Main Stylesheet
   Theme: Dark tech / gradient accent
=================================================== */
:root{
  --bg: #0b0f1a;
  --bg-alt: #121729;
  --card: #161c2f;
  --primary: #6c5ce7;
  --primary-2: #00d2d3;
  --accent: #ff6b6b;
  --text: #e9ecf5;
  --muted: #9aa3b8;
  --border: #232a42;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.container{width:92%;max-width:1180px;margin:0 auto;}
.btn{
  display:inline-block;padding:12px 26px;border-radius:50px;font-weight:600;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;border:none;cursor:pointer;transition:.3s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(108,92,231,.45);}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--text);}
.btn-small{padding:8px 18px;font-size:.9rem;}
.section{padding:80px 0;}
.section-title{text-align:center;margin-bottom:50px;}
.section-title span{color:var(--primary-2);text-transform:uppercase;font-size:.85rem;letter-spacing:2px;font-weight:700;}
.section-title h2{font-size:2.1rem;margin-top:10px;}
.section-title p{color:var(--muted);max-width:600px;margin:12px auto 0;}
.section-alt{background:var(--bg-alt);}

/* Navbar */
.navbar{
  position:sticky;top:0;z-index:999;
  background:rgba(11,15,26,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:74px;max-height:74px;}
.logo{font-size:1.4rem;font-weight:800;display:flex;align-items:center;gap:8px;height:100%;max-height:74px;overflow:hidden;}
.logo span{background:linear-gradient(135deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
/* Logo image — this class MUST be on the <img> tag itself: <img class="site-logo" src="..."> */
.site-logo,
.logo img{
  height:44px !important;   /* <- change this ONE value to resize your logo */
  width:auto !important;
  max-width:170px !important;
  max-height:44px !important;
  object-fit:contain !important;
  display:block;
}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{font-weight:500;color:var(--muted);transition:.2s;}
.nav-links a:hover, .nav-links a.active{color:#fff;}
.nav-toggle{display:none;font-size:1.6rem;background:none;border:none;color:#fff;cursor:pointer;}

/* Hero */
.hero{
  min-height:88vh;display:flex;align-items:center;position:relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(108,92,231,.25), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0,210,211,.2), transparent 45%),
    var(--bg);
}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero h1{font-size:2.8rem;line-height:1.2;margin-bottom:18px;}
.hero h1 .grad{background:linear-gradient(135deg,var(--primary),var(--primary-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{color:var(--muted);margin-bottom:28px;font-size:1.05rem;max-width:520px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.hero-visual{
  background:linear-gradient(145deg,var(--card),var(--bg-alt));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow);
}
.hero-visual .stat{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);}
.hero-visual .stat:last-child{border-bottom:none;}
.hero-visual .stat h3{font-size:1.5rem;color:var(--primary-2);}
.hero-visual .stat p{color:var(--muted);font-size:.85rem;}

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

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;transition:.3s;position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);border-color:var(--primary);box-shadow:var(--shadow);}
.card .icon{
  width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));font-size:1.4rem;margin-bottom:18px;
}
.card h3{margin-bottom:10px;font-size:1.15rem;}
.card p{color:var(--muted);font-size:.95rem;}

.project-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.3s;}
.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--primary-2);}
.project-card img{height:190px;object-fit:cover;width:100%;background:#1c2340;}
.project-card .body{padding:20px;}
.tag{display:inline-block;background:rgba(108,92,231,.15);color:var(--primary-2);padding:4px 12px;border-radius:20px;font-size:.75rem;margin:4px 6px 0 0;}

/* Forms */
.form-box{
  max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);
}
.form-box h2{margin-bottom:6px;}
.form-box p.sub{color:var(--muted);margin-bottom:26px;font-size:.9rem;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;margin-bottom:8px;font-size:.9rem;color:var(--muted);}
.form-group input, .form-group select, .form-group textarea{
  width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-alt);color:var(--text);font-size:.95rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none;border-color:var(--primary);}
.form-note{font-size:.8rem;color:var(--muted);margin-top:8px;}
.form-box .btn{width:100%;text-align:center;margin-top:8px;}
.form-footer{text-align:center;margin-top:20px;color:var(--muted);font-size:.9rem;}
.alert{padding:14px 18px;border-radius:8px;margin-bottom:20px;font-size:.9rem;}
.alert-success{background:rgba(0,210,211,.12);border:1px solid var(--primary-2);color:var(--primary-2);}
.alert-error{background:rgba(255,107,107,.12);border:1px solid var(--accent);color:var(--accent);}

/* Dashboard / Community layout */
.dash-wrap{display:grid;grid-template-columns:260px 1fr;gap:30px;min-height:70vh;}
.dash-sidebar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;height:fit-content;}
.dash-sidebar h4{margin-bottom:16px;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;}
.dash-sidebar a{display:block;padding:10px 12px;border-radius:8px;margin-bottom:6px;color:var(--text);}
.dash-sidebar a:hover, .dash-sidebar a.active{background:var(--bg-alt);color:var(--primary-2);}
.post-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:20px;}
.post-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:flex;align-items:center;justify-content:center;font-weight:700;}
.post-actions{display:flex;gap:20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:.9rem;}
.post-actions button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;display:flex;gap:6px;align-items:center;}
.post-actions button:hover{color:var(--primary-2);}
.comment{padding:10px 0;border-top:1px solid var(--border);font-size:.9rem;}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:.9rem;}
th{background:var(--bg-alt);color:var(--muted);text-transform:uppercase;font-size:.75rem;}
.badge{padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600;}
.badge-pending{background:rgba(255,193,7,.15);color:#ffc107;}
.badge-approved{background:rgba(0,210,211,.15);color:var(--primary-2);}
.badge-rejected{background:rgba(255,107,107,.15);color:var(--accent);}

/* Footer */
footer{background:var(--bg-alt);border-top:1px solid var(--border);padding:50px 0 20px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px;}
.footer-grid h4{margin-bottom:16px;font-size:1rem;}
.footer-grid a{color:var(--muted);display:block;margin-bottom:10px;font-size:.9rem;}
.footer-grid a:hover{color:var(--primary-2);}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid var(--border);color:var(--muted);font-size:.85rem;}
.footer-bottom strong{color:var(--primary-2);}

/* Teematy AI Widget */
#teematy-toggle{
  position:fixed;bottom:24px;right:24px;z-index:1000;
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(108,92,231,.5);font-size:1.5rem;color:#fff;border:none;
  animation:pulse 2.5s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(108,92,231,.5);}70%{box-shadow:0 0 0 16px rgba(108,92,231,0);}100%{box-shadow:0 0 0 0 rgba(108,92,231,0);}}
#teematy-box{
  position:fixed;bottom:100px;right:24px;width:340px;max-width:90vw;height:460px;max-height:70vh;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);z-index:1000;display:none;flex-direction:column;overflow:hidden;
}
#teematy-box.open{display:flex;}
.teematy-header{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));padding:16px 18px;
  display:flex;align-items:center;gap:10px;
}
.teematy-header .dot{width:9px;height:9px;background:#00ff9d;border-radius:50%;}
.teematy-header h4{font-size:.95rem;}
.teematy-header p{font-size:.72rem;opacity:.9;}
.teematy-header .close{margin-left:auto;cursor:pointer;background:none;border:none;color:#fff;font-size:1.1rem;}
#teematy-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.t-msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:.87rem;}
.t-bot{background:var(--bg-alt);align-self:flex-start;border-bottom-left-radius:2px;}
.t-user{background:linear-gradient(135deg,var(--primary),var(--primary-2));align-self:flex-end;border-bottom-right-radius:2px;}
.teematy-input{display:flex;border-top:1px solid var(--border);}
.teematy-input input{flex:1;border:none;background:var(--bg-alt);color:var(--text);padding:14px;font-size:.88rem;}
.teematy-input input:focus{outline:none;}
.teematy-input button{background:none;border:none;color:var(--primary-2);padding:0 18px;cursor:pointer;font-size:1.1rem;}
.teematy-suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;}
.teematy-suggest span{background:var(--bg-alt);border:1px solid var(--border);padding:6px 12px;border-radius:20px;font-size:.75rem;cursor:pointer;color:var(--muted);}
.teematy-suggest span:hover{color:var(--primary-2);border-color:var(--primary-2);}

/* Responsive */
@media(max-width:900px){
  .hero .container{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .dash-wrap{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .nav-links{
    position:fixed;top:74px;left:0;right:0;background:var(--bg-alt);flex-direction:column;
    padding:20px;display:none;border-bottom:1px solid var(--border);z-index:998;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero h1{font-size:2rem;}
}