/* ==========================================================================
   OneChain TMS — Design System (rewritten from actual HTML structure)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;800;900&display=swap');

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Red Hat Display',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;color:#333;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}
input{font:inherit}

/* --- Variables --- */
:root{
  --purple-900:#3b0f80;
  --purple-800:#4a1a9e;
  --purple:#521EB0;
  --purple-mid:#8855E7;
  --purple-light:#C49EFA;
  --purple-100:#EDE9FE;
  --purple-50:#F5F3FF;
  --text:#333;
  --text-secondary:#555;
  --text-light:#94a3b8;
  --border:#e2e8f0;
  --bg:#f8fafc;
  --bg-dark:#1a1a2e;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.07);
  --shadow-lg:0 12px 24px rgba(0,0,0,.1);
  --transition:200ms ease;
}

/* --- Scroll offset for fixed navbar --- */
section[id]{scroll-margin-top:100px}

/* --- Container --- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* --- Typography --- */
h1,h2,h3,h4{font-weight:700;line-height:1.2;color:var(--text)}
h1{font-size:clamp(2rem,5vw,3.25rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.5vw,2.25rem);letter-spacing:-.01em}
h3{font-size:1.25rem;font-weight:600}
p{color:var(--text-secondary);line-height:1.7}
strong{font-weight:700;color:var(--text)}
.check-item span strong{color:var(--text)}

/* --- Section Header (centered) --- */
.section-header{text-align:center;margin-bottom:48px}
.section-header__title{margin-bottom:12px}
.section-header__subtitle{font-size:1.125rem;color:var(--text-secondary)}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:10px;font-weight:600;font-size:.9375rem;transition:all var(--transition);white-space:nowrap;border:2px solid transparent}
.btn--primary{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn--primary:hover{background:var(--purple-800);border-color:var(--purple-800)}
.btn--secondary{background:#fff;color:var(--purple);border-color:var(--purple)}
.btn--secondary:hover{background:var(--purple-50)}
.btn--outline{background:transparent;color:var(--purple);border-color:var(--border)}
.btn--outline:hover{border-color:var(--purple);background:var(--purple-50)}
.btn--small{padding:8px 20px;font-size:.875rem}
.btn--lg{padding:16px 36px;font-size:1.0625rem}
.btn--full{width:100%}

/* --- Tag --- */
.tag{display:inline-block;padding:4px 16px;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:var(--purple-100);color:var(--purple)}

/* --- Check Item --- */
.check-item{display:flex;align-items:flex-start;gap:12px}
.check-item+.check-item{margin-top:10px}
.check-item__icon{flex-shrink:0;width:24px;height:24px;margin-top:2px}
.check-item span{font-size:1rem;font-weight:500;color:var(--text);line-height:1.5}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:box-shadow var(--transition)}
.navbar--scrolled{box-shadow:var(--shadow-md)}
.navbar__inner{display:flex;align-items:center;height:72px;gap:32px}
.navbar__brand{flex-shrink:0}
.navbar__logo{height:24px;width:auto}
.navbar__links{display:flex;align-items:center;gap:4px;margin-left:auto;list-style:none}
.navbar__link{padding:8px 16px;font-size:.9375rem;font-weight:500;color:var(--text-secondary);border-radius:8px;transition:color var(--transition),background var(--transition)}
.navbar__link:hover{color:var(--text);background:var(--purple-50)}
.navbar__chevron{margin-left:4px;transition:transform var(--transition)}

/* Dropdown */
.navbar__dropdown{position:relative}
.navbar__dropdown-toggle{display:inline-flex;align-items:center}
.navbar__dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:260px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);list-style:none;z-index:100}
.navbar__dropdown:hover .navbar__dropdown-menu{display:block}
.navbar__dropdown:hover .navbar__chevron{transform:rotate(180deg)}
.navbar__dropdown-link{display:block;padding:10px 16px;font-size:.9375rem;color:var(--text-secondary);border-radius:8px;transition:all var(--transition)}
.navbar__dropdown-link:hover{background:var(--purple-50);color:var(--purple)}

.navbar__cta{display:flex;align-items:center;gap:12px;margin-left:16px}

/* Language switcher */
.navbar__lang{display:flex;align-items:center;gap:6px;margin-left:12px;font-size:.8125rem;font-weight:500}
.navbar__lang-link{color:var(--text-light);padding:4px 6px;border-radius:4px;transition:color var(--transition)}
.navbar__lang-link:hover{color:var(--text)}
.navbar__lang-link--active{color:var(--purple);font-weight:700}
.navbar__lang-sep{color:var(--border);font-size:.75rem}

/* Mobile toggle */
.navbar__mobile-toggle{display:none;flex-direction:column;gap:5px;padding:8px;width:44px;height:44px;justify-content:center;align-items:center;border-radius:8px;transition:background var(--transition);-webkit-tap-highlight-color:transparent}
.navbar__mobile-toggle:hover,.navbar__mobile-toggle:active{background:var(--purple-50)}
.navbar__mobile-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .25s ease}
.navbar__mobile-toggle.is-active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.navbar__mobile-toggle.is-active span:nth-child(2){opacity:0}
.navbar__mobile-toggle.is-active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile menu */
.navbar__mobile-menu{display:none;position:fixed;top:72px;left:0;right:0;height:calc(100vh - 72px);height:calc(100dvh - 72px);z-index:999;background:#fff;padding:32px 24px;overflow-y:auto;flex-direction:column;border-top:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,.08)}
.navbar__mobile-menu.is-open{display:flex}
.navbar__mobile-links{display:flex;flex-direction:column;gap:2px;list-style:none}
.navbar__mobile-link{display:block;padding:16px 16px;font-size:1.125rem;font-weight:600;color:var(--text);border-radius:var(--radius);transition:all var(--transition)}
.navbar__mobile-link:hover,.navbar__mobile-link:active{background:var(--purple-50);color:var(--purple)}
.navbar__mobile-lang{padding:16px 0;border-top:1px solid var(--border);margin-top:24px}
.navbar__mobile-lang-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-size:.9375rem;font-weight:500;color:var(--text-secondary);border-radius:8px;transition:all var(--transition)}
.navbar__mobile-lang-btn:hover{background:var(--purple-50);color:var(--text)}
.navbar__mobile-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:24px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:120px 0 64px;background:linear-gradient(160deg,#F5F3FF 0%,#EDE9FE 40%,#E0D4FF 70%,#F5F3FF 100%)}
.hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero__title{margin-bottom:32px}
.hero__checks{margin-bottom:36px}
.hero__visual{display:flex;justify-content:center;align-items:center}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{padding:48px 0;overflow:hidden;position:relative;background:#fff}
.marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee-scroll 35s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__strip{display:flex;align-items:center;gap:56px;padding:0 28px}
.marquee__logo{height:40px;max-width:130px;width:auto;object-fit:contain;filter:grayscale(100%);opacity:.5;transition:all var(--transition)}
.marquee__logo:hover{filter:none;opacity:1}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ==========================================================================
   FEATURES GRID
   ========================================================================== */
.features-grid{padding:80px 0}
.features-grid__cards{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-bottom:48px}
.features-grid__cta{text-align:center}
.feature-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-card__illustration{display:flex;align-items:center;justify-content:center;height:180px;background:var(--purple-50);padding:24px;overflow:hidden}
.feature-card__illustration img{max-height:100%;object-fit:contain}
.feature-card__title{padding:20px 24px 8px;font-size:1.0625rem}
.feature-card__desc{padding:0 24px 24px;font-size:.9375rem;color:var(--text-secondary);line-height:1.6}

/* ==========================================================================
   FEATURE ROWS
   ========================================================================== */
.feature-row{padding:64px 0}
.feature-row__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Feature rows used directly (without __inner wrapper, e.g. on feature pages) */
.section .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:0}
.feature-row--reversed .feature-row__inner,
.section .feature-row--reversed{direction:rtl}
.feature-row--reversed .feature-row__content,
.section .feature-row--reversed .feature-row__content{direction:ltr}
.feature-row--reversed .feature-row__visual,
.section .feature-row--reversed .feature-row__visual{direction:ltr}
.feature-row__content .tag{margin-bottom:16px}
.feature-row__title{margin-bottom:16px;font-size:1.5rem;font-weight:700}
.feature-row__text{margin-bottom:20px;font-size:1rem;line-height:1.7;color:var(--text-secondary)}
.feature-row__checks{display:flex;flex-direction:column;gap:10px}
.feature-row__visual{display:flex;justify-content:center;align-items:center;min-height:300px;background:var(--purple-50);border-radius:var(--radius-xl);padding:24px}

/* ==========================================================================
   WHY SECTION
   ========================================================================== */
.why-section{padding:80px 0;background:var(--bg)}
.why-section__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.why-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:box-shadow var(--transition)}
.why-card:hover{box-shadow:var(--shadow-md)}
.why-card__icon{margin-bottom:16px}
.why-card__icon img{width:48px;height:48px}
.why-card__icons-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.why-card__icons-row img{width:40px;height:40px}
.why-card__icon-chevron{width:20px!important;height:20px!important;opacity:.5}
.why-card__title{font-size:1.125rem;font-weight:700;margin-bottom:12px;color:var(--text)}
.why-card__desc{font-size:.9375rem;color:var(--text-secondary);line-height:1.65}

/* ==========================================================================
   BLOG SECTION
   ========================================================================== */
.blog-section{padding:80px 0}
.blog-section__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
.blog-section__cta{text-align:center}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.blog-card__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.blog-card__image{width:100%;aspect-ratio:16/9;overflow:hidden}
.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.blog-card__image-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--purple-50),var(--purple-100));display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;color:var(--purple);text-transform:uppercase;letter-spacing:.05em}
.blog-card:hover .blog-card__image img{transform:scale(1.05)}
.blog-card__body{padding:24px;display:flex;flex-direction:column;flex:1}
.blog-card__tag{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.75rem;font-weight:600;background:var(--purple-100);color:var(--purple);margin-bottom:12px;width:fit-content}
.blog-card__title{font-size:1.0625rem;font-weight:700;margin-bottom:12px;line-height:1.35;color:var(--text)}
.blog-card__excerpt{font-size:.9375rem;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__meta{display:flex;align-items:center;gap:12px;margin-top:auto}
.blog-card__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.blog-card__meta-text{display:flex;flex-direction:column;gap:2px}
.blog-card__author{font-size:.8125rem;font-weight:600;color:var(--text)}
.blog-card__date{font-size:.75rem;color:var(--text-light)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--bg-dark);color:rgba(255,255,255,.8);padding:64px 0 32px}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer__col--brand{max-width:360px}
.footer__logo{height:24px;margin-bottom:20px}
.footer__newsletter-text{font-size:.9375rem;line-height:1.6;margin-bottom:20px;color:rgba(255,255,255,.7)}
.footer__newsletter-form{display:flex;gap:8px}
.footer__newsletter-input{flex:1;padding:10px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:.875rem}
.footer__newsletter-input::placeholder{color:rgba(255,255,255,.4)}
.footer__newsletter-input:focus{outline:none;border-color:var(--purple-light);background:rgba(255,255,255,.12)}
.footer__heading{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:16px}
.footer__links{display:flex;flex-direction:column;gap:10px;list-style:none}
.footer__link{font-size:.9375rem;color:rgba(255,255,255,.6);transition:color var(--transition);display:flex;align-items:center;gap:8px}
.footer__link:hover{color:#fff}
.footer__link svg{flex-shrink:0}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer__copyright{font-size:.8125rem;color:rgba(255,255,255,.5)}
.footer__credit{color:rgba(255,255,255,.5);transition:color var(--transition)}
.footer__credit:hover{color:#fff}
.footer__legal{display:flex;gap:24px}
.footer__legal-link{font-size:.8125rem;color:rgba(255,255,255,.5);transition:color var(--transition)}
.footer__legal-link:hover{color:#fff}

/* ==========================================================================
   FEATURE PAGES — hero-feature, feature-summary, feature-steps
   ========================================================================== */
.hero-feature{padding:120px 0 64px;background:linear-gradient(160deg,#F5F3FF 0%,#EDE9FE 50%,#F5F3FF 100%);text-align:center}
.hero-feature__stat{font-size:1.25rem;color:var(--purple);font-weight:600;margin-bottom:16px}
.hero-feature__subtitle{font-size:1.125rem;color:var(--text-secondary);max-width:640px;margin:0 auto 32px}
.hero-feature h1{margin-bottom:24px}

.feature-content{padding:64px 0}
.feature-content .container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feature-content--text-only .container{display:block;max-width:800px}

.feature-highlight{display:inline-block;padding:6px 16px;border-radius:8px;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--purple-100);color:var(--purple);margin-top:16px}

.feature-steps{padding:64px 0}
.feature-steps__list{counter-reset:step;max-width:700px;margin:32px auto 0}
.feature-steps__item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.feature-steps__item::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--purple);color:#fff;font-weight:700;font-size:.9375rem}
.feature-steps__item span{font-size:1rem;color:var(--text);line-height:1.6;padding-top:8px}

.feature-summary{padding:80px 0;background:var(--bg)}
.feature-summary__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
.feature-summary__card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;text-align:center}
.feature-summary__card-icon{margin-bottom:16px}
.feature-summary__card-icon img{width:48px;height:48px;margin:0 auto}
.feature-summary__card-icons{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
.feature-summary__card-icons img{width:40px;height:40px}
.feature-summary__card p{font-size:1rem;color:var(--text);line-height:1.6}
.feature-summary__cta{text-align:center}

/* ==========================================================================
   NEWSLETTER (standalone section)
   ========================================================================== */
.newsletter{padding:64px 0}
.newsletter .container{text-align:center}
.newsletter__title{margin-bottom:24px}
.newsletter__form{display:flex;gap:12px;max-width:500px;margin:0 auto}
.newsletter__input{flex:1;padding:12px 20px;border:1px solid var(--border);border-radius:10px;font-size:1rem}
.newsletter__input:focus{outline:none;border-color:var(--purple)}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-hero{padding:120px 0 64px;background:linear-gradient(160deg,#F5F3FF 0%,#EDE9FE 50%,#F5F3FF 100%)}
.contact-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-hero__title{font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-.02em;margin-bottom:20px}
.contact-hero__subtitle{font-size:1.0625rem;color:var(--text-secondary);line-height:1.7;margin-bottom:40px}

/* Contact form */
.contact-form{display:flex;flex-direction:column;gap:20px}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form__group{display:flex;flex-direction:column;gap:6px}
.contact-form__label{font-size:.875rem;font-weight:600;color:var(--text)}
.contact-form__input{padding:12px 16px;border:1px solid var(--border);border-radius:10px;font-size:1rem;background:#fff;transition:border-color var(--transition),box-shadow var(--transition)}
.contact-form__input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(82,30,176,.1)}
.contact-form__input::placeholder{color:var(--text-light)}

/* Checkbox */
.contact-form__checkbox{display:flex;align-items:flex-start;gap:10px;margin-top:4px}
.contact-form__checkbox input[type="checkbox"]{width:18px;height:18px;margin-top:2px;accent-color:var(--purple);flex-shrink:0;cursor:pointer}
.contact-form__checkbox label{font-size:.875rem;color:var(--text-secondary);line-height:1.5;cursor:pointer}
.contact-form__checkbox label a{color:var(--purple);text-decoration:underline}
.contact-form__checkbox label a:hover{color:var(--purple-800)}

/* Submit */
.contact-form__submit{margin-top:8px}

/* Testimonial card */
.contact-testimonial{display:flex;align-items:center;justify-content:center;padding-top:40px}
.testimonial-card{background:linear-gradient(135deg,var(--purple-100) 0%,#E0D4FF 50%,var(--purple-100) 100%);border-radius:var(--radius-xl);padding:40px;max-width:460px;box-shadow:var(--shadow-lg)}
.testimonial-card__quote{font-size:1.25rem;font-weight:500;color:var(--text);line-height:1.6;margin-bottom:28px;font-style:normal}
.testimonial-card__quote::before{content:'\201C';font-size:2rem;color:var(--purple);font-weight:700;line-height:0;vertical-align:-.3em;margin-right:4px}
.testimonial-card__author{display:flex;align-items:center;gap:14px}
.testimonial-card__avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.testimonial-card__info{display:flex;flex-direction:column;gap:2px}
.testimonial-card__name{font-size:1rem;font-weight:700;color:var(--text)}
.testimonial-card__role{font-size:.875rem;color:var(--text-secondary)}

/* Client logos section */
.contact-logos{padding:48px 0;background:#fff;text-align:center}
.contact-logos__title{font-size:1rem;font-weight:600;color:var(--text-light);margin-bottom:24px;text-transform:uppercase;letter-spacing:.06em}

/* Success state */
.contact-form__success{background:var(--purple-50);border:1px solid var(--purple-light);border-radius:var(--radius);padding:24px;text-align:center}
.contact-form__success h3{color:var(--purple);margin-bottom:8px}
.contact-form__success p{color:var(--text-secondary);font-size:.9375rem}

/* Form messages */
.form-message{font-size:.875rem;padding:10px 16px;border-radius:8px;margin-top:8px;flex-basis:100%;width:100%}
.form-message--success{background:var(--purple-50);color:var(--purple);border:1px solid var(--purple-light)}
.form-message--error{background:#FEF2F2;color:#DC2626;border:1px solid #FECACA}

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */
/* Scroll animation: elements are always visible. JS adds a subtle entrance. */
[data-animate].is-visible{animation:fadeInUp .4s ease forwards}
@keyframes fadeInUp{from{opacity:.7;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ==========================================================================
   RESPONSIVE — Tablet
   ========================================================================== */
@media(max-width:1024px){
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__visual{order:-1;max-width:480px;margin:0 auto}
  .hero__checks{display:inline-flex;flex-direction:column;text-align:left}

  .features-grid__cards{grid-template-columns:repeat(3,1fr)}
  .feature-row__inner{grid-template-columns:1fr;gap:32px}
  .section .feature-row{grid-template-columns:1fr}
  .feature-row--reversed .feature-row__inner,
  .section .feature-row--reversed{direction:ltr}
  .feature-row__visual{order:-1;min-height:240px}

  .why-section__cards{grid-template-columns:repeat(2,1fr)}
  .blog-section__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr;gap:32px}
  .footer__col--brand{grid-column:1/-1}
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer__brand{grid-column:1/-1}
  .feature-summary{grid-template-columns:repeat(2,1fr)}
  .contact-hero__grid{grid-template-columns:1fr;gap:40px}
  .contact-testimonial{justify-content:flex-start}
}

/* ==========================================================================
   RESPONSIVE — Mobile
   ========================================================================== */
@media(max-width:768px){
  .navbar__links{display:none}
  .navbar__cta{display:none}
  .navbar__lang{display:none}
  .navbar__mobile-toggle{display:flex}
  .navbar__inner{justify-content:space-between}
  .hero-feature--split .hero-feature__grid{grid-template-columns:1fr;text-align:center}
  .hero-feature--split .hero-feature__video{order:-1}

  .hero{padding:100px 0 48px}
  .hero__title{font-size:2rem}

  .marquee__strip{gap:32px;padding:0 16px}
  .marquee__logo{height:32px}

  .features-grid__cards{grid-template-columns:repeat(2,1fr)}
  .features-grid{padding:48px 0}

  .feature-row{padding:40px 0}
  .feature-row__title{font-size:1.25rem}

  .why-section__cards{grid-template-columns:1fr}
  .why-section{padding:48px 0}

  .blog-section__grid{grid-template-columns:1fr}
  .blog-section{padding:48px 0}

  .footer__top{grid-template-columns:1fr;gap:32px}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .footer__newsletter-form{flex-direction:column}
  .footer__bottom{flex-direction:column;text-align:center}
  .feature-summary{grid-template-columns:1fr}
  .navbar__container{height:auto;flex-wrap:wrap;padding:12px 24px}
  .contact-hero{padding:100px 0 48px}
  .contact-form__row{grid-template-columns:1fr}
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-page{max-width:680px;margin:0 auto}
.contact-page__header{text-align:center;margin-bottom:40px}
.contact-page__header h1{margin-bottom:16px}
.contact-form{display:flex;flex-direction:column;gap:20px}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form__field{display:flex;flex-direction:column;gap:6px}
.contact-form__label{font-size:.875rem;font-weight:600;color:var(--text)}
.contact-form__input{padding:12px 16px;border:1px solid var(--border);border-radius:10px;font-size:1rem;font-family:inherit;color:var(--text);background:#fff;transition:border-color var(--transition)}
.contact-form__input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(82,30,176,.1)}
.contact-form__input::placeholder{color:var(--text-light)}
.contact-form__textarea{resize:vertical;min-height:100px}
.contact-form__submit{align-self:flex-start;margin-top:8px}
.contact-page__success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding:48px 0}
.contact-page__success-icon{width:64px;height:64px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}
@media(max-width:768px){
  .contact-form__row{grid-template-columns:1fr}
  .contact-form__submit{width:100%}
}

/* ==========================================================================
   CLASS ALIASES — Feature pages use slightly different names
   ========================================================================== */
/* Navbar aliases */
.navbar__container{display:flex;align-items:center;height:72px;gap:32px;max-width:1200px;margin:0 auto;padding:0 24px}
.navbar__mobile-menu-content{display:flex;flex-direction:column;gap:4px}
.navbar__mobile-buttons{display:flex;flex-direction:column;gap:12px;margin-top:32px}

/* Marquee alias */
.marquee__group{display:flex;align-items:center;gap:56px;padding:0 28px}
.marquee__label{text-align:center;font-size:.875rem;font-weight:500;color:var(--text-light);margin-bottom:16px}

/* Utilities */
.text-center{text-align:center}
.mt-lg{margin-top:32px}
.mt-lg{margin-top:32px}
.mb-lg{margin-bottom:32px}
.mt-2xl{margin-top:48px}
.mb-2xl{margin-bottom:48px}

/* Feature list (numbered steps) */
.feature-list{counter-reset:step}
.feature-list__item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.feature-list__item::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:50%;background:var(--purple);color:#fff;font-weight:700;font-size:.9375rem;flex-shrink:0}
.feature-list__item-content{padding-top:8px}
.feature-list__item-content p{font-size:1rem;color:var(--text);line-height:1.6;margin:0}
.btn--large{padding:16px 36px;font-size:1.0625rem}

/* Section wrapper */
.section{padding:64px 0}
.section--light{background:var(--bg)}

/* Tag variants */
.tag--purple{background:var(--purple-100);color:var(--purple)}

/* Feature summary (3-column grid on feature pages) */
.feature-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-summary__card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;text-align:center}
.feature-summary__card-icon{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
.feature-summary__card-icon img{width:48px;height:48px}
.feature-summary__card-title{font-size:1rem;color:var(--text);line-height:1.6}

/* Feature row images inside feature pages */
.feature-row__visual img{max-width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.section .feature-row__visual{display:flex;justify-content:center;align-items:center;background:var(--purple-50);border-radius:var(--radius-xl);padding:24px;min-height:280px}

/* Check item text class */
.check-item__text{font-size:1rem;font-weight:500;color:var(--text);line-height:1.5}

/* Hero CTA wrapper */
.hero__cta{margin-top:32px}
.hero-feature__inner{max-width:800px;margin:0 auto}

/* Split hero (text left, video right) */
.hero-feature--split{text-align:left}
.hero-feature--split .hero-feature__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-feature--split .hero-feature__content h1{font-size:clamp(1.75rem,3.5vw,2.5rem)}
.hero-feature--split .hero-feature__subtitle{margin:0 0 0}

/* Video embed (16:9 responsive) */
.video-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Footer aliases for feature pages */
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .8fr;gap:48px;margin-bottom:48px}
.footer__brand{max-width:360px}
.footer__brand .footer__logo{display:block;margin-bottom:20px}
.footer__brand .footer__logo img{height:24px}
.footer__description{font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.7);margin-bottom:20px}
.footer__column-title{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:16px}
.footer__newsletter{margin-top:16px}
.footer__newsletter-btn{padding:10px 20px;border-radius:8px;background:var(--purple);color:#fff;font-weight:600;font-size:.875rem;border:none;cursor:pointer;transition:background var(--transition)}
.footer__newsletter-btn:hover{background:var(--purple-800)}
.footer__social{display:flex;gap:12px}
.footer__social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);transition:all var(--transition)}
.footer__social-link:hover{background:rgba(255,255,255,.2);color:#fff}
.footer__divider{height:1px;background:rgba(255,255,255,.1);margin-bottom:24px}
.footer__legal a{font-size:.8125rem;color:rgba(255,255,255,.5);transition:color var(--transition);text-decoration:none}
.footer__legal a:hover{color:#fff}

/* Feature steps (comparaison-offres-spot page) */
.feature-steps{padding:64px 0}
.feature-steps h3{text-align:center;margin-bottom:32px}
.feature-steps__list{counter-reset:step;max-width:700px;margin:0 auto}
.feature-steps__item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border)}
.feature-steps__item::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:50%;background:var(--purple);color:#fff;font-weight:700;font-size:.9375rem}
.feature-steps__item span{font-size:1rem;color:var(--text);line-height:1.6;padding-top:8px}

/* ==========================================================================
   RESPONSIVE — Small mobile
   ========================================================================== */
@media(max-width:480px){
  .container{padding:0 16px}
  .hero{padding:88px 0 32px}
  .hero__title{font-size:1.75rem}
  .btn--lg{padding:14px 28px;font-size:1rem}
  .feature-card__illustration{height:140px}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
/* ==========================================================================
   BLOG ARTICLE PROSE (rendered markdown)
   ========================================================================== */
.blog-article-content{font-size:1.0625rem;line-height:1.8;color:var(--text)}
.blog-article-content h1,.blog-article-content h2,.blog-article-content h3,.blog-article-content h4{margin:2rem 0 1rem;color:var(--text);line-height:1.3}
.blog-article-content h1{font-size:1.75rem;display:none}
.blog-article-content h2{font-size:1.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.blog-article-content h3{font-size:1.25rem}
.blog-article-content p{margin-bottom:1.25rem;color:var(--text-secondary)}
.blog-article-content strong{color:var(--text);font-weight:700}
.blog-article-content ul,.blog-article-content ol{margin:1rem 0 1.5rem 1.5rem;color:var(--text-secondary)}
.blog-article-content li{margin-bottom:.5rem}
.blog-article-content ul li{list-style:disc}
.blog-article-content ol li{list-style:decimal}
.blog-article-content hr{border:none;border-top:1px solid var(--border);margin:2rem 0}
.blog-article-content a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
.blog-article-content a:hover{color:var(--purple-800)}
.blog-article-content blockquote{border-left:4px solid var(--purple-light);padding:1rem 1.5rem;margin:1.5rem 0;background:var(--purple-50);border-radius:0 var(--radius) var(--radius) 0}
.blog-article-content blockquote p{color:var(--text);margin-bottom:0}
.blog-article-content img{border-radius:var(--radius-lg);margin:1.5rem 0;max-width:100%}
.blog-article-content table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.blog-article-content th,.blog-article-content td{padding:.75rem 1rem;border:1px solid var(--border);text-align:left}
.blog-article-content th{background:var(--bg);font-weight:600;color:var(--text)}

/* Blog article header */
.blog-article-header{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.blog-article-header .tag{margin-bottom:1rem}
.blog-article-header h1{font-size:clamp(1.5rem,3vw,2.25rem);margin:.75rem 0 1rem;line-height:1.25}
.blog-article-meta{display:flex;align-items:center;gap:8px;color:var(--text-light);font-size:.875rem}
.blog-article-meta span+span::before{content:"·";margin-right:8px}

/* ==========================================================================
   ASTRO COMPONENT CLASS ALIASES
   Components generated with slightly different class names — aliased here.
   ========================================================================== */

/* Hero */
.hero__container{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px}
.hero__cta{margin-top:36px}

/* Section headers (Astro uses section__header instead of section-header) */
.section__header{text-align:center;margin-bottom:48px}
.section__header h2{margin-bottom:12px}
.section__subtitle{font-size:1.125rem;color:var(--text-secondary)}

/* Features grid cards (Astro uses features-grid__card instead of feature-card) */
.features-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-bottom:48px}
.features-grid__card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition)}
.features-grid__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.features-grid__card-img{width:100%;height:180px;object-fit:contain;background:var(--purple-50);padding:24px}
.features-grid__card-title{padding:20px 24px 8px;font-size:1.0625rem;font-weight:700;color:var(--text)}
.features-grid__card-desc{padding:0 24px 24px;font-size:.9375rem;color:var(--text-secondary);line-height:1.6}

/* Why grid (Astro uses why-grid instead of why-section__cards) */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.why-grid__card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:box-shadow var(--transition)}
.why-grid__card:hover{box-shadow:var(--shadow-md)}
.why-grid__card-icon{margin-bottom:16px}
.why-grid__card-icon img{width:48px;height:48px}
.why-grid__card-title{font-size:1.125rem;font-weight:700;margin-bottom:12px;color:var(--text)}
.why-grid__card-desc{font-size:.9375rem;color:var(--text-secondary);line-height:1.65}

/* Blog grid (Astro uses blog-grid instead of blog-section__grid) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}

/* Section wrapper */
.section--light{background:var(--bg)}

/* Responsive overrides for Astro class names */
@media(max-width:1024px){
  .hero__container{grid-template-columns:1fr;text-align:center}
  .features-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .hero__container{padding:0 16px}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .navbar,.marquee,.footer__newsletter-form{display:none}
  .hero{padding-top:0;background:none}
  body{color:#000}
}