/*
  style.css
  BenQ Bangladesh — Core stylesheet
  Contains: design tokens, base/reset, header & navigation,
  hero, business solutions, footer, articles, and CTA sections.
*/

:root{

    /* =========================================================
       COLOR CUSTOMIZATION — edit the values below to change the
       website's colors. Every stylesheet in this project pulls
       its colors from these variables (directly, or through the
       "legacy token names" further down which simply point back
       to these same values), so changing a value here updates
       the color everywhere it is used on the site.
    ========================================================= */
    --primary-color: #582E91;        /* main brand color: buttons, links, active tabs, highlights */
    --primary-color-dark: #4A2578;   /* hover/pressed state of the primary color */
    --secondary-color: #C6F135;      /* accent color: badges, small highlights */
    --background-color: #FFFFFF;     /* main page background */
    --white-color: #FFFFFF;          /* pure white, used for card backgrounds, text-on-dark, etc. */
    --text-color: #1C1B1F;           /* main heading / body text color */
    --text-muted-color: #55505E;     /* secondary / paragraph text color */
    --muted-color: #9C96AC;          /* placeholder text, disabled/low-emphasis text */
    --border-color: #E7E3EE;         /* borders, dividers, hairlines */
    --surface-tint: #F3EFFA;         /* light brand-tinted (purple) background used on cards/sections */
    --surface-tint-neutral: #F7F6FA; /* light neutral-gray background used on cards/sections */
    --link-color: #1657E0;           /* inline text links */
    --success-color: #1E8E4C;        /* success messages, "in stock" tags */
    --success-tint: #EEFBF2;         /* light background for success banners */
    --success-border: #BFE6CC;       /* border for success banners */
    --danger-color: #E0472C;         /* discounted price, error/alert text */
    --danger-color-dark: #C4451C;    /* hover/pressed state of the danger color */
    --warning-color: #F5A623;        /* star ratings */
    --whatsapp-color: #25D366;       /* WhatsApp button background */
    --whatsapp-color-dark: #1DA851;  /* WhatsApp button hover */
    --social-facebook-color: #1877F2;
    --social-linkedin-color: #0A66C2;
    --social-youtube-color: #FF0000;
    --header-phone-color: #0B2A4A;    /* header "call us" phone number text */
    --overlay-dark-color: #0C0C10;    /* dark image overlay background (solution cards) */
    --highlight-blue-color: #4FA3FF;  /* "Read More" link accent on dark overlay cards */
    --badge-color: #E4231B;           /* "New" / promo tag text color */
    /* =========================================================
       END COLOR CUSTOMIZATION
    ========================================================= */

    /* Legacy token names — kept so existing CSS rules below (and in
       every other stylesheet) keep working unchanged. Each one simply
       points at a variable from the section above, so you never need
       to edit anything past this point to re-color the site. */
    --brand-purple: var(--primary-color);
    --brand-purple-dark: var(--primary-color-dark);
    --ink: var(--text-color);
    --ink-soft: var(--text-muted-color);
    --line: var(--border-color);
    --paper: var(--background-color);
    --accent-lime: var(--secondary-color);

    /* Layout tokens (not colors) — spacing, radius, fonts, widths */
    --radius: 10px;
    --font-display: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Poppins', 'Segoe UI', sans-serif;
    --container-max: 1200px;
    --container-pad: 28px;
  }

  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; background: var(--paper); font-family: var(--font-body); }

  /* ============ HEADER ============ */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .header-main{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 5px var(--container-pad);
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 36px;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    text-decoration:none;
  }
  .logo img{ height: 64px; width: 94px; display:block; object-fit: contain; }

  .primary-nav{
    display:flex;
    align-items:center;
    gap: 30px;
    flex: 1;
  }
  .primary-nav a{
    position:relative;
    color: var(--ink);
    text-decoration:none;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 8px 0;
    white-space:nowrap;
  }
  .primary-nav a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height: 2px;
    background: var(--brand-purple);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
  }
  .primary-nav a:hover{ color: var(--brand-purple); }
  .primary-nav a:hover::after{ transform: scaleX(1); }
  .primary-nav a.has-dot::before{
    content:"";
    position:absolute;
    top:2px; right:-9px;
    width:6px; height:6px;
    border-radius:50%;
    background: var(--accent-lime);
  }

  .header-actions{
    display:flex;
    align-items:center;
    gap: 6px;
    flex-shrink:0;
    position: relative;
  }

  .icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ink);
    cursor:pointer;
    position:relative;
    transition: background .15s ease, color .15s ease;
  }
  .icon-btn:hover{ background: var(--surface-tint); color: var(--brand-purple); }
  .icon-btn svg{ width:20px; height:20px; }

  .cart-count{
    position:absolute;
    top: 3px; right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--brand-purple);
    color: var(--white-color);
    font-size: 10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  /* Search icon button in the header — opens the search-panel below */
  #searchToggle.active{
    background: var(--surface-tint);
    color: var(--brand-purple);
  }

  /* Search panel — drops open directly beneath the main nav row,
     spanning the full header width, pushing page content down
     rather than overlapping or expanding sideways. */
  .search-panel{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-top: 1px solid transparent;
    transition: max-height .3s ease, opacity .25s ease, border-color .25s ease;
  }
  .search-panel.open{
    max-height: 88px;
    opacity: 1;
    border-top-color: var(--line);
  }
  .search-panel-inner{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 18px var(--container-pad);
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .search-panel-icon{
    width: 20px;
    height: 20px;
    color: var(--ink-soft);
    flex-shrink: 0;
  }
  .search-panel-inner input{
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
  }
  .search-panel-inner input::placeholder{ color: var(--muted-color); }
  .search-panel-close{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #F5F3F9;
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
  }
  .search-panel-close:hover{ background:#ECE8F4; color: var(--ink); }

  .header-phone{
    display:flex;
    align-items:center;
    gap: 10px;
    text-decoration:none;
    color: var(--header-phone-color);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14.5px;
    white-space:nowrap;
    padding: 9px 18px 9px 9px;
    border-radius: 999px;
    background: #E5F1FB;
    transition: background .15s ease;
  }
  .header-phone:hover{ background:#D6E9F8; }
  .header-phone .phone-icon-circle{
    width: 30px;
    height: 30px;
    border-radius:50%;
    background:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .header-phone svg{ width:16px; height:16px; color:var(--link-color); }

  

  .cta-account{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    cursor:pointer;
    font-family: var(--font-body);
    color: var(--ink);
    font-size: 13.5px;
    font-weight:600;
    margin-left: 4px;
    transition: border-color .15s ease, background .15s ease;
  }
  .cta-account:hover{ border-color: var(--brand-purple); background:#F9F7FC; }
  .cta-account .avatar-dot{
    width:24px; height:24px;
    border-radius:50%;
    background: var(--brand-purple);
    color:var(--white-color);
    font-size:11px;
    font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }

  .burger{
    display:none;
    width:40px; height:40px;
    border:none; background:transparent;
    align-items:center; justify-content:center;
    cursor:pointer;
  }
  .burger svg{ width:22px; height:22px; }

  /* ============ RESPONSIVE ============ */
  

  .mobile-nav{
    display:none;
    flex-direction:column;
    border-top:1px solid var(--line);
    padding: 8px 20px 18px;
  }
  .mobile-nav.open{ display:flex; }
  .mobile-nav a{
    color: var(--ink);
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    padding: 12px 4px;
    border-bottom: 1px solid #F1EEF6;
  }
  .mobile-nav a:last-child{ border-bottom:none; }

  /* ============ HERO ============ */
  .hero{
    position: relative;
    width: 100%;
    aspect-ratio: 1350 / 371;
    min-height: 100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background: #EDEBF2;
  }
  .hero img, .hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
  }

  

  /* ============ BUSINESS SOLUTIONS ============ */
  .solutions{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 64px var(--container-pad) 80px;
  }
  .solutions h2{
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    color: var(--ink);
    text-align:center;
    margin: 0 0 40px;
  }
  .solutions-grid{
    display:grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items:stretch;
  }
  .solutions-col{
    display:flex;
    flex-direction:column;
    gap: 20px;
  }
  .sol-card{
    position:relative;
    border-radius: var(--radius);
    overflow:hidden;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration:none;
    background:var(--overlay-dark-color);
    min-height: 260px;
  }
  .sol-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform .35s ease;
  }
  .sol-card:hover img{ transform: scale(1.04); }
  .sol-card::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);
  }
  .sol-card .sol-tag{
    position:relative;
    z-index:2;
    display:inline-block;
    margin: 18px 0 0 18px;
    padding-bottom: 6px;
    color: var(--highlight-blue-color);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight:700;
    letter-spacing:.06em;
  }
  .sol-card .sol-title{
    position:relative;
    z-index:2;
    margin: 0;
    padding: 20px 20px 20px;
    color:var(--white-color);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight:700;
    line-height:1.4;
    transition: padding .35s ease,
                opacity .7s cubic-bezier(.22,.61,.36,1),
                transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .sol-card.large{ min-height: 100%; }
  .sol-card.large .sol-title{ font-size: 18px; padding-right: 60px; }

  .sol-card .sol-readmore-wrap{
    position:relative;
    z-index:2;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height .4s ease, opacity .3s ease;
  }
  .sol-card:hover .sol-readmore-wrap,
  .sol-card:focus-within .sol-readmore-wrap{
    max-height: 90px;
    opacity: 1;
  }
  .sol-card:hover .sol-title,
  .sol-card:focus-within .sol-title{
    padding-bottom: 6px;
  }
  .sol-card .sol-readmore{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-bottom: 24px;
    padding: 10px 24px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.85);
    color: var(--white-color);
    background: rgba(255,255,255,.08);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    backdrop-filter: blur(2px);
    transition: background .2s ease, border-color .2s ease;
  }
  .sol-card:hover .sol-readmore:hover{
    background: rgba(255,255,255,.18);
    border-color: var(--white-color);
  }

  

  /* ============ FIND YOUR BEST PRODUCT ============ */
  .product-finder{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad) 80px;
  }
  .product-finder h2{
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    color: var(--ink);
    text-align:center;
    margin: 0 0 40px;
  }

  /* ============ PORTABLE PROJECTORS PROMO ============ */
  .portable-promo{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 60px var(--container-pad) 80px;
    text-align: center;
  }
  .portable-promo-tag{
    display: inline-block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--badge-color);
    margin-bottom: 10px;
  }
  .portable-promo-subtitle{
    font-family: var(--font-display);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 8px;
  }
  .portable-promo-title{
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 28px;
  }
  .portable-promo-btn{
    display: inline-block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    padding: 12px 40px;
    text-decoration: none;
    margin-bottom: 40px;
    transition: background .2s ease, color .2s ease;
  }
  .portable-promo-btn:hover{
    background: var(--ink);
    color: var(--paper);
  }
  .portable-promo-banner-bleed{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: linear-gradient(180deg, #F3E5D8 0%, #F6ECE3 55%, #FBF7F4 85%, var(--white-color) 100%);
  }
  .portable-promo-banner{
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 982 / 490;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .portable-promo-banner img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ============ FEATURED PRODUCTS ============ */
  .featured-products{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad) 80px;
  }
  .featured-products h2{
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    margin: 0 0 12px;
  }
  .featured-products-subtitle{
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.6;
  }
  .featured-products-grid{
    grid-template-rows: repeat(2, 1fr);
  }

  

  /* ============ PF PRODUCTS GRID ============ */

  

  /* ============ FOOTER ============ */
  .site-footer{
    background: var(--white-color);
    border-top: 1px solid var(--line);
    padding: 56px 0 0;
  }
  .footer-main{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display:grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr;
    gap: 28px;
  }
  .footer-col h4{
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 18px;
  }
  .footer-col ul{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap: 12px;
  }
  .footer-col a{
    color: var(--ink-soft);
    text-decoration:none;
    font-size: 13.5px;
    transition: color .15s ease;
  }
  .footer-col a:hover{ color: var(--brand-purple); }

  .footer-social{
    display:flex;
    flex-direction:column;
    gap: 14px;
  }
  .footer-social-item{
    display:flex;
    align-items:center;
    gap: 10px;
    text-decoration:none;
    color: var(--ink-soft);
    font-size: 13.5px;
  }
  .footer-social-item:hover{ color: var(--brand-purple); }
  .footer-social-icon{
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white-color);
    flex-shrink:0;
  }
  .footer-social-icon svg{ width:16px; height:16px; }
  .footer-social-icon.fb{ background: var(--social-facebook-color); }
  .footer-social-icon.li{ background: var(--social-linkedin-color); }
  .footer-social-icon.yt{ background: var(--social-youtube-color); }

  .footer-bottom{
    max-width: var(--container-max);
    margin: 40px auto 0;
    padding: 20px var(--container-pad) 28px;
    border-top: 1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap: 20px;
    flex-wrap:wrap;
    position:relative;
  }
  .footer-legal{
    font-size: 12px;
    color: var(--ink-soft);
    line-height:1.7;
    max-width: 900px;
  }
  .footer-legal a{
    color: var(--ink-soft);
    text-decoration:none;
  }
  .footer-legal a:hover{ text-decoration:underline; }
  .footer-legal .sep{ margin: 0 6px; color:#C9C2D9; }
  .footer-copy{
    font-size: 12px;
    color: var(--ink-soft);
    white-space:nowrap;
  }
  .footer-copy a{
    color: var(--ink-soft);
    text-decoration:none;
    font-weight:600;
  }
  .footer-copy a:hover{ color: var(--brand-purple); }
  .back-to-top{
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 200;
    width: 48px;
    height: 48px;
    border-radius:50%;
    background: var(--brand-purple);
    color:var(--white-color);
    border:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    font-size: 9px;
    font-weight:700;
    letter-spacing:.03em;
    cursor:pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, background .15s ease, visibility .2s ease;
  }
  .back-to-top.visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .back-to-top:hover{ background: var(--brand-purple-dark); }
  .back-to-top svg{ width:15px; height:15px; }

  

  
  

  /* ============ POPULAR ARTICLES ============ */
  .articles{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 64px var(--container-pad) 80px;
  }
  .articles h2{
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 700;
    color: var(--ink);
    text-align:center;
    margin: 0 0 40px;
  }
  .articles-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .article-card{
    text-decoration:none;
    color:inherit;
    display:block;
  }
  .article-thumb{
    width:100%;
    aspect-ratio: 380/280;
    border-radius: var(--radius);
    overflow:hidden;
    margin-bottom: 18px;
  }
  .article-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform .35s ease;
  }
  .article-card:hover .article-thumb img{ transform: scale(1.05); }
  .article-tag{
    font-size: 12.5px;
    font-weight:700;
    color: var(--brand-purple);
    letter-spacing:.02em;
    margin-bottom: 10px;
    display:block;
  }
  .article-title{
    font-family: var(--font-body);
    font-size: 18px;
    font-weight:700;
    color: var(--ink);
    line-height:1.4;
    margin: 0 0 12px;
  }
  .article-card:hover .article-title{ color: var(--brand-purple); }
  .article-date{
    font-size: 12.5px;
    color: var(--muted-color);
  }

  

  /* ============ SUCCESS STORY ============ */
  .success-wrap{
    background: #F5F4F7;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .success-story{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 64px var(--container-pad) 72px;
  }
  .success-story h2{
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 700;
    color: var(--ink);
    text-align:center;
    margin: 0 0 40px;
  }

  /* ============ SHOPPING ADVANTAGES ============ */
  .shopping-advantages{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px 0;
  }
  .shopping-advantages h2{
    font-family: var(--font-display);
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    color: var(--ink);
    text-align: center;
    margin: 0 0 48px;
  }
  .advantages-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .advantage-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .advantage-icon{
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
  }
  .advantage-icon svg{ width: 100%; height: 100%; }
  .advantage-icon img{ width: 250px; height: 100%; object-fit: contain; }
  .advantage-item h3{
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
  }
  .advantage-item p{
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
    max-width: 260px;
  }

  /* ============ HELP CTA ============ */
  .help-cta{
    background: #F5F4F7;
    padding: 72px 0;
  }
  .help-cta-inner{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
  }
  .help-cta-head{
    margin-bottom: 36px;
  }
  .help-cta h2{
    font-family: var(--font-display);
    color: var(--ink);
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight:700;
    line-height:1.25;
    margin: 0 0 10px;
  }
  .help-cta p{
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 15px;
    line-height:1.65;
    max-width: 520px;
    margin: 0;
  }
  .help-cta-grid{
    display:flex;
    flex-wrap:wrap;
    gap: 20px;
  }
  .help-card{
    flex: 1 1 220px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap: 16px;
    text-decoration:none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .help-card:hover{
    background: var(--paper);
    border-color: var(--brand-purple);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(88,46,145,.12);
  }
  .help-card .help-icon{
    width: 40px;
    height: 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--brand-purple);
  }
  .help-card .help-icon svg{ width:32px; height:32px; stroke-width:1.6; }
  .help-card span:last-child{
    color: var(--ink);
    font-family: var(--font-body);
    font-weight:700;
    font-size: 15px;
    letter-spacing:.01em;
  }

  /* ============ TEXT REVEAL ANIMATION ============ */
  /* Applied at runtime by js/animate.js to headings and paragraphs
     across the site. Elements fade + slide up into place the first
     time they enter the viewport (or immediately on load if already
     visible above the fold). */
  .reveal{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay, 0s);
  }

  .reveal.in-view{
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce){
    .reveal{
      opacity: 1;
      transform: none;
      transition: none;
    }
  }