@font-face { font-family: "BankGothic Md BT"; src: url('fonts/BankGothic_Md_BT.woff2') format('woff2'), url('fonts/BankGothic_Md_BT.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Arimo"; src: url('fonts/arimo-var-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } :root{ --color-bg:#F5F6F8; --color-surface:#FFFFFF; --color-surface-alt:#ECEEF3; --color-structure:#313F70; --color-structure-deep:#28335C; --color-ink:#0A0D14; --color-text:#0A0D14; --color-text-muted:#626262; --color-on-dark:#F5F6F8; --color-on-dark-muted:#B6BDD4; --color-accent:#F76220; --color-accent-strong:#FE5406; --color-border:#E1E4EB; --color-border-strong:#C9CEDA; --color-focus:#F76220; --tint-accent-08:rgba(247,98,32,.08); --tint-accent-14:rgba(247,98,32,.14); --tint-navy-06:rgba(49,63,112,.06); --tint-navy-10:rgba(49,63,112,.10); --gradient-action:linear-gradient(135deg,#F76220 0%,#FE5406 100%); --gradient-structure:linear-gradient(155deg,#3A4A82 0%,#313F70 45%,#28335C 100%); --font-sans:"Arimo","Helvetica Neue",Helvetica,Arial,sans-serif; --font-display:"BankGothic Md BT","Arimo","Helvetica Neue",Arial,sans-serif; --fs-eyebrow:clamp(0.72rem,0.69rem + 0.15vw,0.80rem); --fs-caption:clamp(0.80rem,0.77rem + 0.15vw,0.875rem); --fs-body:clamp(1.00rem,0.97rem + 0.18vw,1.125rem); --fs-body-lg:clamp(1.125rem,1.05rem + 0.40vw,1.375rem); --fs-h3:clamp(1.30rem,1.18rem + 0.60vw,1.75rem); --fs-h2:clamp(1.70rem,1.40rem + 1.45vw,2.60rem); --fs-h1:clamp(2.20rem,1.70rem + 2.45vw,3.60rem); --fs-display:clamp(2.75rem,1.95rem + 3.90vw,5.25rem); --tracking-display:-0.02em; --tracking-tight:-0.01em; --tracking-eyebrow:0.16em; --lh-tight:1.04; --lh-snug:1.18; --lh-body:1.62; --space-2xs:0.25rem; --space-xs:0.50rem; --space-sm:0.75rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem; --space-4xl:6rem; --section-pad:clamp(2rem,1.2rem + 3.5vw,4.5rem); --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px; --notch:22px; --shadow-sm:0 1px 2px rgba(10,13,20,.04),0 1px 3px rgba(10,13,20,.05); --shadow-md:0 6px 16px -4px rgba(49,63,112,.12),0 2px 6px rgba(10,13,20,.05); --shadow-lg:0 22px 48px -16px rgba(49,63,112,.24),0 6px 14px rgba(10,13,20,.05); --shadow-accent:0 10px 26px -8px rgba(247,98,32,.50); --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-std:cubic-bezier(0.4,0,0.2,1); --dur-fast:160ms; --dur-base:260ms; --dur-slow:520ms; --maxw:1180px; --nav-h:72px; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1rem); } body{ margin:0; font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ display:block; max-width:100%; } a{ color:inherit; } a, button, summary, label, .btn{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } :focus-visible{ outline:3px solid var(--color-focus); outline-offset:3px; border-radius:6px; } .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:clamp(1.1rem,4vw,2rem); } .skip{ position:absolute; left:-9999px; top:0; background:#fff; color:var(--color-ink); padding:10px 16px; z-index:200; border-radius:0 0 var(--radius-md) 0; } .skip:focus{ left:0; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:14px 24px; font-family:inherit; font-size:var(--fs-body); font-weight:600; letter-spacing:.01em; border-radius:var(--radius-pill); border:1.5px solid transparent; cursor:pointer; text-decoration:none; line-height:1; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std); } .btn svg{ width:18px; height:18px; transition:transform var(--dur-base) var(--ease-out); } .btn-primary{ background:var(--gradient-action); color:#fff; box-shadow:var(--shadow-accent); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(247,98,32,.62); } .btn-primary:hover svg{ transform:translateX(4px); } .btn-primary:active{ transform:translateY(0); } .btn-secondary{ background:var(--color-surface); color:var(--color-structure); border-color:var(--color-border-strong); } .btn-secondary:hover{ transform:translateY(-2px); border-color:var(--color-structure); background:var(--tint-navy-06); box-shadow:var(--shadow-sm); } .eyebrow{ display:inline-flex; align-items:center; gap:var(--space-xs); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-structure); } .eyebrow::before{ content:""; width:24px; height:2px; background:var(--gradient-action); border-radius:2px; } .nav{ position:fixed; inset:0 0 auto 0; z-index:100; min-height:var(--nav-h); transition:background-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); background:transparent; border-bottom:1px solid transparent; } .nav::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:1; transition:opacity var(--dur-base) var(--ease-std); background:linear-gradient(180deg, rgba(10,13,20,.45) 0%, rgba(10,13,20,0) 100%); } .nav.is-solid{ background:var(--color-structure-deep); border-bottom-color:rgba(255,255,255,.08); box-shadow:var(--shadow-md); } .nav.is-solid::before{ opacity:0; } .nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); min-height:var(--nav-h); position:relative; z-index:1; } .nav__brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:8px 0; } .nav__logo{ height:34px; width:auto; } .nav__word{ color:#fff; font-weight:700; font-size:1.15rem; letter-spacing:.02em; } .nav__menu{ display:flex; align-items:center; gap:var(--space-xs); } .nav__menu a:not(.nav__cta){ color:#fff; text-decoration:none; font-weight:500; font-size:0.975rem; padding:12px 14px; min-height:44px; display:inline-flex; align-items:center; border-radius:var(--radius-sm); transition:background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std); } .nav__menu a:not(.nav__cta):hover{ background:rgba(255,255,255,.12); } .nav__cta{ margin-left:var(--space-sm); } .nav__cta.btn{ min-height:44px; padding:11px 20px; font-size:0.95rem; } .nav__burger{ display:none; width:46px; height:46px; align-items:center; justify-content:center; gap:0; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm); cursor:pointer; } .nav__burger span{ display:block; width:20px; height:2px; background:#fff; position:relative; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); } .nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; transition:transform var(--dur-base) var(--ease-out); } .nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; } .nav.is-open .nav__burger span{ background:transparent; } .nav.is-open .nav__burger span::before{ transform:translateY(6px) rotate(45deg); } .nav.is-open .nav__burger span::after{ transform:translateY(-6px) rotate(-45deg); } @media (max-width:880px){ .nav__burger{ display:inline-flex; } .nav__menu{ position:absolute; top:calc(100% + 0px); left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--color-structure-deep); padding:var(--space-sm) clamp(1.1rem,4vw,2rem) var(--space-lg); border-top:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-lg); transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); } .nav.is-open .nav__menu{ transform:none; opacity:1; visibility:visible; pointer-events:auto; } .nav__menu a:not(.nav__cta){ padding:14px 6px; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; } .nav__cta{ margin:var(--space-md) 0 0; } .nav__cta.btn{ width:100%; } .nav:not(.is-solid){ background:var(--color-structure-deep); } .nav:not(.is-solid)::before{ opacity:0; } } .hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; background:var(--color-structure-deep); } .hero__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; } .hero__scrim{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 80% 55% at 30% 96%, rgba(10,13,20,.70) 0%, rgba(10,13,20,0) 100%), linear-gradient(180deg, rgba(10,13,20,.40) 0%, rgba(10,13,20,.05) 32%, rgba(10,13,20,.12) 58%, rgba(10,13,20,.72) 100%); } .hero__content{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding-bottom:clamp(2.2rem,6vh,4rem); padding-top:calc(var(--nav-h) + 1rem); } .hero__inner{ max-width:760px; } .hero .eyebrow{ color:#fff; } .hero__title{ margin:var(--space-md) 0 0; color:#fff; font-family:var(--font-display); font-size:clamp(1.90rem,1.70rem + 2.45vw,3.60rem); font-weight:700; letter-spacing:var(--tracking-display); line-height:var(--lh-tight); text-wrap:balance; } .hero__sub{ margin:var(--space-md) 0 0; color:#EDF0F6; font-size:clamp(1.02rem,0.95rem + 0.35vw,1.3rem); line-height:1.55; max-width:54ch; text-shadow:0 1px 2px rgba(10,13,20,.4); } .hero__actions{ margin:var(--space-xl) 0 0; display:flex; flex-wrap:wrap; gap:var(--space-md); align-items:center; } .btn-link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 4px; color:#fff; font-weight:600; text-decoration:none; font-size:var(--fs-body); border-bottom:2px solid transparent; transition:border-color var(--dur-base) var(--ease-std); } .btn-link svg{ width:16px; height:16px; transition:transform var(--dur-base) var(--ease-out); } .btn-link:hover{ border-bottom-color:var(--color-accent); } .btn-link:hover svg{ transform:translateX(4px); } .hero__hint{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; font-size:0.74rem; letter-spacing:.14em; text-transform:uppercase; opacity:.85; transition:opacity var(--dur-base) var(--ease-std); pointer-events:none; } .hero__hint svg{ width:22px; height:22px; animation:nudge 1.8s var(--ease-out) infinite; } @keyframes nudge{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} } .hero__loader{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:var(--color-structure-deep); transition:opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow); } .hero__loader.is-hidden{ opacity:0; visibility:hidden; } .loader__box{ display:flex; flex-direction:column; align-items:center; gap:var(--space-md); width:min(260px,60vw); } .loader__bar{ width:100%; height:3px; background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden; } .loader__fill{ height:100%; width:100%; background:var(--gradient-action); transform:scaleX(0); transform-origin:left; transition:transform 200ms linear; } .loader__label{ color:var(--color-on-dark-muted); font-size:0.74rem; letter-spacing:.16em; text-transform:uppercase; } .about{ position:relative; background:var(--color-bg); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .about__grid{ display:grid; gap:var(--space-2xl); grid-template-columns:1fr; align-items:start; } @media (min-width:980px){ .about__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,0.82fr) minmax(0,1fr); gap:var(--space-2xl); align-items:center; } } .eyebrow-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:var(--radius-pill); background:var(--tint-accent-14); color:var(--color-structure); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; } .eyebrow-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gradient-action); } .about__title{ margin:var(--space-md) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .about__text{ margin:var(--space-lg) 0 0; color:var(--color-text-muted); font-size:var(--fs-body-lg); line-height:1.55; } .about__text p{ margin:0; } .about__text p + p{ margin-top:var(--space-md); } .about__cta{ margin-top:var(--space-2xl); } .about__media{ position:relative; max-width:440px; margin-inline:auto; width:100%; } .media-frame{ position:relative; aspect-ratio:3/4; background:var(--gradient-structure); overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); } .media-frame img,.card__frame img,.project__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .card--fachadas .card__frame img{ object-position:center 20%; } .media-frame__motif{ position:absolute; top:-12%; right:-8%; width:54%; color:#fff; opacity:.10; pointer-events:none; } .media-frame__motif svg{ width:100%; height:auto; display:block; } .media-frame__tag{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; font-size:0.70rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:600; color:#fff; background:rgba(10,13,20,.34); backdrop-filter:blur(2px); padding:6px 11px; border-radius:var(--radius-pill); } .media-frame__tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--color-accent); } .media-claim{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:var(--space-2xl) var(--space-lg) var(--space-lg); background:linear-gradient(0deg, rgba(10,13,20,.86) 0%, rgba(10,13,20,.55) 55%, rgba(10,13,20,0) 100%); color:#fff; } .media-claim span{ display:block; width:34px; height:3px; background:var(--gradient-action); border-radius:2px; margin-bottom:var(--space-sm); } .media-claim strong{ display:block; font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--tracking-tight); line-height:var(--lh-snug); } .acc{ display:grid; gap:var(--space-md); } .acc__item{ border:1px solid var(--color-border); background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; transition:background var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-std); } .acc__item.is-open{ background:var(--gradient-action); border-color:transparent; box-shadow:var(--shadow-accent); } .acc__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); min-height:56px; padding:var(--space-md) var(--space-lg); background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; font-size:var(--fs-body-lg); font-weight:600; letter-spacing:var(--tracking-tight); color:var(--color-ink); transition:color var(--dur-base) var(--ease-std); } .acc__item.is-open .acc__btn{ color:#fff; } .acc__icon{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--tint-navy-10); color:var(--color-structure); transition:transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std); } .acc__icon svg{ width:16px; height:16px; } .acc__item.is-open .acc__icon{ background:rgba(255,255,255,.22); color:#fff; transform:rotate(180deg); } .acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-out); } .acc__item.is-open .acc__panel{ grid-template-rows:1fr; } .acc__panel > div{ overflow:hidden; } .acc__desc{ margin:0; padding:0 var(--space-lg) var(--space-lg); color:var(--color-text-muted); font-size:var(--fs-body); } .acc__item.is-open .acc__desc{ color:#fff; font-size:1.2rem; font-weight:600; line-height:1.5; } .how{ position:relative; background:var(--color-surface-alt); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .how__head{ max-width:62ch; margin-bottom:var(--space-2xl); } .how__title{ margin:var(--space-md) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .how__sub{ margin:var(--space-sm) 0 0; color:var(--color-text-muted); font-size:var(--fs-sm); font-weight:600; letter-spacing:.02em; } .how__intro{ margin:var(--space-md) 0 0; color:var(--color-text-muted); font-size:var(--fs-body-lg); max-width:52ch; } .how__steps{ display:grid; gap:clamp(1.6rem,4vw,2.2rem); grid-template-columns:1fr; --circle-d:clamp(54px,7vw,64px); --circle-r:calc(var(--circle-d) / 2); } @media (min-width:768px){ .how__steps{ grid-template-columns:repeat(2,1fr); column-gap:clamp(2rem,4vw,3rem); } } @media (min-width:1024px){ .how__steps{ grid-template-columns:repeat(3,1fr); } } .how-step{ position:relative; margin-left:var(--circle-r); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:visible; padding:var(--space-lg); padding-left:calc(var(--circle-r) + var(--space-lg)); transition:box-shadow var(--dur-base) var(--ease-out); } @media (hover:hover){ .how-step:hover{ box-shadow:var(--shadow-md); } } .how-step__circle{ position:absolute; left:calc(-1 * var(--circle-r)); top:50%; transform:translateY(-50%); width:var(--circle-d); height:var(--circle-d); border-radius:50%; display:grid; place-items:center; z-index:2; color:#fff; font-weight:700; font-size:clamp(1.3rem,1.1rem + 0.8vw,1.6rem); box-shadow:var(--shadow-sm); } .how-step--accent .how-step__circle{ background:var(--gradient-action); } .how-step--navy .how-step__circle{ background:var(--color-structure); } .how-step__ic{ width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--tint-navy-10); color:var(--color-structure); margin-bottom:var(--space-md); } .how-step__ic svg{ width:24px; height:24px; } .how-step__title{ margin:0; font-family:var(--font-display); font-size:clamp(1.1rem,1.03rem + 0.3vw,1.28rem); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); } .how-step__text{ margin:6px 0 0; color:var(--color-text-muted); font-size:clamp(0.92rem,0.89rem + 0.14vw,1rem); line-height:1.55; } .products{ background:var(--color-bg); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .products__head{ max-width:60ch; margin-bottom:var(--space-2xl); } .products__title{ margin:var(--space-md) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .products__intro{ margin:var(--space-md) 0 0; color:var(--color-text-muted); font-size:var(--fs-body-lg); max-width:56ch; } .products__grid{ display:grid; gap:var(--space-lg); grid-template-columns:1fr; } @media (min-width:768px){ .products__grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .products__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-xl); } } .card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-std); } .card__frame{ position:relative; aspect-ratio:16/10; background:var(--gradient-structure); overflow:hidden; clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); } .card__frame-motif{ position:absolute; top:-18%; right:-8%; width:46%; color:#fff; opacity:.12; pointer-events:none; } .card__frame-motif svg{ display:block; width:100%; height:auto; } .card__frame-tag{ position:absolute; left:14px; bottom:14px; z-index:1; color:#fff; font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:600; background:rgba(10,13,20,.28); backdrop-filter:blur(2px); padding:5px 10px; border-radius:var(--radius-pill); } .card__body{ padding:var(--space-lg); } .card__title{ margin:var(--space-sm) 0 var(--space-xs); font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); } .card__text{ margin:0 0 var(--space-md); color:var(--color-text-muted); font-size:var(--fs-body); } .card__cta{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; color:var(--color-accent); text-decoration:none; font-size:var(--fs-body); } .card__cta svg{ width:16px; height:16px; transition:transform var(--dur-base) var(--ease-out); } .card--product{ position:relative; display:flex; flex-direction:column; height:100%; } .card--product .card__frame{ aspect-ratio:4/3; } .card__icon{ position:relative; z-index:2; width:54px; height:54px; margin:-27px 0 0 var(--space-lg); display:grid; place-items:center; border-radius:50%; background:var(--color-structure); color:#fff; border:3px solid var(--color-surface); box-shadow:var(--shadow-md); transition:background var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-out); } .card__icon svg{ width:22px; height:22px; } .card--product .card__body{ display:flex; flex-direction:column; flex:1; padding-top:var(--space-md); } .card--product .card__text{ font-size:clamp(0.94rem,0.9rem + 0.18vw,1.02rem); line-height:1.55; } .card--product .card__cta{ margin-top:auto; } .card__cta::after{ content:""; position:absolute; inset:0; } .card__cta:focus-visible{ outline:3px solid var(--color-focus); outline-offset:4px; border-radius:8px; } @media (hover:hover){ .card--product:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; } .card--product:hover .card__icon{ background:var(--gradient-action); transform:scale(1.06); } .card--product:hover .card__cta svg{ transform:translateX(4px); } } .showcase{ background:var(--color-surface-alt); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .showcase__head{ max-width:60ch; margin-bottom:var(--space-2xl); } .showcase__title{ margin:var(--space-md) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .showcase__intro{ margin:var(--space-md) 0 0; color:var(--color-text-muted); font-size:var(--fs-body-lg); max-width:56ch; } .showcase__list{ display:grid; gap:clamp(1.75rem,4vw,3rem); } .project{ display:grid; grid-template-columns:1fr; gap:var(--space-lg); align-items:center; } @media (min-width:900px){ .project{ grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); } .project--reverse .project__media{ order:2; } } .project__media{ position:relative; width:100%; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden; background:var(--gradient-structure); box-shadow:var(--shadow-md); clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); } .project__motif{ position:absolute; top:-14%; right:-7%; width:42%; color:#fff; opacity:.10; pointer-events:none; } .project__motif svg{ width:100%; height:auto; display:block; } .project__ph{ position:absolute; left:16px; bottom:16px; z-index:2; display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:0.70rem; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:600; background:rgba(10,13,20,.34); backdrop-filter:blur(2px); padding:6px 11px; border-radius:var(--radius-pill); } .project__ph::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--color-accent); } .project__name{ margin:var(--space-md) 0 0; font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); } .project__sub{ margin:6px 0 0; color:var(--color-structure); font-weight:600; font-size:clamp(0.95rem,0.92rem + 0.15vw,1.05rem); } .project__desc{ margin:var(--space-md) 0 0; color:var(--color-text-muted); font-size:var(--fs-body); line-height:1.6; max-width:48ch; } .benefits{ background:var(--color-bg); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .benefits__head{ max-width:64ch; margin:0 auto var(--space-2xl); text-align:center; } .benefits__title{ margin:var(--space-md) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .benefits__intro{ margin:var(--space-md) auto 0; color:var(--color-text-muted); font-size:var(--fs-body-lg); max-width:58ch; } .benefits__grid{ display:grid; gap:var(--space-md); grid-template-columns:1fr; } @media (min-width:640px){ .benefits__grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-lg); } } @media (min-width:640px) and (max-width:1023px){ .benefit--center{ grid-column:1 / -1; } } @media (min-width:1024px){ .benefits__grid{ grid-template-columns:repeat(6,1fr); gap:var(--space-lg); } .benefit--lg{ grid-column:span 3; } .benefit--sm{ grid-column:span 2; } } .benefit{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; height:100%; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:clamp(1.5rem,1.1rem + 1.6vw,2.4rem); box-shadow:var(--shadow-sm); transform-origin:center; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-std); } .benefit__icon{ display:grid; place-items:center; width:60px; height:60px; margin-bottom:var(--space-md); border-radius:var(--radius-md); background:var(--color-structure); color:#fff; clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); } .benefit__icon svg{ width:30px; height:30px; } .benefit--lg .benefit__icon{ width:68px; height:68px; background:var(--gradient-action); } .benefit--lg .benefit__icon svg{ width:34px; height:34px; } .benefit__title{ margin:0; font-family:var(--font-display); font-size:clamp(1.12rem,1.04rem + 0.34vw,1.34rem); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); } .benefit--lg .benefit__title{ font-size:clamp(1.25rem,1.12rem + 0.5vw,1.55rem); } .benefit__claim{ margin:var(--space-sm) 0 0; font-weight:700; color:var(--color-structure); font-size:clamp(0.98rem,0.94rem + 0.18vw,1.1rem); line-height:1.4; } .benefit__desc{ margin:var(--space-sm) 0 0; color:var(--color-text-muted); font-size:clamp(0.8rem,0.78rem + 0.1vw,0.88rem); line-height:1.55; max-width:42ch; } @media (hover:hover){ .benefit:hover{ transform:scale(1.04); box-shadow:var(--shadow-lg); z-index:1; } } .benefit:active{ transform:scale(1.04); box-shadow:var(--shadow-lg); z-index:1; } @media (prefers-reduced-motion: reduce){ .benefit{ transition:box-shadow var(--dur-base) var(--ease-out); } .benefit:hover, .benefit:active{ transform:none; } } .diff{ background:var(--color-surface-alt); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .diff__head{ max-width:60ch; margin-bottom:var(--space-2xl); } .diff__title{ margin:var(--space-md) 0 0; font-family:var(--font-display); font-size:clamp(1.90rem,1.70rem + 2.45vw,3.60rem); font-weight:700; letter-spacing:var(--tracking-display); color:var(--color-ink); line-height:var(--lh-tight); text-wrap:balance; } .diff__title-no{ color:var(--color-accent); } .diff__intro{ margin:var(--space-md) 0 0; color:var(--color-text-muted); font-size:var(--fs-body-lg); max-width:52ch; } .diff__panels{ display:flex; flex-direction:column; gap:var(--space-md); } .diff__panel{ position:relative; background:var(--color-structure-deep); border-radius:var(--radius-lg); overflow:hidden; } .diff__motif{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; z-index:0; } .diff__panel::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(10,13,20,.68) 0%, rgba(10,13,20,.32) 28%, rgba(10,13,20,.30) 60%, rgba(10,13,20,.80) 100%); pointer-events:none; } .diff__heading{ margin:0; position:relative; z-index:2; } .diff__btn{ width:100%; display:flex; align-items:center; gap:var(--space-md); min-height:56px; padding:var(--space-lg); background:none; border:0; color:#fff; font-family:inherit; text-align:left; cursor:pointer; } .diff__num{ flex:none; font-weight:700; font-size:1.1rem; color:var(--color-accent); } .diff__label{ font-family:var(--font-display); font-size:clamp(1.05rem,1rem + 0.3vw,1.25rem); font-weight:700; letter-spacing:var(--tracking-tight); line-height:1.2; } .diff__chev{ margin-left:auto; flex:none; display:grid; place-items:center; width:26px; height:26px; color:#fff; transition:transform var(--dur-base) var(--ease-out); } .diff__chev svg{ width:18px; height:18px; } .diff__panel.is-open .diff__chev{ transform:rotate(180deg); } .diff__content{ position:relative; z-index:2; display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-out); } .diff__panel.is-open .diff__content{ grid-template-rows:1fr; } .diff__inner{ overflow:hidden; } .diff__desc{ margin:0; padding:0 var(--space-lg) var(--space-lg); color:#fff; font-size:clamp(0.92rem,0.9rem + 0.16vw,1.02rem); line-height:1.6; } @media (min-width:900px){ .diff__panels{ flex-direction:row; gap:14px; height:clamp(380px,44vw,460px); align-items:stretch; } .diff__panel{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; transition:flex-grow var(--dur-slow) var(--ease-out); } .diff__panel.is-open{ flex-grow:4; } .diff__panel.is-open::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gradient-action); z-index:3; } .diff__heading{ display:flex; } .diff__panel:not(.is-open) .diff__heading{ flex:1; } .diff__btn{ flex:1; width:100%; min-width:0; align-items:flex-start; } .diff__panel:not(.is-open) .diff__btn{ flex-direction:column; align-items:center; justify-content:center; gap:var(--space-lg); padding:var(--space-lg) var(--space-sm); } .diff__panel:not(.is-open) .diff__label{ writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; } .diff__panel.is-open .diff__btn{ flex-direction:row; align-items:center; } .diff__chev{ display:none; } .diff__content{ display:block; grid-template-rows:none; opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease-out); } .diff__panel.is-open .diff__content{ opacity:1; visibility:visible; } .diff__panel:not(.is-open) .diff__content{ display:none; } .diff__inner{ overflow:visible; } .diff__desc{ max-width:46ch; } } .contact{ background:var(--color-bg); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .contact__grid{ display:grid; gap:var(--space-xl); grid-template-columns:1fr; } @media (min-width:920px){ .contact__grid{ grid-template-columns:0.92fr 1.08fr; gap:var(--space-2xl); align-items:start; } } .contact__intro{ background:transparent; padding:0; } .contact__inner{ position:relative; z-index:1; } .contact__h2{ margin:var(--space-md) 0 0; color:var(--color-ink); font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); line-height:var(--lh-snug); text-wrap:balance; } .contact__body{ margin:var(--space-md) 0 0; color:var(--color-text-muted); font-size:var(--fs-body); line-height:1.6; max-width:42ch; } .contact__highlight{ margin:var(--space-lg) 0 0; padding-left:var(--space-md); border-left:3px solid var(--color-accent); color:var(--color-ink); font-weight:700; font-size:var(--fs-body-lg); line-height:1.4; } .contact__data{ list-style:none; margin:var(--space-xl) 0 0; padding:0; display:grid; gap:var(--space-md); } .contact__data li{ display:flex; align-items:center; gap:var(--space-md); } .contact__data .ic{ flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--color-structure); color:#fff; } .contact__data .ic svg{ width:20px; height:20px; } .contact__data a, .contact__data span{ color:var(--color-ink); text-decoration:none; font-size:var(--fs-body); } .contact__data a:hover{ text-decoration:underline; } .contact__data small{ display:block; color:var(--color-ink); opacity:.72; font-size:0.78rem; } .contact__card{ background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; } .form{ display:grid; gap:var(--space-lg); } .form__row{ display:grid; gap:var(--space-lg); } @media (min-width:560px){ .form__row--2{ grid-template-columns:1fr 1fr; } } .field{ display:grid; gap:var(--space-xs); } .field__label{ font-size:var(--fs-caption); font-weight:600; color:var(--color-ink); letter-spacing:.01em; } .req{ color:var(--color-accent); } .field__opt{ color:var(--color-text-muted); font-weight:400; } .input,.select,textarea.input{ width:100%; min-height:48px; padding:12px 14px; font-family:inherit; font-size:var(--fs-body); color:var(--color-ink); background:var(--color-surface); border:1.5px solid var(--color-border-strong); border-radius:var(--radius-md); transition:border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std); } textarea.input{ min-height:120px; resize:vertical; line-height:1.5; } .input::placeholder{ color:#9aa0ac; } .input:focus,.select:focus{ outline:none; border-color:var(--color-accent); box-shadow:0 0 0 3px var(--tint-accent-14); } .select{ appearance:none; padding-right:40px; background-repeat:no-repeat; background-position:right 14px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23313F70' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .field__error{ font-size:0.8rem; color:#B42318; font-weight:600; } .field__error:empty{ display:none; } .input[aria-invalid="true"],.select[aria-invalid="true"]{ border-color:#B42318; } .input[aria-invalid="true"]:focus,.select[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(180,35,24,.16); } .field--check{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; } .field--check .checkbox{ width:22px; height:22px; margin-top:2px; accent-color:var(--color-accent); flex:none; cursor:pointer; } .field--check label{ font-size:var(--fs-caption); color:var(--color-text-muted); line-height:1.5; cursor:pointer; } .field--check a{ color:var(--color-accent); font-weight:600; } .field--check .field__error{ grid-column:1 / -1; } .hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; } .form__submit{ width:100%; } .btn-primary[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; } .btn-primary[disabled]:hover{ transform:none; box-shadow:none; } .form__note{ font-size:0.78rem; color:var(--color-text-muted); text-align:center; } .form__success{ text-align:center; padding:var(--space-lg) 0; } .form__success-ic{ width:60px; height:60px; margin:0 auto var(--space-md); display:grid; place-items:center; border-radius:50%; background:var(--gradient-action); color:#fff; } .form__success-ic svg{ width:30px; height:30px; } .form__success h3{ margin:0; font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; color:var(--color-ink); letter-spacing:var(--tracking-tight); } .form__success p{ margin:var(--space-sm) auto 0; color:var(--color-text-muted); max-width:40ch; } .site-footer{ position:relative; overflow:hidden; background:var(--color-structure-deep); color:var(--color-on-dark); } .site-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--gradient-action); } .footer__bg{ position:absolute; right:-5%; bottom:-14%; width:34%; max-width:420px; color:#fff; opacity:.05; pointer-events:none; } .footer__bg svg{ width:100%; height:auto; display:block; } .footer__top{ position:relative; z-index:1; display:grid; gap:var(--space-xl); grid-template-columns:1fr; padding-block:clamp(2.5rem,5vw,4rem); } @media (min-width:600px){ .footer__top{ grid-template-columns:1fr 1fr; gap:var(--space-2xl); } } @media (min-width:1000px){ .footer__top{ grid-template-columns:1.5fr 1fr 1fr 1fr; } } .footer__logo{ width:clamp(132px,20vw,158px); height:auto; display:block; } .footer__email{ display:inline-flex; align-items:center; min-height:44px; margin-top:var(--space-md); color:var(--color-on-dark); text-decoration:none; font-size:var(--fs-body); } .footer__email:hover{ color:var(--color-accent); text-decoration:underline; } .footer__title{ margin:0 0 var(--space-sm); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:#fff; } .footer__links{ list-style:none; margin:0; padding:0; display:grid; } .footer__links a{ display:inline-flex; align-items:center; min-height:44px; color:var(--color-on-dark-muted); text-decoration:none; font-size:var(--fs-body); transition:color var(--dur-base) var(--ease-std); } .footer__links a:hover{ color:#fff; } .footer__social{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-sm); } .footer__social a{ width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-md); background:rgba(255,255,255,.08); color:var(--color-on-dark); transition:background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std); } .footer__social a:hover{ background:var(--color-accent); color:#fff; } .footer__social svg{ width:20px; height:20px; } .footer__phone{ display:block; min-height:44px; line-height:44px; color:var(--color-on-dark); text-decoration:none; font-size:var(--fs-body); } .footer__phone:hover{ color:var(--color-accent); text-decoration:underline; } .footer__legal{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.08); padding-block:var(--space-xl); } .footer__legal h3{ margin:0 0 var(--space-sm); font-size:0.7rem; font-weight:700; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:rgba(255,255,255,.35); } .footer__legal p{ margin:0; color:rgba(255,255,255,.28); font-size:0.7rem; line-height:1.7; } .footer__legal p+p{ margin-top:0.75em; } .footer__bottom{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.12); padding-block:var(--space-lg); } .footer__bottom p{ margin:0; color:var(--color-on-dark-muted); font-size:0.85rem; } .site-footer a:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; border-radius:3px; } .reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-in{ opacity:1; transform:none; } @media (max-width: 767px) { .hero__scrim { background: linear-gradient( to top, rgba(10,13,20,.90) 0%, rgba(10,13,20,.87) 12%, rgba(10,13,20,.82) 52%, rgba(10,13,20,.06) 64%, rgba(10,13,20,.02) 74%, rgba(10,13,20,.08) 100% ); } .hero__content { padding-bottom: clamp(5rem, 10vh, 6rem); padding-top: 0; } .hero .eyebrow, .hero__title, .hero__sub { text-shadow: 0 1px 10px rgba(10,13,20,.65); } .hero__sub { font-size: 0.93rem; } } .back-to-top{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:150; width:44px; height:44px; background:var(--color-structure); border:none; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(10,13,20,.30); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s,background .2s,transform .2s; } .back-to-top.is-visible{ opacity:1; visibility:visible; } .back-to-top:hover{ background:var(--color-accent); transform:translateY(-3px); } .back-to-top:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; } .back-to-top svg{ display:block; width:20px; height:20px; } .comp{ position:relative; padding-block:var(--section-pad); overflow:hidden; } .comp__bg{ position:absolute; inset:0; z-index:0; } .comp__bg img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .comp__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(to right, rgba(20,26,50,.60) 0%, rgba(20,26,50,.78) 45%, rgba(20,26,50,.90) 100%); } .comp .wrap{ position:relative; z-index:2; } .comp .eyebrow{ color:var(--color-accent); } .comp__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,5rem); align-items:center; } .comp__head{ max-width:38ch; } .comp__title{ margin:var(--space-sm) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:#fff; line-height:var(--lh-snug); text-wrap:balance; } .comp__intro{ margin:var(--space-sm) 0 0; color:rgba(255,255,255,.75); font-size:var(--fs-body); } .comp__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-xs); } .comp__item{ display:flex; align-items:center; gap:var(--space-sm); padding:clamp(0.75rem,1.25vw,1rem) clamp(0.875rem,1.5vw,1.25rem); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md); cursor:default; transition:background .22s var(--ease-out), border-color .22s var(--ease-out), transform .22s var(--ease-out), box-shadow .22s var(--ease-out); } .comp__item:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); transform:translateX(4px); box-shadow:0 4px 20px rgba(0,0,0,.30); } .comp__icon{ flex-shrink:0; display:grid; place-items:center; width:38px; height:38px; border-radius:var(--radius-sm); background:var(--color-structure); color:#fff; transition:background .22s var(--ease-out); } .comp__item:hover .comp__icon{ background:var(--color-accent); } .comp__icon svg{ display:block; width:19px; height:19px; } .comp__name{ display:block; margin:0 0 var(--space-2xs); font-family:var(--font-display); font-size:clamp(0.875rem,0.85vw + 0.35rem,1.0rem); font-weight:700; letter-spacing:var(--tracking-tight); color:#fff; line-height:var(--lh-snug); } .comp__desc{ margin:0; font-size:var(--fs-caption); color:rgba(255,255,255,.72); line-height:1.55; } @media(prefers-reduced-motion:reduce){ .comp__item, .comp__icon{ transition:none; } .comp__item:hover{ transform:none; box-shadow:none; } } @media(max-width:860px){ .comp__inner{ grid-template-columns:1fr; gap:clamp(1.5rem,3vh,2.5rem); } .comp__head{ max-width:100%; } .comp__veil{ background:rgba(20,26,50,.82); } } @media(max-width:540px){ .comp__item{ gap:0.625rem; padding:0.75rem 0.875rem; } .comp__icon{ width:34px; height:34px; } .comp__icon svg{ width:17px; height:17px; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{ opacity:1; transform:none; } .hero__hint{ display:none; } } .prod-hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--color-ink); } .prod-hero__bg{ position:absolute; inset:0; z-index:0; } .prod-hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .prod-hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient( 160deg, rgba(10,13,20,.90) 0%, rgba(10,13,20,.74) 38%, rgba(10,13,20,.42) 68%, rgba(10,13,20,.58) 100% ); } .prod-hero__content{ position:relative; z-index:2; width:100%; padding-top:calc(var(--nav-h) + clamp(3.5rem,8vh,6rem)); padding-bottom:clamp(3rem,7vh,5rem); display:flex; flex-direction:column; gap:clamp(2rem,4vh,3.5rem); } .prod-hero__text{ max-width:700px; display:flex; flex-direction:column; } .prod-hero__eyebrow{ color:var(--color-on-dark-muted); align-self:flex-start; } .prod-hero__eyebrow::before{ background:var(--gradient-action); } .prod-hero__title{ font-family:var(--font-display); font-size:clamp(1.9rem,3.5vw,3.2rem); font-weight:700; letter-spacing:var(--tracking-tight); color:#fff; line-height:var(--lh-snug); text-wrap:balance; margin:var(--space-md) 0 0; } .prod-hero__sub{ margin:var(--space-md) 0 0; color:rgba(255,255,255,.78); font-size:var(--fs-body); line-height:var(--lh-body); max-width:58ch; } .prod-hero__cta{ align-self:flex-start; margin-top:var(--space-xl); } .phero-stats{ display:flex; gap:clamp(0.75rem,1.5vw,1.25rem); align-items:stretch; } .phero-stat{ flex:1; padding:clamp(1rem,2vw,1.5rem); background:rgba(255,255,255,.96); clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); display:flex; flex-direction:column; gap:4px; box-shadow:0 8px 24px -6px rgba(10,13,20,.30); transition:transform .25s ease, box-shadow .25s ease; cursor:default; } .phero-stat:hover{ transform:translateY(-5px); box-shadow:0 20px 40px -10px rgba(10,13,20,.36), 0 6px 14px -4px rgba(10,13,20,.18); } .phero-stat__num{ font-family:var(--font-display); font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:700; color:var(--color-accent); letter-spacing:var(--tracking-tight); line-height:1; } .phero-stat__label{ font-size:var(--fs-caption); font-weight:500; color:var(--color-ink); line-height:1.35; } @media(max-width:880px){ .prod-hero{ min-height:auto; align-items:flex-start; } .prod-hero__content{ padding-top:calc(var(--nav-h) + clamp(2rem,5vh,3.5rem)); padding-bottom:clamp(2.5rem,6vh,4.5rem); gap:clamp(1.5rem,3vh,2.5rem); } .prod-hero__text{ max-width:none; } .prod-hero__sub{ max-width:60ch; } .phero-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(0.5rem,2vw,0.75rem); } } .fatrib{ background:var(--color-bg); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .fatrib__head{ max-width:64ch; margin-bottom:clamp(2rem,4vh,3.5rem); } .fatrib__title{ margin:var(--space-sm) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .fatrib__intro{ margin:var(--space-sm) 0 0; color:var(--color-text-muted); font-size:var(--fs-body); } .fatrib__layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:start; } .fatrib__acc{ display:flex; flex-direction:column; gap:var(--space-sm); } .fatrib__panel{ border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .fatrib__panel.is-open{ background:var(--color-accent); border-color:var(--color-accent); } .fatrib__heading{ margin:0; } .fatrib__btn{ width:100%; display:flex; align-items:center; gap:var(--space-md); padding:clamp(0.875rem,1.5vw,1.125rem) clamp(1rem,2vw,1.5rem); background:none; border:0; color:var(--color-ink); font-family:inherit; text-align:left; cursor:pointer; } .fatrib__panel.is-open .fatrib__btn{ color:#fff; } .fatrib__icon{ display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; background:var(--color-structure); color:#fff; clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); transition:background var(--dur-base) var(--ease-out); } .fatrib__panel.is-open .fatrib__icon{ background:rgba(255,255,255,.22); } .fatrib__icon svg{ width:20px; height:20px; } .fatrib__label{ flex:1; font-family:var(--font-display); font-size:clamp(0.95rem,0.85rem + 0.3vw,1.1rem); font-weight:700; letter-spacing:var(--tracking-tight); line-height:1.25; } .fatrib__chev{ margin-left:auto; flex:none; display:grid; place-items:center; width:24px; height:24px; color:var(--color-text-muted); transition:transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .fatrib__chev svg{ width:16px; height:16px; } .fatrib__panel.is-open .fatrib__chev{ transform:rotate(180deg); color:rgba(255,255,255,.80); } .fatrib__content{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-out); } .fatrib__panel.is-open .fatrib__content{ grid-template-rows:1fr; } .fatrib__inner{ overflow:hidden; } .fatrib__desc{ margin:0; padding:0 clamp(1rem,2vw,1.5rem) clamp(0.875rem,1.5vw,1.125rem); color:rgba(255,255,255,.92); font-size:var(--fs-body); line-height:var(--lh-body); } .fatrib__img-mob{ display:none; margin:0 clamp(1rem,2vw,1.5rem) clamp(0.875rem,1.5vw,1.125rem); aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-sm); } .fatrib__img-mob img{ width:100%; height:100%; object-fit:cover; display:block; } .fatrib__visual{ position:sticky; top:calc(var(--nav-h,80px) + 2rem); } .fatrib__frame{ position:relative; aspect-ratio:4/5; overflow:hidden; --frame-notch:clamp(24px,3.5vw,44px); clip-path:polygon(0 0, calc(100% - var(--frame-notch)) 0, 100% var(--frame-notch), 100% 100%, 0 100%); background:var(--color-structure-deep); } .fatrib__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .4s var(--ease-out); } .fatrib__img.is-active{ opacity:1; } @media(max-width:860px){ .fatrib__layout{ grid-template-columns:1fr; } .fatrib__visual{ display:none; } .fatrib__panel.is-open .fatrib__img-mob{ display:block; } } .apps{ background:var(--color-surface-alt); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .apps__head{ max-width:64ch; margin-bottom:clamp(1.5rem,3vh,2.5rem); } .apps__title{ margin:var(--space-sm) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .apps__intro{ margin:var(--space-sm) 0 0; color:var(--color-text-muted); font-size:var(--fs-body); } .apps__track{ display:grid; grid-template-columns:3fr 2fr 2fr 3fr; grid-template-rows:240px 240px; gap:12px; width:100%; } .apps__item:nth-child(1){ grid-column:1;   grid-row:1/3; } .apps__item:nth-child(2){ grid-column:2/4; grid-row:1;   } .apps__item:nth-child(3){ grid-column:4;   grid-row:1;   } .apps__item:nth-child(4){ grid-column:2;   grid-row:2;   } .apps__item:nth-child(5){ grid-column:3;   grid-row:2;   } .apps__item:nth-child(6){ grid-column:4;   grid-row:2;   } .apps__item{ position:relative; margin:0; overflow:hidden; --apps-notch:14px; clip-path:polygon(0 0, calc(100% - var(--apps-notch)) 0, 100% var(--apps-notch), 100% 100%, 0 100%); background:var(--color-structure-deep); } .apps__item img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .4s var(--ease-out); pointer-events:none; -webkit-user-drag:none; } .apps__item:hover img{ transform:scale(1.05); } .apps__badge{ position:absolute; bottom:var(--space-md); left:var(--space-md); padding:5px 14px; background:var(--color-structure-deep); color:#fff; font-family:var(--font-display); font-size:var(--fs-caption); font-weight:700; letter-spacing:var(--tracking-eyebrow); line-height:1.4; border-radius:var(--radius-sm); pointer-events:none; } .apps__badge--accent{ background:var(--color-accent); } @media(prefers-reduced-motion:reduce){ .apps__item:hover img{ transform:none; } } @media(max-width:860px){ .apps__track{ grid-template-rows:190px 190px; gap:10px; } } @media(max-width:600px){ .apps__track{ grid-template-columns:1fr 1fr; grid-template-rows:170px 130px 170px 130px; gap:8px; } .apps__item:nth-child(1){ grid-column:1/3; grid-row:1; } .apps__item:nth-child(2){ grid-column:1;   grid-row:2; } .apps__item:nth-child(3){ grid-column:2;   grid-row:2; } .apps__item:nth-child(4){ grid-column:1/3; grid-row:3; } .apps__item:nth-child(5){ grid-column:1;   grid-row:4; } .apps__item:nth-child(6){ grid-column:2;   grid-row:4; } } .fcomp{ background:var(--color-bg); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .fcomp__head{ max-width:64ch; margin-bottom:clamp(2rem,4vh,3rem); } .fcomp__title{ margin:var(--space-sm) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .fcomp__intro{ margin:var(--space-sm) 0 0; color:var(--color-text-muted); font-size:var(--fs-body); } .fcomp__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(0.5rem,1.5vw,0.875rem); } @media(min-width:541px){ .fcomp__grid{ grid-template-columns:repeat(4,1fr); } } @media(min-width:861px){ .fcomp__grid{ grid-template-columns:repeat(8,1fr); } .fcomp__card:nth-child(1){ grid-column:1/3; } .fcomp__card:nth-child(2){ grid-column:3/5; } .fcomp__card:nth-child(3){ grid-column:5/7; } .fcomp__card:nth-child(4){ grid-column:7/9; } .fcomp__card:nth-child(5){ grid-column:2/4; } .fcomp__card:nth-child(6){ grid-column:4/6; } .fcomp__card:nth-child(7){ grid-column:6/8; } } .fcomp__card{ padding:clamp(1.125rem,1.75vw,1.625rem); background:var(--color-surface); border:1px solid var(--color-border); --fc-notch:14px; clip-path:polygon(0 0, calc(100% - var(--fc-notch)) 0, 100% var(--fc-notch), 100% 100%, 0 100%); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out); cursor:default; } .fcomp__card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px -6px rgba(10,13,20,.16), 0 4px 10px -3px rgba(10,13,20,.10); } @media(prefers-reduced-motion:reduce){ .fcomp__card:hover{ transform:none; } } .fcomp__num{ display:block; font-family:var(--font-display); font-size:clamp(1.5rem,1.75vw,1.875rem); font-weight:700; color:var(--color-accent); letter-spacing:var(--tracking-tight); line-height:1; margin-bottom:var(--space-sm); } .fcomp__name{ margin:0 0 var(--space-xs); font-family:var(--font-display); font-size:clamp(0.875rem,0.8rem + 0.40vw,1.0rem); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); } .fcomp__desc{ margin:0; color:var(--color-text-muted); font-size:var(--fs-caption); line-height:1.6; } @media(max-width:540px){ .fcomp__card:last-child{ grid-column:1/-1; } } .cfinish{ background:var(--color-bg); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .cfinish__head{ max-width:64ch; margin-bottom:clamp(2rem,4vh,3rem); } .cfinish__title{ margin:var(--space-sm) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .cfinish__intro{ margin:var(--space-sm) 0 0; color:var(--color-text-muted); font-size:var(--fs-body); } .cfinish__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xs); } .cfinish__item{ position:relative; overflow:hidden; margin:0; --cfnotch:14px; clip-path:polygon(0 0, calc(100% - var(--cfnotch)) 0, 100% var(--cfnotch), 100% 100%, 0 100%); background:var(--color-structure-deep); } .cfinish__item img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center; transition:transform .4s var(--ease-out); pointer-events:none; } .cfinish__item:hover img{ transform:scale(1.05); } .cfinish__name{ position:absolute; bottom:0; left:0; right:0; padding:clamp(0.75rem,2vh,1.25rem) clamp(0.875rem,2vw,1.375rem); background:linear-gradient(to top, rgba(20,26,50,.88) 0%, transparent 100%); color:#fff; font-family:var(--font-display); font-size:clamp(0.95rem,0.9vw + 0.5rem,1.25rem); font-weight:700; letter-spacing:var(--tracking-tight); pointer-events:none; } @media(prefers-reduced-motion:reduce){ .cfinish__item:hover img{ transform:none; } } @media(max-width:680px){ .cfinish__grid{ grid-template-columns:repeat(2,1fr); } } .capps__track{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:240px 240px; gap:12px; width:100%; } .capps__track > .apps__item{ grid-column:auto; grid-row:auto; } @media(max-width:860px){ .capps__track{ grid-template-rows:190px 190px; gap:10px; } } @media(max-width:600px){ .capps__track{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,180px); gap:8px; } .capps__track > .apps__item{ grid-column:auto; grid-row:auto; } } .bfinish{ background:var(--color-bg); padding-block:var(--section-pad); border-top:1px solid var(--color-border); } .bfinish__head{ max-width:64ch; margin-bottom:clamp(2rem,4vh,3rem); } .bfinish__title{ margin:var(--space-sm) 0 0; font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); text-wrap:balance; } .bfinish__intro{ margin:var(--space-sm) 0 0; color:var(--color-text-muted); font-size:var(--fs-body); } .bfinish__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xs); } .bfinish__item{ position:relative; overflow:hidden; margin:0; --bfnotch:14px; clip-path:polygon(0 0, calc(100% - var(--bfnotch)) 0, 100% var(--bfnotch), 100% 100%, 0 100%); background:var(--color-structure-deep); } .bfinish__item img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center; transition:transform .4s var(--ease-out); pointer-events:none; } .bfinish__item:hover img{ transform:scale(1.05); } .bfinish__name{ position:absolute; bottom:0; left:0; right:0; padding:clamp(0.75rem,2vh,1.25rem) clamp(0.875rem,2vw,1.375rem); background:linear-gradient(to top, rgba(20,26,50,.88) 0%, transparent 100%); color:#fff; font-family:var(--font-display); font-size:clamp(0.95rem,0.9vw + 0.5rem,1.25rem); font-weight:700; letter-spacing:var(--tracking-tight); pointer-events:none; } @media(prefers-reduced-motion:reduce){ .bfinish__item:hover img{ transform:none; } } @media(max-width:600px){ .bfinish__grid{ grid-template-columns:1fr 1fr; } } .cta-final{ position:relative; overflow:hidden; padding-block:var(--section-pad); text-align:center; } .cta-final__bg{ position:absolute; inset:0; z-index:0; } .cta-final__bg img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .cta-final__veil{ position:absolute; inset:0; z-index:1; background:rgba(20,26,50,.82); } .cta-final .wrap{ position:relative; z-index:2; } .cta-final__title{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:700; letter-spacing:var(--tracking-tight); color:#fff; line-height:var(--lh-snug); text-wrap:balance; margin:0 0 var(--space-sm); } .cta-final__sub{ color:rgba(255,255,255,.72); font-size:var(--fs-body); max-width:55ch; margin:0 auto var(--space-xl); line-height:var(--lh-body); } .related{ padding:var(--section-pad) 0; background:var(--color-surface-alt); border-top:1px solid var(--color-border); } .related__title{ margin:0 0 var(--space-lg); font-family:var(--font-display); font-size:var(--fs-h3); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); line-height:var(--lh-snug); } .related__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-md); } .related__card{ display:flex; align-items:center; gap:var(--space-md); padding:var(--space-lg); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); text-decoration:none; transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .related__card:hover{ border-color:var(--color-accent); transform:translateY(-2px); box-shadow:var(--shadow-sm); } .related__card:focus-visible{ outline:2px solid var(--color-focus); outline-offset:2px; } .related__eyebrow{ display:block; font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-text-muted); } .related__name{ display:block; margin-top:2px; font-family:var(--font-display); font-size:var(--fs-body-lg); font-weight:700; letter-spacing:var(--tracking-tight); color:var(--color-ink); } .related__arrow{ margin-left:auto; color:var(--color-accent); flex:0 0 auto; }