html {
scroll-behavior: smooth;
}
:root {
color-scheme: light;
--brand-blue: #4b99d2;
--brand-blue-mid: #3d8abf;
--brand-blue-deep: #2f6f9e;
--brand-green: #4db14d;
--brand-green-mid: #3f9a40;
--brand-grey: #7a7a7a;
--brand-grey-dark: #4a4a4a;
--bg: #f3f8fb;
--bg-elevated: #ffffff;
--accent: var(--brand-blue);
--accent-2: var(--brand-green);
--accent-soft: rgba(75, 153, 210, 0.14);
--accent-green-soft: rgba(77, 177, 77, 0.14);
--accent-strong: #3a3a3a;
--text-main: #404040;
--text-muted: #6b6b6b;
--text-on-photo: #f1f5f9;
--text-on-photo-muted: #d5e2ec;
--border-subtle: rgba(58, 90, 110, 0.08);
--border-ui: rgba(75, 153, 210, 0.22);
--shadow-soft: 0 18px 45px rgba(45, 95, 130, 0.09);
--gradient-brand: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 100%);
--gradient-brand-soft: linear-gradient(135deg, rgba(75, 153, 210, 0.12) 0%, rgba(77, 177, 77, 0.1) 100%);
--shadow-primary: 0 14px 32px rgba(75, 153, 210, 0.3);
--shadow-primary-hover: 0 18px 42px rgba(61, 138, 191, 0.38);
--radius-lg: 18px;
--radius-xl: 28px;
--radius-pill: 999px;
--transition-fast: 180ms ease-out;
--transition-med: 260ms ease;
--mx: 0.5;
--my: 0.5;
--px-global: 0;
--py-global: 0;
--spot-x: 0.5;
--spot-y: 0.5;
--bg-parallax: 0px;
--intro-progress: 0;
--intro-opacity: 1;
--content-opacity: 0;
--header-progress: 0;
--intro-shift: 0px;
--intro-blur: 0px;
}
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
h2,
h3 {
font-family: "Roboto", Arial, sans-serif;
font-weight: 100;
letter-spacing: 2px;
}
h2 {
font-size: 44px;
text-transform: uppercase;
line-height: 1.25;
}
h3 {
font-family: "Montserrat", "Roboto", Arial, sans-serif;
font-weight: 400;
font-size: 0.84rem;
text-transform: none;
letter-spacing: 0.06em;
color: var(--brand-green-mid);
}
body {
font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(75, 153, 210, 0.12) 0%, transparent 50%), radial-gradient(ellipse 100% 60% at 100% 0%, rgba(77, 177, 77, 0.08) 0%, transparent 45%), var(--bg);
color: var(--text-main);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
position: relative;
overflow-x: hidden;
isolation: isolate;
}
.bg-photo {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: -14vh;
z-index: -6;
pointer-events: none;
background: url("assets/batu-payung-lombok.jpg") center top / cover no-repeat;
transform: translate3d(0, var(--bg-parallax), 0) scale(1);
transform-origin: center center;
}
body::before,
body::after {
content: "";
position: fixed;
z-index: -2;
border-radius: 999px;
pointer-events: none;
filter: blur(48px);
opacity: 0.55;
display: none;
}
body::before {
width: 38vw;
height: 38vw;
left: -12vw;
top: 8vh;
background: radial-gradient(circle at 30% 30%, rgba(75, 153, 210, 0.5), rgba(75, 153, 210, 0.08) 70%);
animation: floatBgBlue 22s ease-in-out infinite alternate;
}
body::after {
width: 34vw;
height: 34vw;
right: -10vw;
bottom: 6vh;
background: radial-gradient(circle at 40% 35%, rgba(77, 177, 77, 0.45), rgba(77, 177, 77, 0.08) 72%);
animation: floatBgGreen 24s ease-in-out infinite alternate;
}
.scroll-progress {
position: fixed;
left: 0;
top: 0;
height: 3px;
width: 100%;
z-index: 50;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(4px);
}
.scroll-progress::before {
content: "";
display: block;
height: 100%;
width: calc(var(--scroll, 0) * 100%);
background: var(--gradient-brand);
box-shadow: 0 0 18px rgba(75, 153, 210, 0.65);
transition: width 80ms linear;
}
.bg-hotspot {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
display: none;
opacity: 0;
background: url("assets/batu-payung-lombok.jpg") center / cover no-repeat fixed;
-webkit-mask-image: radial-gradient(circle 420px at calc(var(--spot-x) * 100%) calc(var(--spot-y) * 100%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 45%, rgba(0, 0, 0, 0) 74%);
mask-image: radial-gradient(circle 420px at calc(var(--spot-x) * 100%) calc(var(--spot-y) * 100%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 45%, rgba(0, 0, 0, 0) 74%);
transition: opacity 180ms ease-out;
}
.bg-hotspot.is-active {
opacity: 0.97;
}
.hero-intro {
position: fixed;
inset: 0;
z-index: 9;
display: grid;
place-items: center;
padding: 24px;
text-align: center;
pointer-events: none;
opacity: 1;
transition: opacity 380ms ease;
}
.hero-intro h1 {
max-width: 20ch;
font-size: clamp(1.5rem, 4.2vw, 3.2rem);
line-height: 1.1;
letter-spacing: -0.01em;
font-weight: 650;
font-family: "Montserrat", "Inter", "Avenir Next", "Segoe UI", sans-serif;
color: #f8fafc;
text-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
display: inline-flex;
align-items: flex-end;
}
.hero-intro .type-text.typing::after {
content: "|";
display: inline-block;
margin-left: 0.04em;
color: rgba(248, 250, 252, 0.95);
text-shadow: 0 0 12px rgba(248, 250, 252, 0.45);
animation: introCaretBlink 900ms steps(1, end) infinite;
}
.hero-intro.is-hidden {
opacity: 0;
}
.intro-scroll-cue {
position: absolute;
left: 50%;
bottom: clamp(22px, 4.5vh, 40px);
transform: translateX(-50%);
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
line-height: 0.72;
letter-spacing: 0.02em;
text-align: center;
color: rgba(248, 250, 252, 0.92);
text-shadow: 0 0 16px rgba(248, 250, 252, 0.35);
opacity: 0;
transition: opacity 260ms ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.intro-scroll-cue .cue-row {
display: block;
}
.intro-scroll-cue .cue-row-single {
letter-spacing: 0;
}
.intro-scroll-cue.is-visible {
opacity: 1;
animation: introCueBounce 1.15s ease-in-out infinite;
}
body.intro-mode {
overflow: hidden;
}
body.intro-mode .page {
opacity: 1;
pointer-events: none;
}
body.intro-mode .header {
opacity: var(--header-progress);
transform: translateY(calc((1 - var(--header-progress)) * -180px));
}
body.intro-mode main,
body.intro-mode .footer {
opacity: var(--content-opacity);
transform: translateY(calc((1 - var(--content-opacity)) * 84vh));
}
body.intro-mode .hero-intro {
opacity: var(--intro-opacity);
transform: translateY(var(--intro-shift));
filter: blur(var(--intro-blur));
}
body.intro-mode .scroll-progress {
opacity: 0;
}
body.intro-mode::before,
body.intro-mode::after,
body.intro-mode .page::before,
body.intro-mode .page::after,
body.intro-mode .bg-hotspot {
opacity: 0;
animation: none;
}
.bg-hotspot.is-full {
opacity: 1;
-webkit-mask-image: none;
mask-image: none;
}
body.easteregg-reveal {
background: url("assets/batu-payung-lombok.jpg") center / cover no-repeat fixed, var(--bg);
}
body.easteregg-reveal::before,
body.easteregg-reveal::after,
body.easteregg-reveal .page::before,
body.easteregg-reveal .page::after {
opacity: 0;
animation: none;
}
body.easteregg-reveal .bg-photo {
display: none;
}
.page::before {
content: "";
position: fixed;
inset: -20% -20%;
z-index: -3;
pointer-events: none;
opacity: 0.4;
background: linear-gradient(120deg, rgba(75, 153, 210, 0.2), rgba(77, 177, 77, 0.18), rgba(122, 122, 122, 0.12), rgba(75, 153, 210, 0.2));
background-size: 280% 280%;
animation: driftGradient 28s linear infinite;
}
.page::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: linear-gradient(rgba(75, 153, 210, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 153, 210, 0.08) 1px, transparent 1px);
background-size: 36px 36px;
-webkit-mask-image: none;
mask-image: none;
opacity: 0.35;
animation: techGridShift 24s linear infinite;
}
.page {
min-height: 100vh;
max-width: 1120px;
margin: 0 auto;
padding: 24px 20px 40px;
display: flex;
flex-direction: column;
gap: 32px;
animation: fadeInPage 600ms ease-out;
transition: opacity 380ms ease;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(14px);
border-radius: var(--radius-pill);
box-shadow: 0 10px 40px rgba(45, 95, 130, 0.07);
border: 1px solid var(--border-ui);
position: sticky;
top: 16px;
z-index: 10;
}
.logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
line-height: 0;
}
.logo img {
height: 44px;
width: auto;
display: block;
object-fit: contain;
}
.nav {
display: flex;
align-items: center;
gap: 20px;
font-size: 0.9rem;
}
.nav a {
text-decoration: none;
color: var(--text-muted);
padding: 6px 0;
position: relative;
transition: color var(--transition-fast);
}
.nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
border-radius: 2px;
background: var(--gradient-brand);
transition: width var(--transition-med);
}
.nav a:hover {
color: var(--accent-strong);
}
.nav a:hover::after {
width: 100%;
}
.nav-cta {
padding: 6px 14px !important;
border-radius: var(--radius-pill);
background: var(--accent-soft);
color: var(--accent) !important;
font-weight: 500;
}
.nav-cta::after {
display: none;
}
.nav-cta:hover {
color: var(--brand-blue-deep) !important;
background: rgba(75, 153, 210, 0.22);
}
.nav-toggle {
display: none;
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid var(--border-ui);
background: rgba(255, 255, 255, 0.8);
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-toggle span {
width: 14px;
height: 2px;
border-radius: 999px;
background: var(--accent-strong);
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle-open span:first-child {
transform: translateY(2px) rotate(45deg);
}
.nav-toggle-open span:last-child {
transform: translateY(-2px) rotate(-45deg);
}
.hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
align-items: center;
gap: 32px;
padding: 32px 24px 32px;
border-radius: 28px;
background: radial-gradient(circle at top left, rgba(75, 153, 210, 0.12), transparent 55%), radial-gradient(circle at bottom right, rgba(77, 177, 77, 0.11), transparent 52%), #fafcfd;
border: 1px solid var(--border-ui);
box-shadow: 0 24px 60px rgba(45, 95, 130, 0.11);
overflow: hidden;
animation: heroIn 680ms ease-out;
scroll-margin-top: 108px;
position: relative;
}
.hero-ornaments {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.hero > *:not(.hero-ornaments) {
position: relative;
z-index: 1;
}
.hero-orb,
.hero-ring {
position: absolute;
display: block;
}
.hero-morph {
position: absolute;
display: block;
width: 96px;
height: 96px;
right: 34%;
bottom: 26%;
background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.78), rgba(124, 196, 238, 0.36) 52%, rgba(124, 196, 238, 0.08) 72%, rgba(124, 196, 238, 0) 100%);
border: 1px solid rgba(124, 196, 238, 0.26);
box-shadow: 0 8px 22px rgba(75, 153, 210, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
animation: heroMorphShift 9.4s ease-in-out infinite;
}
.hero-morph.morph-2 {
width: 118px;
height: 118px;
left: 23%;
top: 19%;
background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.76), rgba(150, 219, 193, 0.34) 52%, rgba(150, 219, 193, 0.08) 72%, rgba(150, 219, 193, 0) 100%);
border-color: rgba(150, 219, 193, 0.25);
box-shadow: 0 10px 26px rgba(77, 177, 77, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
animation-duration: 11.6s;
animation-delay: 0.9s;
}
.hero-morph.morph-3 {
width: 84px;
height: 84px;
right: 11%;
top: 44%;
background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.76), rgba(183, 166, 238, 0.32) 52%, rgba(183, 166, 238, 0.08) 72%, rgba(183, 166, 238, 0) 100%);
border-color: rgba(183, 166, 238, 0.24);
box-shadow: 0 8px 24px rgba(126, 102, 205, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
animation-duration: 8.8s;
animation-delay: 1.8s;
}
.hero-spark {
position: absolute;
display: block;
width: 8px;
height: 8px;
border-radius: 999px;
background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.98), rgba(217, 231, 242, 0.85) 55%, rgba(217, 231, 242, 0) 75%);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.36);
}
.hero-orb {
border-radius: 999px;
filter: blur(0.4px);
}
.orb-blue {
width: 52px;
height: 52px;
right: 23%;
top: 14%;
background: radial-gradient(circle at 30% 30%, rgba(212, 235, 247, 0.95), rgba(75, 153, 210, 0.42) 62%, rgba(75, 153, 210, 0) 72%);
animation: heroOrbBlue 9s ease-in-out infinite;
}
.orb-green {
width: 44px;
height: 44px;
left: 44%;
bottom: 16%;
background: radial-gradient(circle at 30% 30%, rgba(223, 244, 223, 0.95), rgba(77, 177, 77, 0.36) 60%, rgba(77, 177, 77, 0) 74%);
animation: heroOrbGreen 8.2s ease-in-out infinite;
animation-delay: 0.9s;
}
.orb-amber {
width: 34px;
height: 34px;
right: 12%;
bottom: 20%;
background: radial-gradient(circle at 30% 30%, rgba(255, 242, 222, 0.95), rgba(255, 196, 121, 0.34) 58%, rgba(255, 196, 121, 0) 74%);
animation: heroOrbAmber 7.8s ease-in-out infinite;
animation-delay: 0.4s;
}
.orb-violet {
width: 30px;
height: 30px;
left: 36%;
top: 22%;
background: radial-gradient(circle at 30% 30%, rgba(235, 229, 255, 0.95), rgba(166, 138, 255, 0.3) 58%, rgba(166, 138, 255, 0) 74%);
animation: heroOrbViolet 8.8s ease-in-out infinite;
animation-delay: 1.1s;
}
.hero-ring {
width: 92px;
height: 92px;
left: 53%;
top: 10%;
border-radius: 999px;
border: 1.5px solid rgba(75, 153, 210, 0.28);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
animation: heroRingSpin 12s linear infinite;
}
.ring-sm {
width: 58px;
height: 58px;
left: 64%;
bottom: 13%;
border-width: 1px;
border-color: rgba(77, 177, 77, 0.3);
box-shadow: inset 0 0 0 1px rgba(217, 244, 223, 0.45);
animation-duration: 9s;
animation-direction: reverse;
}
.hero-spark {
left: 59%;
top: 33%;
animation: heroSparkTwinkle 2.2s ease-in-out infinite;
}
.hero-spark.spark-2 {
left: 71%;
top: 56%;
width: 6px;
height: 6px;
animation-delay: 1s;
animation-duration: 2.6s;
}
.hero-content {
display: flex;
flex-direction: column;
gap: 18px;
}
.eyebrow {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--brand-blue-deep);
padding: 3px 12px 3px 14px;
align-self: flex-start;
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--border-ui);
border-left: 3px solid var(--brand-green);
animation: sinceChipBounce 1.35s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.since-chip {
display: inline-flex;
align-items: center;
gap: 4px;
}
.since-chip svg {
width: 9px;
height: 9px;
min-width: 9px;
max-width: 9px;
min-height: 9px;
max-height: 9px;
flex: 0 0 9px;
display: block;
fill: var(--brand-green-mid);
filter: drop-shadow(0 0 4px rgba(77, 177, 77, 0.35));
}
.hero h1 {
font-size: clamp(2rem, 3vw + 1rem, 2.7rem);
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--accent-strong);
}
.hero-text {
font-size: 0.98rem;
color: var(--text-muted);
max-width: 32rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 4px;
}
.btn {
border-radius: var(--radius-pill);
padding: 10px 22px;
font-size: 0.95rem;
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn.primary {
background: var(--gradient-brand);
color: #ffffff;
box-shadow: var(--shadow-primary);
}
.btn.primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-primary-hover);
}
.btn.ghost {
background: rgba(255, 255, 255, 0.85);
border-color: var(--border-ui);
color: var(--accent-strong);
}
.btn.ghost:hover {
background: #ffffff;
transform: translateY(-1px);
}
.btn.full-width {
width: 100%;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
font-size: 0.8rem;
color: var(--text-muted);
}
.hero-meta span {
padding: 5px 9px;
border-radius: 999px;
border: 1px solid var(--border-ui);
background: rgba(255, 255, 255, 0.92);
font-size: 0.76rem;
}
@media (max-width: 480px) {
.logo img {
height: 36px;
}
}
.hero-visual {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-end;
justify-content: center;
transform: translate3d(calc(var(--px-global) * 6px), calc(var(--py-global) * 4px), 0);
transition: transform 220ms ease-out;
}
.glass-card {
position: relative;
width: 100%;
max-width: 280px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(243, 249, 252, 0.98));
border: 1px solid var(--border-ui);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.card-1 {
padding: 14px 14px 18px;
animation: floatCardOne 6s ease-in-out infinite;
}
.window-dots {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.dot {
width: 9px;
height: 9px;
border-radius: 999px;
}
.dot-green {
background: var(--brand-green);
animation: pulseDot 2.4s ease-in-out infinite;
}
.dot-amber {
background: var(--brand-blue);
}
.dot-red {
background: var(--brand-grey);
}
.code-lines {
display: grid;
gap: 6px;
}
.code-lines span {
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(75, 153, 210, 0.12), rgba(122, 122, 122, 0.28));
position: relative;
overflow: hidden;
}
.code-lines span::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
transform: translateX(-100%);
animation: shimmer 2.2s ease-in-out infinite;
}
.card-2 {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
background: radial-gradient(circle at top left, rgba(77, 177, 77, 0.18), rgba(255, 255, 255, 0.97));
animation: floatCardTwo 6s ease-in-out infinite;
animation-delay: 1.4s;
}
.card-2 p:first-child {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--brand-green-mid);
}
.card-2 p:last-child {
font-weight: 500;
color: var(--accent-strong);
}
.section {
margin-top: 12px;
padding: 28px 4px 10px;
animation: fadeUp 700ms ease-out;
}
.section-header {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
}
.section-header h2 {
font-size: 1.4rem;
letter-spacing: -0.02em;
color: var(--text-on-photo);
text-shadow: 0 1px 10px rgba(8, 12, 18, 0.5);
}
.section-header p {
font-size: 0.95rem;
color: var(--text-on-photo-muted);
text-shadow: 0 1px 8px rgba(8, 12, 18, 0.42);
}
.tech-strip {
border: 1px solid var(--border-ui);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(243, 249, 252, 0.92));
border-radius: 22px;
padding: 16px;
margin-top: 14px;
box-shadow: var(--shadow-soft);
display: grid;
gap: 14px;
position: relative;
overflow: hidden;
transform: perspective(900px) rotateX(calc(var(--py-global) * -0.9deg)) rotateY(calc(var(--px-global) * 0.9deg));
transition: transform 240ms ease-out;
}
.tech-strip::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(75, 153, 210, 0.14), transparent 30%, rgba(77, 177, 77, 0.11));
opacity: 0.65;
pointer-events: none;
}
.tech-strip-head,
.tech-metrics {
position: relative;
z-index: 1;
}
.tech-strip-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 12px;
flex-wrap: wrap;
}
.tech-kicker {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--brand-blue-deep);
}
.tech-strip-head p:last-child {
font-size: 0.9rem;
color: var(--text-muted);
}
.tech-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.metric-card {
border: 1px solid rgba(75, 153, 210, 0.2);
background: rgba(255, 255, 255, 0.8);
border-radius: 14px;
padding: 10px 11px;
}
.metric-value {
font-size: clamp(1.25rem, 1.6vw, 1.7rem);
font-weight: 700;
line-height: 1.1;
color: var(--brand-blue-deep);
}
.metric-label {
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 4px;
}
.service-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.service-card {
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(58, 90, 110, 0.14);
padding: 24px 22px 20px;
box-shadow: 0 14px 34px rgba(45, 95, 130, 0.08);
display: flex;
flex-direction: column;
gap: 14px;
transform-origin: center;
transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med), background var(--transition-med);
position: relative;
overflow: hidden;
min-height: 100%;
transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transform-style: preserve-3d;
}
.service-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(75, 153, 210, 0.18), transparent 38%);
opacity: 0;
transition: opacity var(--transition-fast);
pointer-events: none;
}
.service-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 100%;
background: var(--gradient-brand);
opacity: 0.55;
transition: opacity var(--transition-fast);
}
.service-card:hover {
--lift: -4px;
box-shadow: 0 18px 48px rgba(45, 95, 130, 0.12);
border-color: rgba(75, 153, 210, 0.35);
background: rgba(255, 255, 255, 0.98);
}
.service-card:hover::after {
opacity: 1;
}
.service-card:hover::before {
opacity: 0.95;
}
.service-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.service-kicker {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--radius-pill);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-blue-deep);
background: var(--gradient-brand-soft);
border: 1px solid var(--border-ui);
}
.service-icon {
width: 36px;
height: 36px;
border-radius: 12px;
background: var(--accent-soft);
margin-bottom: 0;
flex-shrink: 0;
}
.service-icon-blue {
background: radial-gradient(circle at 20% 0, #d4ebf7, var(--brand-blue));
}
.service-icon-violet {
background: radial-gradient(circle at 20% 0, #c5e6f5, var(--brand-blue-mid));
}
.service-icon-teal {
background: radial-gradient(circle at 20% 0, #d4efd4, var(--brand-green));
}
.service-icon-purple {
background: radial-gradient(circle at 20% 0, #b8dcb8, var(--brand-green-mid));
}
.service-icon-amber {
background: radial-gradient(circle at 20% 0, #dfe6ea, var(--brand-grey));
}
.service-card h3 {
font-size: 1.1rem;
line-height: 1.35;
}
.service-card p {
font-size: 0.93rem;
line-height: 1.62;
color: #4b5563;
}
.service-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.service-tags span {
font-size: 0.73rem;
padding: 5px 10px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.94);
border: 1px solid var(--border-ui);
color: var(--brand-grey-dark);
}
.service-card ul {
list-style: none;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
margin-top: 2px;
padding-top: 12px;
border-top: 1px solid rgba(75, 153, 210, 0.16);
font-size: 0.91rem;
line-height: 1.55;
color: #475569;
}
.service-card li {
display: flex;
align-items: flex-start;
gap: 8px;
}
.service-card li::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
margin-top: 0.5em;
flex-shrink: 0;
display: inline-block;
background: var(--accent);
color: var(--accent);
}
.service-card li:nth-child(even)::before {
background: var(--accent-2);
}
.service-foot {
margin-top: auto;
padding-top: 12px;
font-size: 0.82rem;
line-height: 1.45;
color: #5f6f7f;
border-top: 1px dashed rgba(75, 153, 210, 0.26);
}
.about {
padding-top: 16px;
}
.works {
padding-top: 14px;
}
.works-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.work-card {
border-radius: 18px;
overflow: hidden;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(75, 153, 210, 0.2);
box-shadow: 0 12px 30px rgba(45, 95, 130, 0.08);
transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}
.work-card img {
display: block;
width: 100%;
height: 220px;
object-fit: contain;
object-position: center;
background: #f8fbfd;
padding-top: 12px;
box-sizing: border-box;
}
.work-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 12px 14px 13px;
}
.work-meta h3 {
font-size: 0.95rem;
letter-spacing: 0.04em;
}
.work-meta p {
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #64748b;
}
.work-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(45, 95, 130, 0.12);
border-color: rgba(75, 153, 210, 0.34);
}
.work-card.work-cta {
display: grid;
place-items: center;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 249, 253, 0.96));
}
.work-cta-inner {
padding: 18px 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.work-cta-network {
width: 100%;
border-radius: 12px;
border: 1px dashed rgba(75, 153, 210, 0.3);
background: linear-gradient(160deg, rgba(247, 252, 255, 0.98), rgba(240, 248, 253, 0.98));
overflow: hidden;
}
#particle-network-work {
display: block;
width: 100%;
height: 92px;
}
.work-cta-inner h3 {
font-size: 0.96rem;
letter-spacing: 0.04em;
}
.work-cta-inner p {
font-size: 0.88rem;
line-height: 1.55;
color: #5f6f7f;
}
.work-cta-inner .btn {
margin-top: 2px;
}
.partners {
padding-top: 12px;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.partner-logo {
margin: 0;
border-radius: 14px;
padding: 12px;
border: 1px solid rgba(75, 153, 210, 0.2);
background: rgba(255, 255, 255, 0.9);
display: grid;
place-items: center;
min-height: 84px;
}
.partner-logo img {
max-width: 100%;
max-height: 44px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1) saturate(0) contrast(1.05) brightness(0.9);
opacity: 0.82;
transition: filter var(--transition-med), opacity var(--transition-med), transform var(--transition-med);
}
.partner-logo:hover img {
filter: grayscale(1) saturate(0) contrast(1.08) brightness(1);
opacity: 1;
transform: translateY(-1px);
}
.about-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.about-point {
border-radius: var(--radius-lg);
padding: 18px 18px 16px;
border: 1px solid rgba(75, 153, 210, 0.24);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.95));
box-shadow: 0 12px 30px rgba(45, 95, 130, 0.08);
display: flex;
flex-direction: column;
gap: 8px;
transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}
.about-point:hover {
transform: translateY(-2px);
border-color: rgba(75, 153, 210, 0.38);
box-shadow: 0 16px 36px rgba(45, 95, 130, 0.12);
}
.about-kicker {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand-blue-deep);
align-self: flex-start;
padding: 4px 10px;
border-radius: 999px;
background: rgba(75, 153, 210, 0.12);
border: 1px solid rgba(75, 153, 210, 0.2);
}
.about-point h3 {
font-size: 1.02rem;
line-height: 1.35;
}
.about-point p {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.55;
}
.about-list {
list-style: none;
display: grid;
gap: 7px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px dashed rgba(75, 153, 210, 0.22);
font-size: 0.86rem;
color: #5f6f7f;
}
.about-list li {
display: flex;
align-items: flex-start;
gap: 8px;
}
.about-list li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
margin-top: 0.45em;
flex-shrink: 0;
background: var(--brand-green);
}
.contact {
padding-top: 18px;
}
.contact-inner {
border-radius: 24px;
padding: 20px 18px 18px;
background: radial-gradient(circle at 100% 30%, rgba(75, 153, 210, 0.22), transparent 55%), radial-gradient(circle at 0% 100%, rgba(77, 177, 77, 0.12), transparent 45%), linear-gradient(160deg, #2d3338 0%, #1e2429 100%);
color: #e5e7eb;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 20px;
align-items: flex-start;
}
.contact-copy h2 {
font-size: 1.3rem;
margin-bottom: 6px;
}
.contact-copy > p {
font-size: 0.92rem;
color: rgba(212, 235, 247, 0.95);
margin-bottom: 14px;
}
.contact-details {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid rgba(75, 153, 210, 0.2);
}
.contact-company {
font-size: 0.9rem;
font-weight: 600;
color: #d8e7f4;
margin-bottom: 6px;
}
.contact-address {
font-size: 0.86rem;
color: #94a3b8;
line-height: 1.55;
margin-bottom: 12px;
}
.contact-channels {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
}
.contact-channel {
font-size: 0.88rem;
font-weight: 500;
color: #9fd4f0;
text-decoration: none;
border-bottom: 1px solid rgba(159, 212, 240, 0.4);
padding-bottom: 1px;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.contact-channel:hover {
color: #c8ead4;
border-bottom-color: rgba(200, 234, 212, 0.55);
}
.footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border-ui);
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
justify-content: space-between;
font-size: 0.78rem;
color: var(--text-on-photo-muted);
text-shadow: 0 1px 8px rgba(8, 12, 18, 0.38);
}
.footer-brand {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
max-width: min(100%, 36rem);
}
.footer-logo {
height: 42px;
width: auto;
object-fit: contain;
opacity: 0.92;
}
.footer-logo-mark {
height: 34px;
}
.footer-copy {
line-height: 1.45;
white-space: nowrap;
}
.footer-meta {
opacity: 0.9;
align-self: center;
}
.footer-meta a {
color: var(--text-on-photo-muted);
text-decoration: none;
border-bottom: 1px solid rgba(213, 226, 236, 0.35);
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.footer-meta a:hover {
color: var(--accent);
border-bottom-color: rgba(75, 153, 210, 0.5);
}
.konami-shimmer {
display: inline-block;
color: #e6f2fb;
text-shadow: 0 0 10px rgba(217, 231, 242, 0.35);
animation: shimmerGlow 2.4s ease-in-out infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.konami-shimmer {
background: linear-gradient(115deg, #6fa8ff 0%, #cdb7ff 28%, #ffffff 50%, #86e7d0 72%, #6fa8ff 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: shimmerText 2.6s linear infinite;
}
}
.footer-photo-credit {
display: none;
}
body.easteregg-reveal .page {
max-width: none;
min-height: 100vh;
padding: 0 0 20px;
}
body.easteregg-reveal .header,
body.easteregg-reveal main {
display: none;
}
body.easteregg-reveal .footer {
display: flex;
margin-top: auto;
width: 100%;
padding: 14px 20px;
border-top: none;
justify-content: center;
align-items: center;
color: #f1f5f9;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(4px);
}
body.easteregg-reveal .footer-brand,
body.easteregg-reveal .footer-meta {
display: none;
}
body.easteregg-reveal .footer-photo-credit {
display: block;
font-size: 0.82rem;
letter-spacing: 0.01em;
text-align: center;
}
.reveal {
opacity: 0;
transform: translateY(18px) scale(0.99);
filter: blur(5px);
transition: opacity 560ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1), filter 560ms ease;
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
.service-card.reveal,
.service-card.reveal.is-visible {
transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
@keyframes fadeInPage {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes heroIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes floatCard {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@keyframes floatCardOne {
0%,
100% {
transform: translate3d(calc(var(--px-global) * -10px), calc(var(--py-global) * -8px), 0);
}
50% {
transform: translate3d(calc(var(--px-global) * -10px), calc(var(--py-global) * -8px - 8px), 0);
}
}
@keyframes floatCardTwo {
0%,
100% {
transform: translate3d(calc(var(--px-global) * 8px), calc(var(--py-global) * 7px), 0);
}
50% {
transform: translate3d(calc(var(--px-global) * 8px), calc(var(--py-global) * 7px - 8px), 0);
}
}
@keyframes pulseDot {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(77, 177, 77, 0.45);
}
50% {
transform: scale(1.15);
box-shadow: 0 0 0 8px rgba(77, 177, 77, 0);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes floatBgBlue {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
100% {
transform: translate3d(5vw, -4vh, 0) scale(1.1);
}
}
@keyframes floatBgGreen {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
100% {
transform: translate3d(-4vw, 4vh, 0) scale(1.12);
}
}
@keyframes driftGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes sinceChipBounce {
0%,
100% {
transform: translateY(0);
}
35% {
transform: translateY(-2.5px);
}
55% {
transform: translateY(1px);
}
75% {
transform: translateY(-1px);
}
}
@keyframes introCaretBlink {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
@keyframes introCueBounce {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(7px);
}
}
@keyframes heroOrbBlue {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.75;
}
50% {
transform: translate3d(6px, -12px, 0) scale(1.12);
opacity: 1;
}
}
@keyframes heroOrbGreen {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.72;
}
50% {
transform: translate3d(-10px, 8px, 0) scale(1.16);
opacity: 0.95;
}
}
@keyframes heroRingSpin {
0% {
transform: rotate(0deg) translateZ(0);
opacity: 0.55;
}
50% {
opacity: 0.85;
}
100% {
transform: rotate(360deg) translateZ(0);
opacity: 0.55;
}
}
@keyframes heroOrbAmber {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.72;
}
50% {
transform: translate3d(-7px, -6px, 0) scale(1.12);
opacity: 0.95;
}
}
@keyframes heroOrbViolet {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 0.65;
}
50% {
transform: translate3d(6px, 9px, 0) scale(1.14);
opacity: 0.9;
}
}
@keyframes heroSparkTwinkle {
0%,
100% {
transform: scale(0.9);
opacity: 0.35;
}
50% {
transform: scale(1.3);
opacity: 0.95;
}
}
@keyframes heroMorphShift {
0%,
100% {
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
border-radius: 36% 64% 58% 42% / 33% 47% 53% 67%;
opacity: 0.58;
}
25% {
transform: translate3d(12px, -16px, 0) rotate(10deg) scale(1.14);
border-radius: 68% 32% 30% 70% / 58% 39% 61% 42%;
opacity: 0.9;
}
50% {
transform: translate3d(-13px, 15px, 0) rotate(-14deg) scale(0.88);
border-radius: 24% 76% 46% 54% / 69% 28% 72% 31%;
opacity: 0.7;
}
75% {
transform: translate3d(16px, 11px, 0) rotate(16deg) scale(1.2);
border-radius: 74% 26% 56% 44% / 29% 71% 31% 69%;
opacity: 0.94;
}
}
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal.is-visible {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
body::before,
body::after,
.page::before {
animation: none;
}
.page::after {
animation: none;
}
.service-card {
transform: none;
}
.service-card::after {
display: none;
}
.hero-visual,
.card-1,
.card-2,
.tech-strip {
transform: none;
transition: none;
}
.hero-orb,
.hero-ring,
.hero-spark,
.hero-morph {
animation: none;
}
.since-chip,
.since-chip svg {
animation: none;
}
.konami-shimmer {
animation: none;
color: inherit;
}
.intro-scroll-cue.is-visible {
animation: none;
}
}
@media (max-width: 768px) {
body {
background-attachment: scroll;
}
body.intro-mode {
background-attachment: scroll;
}
body.easteregg-reveal {
background-attachment: scroll;
}
.bg-photo {
bottom: -10vh;
}
.bg-hotspot {
display: none;
}
.page {
padding: 18px 16px 28px;
gap: 24px;
}
.header {
padding-inline: 14px;
}
.nav-toggle {
display: inline-flex;
}
.nav {
position: absolute;
top: 54px;
right: 18px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 10px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid var(--border-ui);
box-shadow: 0 16px 40px rgba(45, 95, 130, 0.14);
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity var(--transition-med), transform var(--transition-med);
}
.nav-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.hero {
grid-template-columns: minmax(0, 1fr);
padding: 22px 18px 20px;
gap: 24px;
}
.hero-ornaments {
opacity: 0.6;
}
.hero-visual {
order: -1;
align-items: stretch;
transform: none;
}
.glass-card {
max-width: 100%;
}
.card-1,
.card-2,
.tech-strip {
transform: none;
}
.section {
padding-top: 18px;
}
.service-card {
padding-inline: 16px;
transform: none;
}
.service-tags span {
font-size: 0.7rem;
}
.tech-metrics {
grid-template-columns: minmax(0, 1fr);
}
.contact-inner {
grid-template-columns: minmax(0, 1fr);
padding-inline: 16px;
}
.footer-brand {
flex-wrap: wrap;
}
.footer-copy {
white-space: normal;
}
}
@media (min-width: 769px) {
.service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.works-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.partners-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 960px) {
.service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.works-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tech-metrics {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@keyframes techGridShift {
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 36px 36px, 36px 36px;
}
}
@keyframes shimmerText {
0% {
background-position: 200% 0;
}
100% {
background-position: -20% 0;
}
}
@keyframes shimmerGlow {
0%,
100% {
color: #b8dcf7;
text-shadow: 0 0 6px rgba(126, 195, 242, 0.28);
}
50% {
color: #ffffff;
text-shadow: 0 0 14px rgba(189, 238, 200, 0.46);
}
}