﻿html,body{overflow-x:clip}
/* =========================================================
   px-landing.css — scopé sous .px-landing + tokens --px-*
   Réutilise le vocabulaire néon déjà présent dans
   profil-resultat.css / questionnaire.css. Zéro rouge Sporencia.
   ⚠️ NE PAS charger styles.css sur la landing : ce fichier est
   auto-suffisant et scopé pour éviter toute collision globale.
   ========================================================= */
.px-landing{
  --px-bg:#0a0a12;
  --px-surface:#12121a;
  --px-card:#1a1a28;
  --px-line:rgba(255,255,255,.10);
  --px-line-hover:rgba(255,255,255,.22);
  --px-cyan:#00d4ff;
  --px-cyan-bright:#00f7ff;
  --px-violet:#a855f7;
  --px-magenta:#ff00ff;
  --px-text:#ffffff;
  --px-muted:rgba(255,255,255,.6);
  --px-faint:rgba(255,255,255,.4);
  --px-gradient:linear-gradient(120deg,var(--px-violet),var(--px-cyan));
  --px-hot:linear-gradient(120deg,#ff2dd4,var(--px-violet));
  --px-glow:0 0 40px rgba(0,212,255,.25),0 0 60px rgba(168,85,247,.2);
  --px-maxw:1180px;

  background:var(--px-bg);color:var(--px-text);
  font-family:"Rajdhani",system-ui,sans-serif;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.px-landing *{box-sizing:border-box}
.px-landing a{color:inherit;text-decoration:none}
.px-wrap{max-width:var(--px-maxw);margin:0 auto;padding:0 24px}
.px-eyebrow{font-family:"Orbitron",sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:.68rem;font-weight:600;color:var(--px-cyan)}
.px-grad{background:var(--px-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* NAV */
.px-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(10,10,18,.66);border-bottom:1px solid var(--px-line)}
.px-nav .px-wrap{max-width:1440px;padding:0 28px}
.px-nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.px-logo{display:flex;align-items:center;gap:10px;font-family:"Oswald",sans-serif;
  font-weight:700;font-size:1.3rem;letter-spacing:.04em}
.px-logo-img{height:150px;width:auto;display:block;margin:-55px 0;object-fit:contain}
.px-logo-img-foot{height:120px;margin:-45px 0}
.px-nav .px-logo{margin-left:0}
.px-logo .px-dot{width:27px;height:27px;border-radius:8px;background:var(--px-gradient);
  display:grid;place-items:center;box-shadow:0 0 18px rgba(0,212,255,.45)}
.px-logo .px-dot svg{width:15px;height:15px}
.px-nav-links{display:flex;align-items:center;gap:30px;font-size:1rem;font-weight:600}
.px-nav-links a{color:var(--px-muted);transition:color .2s}
.px-nav-links a:hover{color:var(--px-text)}
/* Dropdown Offres — style Apple : la nav s'étend vers le bas, pleine largeur */
.px-drop>span{display:inline-flex;align-items:center;gap:6px;color:var(--px-muted);cursor:pointer;transition:color .2s;font-weight:600}
.px-drop:hover>span{color:var(--px-text)}
.px-drop>span::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.px-drop:hover>span::after{transform:rotate(225deg) translateY(1px)}
/* panneau pleine largeur : fait corps avec la nav (même fond/blur), se déplie dessous */
.px-menu{position:absolute;top:100%;left:0;right:0;overflow:hidden;
  background:rgba(10,10,18,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--px-line);
  max-height:0;opacity:0;visibility:hidden;
  transition:max-height .35s cubic-bezier(.22,1,.36,1),opacity .25s ease,visibility .35s}
.px-nav:has(.px-drop:hover) .px-menu,.px-menu:hover{max-height:220px;opacity:1;visibility:visible}
.px-menu-list{max-width:1120px;margin:0 auto;padding:22px 24px 30px;display:flex;flex-direction:column;gap:4px}
.px-menu a{display:inline-block;align-self:flex-start;padding:8px 0;white-space:nowrap;
  font-family:"Oswald",sans-serif;font-weight:600;font-size:1.35rem;letter-spacing:.02em;
  color:var(--px-muted);transition:color .18s ease,transform .18s ease}
.px-menu a:hover{color:var(--px-text);transform:translateX(4px)}
.px-menu a.active{color:var(--px-text)}
.px-btn{display:inline-flex;align-items:center;gap:8px;font-family:"Oswald",sans-serif;
  font-weight:600;letter-spacing:.04em;font-size:.95rem;text-transform:uppercase;
  padding:11px 22px;border-radius:999px;cursor:pointer;border:0;transition:transform .15s,box-shadow .25s}
.px-btn-hot{background:var(--px-hot);color:#fff;box-shadow:0 8px 26px rgba(168,64,201,.35)}
.px-btn-hot:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,45,212,.45)}
/* Bouton CTA nav — reprend le fond dégradé de la section CTA (bas du site) :
   violet (haut-gauche) → teal/cyan (bas-droite). */
.px-btn-grad{position:relative;color:#fff;border:1px solid var(--px-line);
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(168,85,247,.55),transparent 55%),
    radial-gradient(120% 140% at 100% 100%,rgba(0,212,255,.45),transparent 60%),
    linear-gradient(140deg,#1b1340,#0d0d1e);
  box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .15s,box-shadow .3s,filter .25s}
.px-btn-grad:hover{transform:translateY(-2px);filter:brightness(1.12);
  box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 22px rgba(168,85,247,.3),
    0 0 22px rgba(0,212,255,.25),inset 0 1px 0 rgba(255,255,255,.22)}
.px-toggle{display:none;background:none;border:0;color:var(--px-text)}

/* HERO */
.px-hero{position:relative;padding:36px 0 90px}
.px-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.px-blob{position:absolute;border-radius:50%;filter:blur(95px)}
.px-blob.v{width:520px;height:520px;background:var(--px-violet);opacity:.4;top:-160px;right:-120px}
.px-blob.c{width:460px;height:460px;background:var(--px-cyan);opacity:.26;bottom:-200px;left:-140px}
.px-court{position:absolute;right:-4%;top:8%;width:62%;opacity:.14}
.px-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.px-title{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.08;font-size:clamp(3rem,6.4vw,5.4rem);margin:16px 0 0}
.px-title span{display:block}
.px-sub{color:var(--px-muted);font-size:1.18rem;font-weight:500;max-width:36rem;margin:26px 0 34px;line-height:1.7}
.px-sub b{color:var(--px-text);font-weight:700}
.px-stores{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Badges stores officiels — images Apple et Google NON modifiées : ni
   recolorées, ni redécoupées, ni encadrées (guidelines des deux
   plateformes). Seule la taille d'affichage est ajustée.

   Mesuré dans les fichiers : chaque visuel entoure son rectangle noir
   d'une marge que la hauteur CSS inclut. Apple : noir 39,125 sur 40
   (0,9781) — le path 0 du SVG est le liseré blanc, le noir est le path 1.
   Google : noir 136 sur 142 (0,9577), soit 3 px transparents de chaque
   côté. Les hauteurs CSS sont donc calculées pour que les deux NOIRS
   fassent 44 px (40 px sur mobile), et non les deux fichiers.
   Google impose d'être au moins aussi grand que les badges voisins :
   44,06 contre 44,02 px, la règle est tenue. Ajuster l'Apple vers le
   haut, jamais le Google vers le bas. */
.px-store{display:inline-flex;align-items:center;line-height:0;
  /* aucun habillage : l'image officielle porte son propre fond et son
     propre arrondi. Remis à zéro explicitement pour qu'aucune règle
     générique de bouton ne puisse réintroduire un cadre. */
  background:none;border:0;outline:0;border-radius:0;padding:0;box-shadow:none;
  transition:transform .15s,opacity .2s}
.px-store:hover{transform:translateY(-2px);opacity:.88}
.px-store img{display:block;width:auto}
.px-store-apple{height:45px}        /* 45 x 0,9781 = 44,0px de noir visible */
.px-store-google{height:46px;margin:-1px}  /* 46 x 0,9577 = 44,1px de noir visible */
@media(max-width:420px){
  .px-store-apple{height:41px}
  .px-store-google{height:42px;margin:-1px}
}
/* L'ancien bloc .px-store (cadre noir, bordure, border-radius, padding)
   servait aux FAUX badges reconstruits en SVG + texte, abandonnés au
   profit des images officielles. Déclaré après les règles ci-dessus, il
   les écrasait et dessinait un cadre autour de chaque visuel — un bouton
   dans un bouton. Supprimé : les assets Apple et Google portent déjà leur
   propre fond noir et leur propre arrondi. */

/* VERSION GRATUITE : styles des badges App Store / Google Play retirés
   (plus aucun badge store dans le markup). */
.px-proof{display:flex;align-items:center;gap:10px;margin-top:26px;color:var(--px-muted);font-size:.95rem;font-weight:500}
.px-proof .px-pulse{width:9px;height:9px;border-radius:50%;background:var(--px-cyan);box-shadow:0 0 0 0 rgba(0,212,255,.6);animation:pxPulse 2.4s infinite}
@keyframes pxPulse{0%{box-shadow:0 0 0 0 rgba(0,212,255,.5)}70%{box-shadow:0 0 0 12px rgba(0,212,255,0)}100%{box-shadow:0 0 0 0 rgba(0,212,255,0)}}

/* PHONE — châssis réaliste avec capture d'écran de l'app */
.px-phone-stage{display:flex;justify-content:center;perspective:1600px}
.px-phone{position:relative;width:300px;height:610px;border-radius:46px;
  /* corps métallique sombre : reflets sur les bords */
  background:linear-gradient(135deg,#3a3a44 0%,#15151b 18%,#0c0c10 50%,#15151b 82%,#3a3a44 100%);
  padding:11px;
  box-shadow:0 45px 95px rgba(0,0,0,.65),0 8px 24px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 2px rgba(0,0,0,.5),
    0 0 60px rgba(168,85,247,.18);
  animation:pxFloat 6s ease-in-out infinite}
@keyframes pxFloat{0%,100%{transform:translateY(0) rotateY(-8deg) rotateX(2deg)}50%{transform:translateY(-14px) rotateY(-8deg) rotateX(2deg)}}
/* tranche latérale (boutons) */
.px-phone::after{content:"";position:absolute;right:-2px;top:150px;width:3px;height:64px;
  border-radius:2px;background:linear-gradient(#2a2a32,#15151b);box-shadow:0 80px 0 #15151b}
.px-phone .px-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:104px;height:24px;background:#000;border-radius:0 0 16px 16px;z-index:3}
.px-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;
  background:#0c0c1c}
.px-screen-img{width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;padding-top:1px;background:#0c0c1c}
.px-screen-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0 14px}
.px-screen-head .t{font-family:"Orbitron";font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--px-muted)}
.px-burger{display:flex;flex-direction:column;gap:3px}
.px-burger i{width:16px;height:2px;background:var(--px-muted);border-radius:2px}
.px-id{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--px-line);border-radius:14px;padding:8px 10px;margin-bottom:12px}
.px-id .ava{width:34px;height:34px;border-radius:50%;background:var(--px-gradient);display:grid;place-items:center;font-family:"Oswald";font-weight:700;font-size:1rem;color:var(--px-bg)}
.px-id .meta b{display:block;font-family:"Oswald";font-weight:600;font-size:.92rem}
.px-id .meta span{font-family:"Orbitron";font-size:.56rem;letter-spacing:.08em;color:var(--px-cyan);text-transform:uppercase}
.px-id .pal{margin-left:auto;font-family:"Orbitron";font-size:.56rem;letter-spacing:.08em;color:var(--px-muted);border:1px solid var(--px-line);border-radius:6px;padding:3px 7px}

.px-fut{position:relative;border-radius:20px;padding:1px;background:var(--px-gradient);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.px-fut-in{border-radius:19px;background:linear-gradient(165deg,#26264e,#14141f);padding:14px;position:relative;overflow:hidden}
.px-fut-in::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%)}
.px-fut-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative}
.px-fut-tier{font-family:"Orbitron";font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--px-magenta);line-height:1.5}
.px-fut-score{text-align:right}
.px-fut-score b{font-family:"Orbitron";font-weight:800;font-size:1.8rem;line-height:1;display:block}
.px-fut-score span{font-family:"Orbitron";font-size:.5rem;letter-spacing:.16em;color:var(--px-cyan)}
.px-fut-photo{height:118px;margin:8px 0 10px;border-radius:14px;position:relative;overflow:hidden;background:radial-gradient(80% 90% at 50% 10%,#2e2e63,#16161f)}
.px-fut-photo svg{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:96px}
.px-fut-name{font-family:"Oswald";font-weight:700;font-size:1.55rem;text-transform:uppercase;text-align:center;letter-spacing:.04em;margin:2px 0 10px}
.px-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;position:relative}
.px-stat{display:flex;align-items:center;justify-content:space-between;font-family:"Rajdhani";font-weight:500;font-size:.74rem;color:var(--px-muted)}
.px-stat b{font-family:"Orbitron";color:var(--px-text);font-size:.72rem}
.px-form{display:flex;align-items:center;gap:5px;margin-top:13px;position:relative}
.px-form .lab{font-family:"Orbitron";font-size:.5rem;letter-spacing:.1em;color:var(--px-faint);text-transform:uppercase;margin-right:4px}
.px-pip{width:15px;height:15px;border-radius:50%;font-family:"Oswald";font-size:.55rem;display:grid;place-items:center;font-weight:600;color:var(--px-bg)}
.px-pip.w{background:#3ddc97}.px-pip.l{background:#ff2dd4;color:#fff}.px-pip.n{background:#5a5a7a;color:#fff}

/* FEATURES */
.px-feat{padding:78px 0 20px;position:relative}
.px-feat h2{font-family:"Oswald";font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(1.9rem,3.6vw,2.7rem);margin:10px 0 8px}
.px-lead{color:var(--px-muted);font-weight:500;max-width:34rem;margin-bottom:38px;font-size:1.05rem}
.px-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.px-fcard{background:var(--px-surface);border:1px solid var(--px-line);border-radius:18px;padding:22px;transition:transform .18s,border-color .25s,box-shadow .25s}
.px-fcard:hover{transform:translateY(-4px);border-color:var(--px-violet);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.px-fic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:rgba(0,212,255,.10);border:1px solid rgba(0,212,255,.25)}
.px-fic svg{width:24px;height:24px;stroke:var(--px-cyan)}
.px-fcard h3{font-family:"Oswald";font-weight:600;font-size:1.18rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 6px}
.px-fcard p{color:var(--px-muted);font-weight:500;font-size:.95rem;margin:0}
/* grille 6 services : 3 colonnes */
.px-cards-6{grid-template-columns:repeat(3,1fr)}

/* ===== 5 SERVICES — sans bordure, icônes animées au survol ===== */
.px-feats5{display:grid;grid-template-columns:repeat(6,1fr);gap:30px 24px;margin-top:8px}
.px-feat5{grid-column:span 2;text-align:center;padding:8px 10px}
/* 3 en haut, 2 centrées en bas */
.px-feat5:nth-child(4){grid-column:2 / span 2}
.px-feat5:nth-child(5){grid-column:4 / span 2}
.px-feat5 h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;margin:6px 0 8px}
.px-feat5 p{color:var(--px-muted);font-weight:500;font-size:.96rem;line-height:1.55;margin:0 auto;max-width:20rem}

/* Illustrations SVG riches néon (statiques) */
.px-ill{width:108px;height:108px;margin:0 auto 6px;display:grid;place-items:center}
.px-ill svg{width:100px;height:100px;overflow:visible;
  filter:drop-shadow(0 8px 22px rgba(168,85,247,.30)) drop-shadow(0 0 14px rgba(0,212,255,.18))}

@media(max-width:760px){
  .px-feats5{grid-template-columns:repeat(2,1fr)}
  .px-feat5,.px-feat5:nth-child(4),.px-feat5:nth-child(5){grid-column:span 1}
}
@media(max-width:480px){.px-feats5{grid-template-columns:1fr}}

/* BENTO — écosystème (grille asymétrique) */
.px-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:148px;gap:16px;grid-auto-flow:dense}
.px-bcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),var(--px-surface);
  border:1px solid var(--px-line);border-radius:20px;padding:22px;
  transition:transform .18s,border-color .25s,box-shadow .25s}
.px-bcard::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;
  filter:blur(70px);background:var(--px-violet);opacity:0;top:-90px;right:-60px;transition:opacity .3s;pointer-events:none}
.px-bcard:hover{transform:translateY(-4px);border-color:rgba(168,85,247,.5);
  box-shadow:0 22px 46px rgba(0,0,0,.45),0 0 0 1px rgba(168,85,247,.25)}
.px-bcard:hover::before{opacity:.16}
.px-bic{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(0,212,255,.10);border:1px solid rgba(0,212,255,.28)}
.px-bic svg{width:24px;height:24px;stroke:var(--px-cyan)}
.px-bbody{position:relative}
.px-bcard h3{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.18rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 6px}
.px-bcard p{color:var(--px-muted);font-weight:500;font-size:.95rem;line-height:1.5;margin:0}
/* tailles bento */
.px-b-hero{grid-column:span 2;grid-row:span 2;justify-content:flex-end}
.px-b-hero .px-bic{width:58px;height:58px;border-radius:16px}
.px-b-hero .px-bic svg{width:30px;height:30px}
.px-b-hero h3{font-size:1.7rem;margin-bottom:8px}
.px-b-hero p{font-size:1.05rem;max-width:30rem}
.px-b-wide{grid-column:span 2}
@media(max-width:760px){
  .px-bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .px-bcard{min-height:140px}
  .px-b-hero,.px-b-wide{grid-column:span 2;grid-row:auto}
}
@media(max-width:480px){.px-bento{grid-template-columns:1fr}.px-b-hero,.px-b-wide{grid-column:span 1}}

/* PARCOURS PERFORMANCE */
/* Section « Parcours Performance » supprimée : son bloc .px-perf* et la
   composition deux téléphones .px-duo/.px-phone-sm/.px-phone-xs, qui ne
   servaient qu'à elle, sont retirés avec. .px-phone, .px-screen, .px-notch
   et .px-screen-img restent : ils servent encore au hero. */

/* CTA */
.px-cta{margin:96px 0 0}
.px-cta-in{position:relative;overflow:hidden;border-radius:28px;padding:56px 40px;text-align:center;background:linear-gradient(140deg,#1b1340,#0d0d1e);border:1px solid var(--px-line)}
.px-cta-in .px-glow{position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(80px)}
.px-cta-in .px-glow.a{background:var(--px-violet);opacity:.4;top:-160px;left:10%}
.px-cta-in .px-glow.b{background:var(--px-cyan);opacity:.3;bottom:-200px;right:8%}
.px-cta-in h2{position:relative;font-family:"Oswald";font-weight:700;text-transform:uppercase;font-size:clamp(2.1rem,4vw,3rem);letter-spacing:.01em;margin:8px 0 10px}
.px-cta-in p{position:relative;color:var(--px-muted);font-weight:500;margin:0 auto 26px;max-width:30rem;font-size:1.05rem}
.px-cta-in .px-stores{position:relative;justify-content:center}

/* FOOTER */
.px-foot{margin-top:70px;border-top:1px solid var(--px-line);padding:34px 0;color:var(--px-muted);font-weight:500;font-size:.92rem}
.px-foot-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.px-foot-in .px-logo{font-size:1.08rem}
.px-foot-links{display:flex;gap:22px}
.px-foot-links a:hover{color:var(--px-text)}

/* reveal */
.px-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.px-reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .px-hero-grid{grid-template-columns:1fr;gap:48px}
  .px-phone-stage{order:-1}
  .px-cards{grid-template-columns:repeat(2,1fr)}
  .px-court{display:none}
  .px-nav-links{display:none}
  .px-toggle{display:block}
}
@media (max-width:520px){.px-cards{grid-template-columns:1fr}.px-sub{font-size:1.05rem}}
@media (prefers-reduced-motion:reduce){.px-landing *{animation:none!important;transition:none!important}.px-reveal{opacity:1;transform:none}}

/* ===== VERSION GRATUITE — CTA inscription (remplace les badges stores) =====
   L'app n'étant pas encore publiée, les badges App Store / Google Play ont été
   retirés. On réutilise le bouton principal du site (.px-btn.px-btn-grad) et on
   ajoute une mention non cliquable « Bientôt sur iOS et Android ». */
.px-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.px-cta-row-center{justify-content:center;position:relative}
.px-soon{font-family:"Orbitron",sans-serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:.62rem;font-weight:600;color:var(--px-faint);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px}
.px-soon::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--px-cyan);opacity:.7;flex:0 0 auto}
@media(max-width:520px){
  .px-cta-row{gap:12px}
  .px-soon{font-size:.56rem;letter-spacing:.12em}
}
