/* ========================================================================= DeeCycle marketing site — design system Brand: recycling "D", green → teal → blue gradient, deep navy ink. Theme-aware (light default / dark via [data-theme="dark"] on ). ========================================================================= */ /* ----------------------------- tokens ---------------------------------- */ :root { /* brand ramp — identical in both themes */ --green: #57b947; --teal: #22a39a; --blue: #2f8fe0; --blue-deep: #1c6fd0; --grad: linear-gradient(100deg, #5cbe46 0%, #22a39a 46%, #2f8fe0 100%); --grad-soft: linear-gradient(100deg, #5cbe46, #2f8fe0); /* area hues (mirror the app) */ --hue-daily: #2f8fe0; --hue-stock: #1aa06a; --hue-plan: #7a5ce0; --hue-oversight: #d98b1f; --hue-system: #2c9aa6; /* light theme surfaces */ --bg: #eef4f1; --bg-2: #e6efeb; --surface: #ffffff; --surface-2: #f5f9f7; --ink: #0b1c2e; --text: #12283b; --muted: #566a7c; --line: rgba(11, 28, 46, 0.1); --line-2: rgba(11, 28, 46, 0.06); --shadow-sm: 0 2px 8px rgba(11, 28, 46, 0.06); --shadow-md: 0 18px 40px -20px rgba(11, 28, 46, 0.28); --shadow-lg: 0 40px 90px -40px rgba(11, 28, 46, 0.4); --glow-blue: 0 24px 60px -22px rgba(47, 143, 224, 0.6); --radius: 18px; --radius-lg: 26px; --radius-sm: 12px; --maxw: 1280px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --nav-h: 76px; --font-head: "Kanit", "IBM Plex Sans Thai", system-ui, sans-serif; --font-body: "IBM Plex Sans Thai", "Kanit", system-ui, sans-serif; --font-num: "Space Grotesk", "Kanit", system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } html[data-theme="dark"] { --bg: #061019; --bg-2: #081521; --surface: #0e2135; --surface-2: #0b1a2b; --ink: #eaf2fb; --text: #e6eef8; --muted: #96abc0; --line: rgba(255, 255, 255, 0.1); --line-2: rgba(255, 255, 255, 0.06); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-md: 0 20px 46px -22px rgba(0, 0, 0, 0.7); --shadow-lg: 0 44px 100px -40px rgba(0, 0, 0, 0.8); --glow-blue: 0 26px 70px -24px rgba(47, 143, 224, 0.55); } /* ----------------------------- reset ----------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html.lenis { scroll-behavior: auto; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.7; font-size: 18px; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background 0.5s var(--ease), color 0.5s var(--ease); } p, li { word-break: normal; overflow-wrap: break-word; text-wrap: pretty; } h1, h2, h3, h4 { word-break: normal; overflow-wrap: normal; text-wrap: balance; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; flex: none; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ----------------------------- scroll progress ------------------------- */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; background: transparent; pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 0%; background: var(--grad); box-shadow: 0 0 14px rgba(47, 143, 224, 0.7); } /* ----------------------------- aurora bg ------------------------------- */ .aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .aurora__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; } .aurora__blob--1 { width: 46vw; height: 46vw; left: -8vw; top: -10vh; background: radial-gradient(circle, #7fe0a0, transparent 70%); animation: drift1 26s var(--ease) infinite alternate; } .aurora__blob--2 { width: 40vw; height: 40vw; right: -6vw; top: 12vh; background: radial-gradient(circle, #7fc4ff, transparent 70%); animation: drift2 30s var(--ease) infinite alternate; } .aurora__blob--3 { width: 38vw; height: 38vw; left: 30vw; bottom: -18vh; background: radial-gradient(circle, #b6f0d6, transparent 70%); animation: drift3 34s var(--ease) infinite alternate; } html[data-theme="dark"] .aurora__blob { opacity: 0.28; } .aurora__grain { position: absolute; inset: 0; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes drift1 { to { transform: translate(6vw, 8vh) scale(1.15); } } @keyframes drift2 { to { transform: translate(-7vw, 6vh) scale(1.1); } } @keyframes drift3 { to { transform: translate(4vw, -6vh) scale(1.2); } } /* ----------------------------- buttons --------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.72em 1.4em; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 1rem; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); white-space: nowrap; } .btn--lg { padding: 0.92em 1.7em; font-size: 1.04rem; } .btn--primary { background: var(--grad); color: #fff; box-shadow: var(--glow-blue); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 30px 70px -22px rgba(47, 143, 224, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; filter: saturate(1.1) brightness(1.04); } .btn--primary:active { transform: translateY(0); } .btn--ghost { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--text); } .btn--ghost:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); } .btn--line { border: 1.5px solid var(--line); color: var(--text); background: var(--surface); } .btn--line:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); } .btn--line-light { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .btn--line-light:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; color: #fff; } .btn__play { display: inline-grid; place-items: center; } /* ----------------------------- nav ------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 120; transition: all 0.35s var(--ease); } .nav__inner { max-width: var(--maxw); margin-inline: auto; height: var(--nav-h); padding-inline: var(--gutter); display: flex; align-items: center; gap: clamp(0.75rem, 1.4vw, 1.2rem); } .nav.is-stuck { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line-2); } .nav.is-stuck .nav__inner { height: 62px; } .nav__brand { display: flex; align-items: center; flex: none; } .nav__logo { height: 34px; width: auto; } .nav__logo--dark { display: none; } html[data-theme="dark"] .nav__logo--light { display: none; } html[data-theme="dark"] .nav__logo--dark { display: block; } .nav__links { display: flex; align-items: center; gap: clamp(0.85rem, 1.5vw, 1.35rem); margin-left: auto; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; } .nav__links a { color: var(--muted); position: relative; padding: 0.2em 0; transition: color 0.2s; white-space: nowrap; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--grad); transition: width 0.28s var(--ease); } .nav__links a:hover { color: var(--text); } .nav__links a:hover::after { width: 100%; } .nav__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); transition: background 0.2s, color 0.2s, transform 0.4s var(--ease); } .theme-toggle:hover { color: var(--text); transform: rotate(18deg); } .theme-toggle .material-symbols-outlined { font-size: 1.2rem; } .theme-toggle__moon { display: none; } html[data-theme="dark"] .theme-toggle__sun { display: none; } html[data-theme="dark"] .theme-toggle__moon { display: block; } .nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; } .nav__burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s var(--ease); } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__mobile { display: none; flex-direction: column; gap: 0.4rem; padding: 1rem var(--gutter) 1.4rem; background: var(--surface); border-bottom: 1px solid var(--line); } .nav__mobile a { padding: 0.7rem 0.2rem; font-family: var(--font-head); font-weight: 500; border-bottom: 1px solid var(--line-2); white-space: nowrap; } .nav__mobile .btn { justify-content: center; margin-top: 0.6rem; } .nav__mobile.is-open { display: flex; } /* ----------------------------- hero ------------------------------------ */ .hero { position: relative; padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 5rem)); padding-bottom: clamp(2rem, 5vw, 4rem); overflow: hidden; } .hero__glow { position: absolute; width: 60vw; height: 60vw; top: -20vw; right: -14vw; background: radial-gradient(circle, rgba(47, 143, 224, 0.22), transparent 62%); z-index: -1; } .hero__inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .hero__copy, .hero__stage { min-width: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--font-num); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); } .eyebrow--light { color: #9fe0c2; } .eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); } .hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.35rem); line-height: 1.18; letter-spacing: -0.5px; margin: 1rem 0 1.1rem; } .hero__title .grad-text { display: inline; margin-inline: 0.18em; } .hero__lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.8; color: var(--muted); max-width: 42ch; } .hero__lead b { color: var(--text); font-weight: 600; } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.9rem 0 1.6rem; } .hero__chips { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.96rem; color: var(--muted); } .hero__chips li { display: inline-flex; align-items: center; gap: 0.45em; } .hero__chips .material-symbols-outlined { color: var(--green); font-size: 1.08rem; } /* hero stage */ .hero__stage { position: relative; } .hero__window { border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; will-change: transform; transform-style: preserve-3d; } .hero__window-bar { display: flex; align-items: center; gap: 7px; padding: 0.7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line-2); } .hero__window-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); } .hero__window-bar span:nth-child(1) { background: #ff5f57; } .hero__window-bar span:nth-child(2) { background: #febc2e; } .hero__window-bar span:nth-child(3) { background: #28c840; } .hero__window-bar em { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 0.78rem; color: var(--muted); font-family: var(--font-num); } .hero__window img { width: 100%; height: auto; } .hero__floater { position: absolute; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); padding: 0.85rem 1.1rem; will-change: transform; } .hero__floater--profit { left: -3%; bottom: 12%; display: grid; gap: 2px; } .hero__floater--stock { right: -4%; top: 14%; display: flex; align-items: center; gap: 0.7rem; } .hero__floater-label { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; } .hero__floater-value { font-family: var(--font-num); font-weight: 700; font-size: 1.5rem; color: var(--text); } .hero__floater-value2 { font-family: var(--font-num); font-weight: 700; font-size: 1.15rem; color: var(--text); display: block; } .hero__floater-trend { font-size: 0.78rem; font-weight: 600; color: var(--green); display: inline-flex; align-items: center; gap: 0.35rem; } .hero__floater-trend::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid currentColor; } .hero__floater-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--teal); } .hero__floater-icon .material-symbols-outlined { font-size: 1.35rem; } /* trust marquee */ .trustband { margin-top: clamp(2.4rem, 6vw, 4.5rem); border-block: 1px solid var(--line-2); padding-block: 1rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .trustband__track { display: flex; align-items: center; gap: 1.6rem; width: max-content; animation: marquee 34s linear infinite; font-family: var(--font-head); font-weight: 500; color: var(--muted); } .trustband__track i { width: 7px; height: 7px; border-radius: 2px; background: var(--green); transform: rotate(45deg); flex: none; } @keyframes marquee { to { transform: translateX(-50%); } } /* ----------------------------- section base ---------------------------- */ .section { padding-block: clamp(4.5rem, 8vw, 7.5rem); position: relative; } .section[id], .cta[id] { scroll-margin-top: 84px; } .section__head { max-width: 760px; margin: 0 auto clamp(2rem, 5vw, 3.4rem); text-align: center; } .section__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.85rem, 2.9vw, 2.7rem); line-height: 1.18; letter-spacing: -0.4px; margin: 0.7rem 0; } .section__sub { color: var(--muted); font-size: 1.1rem; line-height: 1.8; max-width: 64ch; margin-inline: auto; } .section__head--light .section__title, .section__sub--light { color: #fff; } .section__sub--light { color: #b9cbdd; } /* ----------------------------- stats ----------------------------------- */ .stats { padding-block: clamp(1rem, 3vw, 2rem); } .stats__grid { width: min(calc(100% - (2 * var(--gutter))), var(--maxw)); max-width: none; padding-inline: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .stat { background: var(--surface); padding: clamp(1.4rem, 3vw, 2.2rem) 1.2rem; text-align: center; display: grid; align-content: center; min-height: 142px; } .stat + .stat { border-inline-start: 1px solid var(--line); } .stat__num { font-family: var(--font-num); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.35; padding-block: 0.06em; overflow: visible; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; white-space: nowrap; } .stat__num em { font-size: 0.42em; -webkit-text-fill-color: var(--muted); font-style: normal; } .stat__label { display: block; margin-top: 0.5rem; color: var(--muted); font-size: 0.98rem; line-height: 1.6; } /* ----------------------------- problem / compare ----------------------- */ .problem { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, transparent), transparent 65%); border-block: 1px solid var(--line-2); } .compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(1rem, 3vw, 2rem); } .compare__col { border-radius: var(--radius-lg); padding: clamp(1.7rem, 3vw, 2.5rem); border: 1px solid var(--line); } .compare__col h3 { font-family: var(--font-head); font-size: 1.32rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5em; } .compare__col ul { display: grid; gap: 0.85rem; } .compare__col li { position: relative; padding-left: 1.8em; color: var(--muted); font-size: 1.03rem; line-height: 1.75; } .compare__col li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.9em; height: 0.9em; } .compare__col--old { background: var(--surface-2); } .compare__col--old h3 { color: var(--muted); } .compare__col--old li::before { background: linear-gradient(45deg, transparent 42%, #d1495b 43% 57%, transparent 58%), linear-gradient(-45deg, transparent 42%, #d1495b 43% 57%, transparent 58%); } .compare__col--new { background: var(--surface); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--blue) 24%, var(--line)); } .compare__col--new h3 { color: var(--blue-deep); } .compare__col--new li { color: var(--text); } .compare__col--new li::before { left: 0.18em; top: 0.2em; width: 0.48em; height: 0.85em; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); } .compare__vs { display: grid; place-items: center; } .compare__vs span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: var(--glow-blue); } .compare__vs .material-symbols-outlined { font-size: 1.45rem; } /* ----------------------------- journey flow ---------------------------- */ .journey { overflow: hidden; padding-block: clamp(3.75rem, 6vw, 5.75rem); } .journey::after { content: ""; position: absolute; width: min(52vw, 720px); aspect-ratio: 1; right: -22vw; top: 8%; border-radius: 50%; background: repeating-radial-gradient(circle, color-mix(in srgb, var(--blue) 10%, transparent) 0 1px, transparent 1px 18px); opacity: 0.5; pointer-events: none; } .journey .container { position: relative; z-index: 1; } .flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; counter-reset: step; position: relative; } .flow::before { content: ""; position: absolute; top: 50px; left: 7%; right: 7%; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px); z-index: 0; } .flow__step { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1rem 1.5rem; text-align: center; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .flow__step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .flow__num { font-family: var(--font-num); font-weight: 700; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.1em; } .flow__icon { width: 56px; height: 56px; margin: 0.6rem auto 0.9rem; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--hue-daily) 14%, transparent); color: var(--hue-daily); } .flow__icon .material-symbols-outlined { font-size: 1.55rem; } .flow__icon[data-hue="stock"] { background: color-mix(in srgb, var(--hue-stock) 14%, transparent); color: var(--hue-stock); } .flow__icon[data-hue="plan"] { background: color-mix(in srgb, var(--hue-plan) 14%, transparent); color: var(--hue-plan); } .flow__icon[data-hue="oversight"] { background: color-mix(in srgb, var(--hue-oversight) 16%, transparent); color: var(--hue-oversight); } .flow__step h3 { font-family: var(--font-head); font-size: 1.08rem; margin-bottom: 0.35rem; } .flow__step p { font-size: 0.88rem; color: var(--muted); line-height: 1.58; } .flow__step--final { background: var(--grad); border: none; color: #fff; box-shadow: var(--glow-blue); } .flow__step--final .flow__num, .flow__step--final p { color: rgba(255, 255, 255, 0.85); } .flow__step--final .flow__icon { background: rgba(255, 255, 255, 0.18); color: #fff; } /* ----------------------------- showcase -------------------------------- */ .showcase { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-block: 1px solid var(--line-2); } .showcase__wrap { display: grid; gap: 1.6rem; } .showcase__tabs { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; } .sc-tab { padding: 0.62em 1.2em; border-radius: 999px; font-family: var(--font-head); font-weight: 500; font-size: 0.98rem; white-space: nowrap; color: var(--muted); background: var(--surface); border: 1px solid var(--line); transition: all 0.22s var(--ease); } .sc-tab:hover { color: var(--text); border-color: var(--blue); } .sc-tab.is-active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--glow-blue); } .showcase__stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr); gap: clamp(1.8rem, 3vw, 2.8rem); align-items: center; } .showcase__frame { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .showcase__frame-bar { display: flex; align-items: center; gap: 7px; padding: 0.65rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line-2); } .showcase__frame-bar span { width: 10px; height: 10px; border-radius: 50%; } .showcase__frame-bar span:nth-child(1) { background: #ff5f57; } .showcase__frame-bar span:nth-child(2) { background: #febc2e; } .showcase__frame-bar span:nth-child(3) { background: #28c840; } .showcase__frame-bar em { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 0.78rem; color: var(--muted); font-family: var(--font-num); } .showcase__frame img { width: 100%; height: auto; aspect-ratio: 2200 / 1375; object-fit: contain; transition: opacity 0.35s var(--ease); } .showcase__frame img.is-swapping { opacity: 0; } .showcase__info h3 { font-family: var(--font-head); font-size: 1.75rem; margin-bottom: 0.75rem; } .showcase__info p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; } .showcase__bullets { display: grid; gap: 0.6rem; margin-top: 1.1rem; } .showcase__bullets li { position: relative; padding-left: 1.7em; font-size: 1rem; line-height: 1.7; } .showcase__bullets li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 3px; background: var(--grad); } /* ----------------------------- spotlights ------------------------------ */ .spotlights .container { display: grid; gap: clamp(3rem, 8vw, 6rem); } .spot { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; } .spot--rev .spot__media { order: 2; } .spot__media { position: relative; } .spot__shot { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--surface); } .spot__shot img { width: 100%; height: auto; aspect-ratio: 2200 / 1375; object-fit: contain; } .spot__badge { position: absolute; top: -12px; left: 20px; z-index: 2; font-family: var(--font-head); font-weight: 600; font-size: 0.8rem; padding: 0.35em 0.9em; border-radius: 999px; color: #fff; background: var(--hue-daily); box-shadow: var(--shadow-sm); } .spot__badge[data-hue="stock"] { background: var(--hue-stock); } .spot__badge[data-hue="plan"] { background: var(--hue-plan); } .spot__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.85rem, 3.4vw, 2.55rem); line-height: 1.2; margin-bottom: 1rem; } .spot__body > p { color: var(--muted); font-size: 1.08rem; line-height: 1.82; } .spot__body { max-width: 58ch; } .spot__list { display: grid; gap: 0.7rem; margin-top: 1.3rem; } .spot__list li { position: relative; padding-left: 2em; color: var(--text); font-size: 1rem; line-height: 1.7; } .spot__list li::before { content: ""; position: absolute; left: 0; top: 0.22em; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--grad); } .spot__list li::after { content: ""; position: absolute; left: 0.5em; top: 0.4em; width: 0.34em; height: 0.62em; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } /* ----------------------------- precision ------------------------------- */ .precision { background: var(--surface-2); } .precision__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .precision .section__title, .precision .section__sub { text-align: left; margin-inline: 0; } .precision__note { margin-top: 1.2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); border-radius: 0 12px 12px 0; color: var(--text); font-size: 1rem; line-height: 1.75; } .precision__table { display: grid; gap: 0.8rem; } .unit { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1rem; padding: 1.1rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .unit:hover { transform: translateX(6px); box-shadow: var(--shadow-md); } .unit__k { font-family: var(--font-head); font-weight: 600; } .unit__v { font-family: var(--font-num); font-size: 0.92rem; color: var(--blue-deep); text-align: right; } .unit__e { grid-column: 1 / -1; color: var(--muted); font-size: 0.96rem; } .unit__e code { font-family: var(--font-num); background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 0.1em 0.4em; border-radius: 6px; color: var(--text); } /* ----------------------------- modules carousel ------------------------ */ .modules { background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--green) 10%, transparent), transparent 28%), var(--surface-2); border-block: 1px solid var(--line-2); padding-block: clamp(3.5rem, 6vw, 5.5rem); } .modules .section__head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); } .modcarousel { display: grid; gap: 1rem; overflow: hidden; padding-block: 0.35rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .modrow { overflow: hidden; } .modtrack { display: flex; gap: 1rem; width: max-content; will-change: transform; animation: modules-marquee 48s linear infinite; } .modrow--reverse .modtrack { animation-direction: reverse; animation-duration: 54s; } .modrow:hover .modtrack, .modrow:focus-within .modtrack { animation-play-state: paused; } .modcard { width: clamp(240px, 19vw, 280px); min-height: 168px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem 1.25rem; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); position: relative; overflow: hidden; } .modcard::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--card-hue, var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .modcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--card-hue, var(--blue)) 40%, var(--line)); } .modcard:hover::after { transform: scaleX(1); } .modcard__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 0.65rem; background: color-mix(in srgb, var(--card-hue, var(--blue)) 14%, transparent); color: var(--card-hue, var(--blue)); } .modcard__ic .material-symbols-outlined { font-size: 1.45rem; } .modcard__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--card-hue, var(--blue)); font-family: var(--font-num); font-weight: 600; } .modcard h3 { font-family: var(--font-head); font-size: 1.08rem; margin: 0.15rem 0 0.3rem; } .modcard p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; } @keyframes modules-marquee { to { transform: translateX(calc(-50% - 0.5rem)); } } /* ----------------------------- security (dark) ------------------------- */ .security { background: linear-gradient(160deg, #071626, #0a1f38 60%, #06121f); color: #eaf2fb; position: relative; overflow: hidden; } .security::before { content: ""; position: absolute; width: 50vw; height: 50vw; top: -10vw; right: -10vw; background: radial-gradient(circle, rgba(47, 143, 224, 0.2), transparent 65%); } .secgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } .seccard { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); padding: 1.8rem; backdrop-filter: blur(6px); transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); } .seccard:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.07); border-color: rgba(127, 224, 196, 0.4); } .seccard__ic { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 0.9rem; border-radius: 15px; color: #7fe0c4; background: rgba(127, 224, 196, 0.1); } .seccard__ic .material-symbols-outlined { font-size: 1.6rem; } .seccard h3 { font-family: var(--font-head); font-size: 1.28rem; margin-bottom: 0.5rem; } .seccard p { color: #a9bfd4; font-size: 1rem; line-height: 1.75; } /* ----------------------------- gallery marquee ------------------------- */ .gallery { padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; } .gallery__head { text-align: center; margin-bottom: 2.4rem; } .gallery__viewport { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; touch-action: pan-y; overscroll-behavior-inline: contain; } .gallery__viewport::-webkit-scrollbar { display: none; } .gallery__viewport.is-dragging { cursor: grabbing; user-select: none; } .gallery__track { display: flex; gap: 1.4rem; width: max-content; animation: gallery-marquee 60s linear infinite; padding-inline: 0.7rem; user-select: none; } .gallery__viewport:hover .gallery__track, .gallery__viewport:focus-within .gallery__track { animation-play-state: paused; } .gallery__item { width: min(52vw, 660px); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--surface); flex: none; } .gallery__item img { width: 100%; height: auto; aspect-ratio: 2200 / 1375; object-fit: contain; pointer-events: none; } .gallery__item figcaption { padding: 0.7rem 1rem; font-family: var(--font-head); font-weight: 500; font-size: 1rem; color: var(--muted); border-top: 1px solid var(--line-2); } @keyframes gallery-marquee { to { transform: translateX(calc(-50% - 0.7rem)); } } /* ----------------------------- specs ----------------------------------- */ .specs__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .specs .section__title, .specs .section__sub { text-align: left; margin-inline: 0; } .techchips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; } .techchips span { font-family: var(--font-num); font-weight: 600; font-size: 0.85rem; padding: 0.4em 0.95em; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .specs__table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .specrow { display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.4rem; border-bottom: 1px solid var(--line-2); } .specrow:last-child { border-bottom: none; } .specrow span { color: var(--muted); font-size: 1rem; } .specrow b { font-family: var(--font-head); font-weight: 600; text-align: right; } /* ----------------------------- faq ------------------------------------- */ .faq { background: color-mix(in srgb, var(--surface-2) 72%, transparent); border-top: 1px solid var(--line-2); } .faq__list { max-width: 900px; margin-inline: auto; display: grid; gap: 0.8rem; } .faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.25s var(--ease); } .faq__item.is-open { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); box-shadow: var(--shadow-md); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; font-family: var(--font-head); font-weight: 500; font-size: 1.13rem; line-height: 1.6; text-align: left; } .faq__icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue-deep); transition: transform 0.3s var(--ease); position: relative; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; width: 12px; height: 2px; border-radius: 2px; background: currentColor; } .faq__icon::after { transform: rotate(90deg); } .faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--grad); color: #fff; } .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .faq__a > div { padding: 0 1.4rem 1.3rem; color: var(--muted); font-size: 1.05rem; line-height: 1.8; } /* ----------------------------- cta ------------------------------------- */ .cta { padding-block: clamp(3rem, 7vw, 6rem); } .cta__panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(2.4rem, 6vw, 4.5rem); text-align: center; color: #fff; background: radial-gradient(120% 140% at 80% 0%, rgba(87, 190, 71, 0.9), transparent 55%), radial-gradient(120% 140% at 0% 100%, rgba(47, 143, 224, 0.9), transparent 55%), #0a1f38; box-shadow: var(--shadow-lg); } .cta__glow { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 120%, rgba(255, 255, 255, 0.18), transparent); } .cta__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: 1.2; margin: 0.8rem 0; position: relative; } .cta__sub { color: rgba(255, 255, 255, 0.9); max-width: 52ch; margin: 0 auto 1.8rem; position: relative; } .cta__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; position: relative; } .cta__panel .btn--primary { background: #fff; color: var(--blue-deep); } .cta__panel .btn--primary:hover { background: #fff; filter: brightness(1.02); } .cta__fine { margin-top: 1.4rem; font-size: 0.86rem; color: rgba(255, 255, 255, 0.72); position: relative; } /* ----------------------------- footer ---------------------------------- */ .footer { background: #061321; color: #b9cbdd; padding-top: clamp(3rem, 6vw, 4.5rem); } .footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; } .footer__logo { height: 40px; margin-bottom: 1rem; } .footer__brand p { font-size: 1rem; line-height: 1.7; color: #8ea3b8; } .footer__col h4 { font-family: var(--font-head); color: #fff; font-size: 1rem; margin-bottom: 1rem; } .footer__col a { display: block; padding: 0.32rem 0; color: #9db2c7; font-size: 0.98rem; transition: color 0.2s; } .footer__col a:hover { color: #7fe0c4; } .footer__bar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.84rem; color: #708aa1; } /* ----------------------------- mascot ---------------------------------- */ .mascot { position: fixed; right: clamp(0.8rem, 2vw, 1.6rem); bottom: clamp(0.8rem, 2vw, 1.6rem); z-index: 90; filter: drop-shadow(0 10px 18px rgba(11, 28, 46, 0.35)); opacity: 0; transform: translateY(20px) scale(0.6); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; } .mascot.is-in { opacity: 1; transform: none; } .mascot__body { animation: bob 4.5s ease-in-out infinite; transform-origin: center bottom; } .mascot__arm { transform-origin: 11px 30px; animation: wave 5.5s ease-in-out infinite; } .mascot__eye { animation: blink 5s infinite; transform-origin: center; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes wave { 0%, 82%, 100% { transform: rotate(0); } 86%, 94% { transform: rotate(-22deg); } 90% { transform: rotate(10deg); } } @keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.15); } } /* ----------------------------- reveal ---------------------------------- */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* ----------------------------- responsive ------------------------------ */ @media (max-width: 1200px) { .nav__links, .nav__signin { display: none; } .nav__burger { display: flex; margin-left: 0; } .nav__actions { margin-left: auto; } } @media (max-width: 1000px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__copy { max-width: 640px; margin-inline: auto; } .hero__lead { max-width: 46ch; margin-inline: auto; } .hero__cta, .hero__chips { justify-content: center; } .hero__stage { margin-top: 1rem; } .showcase__stage { grid-template-columns: 1fr; } .spot, .spot--rev { grid-template-columns: 1fr; } .spot--rev .spot__media { order: 0; } .precision__inner, .specs__inner { grid-template-columns: 1fr; } .flow { grid-template-columns: repeat(3, 1fr); } .flow::before { display: none; } .footer__inner { grid-template-columns: 1fr 1fr; } .secgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mascot { display: none; } } @media (max-width: 760px) { .stats__grid { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-inline-start: 0; } .stat:nth-child(n + 3) { border-top: 1px solid var(--line); } .compare { grid-template-columns: 1fr; } .compare__vs { transform: rotate(90deg); padding: 0.4rem 0; } .flow { grid-template-columns: 1fr 1fr; } .secgrid { grid-template-columns: 1fr; } .modcard { width: min(78vw, 260px); } .footer__inner { grid-template-columns: 1fr; } .footer__bar { justify-content: flex-start; } .hero__floater--profit { left: 0; } .hero__floater--stock { right: 0; } .gallery__item { width: 78vw; } } @media (max-width: 560px) { .nav__actions > .btn--primary { display: none; } .stats__grid { grid-template-columns: 1fr; } .stat + .stat { border-inline-start: 0; border-top: 1px solid var(--line); } .unit { grid-template-columns: 1fr; } .unit__v { text-align: left; } .specrow { flex-direction: column; gap: 0.25rem; } .specrow b { text-align: left; } } @media (max-width: 460px) { body { font-size: 17px; } .flow { grid-template-columns: 1fr; } .hero__floater { display: none; } .hero__cta .btn { width: 100%; justify-content: center; } } /* ----------------------------- reduced motion -------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .aurora__blob { animation: none; } .mascot { opacity: 1; transform: none; } .modtrack, .gallery__track { animation: none !important; } .modrow { overflow-x: auto; scrollbar-width: none; } .modrow::-webkit-scrollbar { display: none; } }