/* The complete GrokBot composition, with a quieter product presentation. */
:root { --muted:#a8a8b1; --line:#ffffff14; --radius:24px; }
[hidden] { display:none !important; }
html { scroll-padding-top:100px; }
.wrap { width:min(1200px, calc(100% - 96px)); }
.nav-inner { min-height:76px; gap:24px; }
.nav-links { gap:22px; font-size:12px; }
.nav-actions { gap:12px; }
.nav-actions>.btn-ghost { border:0; padding-inline:0; font-size:12px; }
.logo { font-size:16px; gap:8px; }
.btn-grad { background:#f5f5f7; color:#121214; box-shadow:none; }
.btn-grad:hover { background:#fff; box-shadow:0 6px 24px #ffffff12; transform:translateY(-1px); }
.btn-ghost { border-color:#ffffff24; }
.btn-grad,.btn-ghost { padding:14px 24px; font-size:14px; min-height:48px; }
.btn-sm { padding:10px 18px; min-height:40px; font-size:12px; }
.hero { padding:70px 0 84px; }
.hero-grid { grid-template-columns:1.15fr .85fr; gap:40px; min-height:710px; }
.hero::before { opacity:.42; }
.hero h1 { font-size:clamp(46px,5.3vw,76px); line-height:1.045; font-weight:600; letter-spacing:-.058em; margin:22px 0 26px; }
.hero h1 .ig-anim { white-space:nowrap; }
.eyebrow { color:#b7b7bd; font-size:11px; font-weight:500; letter-spacing:.16em; }
.eyebrow.ig-anim { background:none; -webkit-text-fill-color:currentColor; }
.lead { font-size:18px; line-height:1.7; max-width:480px; margin-bottom:32px; }
.cta-row { gap:14px; }
.availability { margin:22px 0 0; font-size:12px; color:#a0a0a8; }
.phone { width:min(310px,78vw); opacity:1; transform:none; }
.phone-stage::before { opacity:.55; }
.phone-controls { margin-top:15px; gap:12px; }
.phone-dots { gap:0; }
.phone-dots button { width:32px; height:44px; }
.phone-toggle { min-height:44px; font-size:11px; padding:8px 12px; }
.phone-caption { font-size:11px; margin:2px 0 0; }
.device-actions { display:none; }
.hair.wrap { width:min(1200px,calc(100% - 96px)); opacity:.24; }
section { padding:116px 0; }
.section-kicker { font-size:11px; letter-spacing:.16em; font-weight:500; margin-bottom:22px; color:#b7b7bd; }
h2 { font-size:clamp(36px,4.1vw,58px); line-height:1.08; letter-spacing:-.045em; font-weight:600; margin-bottom:24px; }
h3 { font-size:20px; letter-spacing:-.025em; font-weight:500; line-height:1.35; }
.section-intro { max-width:580px; font-size:18px; line-height:1.7; }
.grid-5 { grid-template-columns:repeat(6,1fr); gap:0 38px; margin-top:48px !important; }
.grid-5 .card { grid-column:span 2; border:0; border-top:1px solid var(--line); border-radius:0; background:none; padding:30px 0; }
.grid-5 .card:nth-child(n+4) { grid-column:span 3; }
.grid-5 .card:hover { transform:none; box-shadow:none; }
.card p { font-size:15px; line-height:1.75; }
#comparaison { background:#0b0b0d; }
.cmp { margin-top:48px; gap:24px; }
.cmp-col { padding:38px; background:#111114; border-radius:24px; }
.cmp-col.with { border-color:#ffffff2a; box-shadow:none; }
.cmp-col.sans { background:transparent; }
.cmp-col h3 { margin-bottom:24px; }
.cmp-col ul { list-style:none; padding:0; font-size:16px; }
.cmp-col li { margin:0; padding:14px 0; border-bottom:1px solid var(--line); }
.cmp-col li:last-child { border:0; }
.cmp-cta { margin-top:36px; }
.story { gap:90px; grid-template-columns:1fr 1fr; }
.story-visual { top:110px; }
.story-visual h2 { font-size:clamp(34px,3.5vw,48px); }
.story-frame { margin-top:32px; max-height:none; aspect-ratio:4/4.6; border-radius:24px; }
.story-visual .section-intro { font-size:16px; }
.step { min-height:390px; padding:55px 0; gap:22px; }
.step h3 { font-size:28px; margin-bottom:16px; }
.step p { font-size:16px; line-height:1.75; margin:0; }
.num { align-self:flex-start; margin-top:6px; background:none; color:#9c9ca6; font-size:12px; width:auto; height:auto; border-radius:0; font-weight:400; }
.step { align-items:center; }
.step .num { align-self:center; }
#demo { background:#0b0b0d; }
.rail-wrap { margin-top:48px; }
.rail { gap:20px; padding-bottom:18px; scrollbar-color:#434349 transparent; }
.persona { flex-basis:calc((100% - 40px)/3); border:0; border-radius:0; background:none; }
.persona img { border-radius:18px; }
.persona figcaption { padding:22px 0 4px; display:flex; justify-content:space-between; align-items:baseline; }
.persona strong { font-size:19px; font-weight:500; letter-spacing:-.02em; }
.persona small { font-size:12px; }
.gallery-footer { display:flex; gap:20px; justify-content:space-between; align-items:center; margin-top:12px; }
.gallery-controls { display:flex; gap:8px; flex-shrink:0; }
.gallery-controls button { font-family:inherit; }
.gallery-controls button:disabled { opacity:.35; cursor:default; }
.proof-note { font-size:12px; margin:0; color:var(--muted); }
.demo-cta { margin-top:44px; }
#multi .wrap { padding:0 0 0 32%; }
#multi h2 { max-width:750px; }
#offres { background:#0b0b0d; }
.offer-status { color:#b8b8c1; font-size:13px; line-height:1.65; margin:26px 0; }
#offres .grid-3 { gap:20px; }
.price { padding:32px; border-radius:24px; background:#111114; gap:20px; }
.price.featured { background:#17171c; border-color:#ffffff35; box-shadow:none; }
.badge { color:#f5f5f7; padding:0; border:none; border-radius:0; text-transform:none; font-size:18px; font-weight:500; letter-spacing:-.02em; }
.price.featured .badge { background:none; }
.price .amount { font-size:48px; letter-spacing:-.055em; font-weight:500; line-height:1.1; margin:8px 0 0; }
.price-period { font-size:14px; color:var(--muted); letter-spacing:0; font-weight:400; }
.price>p { font-size:14px; }
.price ul { list-style:none; padding:10px 0; font-size:14px; }
.price li { padding:12px 0; margin:0; border-top:1px solid var(--line); }
.price .btn-grad,.price .btn-ghost { padding-inline:12px; font-size:12px; }
.pricing-note { color:var(--muted); font-size:12px; line-height:1.8; max-width:930px; margin:26px 0 0; }
.faq .wrap { max-width:900px; }
.faq h2 { margin-bottom:44px; }
.faq details { border:0; border-top:1px solid var(--line); border-radius:0; background:none; padding:26px 0; margin:0; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { list-style:revert; font-size:18px; line-height:1.5; padding-right:20px; font-weight:500; }
.faq summary::-webkit-details-marker { display:inline; }
.faq summary::after,.faq details[open] summary::after { content:none; }
.faq p { font-size:15px; line-height:1.8; max-width:760px; margin-top:18px; }
.faq p a { color:#eeeef0; text-decoration:underline; text-underline-offset:4px; }
main>section:last-child { padding-top:24px; padding-bottom:96px; }
.final { border:0; background:#101013; padding:96px 28px; border-radius:28px; }
.final h2 { font-size:clamp(44px,5vw,72px); letter-spacing:-.055em; }
.final>.muted { font-size:18px; margin-bottom:32px; }
.final .availability { max-width:none; }
footer { padding:36px 0 48px; border-top:1px solid var(--line); }
.foot { gap:28px; font-size:11px; }
.foot nav { gap:22px; }
@media(min-width:1441px) { .hero h1 { font-size:80px; } }
@media(max-width:1180px) { .nav-links { gap:14px; } .nav-actions>.btn-ghost { display:none; } .hero h1 { font-size:60px; } .story { gap:50px; } }
@media(max-width:1000px) {
  .wrap { width:calc(100% - 64px); }
  .hero-grid { gap:22px; }
  .hero h1 { font-size:52px; }
  .phone { width:280px; }
  .nav-actions>.btn-grad { padding:10px 16px; min-height:40px; }
  .price { padding:24px; }
}
@media(max-width:900px) {
  section { padding:80px 0; }
  .hero { padding:50px 0 70px; }
  .hero-grid { grid-template-columns:1fr; min-height:0; gap:46px; }
  .hero-copy { text-align:center; }
  .hero h1 { font-size:clamp(44px,8vw,70px); }
  .lead { margin-inline:auto; }
  .hero .cta-row { justify-content:center; }
  .phone { width:min(300px,78vw); }
  .story { grid-template-columns:1fr; gap:25px; }
  .story-visual { display:grid; grid-template-columns:1fr 1fr; column-gap:30px; }
  .story-visual .section-kicker,.story-visual h2,.story-visual p { grid-column:1; }
  .story-frame { grid-column:2; grid-row:1/5; width:100%; margin:0; }
  .step { min-height:0; padding:28px 0; opacity:1; }
  .step h3 { font-size:24px; }
  #multi .wrap { padding-left:0; }
  .grid-3 { grid-template-columns:1fr; }
  .price { padding:32px; }
  .price .btn-grad,.price .btn-ghost { font-size:14px; }
}
@media(max-width:600px) {
  .wrap { width:calc(100% - 40px); }
  .nav-inner { min-height:68px; gap:12px; }
  .nav-actions { gap:10px; }
  .logo { font-size:12px; gap:6px; }
  .logo-mark { width:22px; height:22px; }
  .nav-actions>.btn-grad { padding:9px 12px; font-size:11px; }
  .mobile-menu summary { font-size:12px; }
  .hero { padding-top:44px; }
  .hero h1 { font-size:clamp(36px,9vw,54px); line-height:1.08; letter-spacing:-.055em; }
  .eyebrow { font-size:9px; letter-spacing:.12em; }
  .lead { font-size:16px; line-height:1.7; }
  .hero .cta-row { gap:10px; }
  .hero .cta-row a { padding:13px 18px; font-size:12px; }
  .hero .availability { font-size:11px; }
  .hair.wrap { width:calc(100% - 40px); }
  section { padding:68px 0; }
  .section-kicker { margin-bottom:18px; font-size:10px; }
  h2 { font-size:36px; }
  .section-intro { font-size:16px; }
  .grid-5 { grid-template-columns:1fr; margin-top:32px !important; }
  .grid-5 .card,.grid-5 .card:nth-child(n+4) { grid-column:auto; padding:24px 0; }
  .cmp { margin-top:32px; }
  .cmp-col { padding:26px; }
  .cmp-col ul { font-size:14px; }
  .story-visual { display:block; }
  .story-visual h2 { font-size:36px; }
  .story-frame { margin-top:30px; max-width:none; }
  .step { gap:16px; padding:26px 0; }
  .step h3 { font-size:22px; }
  .step p { font-size:15px; }
  .rail { gap:16px; }
  .persona { flex-basis:84%; }
  .gallery-footer { align-items:flex-start; flex-direction:column; }
  .gallery-controls { align-self:flex-end; }
  .persona figcaption { padding-top:16px; }
  .price { padding:28px; }
  .faq summary { font-size:16px; }
  .final { padding:64px 20px; }
  .final>.muted { font-size:16px; }
  .final .btn-grad,.final .btn-ghost { font-size:12px; padding-inline:18px; }
  main>section:last-child { padding-bottom:64px; }
  .foot { align-items:flex-start; }
  .foot nav { gap:16px; line-height:1.8; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Product reveal: the selected device treatment joins the full landing. */
.hero { padding-top:60px; padding-bottom:36px; overflow:hidden; }
.hero-grid { display:flex; flex-direction:column; gap:10px; min-height:0; }
.hero-copy { text-align:center; position:relative; z-index:2; }
.hero-stagger>* { opacity:1; transform:none; animation:none; }
.hero h1 { font-size:clamp(52px,6.2vw,88px); letter-spacing:-.055em; margin:20px 0 24px; }
.lead { max-width:620px; margin-left:auto; margin-right:auto; font-size:18px; line-height:1.65; }
.hero .cta-row { justify-content:center; }
.hero .availability { margin-top:20px; }
.product-showcase { position:relative; width:100%; max-width:1120px; margin-top:-22px; margin-bottom:110px; }
.laptop-visual { width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.product-showcase .hero-phone { position:absolute; right:3%; top:24%; }
.product-showcase .phone { width:230px; padding:8px; border-radius:38px; }
.product-showcase .phone-screen { border-radius:31px; }
.product-showcase .phone-island { top:16px; width:76px; height:22px; }
.product-showcase .phone-island::after { width:8px; height:8px; right:11px; }
.product-showcase .phone-controls { gap:6px; margin-top:10px; }
.product-showcase .phone-dots button { width:25px; }
.product-showcase .phone-toggle { font-size:10px; padding-inline:10px; }
.product-showcase .phone-caption { margin-top:2px; font-size:10px; }
.editorial { position:relative; height:680px; min-height:550px; display:flex; align-items:center; background:#121212; padding:0; overflow:hidden; }
.editorial>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.editorial-copy { position:relative; z-index:1; }
.editorial-copy h2 { font-size:clamp(44px,5.1vw,72px); max-width:620px; }
.editorial-copy p { font-size:18px; line-height:1.8; color:#e2e2e5; margin:0 0 32px; }
.editorial-copy .section-kicker { color:#e2e2e5; }
@media(min-width:901px) {
  .story-frame { height:min(48vh,520px); aspect-ratio:auto; }
  .story-visual h2 { font-size:42px; }
}
@media(max-width:1000px) {
  .product-showcase .hero-phone { right:0; top:24%; }
  .product-showcase .phone { width:190px; }
  .product-showcase .phone-controls { flex-direction:column; gap:0; }
  .product-showcase .phone-caption { display:none; }
  .product-showcase { margin-bottom:80px; min-height:520px; }
  .editorial { height:600px; }
}
@media(max-width:600px) {
  .hero { padding-top:40px; padding-bottom:58px; }
  .hero-grid { gap:36px; }
  .hero h1 { font-size:clamp(36px,9.1vw,54px); }
  .hero .lead { font-size:16px; }
  .product-showcase { margin:0; min-height:0; display:flex; justify-content:center; }
  .laptop-visual { display:none; }
  .product-showcase .hero-phone { position:relative; inset:auto; }
  .product-showcase .phone { width:260px; }
  .product-showcase .phone-controls { flex-direction:row; gap:8px; }
  .product-showcase .phone-caption { display:block; }
  .editorial { height:700px; align-items:flex-end; }
  .editorial>img { object-position:65% center; }
  .editorial-copy { background:#080808d9; width:100%; padding:28px 24px; }
  .editorial-copy h2 { font-size:40px; }
  .editorial-copy p { font-size:14px; }
}