/*
 * Nuclena landing page.
 *
 * Page-level styles on top of the Nuclena design system (css/design-system/*), converted from the inline
 * styles of data/design/nuclena_001/Nuclena Landing v2.dc.html.
 */


/* ---------------------------------------------------------------------------------------------------- */
/* PAGE                                                                                                 */
/* ---------------------------------------------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{background:var(--surface-canvas)}
section[id]{scroll-margin-top:64px}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.page{background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-sans);overflow-x:clip}

.page-section{padding:clamp(72px, 10vw, 128px) 24px}
.page-section--canvas{background:var(--surface-canvas);color:var(--text-primary)}
.page-section--paper{background:var(--surface-paper);color:var(--text-primary)}
.page-section--night{background:var(--surface-night);color:var(--text-on-dark)}
.page-section--night-800{background:var(--n-night-800);color:var(--text-on-dark)}
.page-section__inner{max-width:1200px;margin:0 auto}

.page-section__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.page-section__title{margin:0;font-weight:600;text-wrap:balance}
.page-section__title--lg{font-size:var(--display-lg-size);line-height:var(--display-lg-lh);letter-spacing:var(--display-lg-ls)}
.page-section__title--md{font-size:var(--display-md-size);line-height:var(--display-md-lh);letter-spacing:var(--display-md-ls)}

.page-icon{display:block;flex-shrink:0}


/* ---------------------------------------------------------------------------------------------------- */
/* HEADER                                                                                               */
/* ---------------------------------------------------------------------------------------------------- */
.n-nav .n-btn{background:var(--accent);color:var(--text-on-accent)}
.n-nav .n-btn:hover{background:var(--accent-hover);color:var(--text-on-accent)}

.header-menu{position:fixed;top:64px;left:0;right:0;z-index:49;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--border-hairline);padding:12px 20px 24px;display:flex;flex-direction:column;gap:4px}
.header-menu[hidden]{display:none}
.header-menu__link{color:var(--text-primary);text-decoration:none;font-size:24px;font-weight:600;letter-spacing:-0.02em;padding:12px 0;border-bottom:1px solid var(--border-hairline)}
.header-menu__link:hover{color:var(--text-primary)}
@media (min-width:834px){.header-menu{display:none}}


/* ---------------------------------------------------------------------------------------------------- */
/* HERO                                                                                                 */
/* ---------------------------------------------------------------------------------------------------- */
.home-hero{position:relative;background:var(--surface-canvas);padding:clamp(72px, 11vw, 136px) 24px 0;overflow:hidden}
.home-hero__content{max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.home-hero__title{margin:0;font-size:clamp(48px, 8vw, 104px);line-height:1;letter-spacing:-0.045em;font-weight:600;text-wrap:balance}
.home-hero__title span{color:var(--accent)}
.home-hero__lead{margin:0;max-width:620px;font-size:var(--lead-size);line-height:var(--lead-lh);letter-spacing:var(--lead-ls);color:var(--text-secondary);text-wrap:pretty}
.home-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.home-hero__visual{position:relative;width:min(720px, 100%);aspect-ratio:1.5;margin:clamp(24px, 4vw, 48px) auto 0;pointer-events:none}
.home-hero__canvas{width:100%;height:100%;display:block}


/* ---------------------------------------------------------------------------------------------------- */
/* BENEFITS                                                                                             */
/* ---------------------------------------------------------------------------------------------------- */
.home-benefits__inner{display:flex;flex-direction:column;gap:clamp(48px, 6vw, 80px)}
.home-benefits__head-title{display:flex;flex-direction:column;gap:16px;max-width:720px}
.home-benefits__intro{margin:0;max-width:340px;font-size:var(--body-size);line-height:var(--body-lh);color:var(--text-secondary);text-wrap:pretty}
.home-benefits__list{display:flex;flex-direction:column;border-bottom:1px solid var(--border-hairline)}
.home-benefit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 48px;padding:clamp(28px, 3.6vw, 44px) 12px;border-top:1px solid var(--border-hairline);transition:background-color 220ms cubic-bezier(.2,.7,.2,1)}
.home-benefit:hover{background-color:var(--surface-canvas)}
.home-benefit__head{flex:1 1 520px;display:flex;align-items:baseline;gap:clamp(16px, 3vw, 40px);min-width:0}
.home-benefit__number{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0.08em;color:var(--accent);flex-shrink:0}
.home-benefit__title{margin:0;font-size:clamp(36px, 6vw, 80px);line-height:1;letter-spacing:-0.04em;font-weight:600;text-wrap:balance}
.home-benefit__body{flex:0 1 380px;display:flex;gap:16px;align-items:flex-start}
.home-benefit__icon{width:44px;height:44px;flex-shrink:0;border-radius:999px;border:1px solid var(--border-hairline);display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}
.home-benefit__text{margin:0;font-size:var(--body-size);line-height:var(--body-lh);color:var(--text-secondary);text-wrap:pretty}


/* ---------------------------------------------------------------------------------------------------- */
/* WHY NUCLENA                                                                                          */
/* ---------------------------------------------------------------------------------------------------- */
.home-why__inner{display:flex;flex-direction:column;gap:clamp(56px, 8vw, 112px)}
.home-why__head{display:flex;flex-wrap:wrap;gap:48px 80px;align-items:flex-end}
.home-why__years{flex:1 1 440px;display:flex;flex-direction:column;gap:8px;min-width:0}
.home-why__years-number{font-size:clamp(140px, 24vw, 300px);line-height:0.86;letter-spacing:-0.06em;font-weight:600;color:var(--n-white);margin-left:-0.04em;padding-bottom:0.12em}
.home-why__years-number span{color:var(--accent-on-dark)}
.home-why__years-label{font-size:var(--title-lg-size);line-height:var(--title-lg-lh);letter-spacing:var(--title-lg-ls);font-weight:600}
.home-why__statement{flex:1 1 360px;margin:0;font-size:clamp(24px, 2.6vw, 34px);line-height:1.25;letter-spacing:-0.02em;font-weight:500;color:var(--n-white);text-wrap:pretty}
.home-why__statement span{color:var(--text-on-dark-secondary)}
.home-why__pillars{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));gap:16px}
.home-pillar{background:var(--surface-night-raised);border:1px solid var(--border-on-dark);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:14px;transition:border-color 140ms cubic-bezier(.2,.7,.2,1)}
.home-pillar:hover{border-color:#3a3a4e}
.home-pillar__icon{color:var(--accent-on-dark);display:inline-flex}
.home-pillar__title{margin:16px 0 0;font-size:var(--title-size);line-height:var(--title-lh);letter-spacing:var(--title-ls);font-weight:600}
.home-pillar__text{margin:0;font-size:15px;line-height:1.55;color:var(--text-on-dark-secondary);text-wrap:pretty}


/* ---------------------------------------------------------------------------------------------------- */
/* PROCESS                                                                                              */
/* ---------------------------------------------------------------------------------------------------- */
.home-process__inner{display:flex;flex-direction:column;gap:clamp(48px, 6vw, 80px)}
.home-process__head{display:flex;flex-direction:column;gap:16px;max-width:760px}
.home-process__lead{margin:0;font-size:var(--lead-size);line-height:var(--lead-lh);color:var(--text-secondary);text-wrap:pretty}
.home-process__timeline{position:relative}
.home-process__line{position:absolute;left:0;right:0;top:7px;height:1px;background:var(--border-hairline)}
.home-process__line--fill{background:var(--accent)}
.home-process__steps{position:relative;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));gap:40px 28px}
.home-step{display:flex;flex-direction:column;gap:14px}
.home-step__dot{width:15px;height:15px;border-radius:50%;background:var(--surface-canvas);border:1.5px solid var(--accent);display:inline-flex;align-items:center;justify-content:center}
.home-step__dot::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.home-step__number{margin-top:18px;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0.08em;color:var(--text-tertiary)}
.home-step__title{margin:0;font-size:var(--title-lg-size);line-height:var(--title-lg-lh);letter-spacing:var(--title-lg-ls);font-weight:600}
.home-step__text{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary);text-wrap:pretty}


/* ---------------------------------------------------------------------------------------------------- */
/* SERVICES                                                                                             */
/* ---------------------------------------------------------------------------------------------------- */
.home-services__inner{display:flex;flex-direction:column;gap:48px}
.home-services__head-title{display:flex;flex-direction:column;gap:16px;max-width:640px}
.home-services__grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));gap:16px}
.home-service{display:flex}
.home-service .n-card{flex:1}
.home-service__icon{order:-1;color:var(--accent);display:inline-flex;margin-bottom:28px}


/* ---------------------------------------------------------------------------------------------------- */
/* FOUNDER                                                                                              */
/* ---------------------------------------------------------------------------------------------------- */
.home-founder__inner{display:flex;flex-wrap:wrap;gap:48px 80px;align-items:flex-start}
.home-founder__avatar-container{flex:0 1 280px;display:flex;flex-direction:column;gap:20px}
.home-founder__avatar{width:120px;height:120px;border-radius:50%;background:var(--surface-night);color:var(--n-white);display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:700;letter-spacing:-0.04em}
.home-founder__content{flex:1 1 520px;display:flex;flex-direction:column;gap:32px;max-width:760px}
.home-founder__quote{margin:0;font-size:clamp(24px, 2.8vw, 36px);line-height:1.28;letter-spacing:-0.022em;font-weight:500;text-wrap:pretty}
.home-founder__text{margin:0;font-size:var(--body-size);line-height:var(--body-lh);color:var(--text-secondary);text-wrap:pretty}
.home-founder__signature{display:flex;flex-direction:column;gap:2px;padding-top:24px;border-top:1px solid var(--border-hairline)}
.home-founder__name{font-size:17px;font-weight:600}
.home-founder__role{font-size:15px;color:var(--text-tertiary)}


/* ---------------------------------------------------------------------------------------------------- */
/* CONTACT                                                                                              */
/* ---------------------------------------------------------------------------------------------------- */
.contact__inner{display:flex;flex-wrap:wrap;gap:56px clamp(40px, 6vw, 80px);align-items:flex-start}
.contact__intro{flex:1 1 360px;display:flex;flex-direction:column;gap:28px;min-width:0}
.contact__title{margin:-0.14em 0 0;font-size:clamp(44px, 6.4vw, 88px);line-height:1;letter-spacing:-0.042em;font-weight:600;text-wrap:balance}
.contact__title span{display:block;color:var(--accent-on-dark)}
.contact__notes{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.contact__note{display:flex;gap:12px;align-items:center;color:var(--text-on-dark-secondary);font-size:15px}
.contact__note-icon{color:var(--accent-on-dark);display:inline-flex}
.contact__panel{flex:1 1 400px;min-width:0;background:var(--surface-canvas);color:var(--text-primary);border-radius:28px;padding:clamp(24px, 4vw, 40px)}

.contact-form{display:flex;flex-direction:column;gap:18px}
.contact-form__row{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));gap:18px}
.contact-form__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.contact-form__reply{font-size:13px;color:var(--text-tertiary)}
.contact-form__error{margin:0;font-size:13px;color:var(--danger)}
.contact-form__capthca{padding:0 12px;background:var(--surface-sunken);border-color:var(--border-hairline)}
.contact-form__capthca canvas{display:block;width:100%;height:100%}

/* Honeypot, hidden from people, filled by spam bots */
.contact-form__website{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.contact-sent{display:flex;flex-direction:column;gap:14px;padding:32px 0;min-height:360px;justify-content:center}
.contact-sent__icon{width:52px;height:52px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.contact-sent__title{margin:8px 0 0;font-size:var(--title-lg-size);line-height:var(--title-lg-lh);letter-spacing:var(--title-lg-ls);font-weight:600}
.contact-sent__text{margin:0;font-size:15px;line-height:1.55;color:var(--text-secondary)}