/* progotee.css
   Eye-comfortable bluish, white, and light-red theme.
   Responsive, accessible, subtle animations.
*/

/* ---- Color palette / variables ---- */
:root{
    --bg: #f6f9fc;                /* very light blue-gray background */
    --card: #ffffff;              /* white cards */
    --muted: #6b7b8c;             /* muted text */
    --blue: #2b6cb0;              /* primary blue */
    --blue-soft: #5b8fd6;         /* softer blue for accents */
    --blue-light: #e8f2fb;        /* pale blue backgrounds */
    --accent-red: #f26b6b;        /* light red accent (for badges / live) */
    --accent-red-soft: #fde8e8;   /* pale red */
    --glass: rgba(255,255,255,0.6);
    --radius: 12px;
    --shadow-sm: 0 6px 18px rgba(39,61,86,0.08);
    --shadow-md: 0 10px 30px rgba(39,61,86,0.10);
    --max-width: 1200px;
    --container-pad: 20px;
    --text: #123047;
  }
  
  /* ---- Global reset / base ---- */
  * { box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(180deg, var(--bg), #ffffff 60%);
    color: var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* container */
  .container{
    width: calc(100% - 2 * var(--container-pad));
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-pad);
  }
  
  /* Utility */
  .section-header { text-align:center; margin-bottom:28px; }
  .section-header h2{ margin:0; font-size:1.9rem; color:var(--text); letter-spacing: -0.01em;}
  .section-divider{
    height:4px;
    width:72px;
    background: linear-gradient(90deg,var(--blue),var(--blue-soft));
    margin:14px auto 0;
    border-radius:4px;
  }
  
  /* ---- Buttons ---- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    border: none;
    cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: var(--shadow-sm);
    color: white;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-primary{
    background: linear-gradient(180deg,var(--blue),var(--blue-soft));
  }
  .btn-primary:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .btn-secondary{
    background: white;
    color: var(--blue);
    border: 1px solid rgba(43,108,176,0.12);
  }
  .btn-secondary i{ font-size:0.95rem; }
  
  /* ---- Hero ---- */
  .progotee-hero{
    padding:70px 0;
    background: linear-gradient(180deg, rgba(235,244,255,0.9), rgba(255,255,255,0.85));
  }
  .hero-content{
    display:grid;
    grid-template-columns: 1fr 420px;
    gap:28px;
    align-items:center;
  }
  .hero-text h1{
    font-size:2.2rem;
    margin:0 0 12px;
    color: var(--text);
  }
  .hero-text p{
    margin:0 0 18px;
    color:var(--muted);
    font-size:1rem;
    max-width: 58ch;
  }
  
  /* ---- News dashboard visual ---- */
  .news-dashboard{
    background: linear-gradient(180deg,var(--card), var(--blue-light));
    border-radius:var(--radius);
    padding:14px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(43,108,176,0.06);
  }
  .news-interface{ display:flex; flex-direction:column; gap:12px; }
  .news-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 8px;
  }
  .news-header h3{ margin:0; font-size:1.05rem; color:var(--blue); }
  .live-badge{
    background: linear-gradient(90deg,var(--accent-red), #ff8b8b);
    color:white;
    padding:6px 10px;
    border-radius:999px;
    font-weight:700;
    font-size:0.78rem;
    box-shadow: 0 6px 14px rgba(242,107,107,0.12);
  }
  
  /* news feed list */
  .news-feed{ display:flex; flex-direction:column; gap:8px; padding:4px 6px 10px; }
  .news-item{
    display:flex;
    gap:10px;
    align-items:center;
    background: rgba(255,255,255,0.55);
    padding:10px;
    border-radius:10px;
    transition: transform .18s ease, opacity .25s ease;
    opacity:0.9;
    border: 1px solid rgba(10,36,66,0.03);
  }
  .news-item p{ margin:0; font-size:0.95rem; color:var(--text); flex:1; }
  .news-item .news-time{ font-size:0.78rem; color:var(--muted); white-space:nowrap; }
  .news-badge{
    font-size:0.7rem;
    padding:6px 8px;
    border-radius:8px;
    background: var(--blue-light);
    color: var(--blue);
    font-weight:700;
  }
  .news-item.breaking{
    background: linear-gradient(90deg, rgba(242,107,107,0.08), rgba(255,255,255,0.6));
    border-left:4px solid var(--accent-red);
  }
  .news-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm); opacity:1; }
  
  /* ---- Features Section ---- */
  .features-section{ padding:48px 0 36px; }
  .features-grid{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:18px;
  }
  .feature-card{
    background:var(--card);
    border-radius:14px;
    padding:18px;
    text-align:center;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(10,36,66,0.03);
  }
  .feature-icon{
    width:64px; height:64px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    margin-bottom:12px;
    background: linear-gradient(180deg,var(--blue-light), #ffffff);
    font-size:1.4rem;
    color:var(--blue);
  }
  .feature-card h3{ margin:0 0 8px; font-size:1.05rem; }
  .feature-card p{ margin:0; color:var(--muted); font-size:0.94rem; }
  
  /* ---- Categories ---- */
  .categories-section{ padding:36px 0; }
  .categories-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:14px;
  }
  .category-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:14px;
    border-radius:12px;
    background: linear-gradient(180deg, var(--card), var(--blue-light));
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(43,108,176,0.04);
  }
  .category-card i{
    font-size:1.6rem;
    margin-top:4px;
    color:var(--blue);
  }
  .category-card h4{ margin:0 0 6px; }
  .category-card p{ margin:0; color:var(--muted); font-size:0.92rem; }
  
  /* ---- Final CTA ---- */
  .final-cta{
    padding:48px 0;
    background: linear-gradient(180deg, rgba(91,143,214,0.06), rgba(242,107,107,0.02));
    border-top: 1px solid rgba(43,108,176,0.02);
  }
  .final-cta-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
  }
  .final-cta-content h2{ margin:0; font-size:1.5rem; color:var(--text); }
  .final-cta-content p{ margin:0; color:var(--muted); max-width:70ch; }
  
  /* CTA buttons wrapper */
  .cta-buttons{ display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; justify-content:center; }
  
  /* ---- Footer spacing fix (if footer included) ---- */
  footer{ margin-top:28px; }
  
  /* ---- Scroll animation helpers (works with progotee.js) ---- */
  .animate-on-scroll{
    opacity:0;
    transform: translateY(18px) scale(0.996);
    transition: transform 560ms cubic-bezier(.2,.9,.3,1), opacity 420ms ease;
    will-change: transform, opacity;
  }
  .animate-on-scroll.animated{
    opacity:1;
    transform: translateY(0) scale(1);
  }
  
  /* ---- News ticker fade (progotee.js toggles opacity) ---- */
  .news-feed .news-item{
    transition: opacity 600ms ease, transform 220ms ease;
  }
  
  /* ---- Small screens / responsiveness ---- */
  @media (max-width: 980px){
    .hero-content{ grid-template-columns: 1fr 320px; gap:18px; }
    .features-grid{ grid-template-columns: repeat(2,1fr); }
    .categories-grid{ grid-template-columns: repeat(2,1fr); }
  }
  @media (max-width: 720px){
    .hero-content{ grid-template-columns: 1fr; text-align:center; }
    .hero-visual{ order: -1; margin-bottom:18px; }
    .features-grid{ grid-template-columns: 1fr; }
    .categories-grid{ grid-template-columns: 1fr; }
    .news-dashboard{ width:100%; }
    .section-header h2{ font-size:1.35rem; }
    .hero-text h1{ font-size:1.6rem; }
    .final-cta-content h2{ font-size:1.25rem; }
  }
  
  /* Accessibility tweaks */
  :focus{ outline: 3px solid rgba(91,143,214,0.18); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){
    .animate-on-scroll,
    .news-item,
    .btn{ transition:none !important; animation:none !important; }
  }
  
  /* small helpers */
  .text-muted{ color:var(--muted); font-size:0.9rem; }
  .kicker{ font-size:0.82rem; color:var(--blue); font-weight:700; }
  
  /* End of progotee.css */