/* ==========================================================================
   Global variables & reset
   ========================================================================== */
:root{
  --primary: #1e40af;
  --primary-600: #1b3aa6;
  --secondary: #3b82f6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #dc2626;
  --muted: #6b7280;
  --bg: #ffffff;
  --surface: #f8fafc;
  --text: #1f2937;
  --rounded: .5rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 4px 16px rgba(16,24,40,.08);
}

/* Basic helpers */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, Poppins, system-ui, -apple-system, sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* ==========================================================================
   Layout: Header
   ========================================================================== */
.header-container{height:95px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;position:relative;overflow:hidden}
.header-container::before{content:'';position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.06), transparent);opacity:.25}
.header-content{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative;z-index:2}
.header-brand{display:flex;align-items:center;gap:1rem}
.logo-icon{width:50px;height:50px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.brand-text .brand-name{font-size:1.4rem;margin:0;font-weight:700}
.brand-text .brand-slogan{font-size:.85rem;margin:0;opacity:.9}
.header-contacts{display:flex;gap:1.25rem}
.contact-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:.5rem;transition:all .2s}
.contact-item:hover{background:rgba(255,255,255,.08)}
.contact-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12)}
.contact-value{color:#fff;font-weight:600}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-section{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:5rem 0}
.hero-content h1{font-size:2.5rem;line-height:1.05;margin:0 0 .5rem}
.hero-content p{font-size:1rem;color:rgba(255,255,255,.9)}
.text-gradient{background:linear-gradient(90deg,var(--primary),var(--warning));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ==========================================================================
   Cards / Feature
   ========================================================================== */
.feature-card{background:var(--bg);border-radius:var(--rounded);padding:1.5rem;box-shadow:var(--shadow);transition:transform .28s ease,box-shadow .28s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(16,24,40,.12)}
.feature-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;background:var(--primary)}

/* ==========================================================================
   Steps / process
   ========================================================================== */
.process-step{padding:1.25rem}
.step-number{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);font-weight:700}

/* ==========================================================================
   Testimonials / avatar
   ========================================================================== */
.avatar-circle{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff}

/* ==========================================================================
   Buttons & CTA
   ========================================================================== */
.btn-primary{background:var(--primary);border:0;color:#fff;padding:.6rem 1rem;border-radius:.5rem}
.btn-outline{background:transparent;border:1px solid rgba(31,41,55,.08);padding:.5rem .9rem;border-radius:.5rem}
.btn{cursor:pointer}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control{display:block;width:100%;padding:.6rem .75rem;border:1px solid #e6e6ea;border-radius:.5rem;background:#fff}
.form-control:focus{outline:0;box-shadow:0 0 0 4px rgba(30,64,175,.06);border-color:var(--primary)}
.form-label{display:block;margin-bottom:.4rem;font-weight:600}

/* Validation */
.is-invalid{border-color:var(--danger)!important}
.invalid-feedback{color:var(--danger);font-size:.875rem;margin-top:.25rem}

/* ==========================================================================
   Utilities
   ========================================================================== */
.min-vh-75{min-height:75vh}
.text-muted{color:var(--muted)}
.small{font-size:.875rem}
.rounded{border-radius:.5rem}
.shadow-custom{box-shadow:0 10px 30px rgba(0,0,0,.12)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:#343a40;color:#adb5bd;padding:2.5rem 0}
.footer a{color:inherit}
.footer a:hover{color:#ffc107}
.footer h4,.footer h5{color:#f8f9fa}

/* ==========================================================================
   Profile-specific helpers
   ========================================================================== */
.card .card-header{background:transparent;border-bottom:0}
.profile-meta .fw-medium{font-weight:600}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:992px){
  .header-content{flex-direction:column;gap:.75rem;padding:.75rem 0}
  .hero-content h1{font-size:2rem}
}
@media (max-width:576px){
  .header-contacts{flex-wrap:wrap;justify-content:center}
  .brand-name{font-size:1.1rem}
  .hero-content{padding:1rem}
}

/* ==========================================================================
   Small helpers for animation and visible states
   ========================================================================== */
.animate-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.animate-on-scroll.animated{opacity:1;transform:none}

/* End of file */

/* ==========================================================================
    Auth pages (login / register / forgot password)
    ========================================================================== */
.auth-page{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:3rem 1rem}
.auth-card{max-width:480px;width:100%;background:var(--bg);border-radius:calc(var(--rounded) - .1rem);box-shadow:0 6px 30px rgba(16,24,40,.08);padding:2rem}
.auth-header{margin-bottom:1rem;text-align:center}
.auth-header h3{margin:0;font-size:1.25rem;font-weight:700}
.auth-header p{margin:0;color:var(--muted);font-size:.95rem}
.auth-form .form-control{margin-top:.5rem}
.auth-actions{display:flex;justify-content:flex-end;margin-top:1rem}

@media (max-width:576px){
   .auth-card{padding:1.25rem}
}