/* ============================================================
   NextyLab — Landing (pixel-perfect from Figma, frame 1440px)
   ============================================================ */

:root{
  --sf: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --geist: "Geist", var(--sf);
  --card-shadow:
    0px 24px 24px -12px rgba(0,0,0,0.06),
    0px 12px 12px -6px rgba(0,0,0,0.06),
    0px 6px 6px -3px rgba(0,0,0,0.06),
    0px 3px 3px -1.5px rgba(0,0,0,0.06),
    0px 1px 1px -0.5px rgba(0,0,0,0.06),
    0px 0px 0px 1px rgba(0,0,0,0.06);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:#fff; }
html,body{ overflow-x:clip; }
body{
  font-family:var(--sf);
  color:#080e0c;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:none; }
p{ margin:0; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
a{ text-decoration:none; color:inherit; }

.page{
  width:1440px;
  margin:0 auto;
  background:#fff;
  position:relative;
  transform-origin:top left;     /* fallback scaler (browsers sans zoom) */
}
/* Sur écran >= 1440px (zoom = 1, page centrée), les sections à fond sombre
   s'étendent bord à bord ; leur contenu reste dans la colonne 1440 (.sec-inner). */
@media (min-width:1440px){
  .histoire, .cta-final, .footer, .sol-dark{ width:100vw; margin-left:calc(50% - 50vw); }
  .cta-final .sec-inner .top-band{ left:calc(50% - 50vw); width:100vw; }
  /* Visuel ChatGPT : collé au bord gauche réel de l'écran (comme dans Figma),
     texte gardé aligné dans la colonne 1440. */
  .page .chatgpt{
    width:100vw; margin-left:calc(50% - 50vw);
    justify-content:space-between;
    padding-left:0;
    padding-right:calc(50vw - 720px + 96px);
  }
  .chatgpt .cg-visual{ margin-left:-32px; }
}

/* Fill text with an image texture (Figma image-fill headings) */
.clip-text{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* Shared buttons */
.btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:12px 21px; border-radius:43px;
  font-size:14px; font-weight:600; white-space:nowrap;
  filter:drop-shadow(0 4px 4.1px rgba(0,0,0,0.25));
}
.btn .ic{ width:18px; height:18px; flex:none; }
.btn-dark{ background:#252525; color:#fff; }
.btn-light{ background:#fff; color:#1f1f1f; }

/* ============================== HERO ============================== */
.hero{
  height:860px; display:flex; flex-direction:column; align-items:center;
  overflow:hidden; padding:2px 15px 15px;
}
.navbar{
  width:1248px; display:flex; align-items:center; justify-content:center;
  padding:15px 0; flex:none;
}
.nav-brand{ flex:1 0 0; display:flex; align-items:center; gap:10px; min-width:0; }
.nav-brand .logo{ width:42px; height:42px; object-fit:cover; }
.nav-brand .brand{ font-weight:700; font-size:18px; color:#111827; white-space:nowrap; }
.nav-links{ flex:1 0 0; display:flex; gap:8px; align-items:center; justify-content:center; min-width:0; }
.nav-links a{ padding:8px 16px; border-radius:6px; font-size:14px; font-weight:400; color:#4b5563; text-decoration:none; white-space:nowrap; }
.nav-cta{ flex:1 0 0; display:flex; gap:16px; align-items:center; justify-content:flex-end; min-width:0; }
.nav-cta .contact{ font-size:14px; font-weight:500; color:#4b5563; white-space:nowrap; }

.hero-image{
  flex:1 0 0; width:100%; display:flex; align-items:center;
  padding:0 55px; border-radius:31px; position:relative; overflow:hidden;
}
.hero-image > .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-card{
  position:relative; width:691px;
  background:rgba(0,0,0,0.11);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  padding:10px; border-radius:43px;
  box-shadow:0 17px 11.4px rgba(0,0,0,0.25);
}
.hero-card-text{ display:flex; flex-direction:column; gap:28px; align-items:flex-start; padding:35px; }
.hero-card-text h1{ font-size:36px; font-weight:600; line-height:1.15; color:#fff; }
.hero-card-text .sub{ font-size:16px; font-weight:300; line-height:1.35; color:#fefefe; width:601px; }
.hero-card-cta{ padding:35px; width:671px; }

/* ============================== PROBLEME ============================== */
.probleme{ min-height:900px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:90px 50px; }
.probleme-inner{ width:1340px; display:flex; flex-direction:column; gap:49px; align-items:center; padding:10px 50px; }
.probleme-inner h2{ font-size:48px; font-weight:600; letter-spacing:-0.96px; text-align:center; line-height:1.12; width:100%; }
.probleme-inner .sub{ font-size:20px; font-weight:400; color:#334740; text-align:center; line-height:1.55; width:100%; }

/* ============================== CHATGPT ============================== */
.chatgpt{
  background:#fff; display:flex; gap:47px; height:900px;
  align-items:flex-start; justify-content:flex-end; padding:110px 96px;
  overflow:hidden;               /* clippe le débord gauche du visuel ChatGPT */
}
.cg-visual{
  flex:none; width:709px; height:680px; background:#2a2a2a;
  border-radius:32px; position:relative; overflow:hidden;
  box-shadow:0 0 65.4px 7px rgba(0,0,0,0.25);
}
.cg-logo{ position:absolute; left:179px; top:163px; display:flex; gap:10px; align-items:center; padding:10px; }
.cg-logo img{ width:47px; height:47px; }
.cg-logo span{ font-size:32px; font-weight:600; color:#fff; letter-spacing:-0.64px; line-height:1.14; }
.cg-search{
  position:absolute; left:22px; top:350px; width:524px; height:36px;
  background:#383838; border-radius:150px; display:flex; align-items:center;
  justify-content:space-between; padding:0 5px 0 20px;
}
.cg-search .ph{ font-size:16px; font-weight:300; color:#afafaf; letter-spacing:-0.32px; }
.cg-search .icons{ display:flex; gap:6px; align-items:center; justify-content:flex-end; }
.cg-search .icons .mic{ width:24px; height:24px; transform:scaleY(-1) rotate(180deg); }
.cg-search .icons .wave{ background:#fff; border-radius:114px; padding:6px; display:flex; }
.cg-search .icons .wave img{ width:17px; height:17px; }
.cg-text{ flex:none; display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center; }
.cg-text h2{ font-size:48px; font-weight:600; color:#080e0c; letter-spacing:-0.96px; line-height:1.14; width:620px; }
.cg-text .p1{ font-size:20px; font-weight:400; color:#334740; line-height:1.55; width:530px; }
.cg-text .p2{ font-size:22px; font-weight:600; color:#080e0c; line-height:1.4; width:530px; }

/* ==================== SOLUTIONS DARK (rôle de NextyLab) ==================== */
.sol-dark{ position:relative; height:100vh; min-height:731px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sol-dark-bg{ position:absolute; inset:10px 50px; background:#2a2a2a; border-radius:37px; box-shadow:0 30px 80px rgba(0,0,0,0.28); }   /* rectangle noir plein ecran, marge 10px h / 50px cotes */
.sol-dark-stage{ position:relative; width:1440px; height:711px; flex:none; }             /* contenu a taille fixe, centre */

/* Apparition au scroll : le panneau monte et se pose (comme place au-dessus de la section precedente).
   Etat cache instantane (pas de transition) + animation keyframes au declenchement = robuste. */
.sol-dark.reveal .sol-dark-bg,
.sol-dark.reveal .sol-dark-stage{ opacity:0; transform:translateY(90px); }
.sol-dark.reveal.in-view .sol-dark-bg{ animation:solRise .9s cubic-bezier(.16,1,.3,1) both; }
.sol-dark.reveal.in-view .sol-dark-stage{ animation:solRise .9s cubic-bezier(.16,1,.3,1) .12s both; }
@keyframes solRise{ from{ opacity:0; transform:translateY(90px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .sol-dark.reveal .sol-dark-bg,
  .sol-dark.reveal .sol-dark-stage{ opacity:1; transform:none; }
  .sol-dark.reveal.in-view .sol-dark-bg,
  .sol-dark.reveal.in-view .sol-dark-stage{ animation:none; }
}
.chip{
  position:absolute; display:flex; gap:10px; align-items:center;
  background:rgba(0,0,0,0.2); box-shadow:0 7px 11.9px rgba(0,0,0,0.25);
}
.chip .ibox{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; }
.chip span{ font-size:12px; font-weight:400; color:#fff; text-align:center; white-space:nowrap; }
.chip.small span{ font-size:10px; }
/* big chips (192x45) */
.chip.big{ width:192px; height:45px; padding:2px; border-radius:11px; }
.chip.big .ibox{ width:42px; height:42px; background:#2a2a2a; border-radius:10px; }
/* small gradient chips */
.chip.small{ border-radius:7px; padding-right:6px; }
.chip.small .ibox{ border-radius:7px; background:linear-gradient(92deg,#2a2a2a 1.6%,#525252 98.3%); }
.chip.small .txt{ display:flex; align-items:center; padding:6px 6px 6px 0; }
.chip-docs{ left:673px; top:171px; }
.chip-docs .ibox img{ width:39px; height:40px; }
.chip-data{ left:331px; top:105px; padding-right:0; }
.chip-data .ibox{ width:27px; height:27px; }
.chip-data .ibox img{ width:17px; height:15px; }
.chip-rdv{ left:664px; top:561px; padding-right:0; }
.chip-rdv .ibox{ width:24px; height:24px; }
.chip-rdv .ibox img{ width:9px; height:9px; }
.chip-rdv .txt span{ width:85px; white-space:normal; }
.chip-report{ left:966px; top:470px; }
.chip-report .ibox img{ width:30px; height:31px; }
.chip-relance{ left:308px; top:399px; }
.chip-relance .ibox img{ width:22px; height:23px; }

.sol-dark-heading{
  position:absolute; left:96px; right:96px; top:235px; height:85px;
  display:flex; align-items:center; justify-content:center; padding:15px;
}
.sol-dark-heading p{ font-size:48px; font-weight:600; color:#fff; text-align:center; letter-spacing:-0.96px; line-height:1.14; }
.sol-dark-sub{
  position:absolute; left:93px; right:99px; top:299px; height:61px;
  display:flex; align-items:center; justify-content:center; padding:15px 50px;
}
.sol-dark-sub p{ font-size:20px; font-weight:400; color:#b8bdbd; text-align:center; line-height:1.55; }

/* ==================== SOLUTIONS CARDS (façon de travailler) ==================== */
.sol-cards{ display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; min-height:900px; overflow:hidden; padding:120px 96px; }
.sol-cards-title{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:15px; width:100%; line-height:1.15; }
.sol-cards-title .l1{ font-size:64px; font-weight:600; color:#b3b3b3; letter-spacing:-1.28px; }
.sol-cards-title .l2{ font-size:48px; font-weight:600; color:#2a2a2a; letter-spacing:-0.96px; }
.sol-cards-row{ display:flex; gap:10px; align-items:stretch; width:100%; }
.sol-card{
  flex:1 0 0; display:flex; flex-direction:column; gap:10px; align-items:center;
  padding:5px; border-radius:24px; background:#fff; position:relative; overflow:hidden;
  box-shadow:inset 0 0 3.5px rgba(0,0,0,0.25);
}
.sol-card .img{
  width:100%; height:273px; background:#f3f3f3; border-radius:19px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sol-card .img img{ width:155px; height:155px; object-fit:cover; filter:drop-shadow(0 18px 12px rgba(0,0,0,0.2)); }
.sol-card .txt{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding:10px 15px; width:100%; line-height:1.15; }
.sol-card .txt h3{ font-size:32px; font-weight:700; color:#000; white-space:nowrap; }
.sol-card .txt p{ font-size:16px; font-weight:500; color:#606165; line-height:1.35; width:100%; }

/* ==================== METHOD (Du diagnostic…) ==================== */
.method{ display:flex; flex-direction:column; height:964px; align-items:center; overflow:hidden; padding:96px 0; }
.method-inner{ flex:1 0 0; display:flex; flex-direction:column; gap:10px; justify-content:center; padding:0 96px 15px; width:100%; }
.method-title{ font-size:48px; font-weight:600; letter-spacing:-0.96px; text-align:center; line-height:1.1; width:100%; }
.method-card{
  background:#2a2a2a; flex:1 0 0; display:flex; gap:10px; align-items:stretch;
  overflow:hidden; padding:15px; border-radius:43px; width:100%;
  box-shadow:0 -15px 43.7px rgba(0,0,0,0.25);
}
.method-left{ flex:1 0 0; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.method-left .head{ padding:33px 31px; }
.method-left .head h3{ font-size:32px; font-weight:600; color:#f1f1f3; }
.method-steps{ flex:1 0 0; display:flex; flex-direction:column; justify-content:center; gap:0; padding:0 15px; }
.step{ flex:1 0 0; display:flex; gap:14px; align-items:flex-start; padding:14px 0; }
.step .toggle{ position:relative; width:51px; height:31px; flex:none; }
.step .toggle .track{ position:absolute; inset:0; width:51px; height:31px; }
.step .toggle .knob{ position:absolute; top:2px; right:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,0.18); }
.step .st-txt{ display:flex; flex-direction:column; gap:8px; }
.step .st-txt .t{ font-size:20px; font-weight:500; color:#f1f1f3; }
.step .st-txt .d{ font-size:14px; font-weight:400; color:rgba(233,233,233,0.5); line-height:1.35; width:308px; }
.method-right{
  background:#f1f1f3; width:417px; flex:none; border-radius:33px; padding:10px;
  display:flex; flex-direction:column; justify-content:center; gap:0;
}
.mr-block{ flex:1 0 0; display:flex; flex-direction:column; gap:10px; justify-content:center; padding:25px; }
.mr-block .row{ display:flex; gap:10px; align-items:center; }
.mr-block .row img{ object-fit:cover; flex:none; }
.mr-block .row h4{ font-size:32px; font-weight:600; color:#2a2a2a; }
.mr-block > p{ font-size:20px; font-weight:500; color:#2a2a2a; line-height:1.25; }

/* ==================== PREUVE (Trois projets) ==================== */
.preuve{ display:flex; flex-direction:column; gap:52px; align-items:center; justify-content:center; min-height:900px; overflow:hidden; padding:120px 96px; }
.preuve-head{ display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
.preuve-head h2{ font-size:48px; font-weight:600; color:#080e0c; letter-spacing:-0.96px; line-height:1.14; width:auto; max-width:1100px; white-space:nowrap; }
.preuve-head p{ font-size:20px; font-weight:400; color:#5c6661; line-height:1.5; width:700px; }
.preuve-cards{ display:flex; gap:24px; height:516px; align-items:center; justify-content:center; width:100%; }
.pcard{
  position:relative; width:384px; height:480px; border-radius:28px; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  box-shadow:var(--card-shadow); flex:none;
}
.pcard > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pcard .caption{
  position:relative; width:100%; flex:1 0 0; background:rgba(0,0,0,0.44);
  display:flex; flex-direction:column; gap:6px; align-items:flex-start; justify-content:flex-end;
  padding:15px; border-radius:27px;
}
.pcard .caption h3{ font-size:22px; font-weight:600; color:#fff; line-height:1.2; }
.pcard .caption .loc{ font-size:14px; font-weight:400; color:#bdbdbd; line-height:1.3; }
.pcard .caption .desc{ font-size:16px; font-weight:400; color:#dedede; line-height:1.5; }

/* ==================== HISTOIRE (Deux profils) ==================== */
.histoire{ background:#2a2a2a; }
.histoire > .sec-inner{ display:flex; flex-direction:column; gap:88px; height:1010px; align-items:center; overflow:hidden; padding:96px; width:1440px; margin:0 auto; }
.histoire .sec-inner > h2{ font-size:48px; font-weight:600; color:#fff; text-align:center; letter-spacing:-0.96px; line-height:1.15; padding:15px; width:100%; }
.profiles{ display:flex; gap:266px; height:420px; align-items:center; justify-content:center; width:100%; filter:drop-shadow(0 26px 20.55px rgba(0,0,0,0.25)); }
.profile{
  position:relative; width:461px; height:428px; border-radius:33px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.profile > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile .plate{
  position:relative; height:175px; background:rgba(0,0,0,0.2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:3px 40px; border-radius:32px;
}
.profile .plate span{ font-size:48px; font-weight:600; color:#fff; letter-spacing:-0.96px; line-height:1.15; }
.captions{ display:flex; gap:222px; align-items:center; justify-content:center; text-align:center; width:100%; }
.captions p{ flex:1 0 0; font-size:20px; font-weight:300; font-style:italic; color:rgba(255,255,255,0.92); line-height:1.15; }

/* ==================== REASSURANCE (chat bubbles) ==================== */
.reassurance{ display:flex; flex-direction:column; gap:48px; height:900px; align-items:center; justify-content:center; overflow:hidden; padding:120px 96px; }
.reassurance > h2{ font-size:48px; font-weight:600; color:#080e0c; text-align:center; letter-spacing:-0.96px; line-height:1.14; width:940px; }
.chat-field{ position:relative; flex:1 0 0; width:100%; }
.chat-card{ position:absolute; width:452px; display:flex; flex-direction:column; gap:13px; }
.chat-card.c1{ left:81px; top:7px; }
.chat-card.c2{ left:697px; top:24px; }
.chat-card.c3{ left:379px; top:287px; }
.msg{ display:flex; padding:10px; }
.msg.in{ justify-content:flex-start; }
.msg.out{ justify-content:flex-end; }
.bubble{
  position:relative; padding:6px 12px; border-radius:18px; font-size:16px; line-height:1.35;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.12));
}
.bubble.gray{ background:#e9e9eb; color:#000; max-width:250px; }
.bubble.blue{ background:#468cf7; color:#fff; max-width:265px; }
.bubble .tail{ position:absolute; bottom:-1px; width:11px; height:20px; }
.bubble.gray .tail{ left:-6px; }
.bubble.blue .tail{ right:-6px; transform:scaleX(-1); }

/* ==================== FAQ ==================== */
.faq{ display:flex; flex-direction:column; gap:44px; align-items:center; justify-content:center; min-height:900px; overflow:hidden; padding:120px 96px; }
.faq > h2{ font-size:48px; font-weight:600; color:#080e0c; text-align:center; letter-spacing:-0.96px; line-height:1.12; width:900px; }
.faq-list{ display:flex; flex-direction:column; gap:16px; align-items:center; width:820px; }
.faq-card{ background:#fff; display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:26px 30px; border-radius:24px; box-shadow:var(--card-shadow); width:100%; }
.faq-card .q{ font-size:19px; font-weight:600; color:#080e0c; line-height:1.3; width:760px; max-width:100%; }
.faq-card .a{ font-size:16px; font-weight:400; color:#334740; line-height:1.5; width:760px; max-width:100%; }

/* ==================== CTA FINAL (iPhone) ==================== */
.cta-final{ background:#2a2a2a; }
.cta-final > .sec-inner{ position:relative; height:900px; width:1440px; margin:0 auto; }
.cta-final .top-band{ position:absolute; left:0; top:0; width:1440px; height:433px; background:#fff; }
.cta-final .headline{ position:absolute; left:116px; top:178px; color:#000; }
.cta-final .headline .l1{ font-size:55px; font-weight:700; line-height:71px; letter-spacing:0.38px; white-space:pre; }
.cta-final .headline .l2{ font-size:64px; font-weight:700; line-height:71px; letter-spacing:0.38px; white-space:pre; }
.cta-final .cta-final-btn{ position:absolute; left:116px; top:360px; }

.lockscreen{ position:absolute; left:845px; top:38px; width:399px; height:842px; border-radius:44px; overflow:hidden; }
.lockscreen > .wall{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.iphone-frame{ position:absolute; left:828px; top:16px; width:434px; height:886px; }
.iphone-frame img{ width:100%; height:100%; object-fit:cover; }

/* lockscreen internals */
.ls-status{ position:absolute; left:0; right:0; top:0; height:59px; display:flex; align-items:flex-end; justify-content:center; }
.ls-status .side{ flex:1 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; }
.ls-status .side.left{ padding:0 0 3px 10px; }
.ls-status .side.right{ padding-right:11px; }
.ls-time-sb{ font-size:16px; font-weight:600; color:#000; letter-spacing:-0.32px; }
.ls-island{ width:125px; height:37px; background:#000; border-radius:100px; }
.ls-status .signals{ display:flex; gap:8px; align-items:flex-start; }
.ls-status .signals .sig{ height:12px; width:18px; }
.ls-status .signals .wifi{ height:11.834px; width:17px; }
.ls-status .signals .bat{ height:13px; width:27.401px; }

.ls-datetime{ position:absolute; left:100px; right:101px; top:150px; text-align:center; }
.ls-date{ font-size:22px; font-weight:500; color:#fff; letter-spacing:0.38px; line-height:24px; mix-blend-mode:overlay; }
.ls-time{ font-size:100px; font-weight:500; color:#fff; letter-spacing:-2.12px; line-height:1; margin-top:14px; mix-blend-mode:overlay; }

.ls-widgets{ position:absolute; left:50%; transform:translateX(-50%); top:309px; display:flex; gap:32px; align-items:flex-start; }
.ls-widget{ width:56px; height:56px; position:relative; overflow:visible; }
.ls-widget img{ width:100%; height:100%; }
.ls-widget.weather .ring{ position:absolute; left:0; top:0; width:56px; height:43.395px; }
.ls-widget.weather .temp{ position:absolute; left:28px; top:27px; transform:translate(-50%,-50%); font-size:24px; color:#fff; mix-blend-mode:overlay; letter-spacing:0.36px; }
.ls-widget.weather .lo{ position:absolute; left:18.5px; top:46.5px; transform:translate(-50%,-50%); font-size:11px; color:#fff; mix-blend-mode:overlay; }
.ls-widget.weather .hi{ position:absolute; left:37.5px; top:46.5px; transform:translate(-50%,-50%); font-size:11px; color:#fff; mix-blend-mode:overlay; }
.ls-widget.weather .marker{ position:absolute; left:13px; top:2px; width:7px; height:7px; }
.ls-widget.rings .r1{ position:absolute; left:0; top:0; width:56px; height:56px; }
.ls-widget.rings .r2{ position:absolute; left:8px; top:8px; width:40px; height:40px; }
.ls-widget.rings .r3{ position:absolute; left:16px; top:16px; width:24px; height:24px; }
.ls-widget.clock{ border-radius:100px; background:rgba(255,255,255,0.12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.ls-widget.clock .city{ position:absolute; left:50%; transform:translateX(-50%); top:9px; font-size:8px; color:#fff; mix-blend-mode:overlay; letter-spacing:-0.434px; }
.ls-widget.clock .t{ position:absolute; left:50%; transform:translateX(-50%); top:18px; font-size:15px; color:#fff; mix-blend-mode:overlay; letter-spacing:-0.24px; }
.ls-widget.clock .ampm{ position:absolute; left:50%; transform:translateX(-50%); top:35px; font-size:12px; color:#fff; mix-blend-mode:overlay; }

.ls-bottom{ position:absolute; left:46px; right:46px; bottom:50px; display:flex; align-items:center; justify-content:space-between; }
.ls-bottom .rnd{ width:50px; height:50px; }
.ls-bottom .focus{ display:flex; gap:6px; align-items:center; }
.ls-bottom .focus img{ width:14.5px; height:14.5px; }
.ls-bottom .focus span{ font-size:15px; color:#fff; letter-spacing:-0.24px; line-height:20px; }
.ls-home{ position:absolute; left:0; right:0; bottom:0; height:34px; }
.ls-home i{ position:absolute; left:50%; transform:translateX(-50%); bottom:8px; width:134px; height:5px; background:#fff; border-radius:100px; }

.ls-notif{
  position:absolute; left:865px; top:103px;
  -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px);
  background:rgba(24,24,24,0.7); display:flex; flex-direction:column; align-items:flex-start;
  padding:20px 14px; border-radius:56px;
}
.ls-notif .content{ display:flex; gap:20px; align-items:center; justify-content:center; }
.ls-notif .caller{ display:flex; gap:16px; align-items:center; }
.ls-notif .avatar{ width:45px; height:45px; background:#000; border-radius:100px; position:relative; overflow:hidden; }
.ls-notif .avatar img{ position:absolute; left:5px; top:5.5px; width:34px; height:34px; }
.ls-notif .name{ display:flex; flex-direction:column; gap:2px; width:164px; }
.ls-notif .name .n1{ font-size:20px; color:#fff; letter-spacing:0.38px; line-height:24px; }
.ls-notif .name .n2{ font-size:20px; color:rgba(235,235,245,0.6); letter-spacing:0.38px; line-height:24px; }
.ls-notif .actions{ display:flex; gap:14px; align-items:center; }
.ls-notif .actions img{ width:36px; height:36px; }

/* ==================== FOOTER ==================== */
.footer{ background:#2a2a2a; }
.footer > .sec-inner{ display:flex; flex-direction:column; gap:40px; align-items:flex-start; overflow:hidden; padding:72px 96px 44px; width:1440px; margin:0 auto; }
.footer-top{ display:flex; align-items:flex-start; justify-content:space-between; width:100%; }
.footer-brand{ display:flex; flex-direction:column; gap:14px; width:380px; }
.footer-brand .name{ font-family:var(--geist); font-weight:700; font-size:20px; color:#fff; }
.footer-brand .desc{ font-size:14px; font-weight:400; color:#9ea6a3; line-height:1.5; }
.footer-brand .loc{ font-size:13px; font-weight:400; color:#737a78; }
.footer-cols{ display:flex; gap:72px; align-items:flex-start; }
.footer-col{ display:flex; flex-direction:column; gap:14px; }
.footer-col .h{ font-family:var(--geist); font-weight:500; font-size:12px; color:#737a78; letter-spacing:0.5px; }
.footer-col a{ font-size:14px; font-weight:400; color:#b8bfbd; text-decoration:none; white-space:nowrap; }
.footer-div{ height:1px; background:rgba(255,255,255,0.12); width:100%; }
.footer-bot{ display:flex; align-items:center; justify-content:space-between; width:100%; font-size:13px; font-weight:400; color:#737a78; }

/* Fit smaller viewports: keep the 1440 layout, allow horizontal scroll */
@media (max-width:1460px){
  body{ overflow-x:auto; }
}