/* ============================================================
   GROUPE ZULU — Page ACCUEIL (front-page)
   Chargee uniquement sur la page d'accueil (voir functions.php).
   Nav / footer / curseur / variables / reset viennent du theme.
   Le responsive ci-dessous ne contient QUE le contenu de page : les
   regles nav/footer/menu-mobile de l'accueil d'origine ont ete retirees
   pour ne pas ecraser les ameliorations de nav du theme.
   ============================================================ */
/* ============ HERO — conservé intact ============ */
.hero{position:relative;height:calc(100vh + 90px);min-height:730px;display:flex;align-items:center;overflow:hidden;background:var(--marine);padding:0 80px 90px;border-radius:0 0 var(--r-panel) var(--r-panel)}
.hero-visual{position:absolute;inset:0;overflow:hidden}
.hero-img{position:absolute;inset:0;overflow:hidden}
.hero-img video{width:100%;height:100%;object-fit:cover;opacity:1}
.hero-overlay{position:absolute;inset:0;background:rgba(0, 133, 159, 0.69);mix-blend-mode:hue}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(21,56,67,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,162,217,.025) 1px,transparent 1px);background-size:80px 80px}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 55%,rgba(0,162,217,.08) 0%,transparent 55%);animation:glowPulse 5s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.5}to{opacity:1}}
.float-el{position:absolute;pointer-events:none}
.float-word{font-family:var(--fh);font-weight:900;text-transform:uppercase;color:transparent;letter-spacing:-.02em;white-space:nowrap;line-height:1}
.fw-2{top:48%;left:-1%;font-size:clamp(70px,9vw,130px);-webkit-text-stroke:1px rgba(0,162,217,.055)}
.hero-content{position:relative;z-index:5;width:100%;text-align:center;margin:0 auto}
.hero-title{font-family:var(--fh);font-size:130px;line-height:120px;letter-spacing:.01em;text-transform:uppercase;color:var(--white);font-weight:900;text-align:center}
.hero-title em{font-style: normal;color: #00A2D9}
.hero-title-line2{display:block;position:relative;height:130px;overflow:hidden}
.hero-title-line2>span{display:block;position:absolute;width:100%;left:0;top:0;opacity:0;transform:translateY(-100%);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.hero-title-line2>span.active{opacity:1;transform:translateY(0)}
.hero-title-line2>span.exit{opacity:0;transform:translateY(100%)}
.hero-accroche{font-family:var(--ft);font-size:clamp(15px,1.5vw,18px);font-weight:400;color:rgba(255,255,255,.85);line-height:1.5;max-width:640px;margin:28px auto 0;text-align:center}
.scroll-cta{position:absolute;bottom:126px;left:50%;transform:translateX(-50%);z-index:5}
.scroll-btn{display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--ft);font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.78);background:none;border:none;cursor:none;transition:color .25s}
.scroll-btn:hover{color:var(--white)!important}
.scroll-btn:hover .scroll-arrow-wrap{transform:translateY(6px)}
.scroll-arrow-wrap{transition:transform .25s}

/* ============ BOUTONS ============ */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 36px;border-radius:999px;font-family:var(--ft);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:none;cursor:none;overflow:hidden;transition:color .3s,border-color .25s,background .25s}
.btn>*{position:relative;z-index:1}
.btn-icon{display:inline-block;transition:transform .3s}
.btn:hover .btn-icon{transform:rotate(-45deg)}
.btn-accent{background:var(--marine);color:var(--white)}
.btn-accent::before{content:'';position:absolute;inset:0;background:var(--cyan);transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0}
.btn-accent:hover::before{transform:translateX(0)}
.btn-outline{background:var(--white);color:var(--marine);border:1.5px solid rgba(0,162,217,.35);font-weight:600}
.btn-outline:hover{border-color:var(--teal);color:var(--teal)}
.btn-ghost-white{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.35);font-weight:600}
.btn-ghost-white:hover{border-color:var(--white)}

/* Lien fléché */
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--ft);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--marine);text-decoration:none;transition:gap .2s}
.link-arrow:hover{gap:14px}
.link-arrow-icon{display:inline-block;transition:transform .3s}
.link-arrow:hover .link-arrow-icon{transform:rotate(-45deg)}
.link-arrow.on-dark{color:var(--white)}

/* ============ UTILITAIRES DE SECTION ============ */
.section-wrap{max-width:1500px;margin:0 auto}
.section-eyebrow{font-family:var(--ft);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.section-eyebrow.on-dark{color:rgba(255,255,255,.85)}
.section-eyebrow.accent{color:var(--cyan)}
/* Intertitres : taille fixe par palier (pas de rétrécissement fluide), le texte passe à la ligne au besoin.
   >1024px : 72px (desktop large) · 1023–425px : 56px (≈ taille à 1024px) · ≤425px : 49px (≈ taille à 895px) */
.section-title{font-family:var(--fh);font-size:72px;font-weight:900;letter-spacing:.01em;text-transform:uppercase;line-height:.98}
.section-title.on-white{color:var(--marine)}
.section-title.on-dark{color:var(--white)}
.section-title em{font-style:normal;font-weight:900}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.section-desc{font-family:var(--ft);font-size:15px;color:var(--ink-soft);line-height:1.8}

/* Panneaux arrondis — sections colorées encadrées de blanc.
   Alignement : les panneaux et le contenu des sections blanches
   s'arrêtent sur la même ligne (20px de marge, max 1500px). */
.panel{position:relative;overflow:hidden;border-radius:var(--r-panel);margin:28px auto;width:calc(100% - 40px);max-width:1500px}
.panel--teal{background:var(--teal)}
.panel--orange{background:var(--dorange)}
.panel--marine{background:var(--marine)}
.panel .section-desc{color:rgba(255,255,255,.78)}
.panel .section-desc-dark{color:rgba(0,57,75,.78)}

/* Halos flottants — mouvement discret en arrière-plan */
.blob{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
/* Couche de halos — au survol du panneau : la couche pivote doucement
   (tous les halos ensemble) et chaque halo grossit depuis son propre
   centre, s'étendant vers l'intérieur de l'encadré.
   La dérive ambiante est portée par une sous-couche dédiée. */
.halo-layer{position:absolute;inset:0;pointer-events:none;transition:transform 1.3s cubic-bezier(.22,.61,.36,1);will-change:transform}
.halo-drift{position:absolute;inset:0;animation:blobDrift 26s ease-in-out infinite alternate;will-change:transform}
.halo-layer .blob{transition:transform 1.3s cubic-bezier(.22,.61,.36,1);will-change:transform}
.section-about:hover .halo-layer,.section-cases:hover .halo-layer,.section-cta:hover .halo-layer,.section-ai:hover .halo-layer,footer:hover .halo-layer{transform:rotate(5deg)}
.section-about:hover .halo-layer .blob,.section-cases:hover .halo-layer .blob,.section-cta:hover .halo-layer .blob,.section-ai:hover .halo-layer .blob,footer:hover .halo-layer .blob{transform:scale(1.45)}
.blob--drift{animation:blobDrift 26s ease-in-out infinite alternate}
.blob--drift-slow{animation:blobDrift 34s ease-in-out infinite alternate-reverse}
@keyframes blobDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(48px,-36px) scale(1.07)}}

/* Apparition au scroll */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-32px);transition:opacity .8s ease,transform .8s ease}
.reveal-l.in{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(32px);transition:opacity .8s ease,transform .8s ease}
.reveal-r.in{opacity:1;transform:translateX(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}


/* ============ RÉASSURANCE — rangée de cartes arrondies ============ */
.section-stats{width:calc(100% - 40px);max-width:1500px;margin:28px auto 28px}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.stat-card{border-radius:var(--r-card);padding:40px 28px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:transform .25s}
.stat-card:hover{transform:translateY(-5px)}
.stat-card::after{content:'';position:absolute;width:170px;height:170px;border-radius:50%;right:-70px;bottom:-70px;background:rgba(255,255,255,.08);transition:transform .45s ease}
.stat-card:hover::after{transform:scale(1.3)}
.stat-card--teal{background:var(--teal)}
.stat-card--marine{background:var(--marine)}
.stat-card--orange{background:var(--dorange)}
.stat-n{font-family:var(--fh);font-size:clamp(40px,4vw,60px);font-weight:900;letter-spacing:.01em;color:var(--white);line-height:1}
.stat-l{font-family:var(--ft);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);line-height:1.4}

/* ============ ABOUT — panneau clair arrondi ============ */
.panel--mist{background:var(--mist)}
/* margin-bottom:0 → espace après about = padding-top de quickstart (70px) */
/* margin-top = marge-haut des stats (128px) → gap hero↔About égal au gap About↔stats */
.section-about{padding:96px 64px;margin-top:128px;margin-bottom:0}
.section-about .blob-a{width:620px;height:620px;top:-240px;right:-260px;background:radial-gradient(circle,rgba(0,162,217,.14) 0%,transparent 70%)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
/* hauteur jamais supérieure à la largeur (carré/rectangle horizontal) ; ratio conservé au redimensionnement */
/* width:100% → en 1 colonne (image au-dessus du texte), l'image fait la pleine largeur de la
   colonne, donc la même largeur que la zone de texte ; max-height garde hauteur ≤ largeur */
.about-img-card{position:relative;border-radius:28px;overflow:hidden;width:100%;height:auto;aspect-ratio:1/1;max-height:520px;box-shadow:0 30px 70px rgba(0,57,75,.16)}
.about-img-card img{width:100%;height:100%;object-fit:cover;display:block}
.about-img-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.about-img-slide.is-active{opacity:1}
.about-img-chip{position:absolute;top:18px;left:18px;background:rgba(255,255,255,.92);color:var(--teal);border-radius:999px;padding:9px 18px;font-family:var(--ft);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.about-img-badge{position:absolute;bottom:18px;left:18px;background:var(--white);border-radius:999px;padding:10px 22px;display:flex;align-items:center;gap:10px;font-family:var(--ft);font-size:14px;color:var(--teal);box-shadow:0 10px 26px rgba(0,57,75,.18)}
.about-img-badge strong{font-size:22px;font-weight:800;font-family:var(--fh);letter-spacing:.04em}
.gif-indicator{position:absolute;bottom:18px;right:18px;display:flex;gap:6px}
.gif-dot{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.3);border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-size:10px;font-weight:700;color:rgba(255,255,255,.5);transition:all .4s}
.gif-dot.active{background:rgba(255,255,255,.9);color:var(--marine);border-color:var(--white)}
.about-text{display:flex;flex-direction:column;gap:24px}
.about-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.about-actions .btn{min-width:190px;justify-content:center}
.about-actions .btn-outline{background:transparent}

/* ============ IA — bandeau clair « AI Ready », tout l'encadré cliquable ============ */
/* Fond mist + deux dégradés façon footer (blob-a cyan .14 en haut-droite, blob-b orange .1 en bas-gauche).
   margin 70px haut/bas = gap identique au gap bandeau cloud ↔ ancienne section IA. */
.section-ai{display:block;text-decoration:none;padding:120px 64px;margin-top:70px;margin-bottom:70px}
.section-ai .blob-a{width:700px;height:700px;top:-300px;right:-260px;background:radial-gradient(circle,rgba(0,162,217,.14) 0%,transparent 70%)}
.section-ai .blob-b{width:560px;height:560px;bottom:-280px;left:-180px;background:radial-gradient(circle,rgba(242,109,51,.1) 0%,transparent 70%)}
/* Contenu en ligne façon cloud-banner : texte à gauche, bouton à droite ;
   le bouton passe dessous quand la largeur ne suffit plus (flex-wrap). */
.ai-ready-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;width:100%}
.ai-ready-text{display:flex;flex-direction:column;gap:18px;flex:1 1 560px;min-width:0}
.ai-ready-accroche{font-family:var(--ft);font-size:16px;line-height:1.8;color:rgba(0,57,75,.78);max-width:720px}
.ai-ready-btn{flex-shrink:0}
/* Survol de tout l'encadré : le bouton se remplit de cyan + la flèche pivote. */
.section-ai:hover .btn-accent::before{transform:translateX(0)}
.section-ai:hover .btn-accent .btn-icon{transform:rotate(-45deg)}

/* ============ NOS SOLUTIONS — bento de tuiles colorées cliquables ============ */
.section-solutions{background:var(--white);padding:70px 20px 0;position:relative;overflow:hidden}
/* espace après projets : 42px (padding) + 28px (marge du panneau cases) = 70px, comme après quickstart */
#section-expertise{padding-bottom:42px}
.section-solutions .section-head{margin-bottom:40px}
.sol-subtitle{font-family:var(--ft);font-size:16px;color:var(--ink-soft);line-height:1.6;max-width:none;white-space:nowrap;margin-top:14px}
.sol-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative;z-index:2}
.sol-card{position:relative;overflow:hidden;border-radius:var(--r-card);padding:34px 34px 30px;min-height:268px;display:flex;flex-direction:column;justify-content:center;text-decoration:none;color:var(--white);transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s}
.sol-card.span-3{grid-column:span 3}
.sol-card.span-2{grid-column:span 2}
.sol-card--cyan{background:linear-gradient(135deg,var(--teal) 0%,var(--cyan) 100%)}
.sol-card--marine{background:var(--marine)}
.sol-card--teal{background:var(--teal)}
.sol-card--orange{background:var(--dorange)}
.sol-card--cyanflat{background:var(--cyan)}
.sol-card:hover{transform:translateY(-6px)}
/* forme déco — grossit vers l'intérieur au hover, comme les autres encadrés */
.sol-deco{position:absolute;right:-150px;top:50%;margin-top:-260px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.08);transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.sol-card:hover .sol-deco{transform:scale(1.18)}
/* Décalage du cercle déco vers la droite — cartes quickstart & projets */
.section-quickstart .sol-deco,
#section-expertise .sol-deco{right:-215px}
/* Deuxième ligne de projets (tuiles span-2) : décalage prononcé */
#section-expertise .sol-card.span-2 .sol-deco{right:-250px}
.sol-icon{width:56px;height:56px;color:var(--white);position:relative;z-index:1}
.sol-icon svg{width:100%;height:100%;display:block;stroke:currentColor;stroke-width:1.5;fill:none}
/* Contenu aligné en haut : titres d'une même rangée à la même hauteur,
   et descriptions à la même distance (min-height = 2 lignes de titre). */
.sol-body{position:relative;z-index:1;margin-top:28px;flex:0 0 auto;display:flex;flex-direction:column}
.sol-name{font-family:var(--fh);font-size:clamp(24px,2.3vw,34px);font-weight:900;letter-spacing:.02em;text-transform:uppercase;line-height:1.05;margin-bottom:4px}
.sol-card.span-3 .sol-name{font-size:clamp(30px,3.2vw,46px)}
.sol-tag{font-family:var(--ft);font-size:14px;line-height:1.55;color:rgba(255,255,255,.85);max-width:34ch}
/* Tuiles vedettes (Quickstart, Helpdesk) : description sur ~3/4 de la largeur */
.sol-card.span-3 .sol-tag{max-width:75%}
.sol-arrow{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding-top:0;font-family:var(--ft);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.sol-arrow .sol-arrow-icon{display:inline-block;transition:transform .3s}
.sol-card:hover .sol-arrow-icon{transform:rotate(-45deg)}

/* ============ FAQ — formes style section IA, en bleu ============ */
.section-faq{padding:120px 64px}
.section-faq .faq-blob{width:130vh;height:130vh;left:-55vh;top:50%;margin-top:-65vh;background:var(--cyan);opacity:.85;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.section-faq:hover .faq-blob{transform:translateX(64px)}
.section-faq .blob-b{width:480px;height:480px;right:-160px;bottom:-220px;background:radial-gradient(circle,rgba(0,162,217,.5) 0%,transparent 70%)}
.faq-layout{display:grid;grid-template-columns:1fr 2fr;gap:100px;align-items:flex-start;position:relative;z-index:2}
.faq-side{position:sticky;top:calc(var(--nav-h) + 60px)}
.faq-side .section-desc{margin-top:24px}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid rgba(255,255,255,.16);cursor:none}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;background:none;border:none;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;pointer-events:none}
.faq-q-text{font-family:var(--fh);font-size:17px;font-weight:700;color:var(--white);line-height:1.3;letter-spacing:.01em;text-transform:uppercase}
/* Icône +/× construite en deux barres centrées : centrage parfait et
   rotation pivotant exactement sur le centre du signe */
.faq-icon{position:relative;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);flex-shrink:0;font-size:0;transform-origin:50% 50%;transition:border-color .25s,transform .35s cubic-bezier(.4,0,.2,1)}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;top:50%;left:50%;width:11px;height:1.6px;border-radius:2px;background:rgba(255,255,255,.6);transform:translate(-50%,-50%);transition:background .25s}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.open .faq-icon{transform:rotate(45deg);border-color:var(--white)}
.faq-item.open .faq-icon::before,.faq-item.open .faq-icon::after{background:var(--white)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1)}
.faq-a-overflow{overflow:hidden;min-height:0}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{font-family:var(--ft);font-size:14px;color:rgba(255,255,255,.78);line-height:1.8;padding-bottom:24px}

/* ============ CTA — panneau clair arrondi (comme À propos) ============ */
.section-cta{padding:140px 64px;text-align:center}
.section-cta .blob-a{width:620px;height:620px;top:-240px;right:-260px;background:radial-gradient(circle,rgba(0,162,217,.14) 0%,transparent 70%)}
.cta-inner{position:relative;z-index:2}
.cta-pre{font-family:var(--ft);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:24px}
.cta-title{font-family:var(--fh);font-size:clamp(56px,8vw,110px);font-weight:900;letter-spacing:.01em;text-transform:uppercase;color:var(--marine);line-height:.95;margin-bottom:36px}
.cta-title em{font-style:normal;color:var(--teal)}
.cta-sub{font-family:var(--ft);font-size:16px;color:var(--ink-soft);max-width:480px;margin:0 auto 48px;line-height:1.7}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-actions .btn{min-width:210px;justify-content:center}

.br-tablet{display:none}

/* ============ BANDEAU CTA — clouds Salesforce (encadré cliquable) ============ */
.cloud-banner{position:relative;display:flex;align-items:center;min-height:400px;padding:64px;overflow:hidden;text-decoration:none;cursor:none;margin-bottom:70px}
/* Dégradés cyan dans le fond (façon footer) : haut-gauche, bas-droite + léger en haut-droite */
.cloud-banner-halo{position:absolute;inset:0;pointer-events:none;z-index:0}
.cb-glow{position:absolute;border-radius:50%;transition:transform 1.1s cubic-bezier(.22,.61,.36,1);will-change:transform}
.cb-tl{width:560px;height:560px;top:-240px;left:-220px;background:radial-gradient(circle,rgba(0,162,217,.55) 0%,transparent 70%)}
.cb-br{width:600px;height:600px;bottom:-280px;right:-220px;background:radial-gradient(circle,rgba(0,162,217,.5) 0%,transparent 70%)}
.cb-tr{width:440px;height:440px;top:-200px;right:-120px;background:radial-gradient(circle,rgba(0,162,217,.28) 0%,transparent 70%)}
.cloud-banner-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;width:100%}
.cloud-banner-text{display:flex;flex-direction:column;gap:18px;flex:1 1 460px;min-width:0}
.cloud-banner-accroche{font-family:var(--ft);font-size:16px;line-height:1.7;color:rgba(255,255,255,.82);max-width:620px}
.cloud-banner-btn{flex-shrink:0;transition:background .3s,color .3s,border-color .25s}
.cloud-banner-btn .btn-icon{transition:transform .3s}
/* Hover sur tout l'encadré : le bouton se remplit + les dégradés grossissent vers le centre */
.cloud-banner:hover .cb-glow{transform:scale(1.6)}
.cloud-banner:hover .cloud-banner-btn{background:var(--white);color:var(--marine);border-color:var(--white)}
.cloud-banner:hover .cloud-banner-btn .btn-icon{transform:rotate(-45deg)}

/* ============ RESPONSIVE — CONTENU DE PAGE UNIQUEMENT ============ */
@media (max-width:1100px){
  .about-grid,.ai-layout,.faq-layout{grid-template-columns:1fr;gap:56px}
  .cases-layout{grid-template-columns:1fr;gap:48px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .blog-card.span-4,.blog-card.span-2{grid-column:span 1}
  .faq-side{position:static}
  .sol-grid{grid-template-columns:repeat(2,1fr)}
  .sol-card.span-3,.sol-card.span-2{grid-column:span 1}
  #section-expertise .sol-card:last-child{grid-column:1 / -1}
  #section-expertise .sol-name{font-size:clamp(30px,3.2vw,46px)}
  .about-actions{justify-content:center}
}
@media (max-width:720px){
  .services-grid,.blog-grid{grid-template-columns:1fr}
  .sol-grid{grid-template-columns:1fr}
  .sol-card.span-3,.sol-card.span-2{grid-column:span 1}
  .sol-subtitle{white-space:normal}
  .panel{border-radius:32px}
  .section-ai,.section-cases,.section-faq,.section-about,.section-cta{padding-left:32px;padding-right:32px}
}
@media (max-width:1023px){
  .br-tablet{display:inline}
  .section-title{font-size:56px}
  .hero{padding:0 16px 70px}
  .hero-vos-m{display:inline}
  .vos-pre{display:none}
  .hero-title{font-size:12vw;line-height:1.02}
  .hero-title-line2{height:1.04em}
  .scroll-cta{display:none}
  .section-stats{margin-top:28px}
  .stats-grid{gap:12px}
  .stat-card{padding:22px 18px;gap:6px}
  .stat-n{font-size:34px}
  .stat-l{font-size:11px}
  .section-about{padding-top:48px;padding-bottom:48px;margin-top:70px}
  .section-ai{padding-top:60px;padding-bottom:60px}
  .section-faq{padding-top:60px;padding-bottom:60px}
  .section-cta{padding-top:70px;padding-bottom:70px}
}
@media (max-width:767px){
  .hero{padding:0 20px 70px}
  .panel{width:calc(100% - 40px)}
  .section-stats{width:calc(100% - 40px)}
  .section-solutions{padding-left:20px;padding-right:20px}
  .cloud-banner{padding:47px 24px;min-height:0}
  .cloud-banner-inner{justify-content:center;text-align:center}
  .cloud-banner-text{align-items:center}
  .ai-ready-inner{justify-content:center;text-align:center}
  .ai-ready-text{align-items:center}
  .stat-card{align-items:flex-start;text-align:left}
}
@media (max-width:425px){
  .section-title{font-size:40px}
}
@media (max-width:480px){
  .sol-card{padding-left:clamp(20px,calc(8.75vw - 8px),34px);padding-right:clamp(20px,calc(8.75vw - 8px),34px)}
}
@media (max-width:320px){
  .section-about,.section-ai,.section-faq,.section-cta{padding-left:20px;padding-right:20px}
  .cloud-banner{padding-left:20px;padding-right:20px}
}
@media (min-width:1024px) and (max-width:1100px){
  .stats-grid{grid-template-columns:repeat(6,1fr)}
  .stats-grid .stat-card:nth-child(-n+3){grid-column:span 2}
  .stats-grid .stat-card:nth-child(n+4){grid-column:span 3}
}
@media (min-width:768px) and (max-width:1023px){
  .stats-grid{grid-template-columns:repeat(5,1fr)}
  .stats-grid .stat-card{grid-column:auto}
}
@media (min-width:600px) and (max-width:767px){
  .stats-grid{grid-template-columns:repeat(6,1fr)}
  .stats-grid .stat-card:nth-child(-n+2){grid-column:span 3}
  .stats-grid .stat-card:nth-child(n+3){grid-column:span 2}
}
@media (max-width:599px){
  .stats-grid{grid-template-columns:1fr}
  .stats-grid .stat-card{grid-column:auto}
}