:root{
/* Dark theme (default) */
--bg: #0b0d0c;
--bg-soft: #111413;
--panel: #16191a;
--line: #1f2422;
--line-soft: #161a19;
--ink: #ecebe6;
--ink-dim: #a8a89e;
--ink-mute: #6a6a62;
--accent: #c6ff3d; /* lime electric */
--accent-2: #ff5b2e; /* burnt orange */
--accent-3: #6ce8c8; /* mint */
--grid: rgba(255,255,255,0.04);
--shadow-strong: 0 30px 80px rgba(0,0,0,0.55);
--shadow-card: 0 8px 24px rgba(0,0,0,0.4);
--bg-rgb: 11,13,12;
--panel-glass: rgba(11,13,12,0.72);
--planet-shade: rgba(0,0,0,0.6);
--radius: 14px;
--max: 1240px;
--display: 'Fraunces', ui-serif, Georgia, serif;
--body: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
color-scheme: dark;
}
/* ============ LIGHT THEME ============ */
/* Applied either via system preference (when user hasn't chosen)
or via [data-theme="light"] on (manual override). */
:root[data-theme="light"]{
--bg: #f7f6f0;
--bg-soft: #ecebe2;
--panel: #ffffff;
--line: #e2dfd2;
--line-soft: #ecebe2;
--ink: #14171a;
--ink-dim: #4a4f55;
--ink-mute: #8a8f93;
--accent: #4a8a00; /* deep lime — readable on white */
--accent-2: #d94a1a; /* darker burnt orange */
--accent-3: #1d8a73; /* deeper mint */
--grid: rgba(0,0,0,0.04);
--shadow-strong: 0 30px 80px rgba(20,23,26,0.18);
--shadow-card: 0 8px 24px rgba(20,23,26,0.08);
--bg-rgb: 247,246,240;
--panel-glass: rgba(247,246,240,0.78);
--planet-shade: rgba(0,0,0,0.15);
color-scheme: light;
}
/* Light theme — fine-grained adjustments for components that need it */
:root[data-theme="light"] ::selection{background:var(--accent);color:#fff}
:root[data-theme="light"] body{
background-image:
radial-gradient(900px 600px at 85% -10%, rgba(74,138,0,0.08), transparent 60%),
radial-gradient(700px 500px at -10% 10%, rgba(29,138,115,0.06), transparent 60%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
}
:root[data-theme="light"] .cta:not(.ghost),
:root[data-theme="light"] .cta-contact,
:root[data-theme="light"] .modal-submit{color:#fff}
:root[data-theme="light"] .cta.ghost{color:var(--ink);border-color:var(--line)}
:root[data-theme="light"] .cta.ghost:hover{border-color:var(--ink-dim);background:rgba(0,0,0,0.03)}
:root[data-theme="light"] .cta-contact .dot-live{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,0.25)}
:root[data-theme="light"] .modal-close:hover{color:#fff}
:root[data-theme="light"] .code-card{
background:linear-gradient(180deg,#1a1d1f 0%,#0f1213 100%);
color:#ecebe6;
}
:root[data-theme="light"] .code-card .filename{color:rgba(255,255,255,0.5)}
:root[data-theme="light"] .code-card .cm{color:rgba(255,255,255,0.4)}
:root[data-theme="light"] .chap-then{background:linear-gradient(135deg,#fff 0%,#f0eee2 100%)}
:root[data-theme="light"] .chap-now{background:linear-gradient(135deg,#eef7d8 0%,#f7faea 100%);border-color:rgba(74,138,0,0.25)}
:root[data-theme="light"] .chap-tag{background:rgba(0,0,0,0.04);color:var(--ink-dim)}
:root[data-theme="light"] .chap-tag-accent{background:rgba(74,138,0,0.08);color:var(--accent);border-color:rgba(74,138,0,0.25)}
:root[data-theme="light"] .chap-then::before{background:radial-gradient(circle, rgba(29,138,115,0.08), transparent 70%)}
:root[data-theme="light"] .chap-now::before{background:radial-gradient(circle, rgba(74,138,0,0.12), transparent 70%)}
:root[data-theme="light"] .bridge-icon{background:#fff}
:root[data-theme="light"] .bridge-label{background:var(--bg)}
:root[data-theme="light"] .modal{background:linear-gradient(180deg,#ffffff 0%,#f5f3e8 100%)}
:root[data-theme="light"] .modal::before{background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(74,138,0,0.12), transparent 70%)}
:root[data-theme="light"] .nav{background:rgba(247,246,240,0.78)}
/* ===== Auto light theme (system preference, no manual choice yet) ===== */
@media (prefers-color-scheme: light){
:root:not([data-theme]){
--bg: #f7f6f0;
--bg-soft: #ecebe2;
--panel: #ffffff;
--line: #e2dfd2;
--line-soft: #ecebe2;
--ink: #14171a;
--ink-dim: #4a4f55;
--ink-mute: #8a8f93;
--accent: #4a8a00;
--accent-2: #d94a1a;
--accent-3: #1d8a73;
--grid: rgba(0,0,0,0.04);
--shadow-strong: 0 30px 80px rgba(20,23,26,0.18);
--shadow-card: 0 8px 24px rgba(20,23,26,0.08);
--bg-rgb: 247,246,240;
--panel-glass: rgba(247,246,240,0.78);
--planet-shade: rgba(0,0,0,0.15);
color-scheme: light;
}
:root:not([data-theme]) ::selection{background:#4a8a00;color:#fff}
:root:not([data-theme]) body{
background-image:
radial-gradient(900px 600px at 85% -10%, rgba(74,138,0,0.08), transparent 60%),
radial-gradient(700px 500px at -10% 10%, rgba(29,138,115,0.06), transparent 60%),
linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}
:root:not([data-theme]) .cta:not(.ghost),
:root:not([data-theme]) .cta-contact,
:root:not([data-theme]) .modal-submit{color:#fff}
:root:not([data-theme]) .cta.ghost{color:var(--ink);border-color:var(--line)}
:root:not([data-theme]) .cta.ghost:hover{border-color:var(--ink-dim);background:rgba(0,0,0,0.03)}
:root:not([data-theme]) .cta-contact .dot-live{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,0.25)}
:root:not([data-theme]) .modal-close:hover{color:#fff}
:root:not([data-theme]) .code-card{background:linear-gradient(180deg,#1a1d1f 0%,#0f1213 100%);color:#ecebe6}
:root:not([data-theme]) .code-card .filename{color:rgba(255,255,255,0.5)}
:root:not([data-theme]) .code-card .cm{color:rgba(255,255,255,0.4)}
:root:not([data-theme]) .chap-then{background:linear-gradient(135deg,#fff 0%,#f0eee2 100%)}
:root:not([data-theme]) .chap-now{background:linear-gradient(135deg,#eef7d8 0%,#f7faea 100%);border-color:rgba(74,138,0,0.25)}
:root:not([data-theme]) .chap-tag{background:rgba(0,0,0,0.04);color:var(--ink-dim)}
:root:not([data-theme]) .chap-tag-accent{background:rgba(74,138,0,0.08);color:var(--accent);border-color:rgba(74,138,0,0.25)}
:root:not([data-theme]) .chap-then::before{background:radial-gradient(circle, rgba(29,138,115,0.08), transparent 70%)}
:root:not([data-theme]) .chap-now::before{background:radial-gradient(circle, rgba(74,138,0,0.12), transparent 70%)}
:root:not([data-theme]) .bridge-icon{background:#fff}
:root:not([data-theme]) .bridge-label{background:var(--bg)}
:root:not([data-theme]) .modal{background:linear-gradient(180deg,#ffffff 0%,#f5f3e8 100%)}
:root:not([data-theme]) .modal::before{background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(74,138,0,0.12), transparent 70%)}
:root:not([data-theme]) .nav{background:rgba(247,246,240,0.78)}
}
/* Smooth transition between themes */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after{
transition:background-color .35s ease, border-color .35s ease,
color .35s ease, fill .35s ease, stroke .35s ease,
box-shadow .35s ease !important;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .35s ease, color .35s ease}
body{
background-image:
radial-gradient(900px 600px at 85% -10%, rgba(198,255,61,0.07), transparent 60%),
radial-gradient(700px 500px at -10% 10%, rgba(108,232,200,0.05), transparent 60%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: auto, auto, 56px 56px, 56px 56px;
background-position: 0 0, 0 0, -1px -1px, -1px -1px;
overflow-x:hidden;
}
[data-theme="light"] body{
background-image:
radial-gradient(900px 600px at 85% -10%, rgba(91,138,0,0.08), transparent 60%),
radial-gradient(700px 500px at -10% 10%, rgba(29,138,118,0.06), transparent 60%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--bg)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
@media(max-width:640px){
.wrap{padding:0 20px}
}
/* ============ NAV ============ */
.nav{
position:sticky;top:0;z-index:50;
backdrop-filter:saturate(1.4) blur(12px);
background:var(--panel-glass);
border-bottom:1px solid var(--line);
transition:background-color .35s ease, border-color .35s ease;
}
.nav-inner{
display:flex;align-items:center;justify-content:space-between;
padding-top:18px;padding-bottom:18px;gap:16px;
}
@media(max-width:640px){
.nav-inner{padding-top:14px;padding-bottom:14px}
}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-0.01em}
.logo .dot{
width:12px;height:12px;border-radius:3px;background:var(--accent);
box-shadow:0 0 0 4px rgba(198,255,61,0.15);
transform:rotate(45deg);
}
.logo small{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-mute);text-transform:uppercase;letter-spacing:0.16em;margin-left:8px}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;color:var(--ink-dim);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.cta{
display:inline-flex;align-items:center;gap:8px;
padding:10px 18px;border-radius:999px;
background:var(--accent);color:#000;
font-weight:700;font-size:14px;letter-spacing:0.01em;
border:1px solid var(--accent);cursor:pointer;
font-family:inherit;
transition:transform .15s ease, box-shadow .2s ease;
}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(198,255,61,0.25)}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:600}
.cta.ghost:hover{border-color:var(--ink-dim)}
/* ===== Spotlight Contact button (in nav) ===== */
.cta-contact{
position:relative;
display:inline-flex;align-items:center;gap:10px;
padding:11px 22px 11px 20px;border-radius:999px;
background:var(--accent);color:#000;
font-weight:800;font-size:14px;letter-spacing:0.02em;
border:none;cursor:pointer;
box-shadow:
0 0 0 1px rgba(198,255,61,0.6),
0 4px 18px rgba(198,255,61,0.35),
0 0 30px rgba(198,255,61,0.25);
transition:transform .2s ease, box-shadow .25s ease;
overflow:hidden;
isolation:isolate;
}
.cta-contact::before{
/* Sweeping shimmer */
content:"";position:absolute;inset:0;
background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
transform:translateX(-110%);
animation:shimmer 3.2s ease-in-out infinite;
pointer-events:none;
}
.cta-contact::after{
/* Outer pulse halo */
content:"";position:absolute;inset:-3px;border-radius:999px;
border:1px solid var(--accent);
animation:contactHalo 2.4s ease-out infinite;
pointer-events:none;
z-index:-1;
}
@keyframes shimmer{
0%{transform:translateX(-110%)}
60%,100%{transform:translateX(110%)}
}
@keyframes contactHalo{
0%{transform:scale(1);opacity:.7}
100%{transform:scale(1.25);opacity:0}
}
.cta-contact:hover{
transform:translateY(-2px);
box-shadow:
0 0 0 1px var(--accent),
0 8px 26px rgba(198,255,61,0.55),
0 0 50px rgba(198,255,61,0.4);
}
.cta-contact .dot-live{
width:8px;height:8px;border-radius:50%;background:#000;
box-shadow:0 0 0 3px rgba(0,0,0,0.15);
animation:livePing 1.4s infinite;
}
@keyframes livePing{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.4;transform:scale(.75)}
}
.cta-contact .arrow{transition:transform .25s ease}
.cta-contact:hover .arrow{transform:translateX(4px)}
/* ===== Theme toggle button ===== */
/* TEMPORARILY HIDDEN — remove the display:none line below to re-enable the theme toggle */
.theme-toggle{display:none !important}
.theme-toggle{
position:relative;
width:38px;height:38px;border-radius:50%;
background:var(--bg-soft);border:1px solid var(--line);
color:var(--ink-dim);
display:grid;place-items:center;cursor:pointer;
padding:0;margin:0;
font-family:inherit;
-webkit-appearance:none;appearance:none;outline:none;
transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.theme-toggle:hover{
color:var(--ink);border-color:var(--ink-mute);
transform:translateY(-1px);
}
.theme-toggle:focus-visible{
box-shadow:0 0 0 3px rgba(198,255,61,0.35);
}
.theme-toggle svg{
width:18px;height:18px;
stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
pointer-events:none;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-system{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%) scale(0) rotate(-90deg);
opacity:0;
}
/* Default: system icon visible */
.theme-toggle .icon-system{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
/* When data-mode=light, show sun */
.theme-toggle[data-mode="light"] .icon-system{transform:translate(-50%,-50%) scale(0) rotate(90deg);opacity:0}
.theme-toggle[data-mode="light"] .icon-sun{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
/* When data-mode=dark, show moon */
.theme-toggle[data-mode="dark"] .icon-system{transform:translate(-50%,-50%) scale(0) rotate(90deg);opacity:0}
.theme-toggle[data-mode="dark"] .icon-moon{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
/* Tooltip */
.theme-toggle::after{
content:attr(data-label);
position:absolute;top:calc(100% + 8px);right:0;
padding:5px 10px;border-radius:6px;
background:var(--panel);border:1px solid var(--line);
color:var(--ink);
font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
white-space:nowrap;
opacity:0;transform:translateY(-4px);pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
box-shadow:var(--shadow-card);
}
.theme-toggle:hover::after{opacity:1;transform:translateY(0)}
/* ===== Nav — mobile responsive ===== */
@media (max-width: 820px){
.nav-links a:not(.cta){display:none}
.theme-toggle{display:none} /* Fix 1: hide theme toggle */
}
@media (max-width: 640px){
.logo small{display:none} /* Fix 2: hide EST. 2023 · VN */
}
@media (max-width: 400px){
.cta-contact{padding:10px 16px;font-size:13px;gap:8px} /* Fix 3: compact button */
.cta-contact .arrow{display:none} /* Fix 3: hide arrow on tiny screens */
}
/* ============ HERO ============ */
.hero{position:relative;padding:96px 0 80px;overflow:hidden}
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
color:var(--ink-dim);
padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);
}
.eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(198,255,61,0.18);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
h1.headline{
font-family:var(--display);
font-weight:500;
font-size: clamp(44px, 7vw, 96px);
line-height:0.98;
letter-spacing:-0.025em;
margin: 28px 0 24px;
max-width: 16ch;
}
h1.headline em{font-style:italic;color:var(--accent);font-weight:400}
h1.headline .strike{position:relative;display:inline-block}
h1.headline .strike::after{
content:"";position:absolute;left:-2%;right:-2%;top:55%;height:6px;background:var(--accent-2);transform:rotate(-2deg);border-radius:3px;
}
.lede{
font-size:19px;line-height:1.55;color:var(--ink-dim);
max-width:60ch;margin-bottom:36px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:64px}
.hero-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
padding-top:36px;border-top:1px solid var(--line);
}
.stat .n{font-family:var(--display);font-weight:600;font-size:44px;letter-spacing:-0.02em;line-height:1}
.stat .n .plus{color:var(--accent);font-style:italic;font-weight:400}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:10px}
@media(max-width:760px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
/* ============ CODE CARD ============ */
.card-stage{
position:absolute;right:-30px;top:120px;
width:440px;height:520px;
perspective:1400px;
pointer-events:none;
}
@media(max-width:1180px){.card-stage{display:none}}
.card-stage-inner{
position:absolute;inset:0;
transform-style:preserve-3d;
transition:transform .25s cubic-bezier(.2,.8,.2,1);
will-change:transform;
}
/* The code card itself */
.code-card{
position:absolute;left:50%;top:50%;
width:400px;
background:linear-gradient(180deg, #16191a 0%, #0f1213 100%);
border:1px solid var(--line);border-radius:16px;
box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(198,255,61,0.04);
padding:0;font-family:var(--mono);font-size:12.5px;line-height:1.3;
transform:translate(-50%,-50%) rotate(2deg);
overflow:hidden;
pointer-events:auto;
z-index:5;
}
.code-card .bar{
display:flex;align-items:center;gap:6px;
padding:13px 16px;border-bottom:1px solid var(--line);
background:rgba(0,0,0,0.25);
}
.code-card .bar i{width:11px;height:11px;border-radius:50%;background:#2a2f2e}
.code-card .bar i:nth-child(1){background:#ff5b5b}
.code-card .bar i:nth-child(2){background:#ffb13b}
.code-card .bar i:nth-child(3){background:var(--accent)}
.code-card .filename{
margin-left:auto;font-size:11px;color:var(--ink-mute);
display:flex;align-items:center;gap:6px;
}
.code-card .filename::before{
content:"●";color:var(--accent);font-size:8px;animation:liveDot 1.4s infinite;
}
@keyframes liveDot{0%,100%{opacity:.3}50%{opacity:1}}
.code-body{padding:18px 20px 22px;min-height:320px;white-space:pre;line-height:1.3}
.code-body > br{display:none}
.code-card .kw{color:#ff8a65;font-weight:600}
.code-card .fn{color:var(--accent);font-weight:600}
.code-card .st{color:#9ad4ff}
.code-card .cm{color:var(--ink-mute);font-style:italic}
.code-card .nm{color:#f5d76e}
.code-card .nu{color:#c6a3ff}
/* Line emphasis — highlight one line at a time */
.code-line{display:block;padding:0 6px;margin:0 -6px;border-radius:4px;transition:background .4s ease}
.code-line.active{background:rgba(198,255,61,0.07);box-shadow:inset 2px 0 0 var(--accent)}
/* Bold word effect — periodically pulse "Build", "Production", "Care" */
.pulse-word{
display:inline-block;font-weight:700;
animation:wordGlow 3s ease-in-out infinite;
}
@keyframes wordGlow{
0%,100%{color:var(--accent);text-shadow:none}
50%{color:#eaffb0;text-shadow:0 0 12px rgba(198,255,61,0.7)}
}
/* Typing area */
.typing-line{display:block;color:var(--ink-dim);padding:0 6px;margin:0 -6px}
.typing-line .caret{
display:inline-block;width:7px;height:14px;background:var(--accent);
vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}
/* Status footer inside card */
.code-foot{
border-top:1px solid var(--line);
padding:10px 18px;display:flex;gap:14px;align-items:center;
font-size:11px;color:var(--ink-mute);background:rgba(0,0,0,0.2);
}
.code-foot .ok{color:var(--accent)}
.code-foot .sep{color:var(--line)}
/* ============ TECH SATELLITES around the card ============ */
.satellite{
position:absolute;left:50%;top:50%;
transform-style:preserve-3d;
will-change:transform;
z-index:3;
}
.satellite .chip{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;border-radius:999px;
background:var(--panel);border:1px solid var(--line);
font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--ink);
box-shadow:0 8px 24px rgba(0,0,0,0.4);
white-space:nowrap;
}
.satellite .chip::before{
content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
box-shadow:0 0 8px var(--accent);
}
.satellite.s-mint .chip::before{background:var(--accent-3);box-shadow:0 0 8px var(--accent-3)}
.satellite.s-orange .chip::before{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
.satellite.s-blue .chip::before{background:#9ad4ff;box-shadow:0 0 8px #9ad4ff}
.satellite.s-purple .chip::before{background:#c6a3ff;box-shadow:0 0 8px #c6a3ff}
.satellite.s-yellow .chip::before{background:#f5d76e;box-shadow:0 0 8px #f5d76e}
/* Each satellite orbits at different radius / speed / starting angle */
.satellite.sat-1{animation:orbitA 18s linear infinite}
.satellite.sat-2{animation:orbitB 22s linear infinite reverse}
.satellite.sat-3{animation:orbitC 26s linear infinite}
.satellite.sat-4{animation:orbitD 30s linear infinite reverse}
.satellite.sat-5{animation:orbitE 24s linear infinite}
.satellite.sat-6{animation:orbitF 32s linear infinite reverse}
.satellite.sat-7{animation:orbitG 28s linear infinite}
@keyframes orbitA{from{transform:translate(-50%,-50%) rotate(0deg) translate(260px,-60px) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg) translate(260px,-60px) rotate(-360deg)}}
@keyframes orbitB{from{transform:translate(-50%,-50%) rotate(60deg) translate(280px,80px) rotate(-60deg)}to{transform:translate(-50%,-50%) rotate(420deg) translate(280px,80px) rotate(-420deg)}}
@keyframes orbitC{from{transform:translate(-50%,-50%) rotate(140deg) translate(240px,-30px) rotate(-140deg)}to{transform:translate(-50%,-50%) rotate(500deg) translate(240px,-30px) rotate(-500deg)}}
@keyframes orbitD{from{transform:translate(-50%,-50%) rotate(200deg) translate(290px,50px) rotate(-200deg)}to{transform:translate(-50%,-50%) rotate(560deg) translate(290px,50px) rotate(-560deg)}}
@keyframes orbitE{from{transform:translate(-50%,-50%) rotate(260deg) translate(250px,-90px) rotate(-260deg)}to{transform:translate(-50%,-50%) rotate(620deg) translate(250px,-90px) rotate(-620deg)}}
@keyframes orbitF{from{transform:translate(-50%,-50%) rotate(320deg) translate(310px,30px) rotate(-320deg)}to{transform:translate(-50%,-50%) rotate(680deg) translate(310px,30px) rotate(-680deg)}}
@keyframes orbitG{from{transform:translate(-50%,-50%) rotate(30deg) translate(220px,110px) rotate(-30deg)} to{transform:translate(-50%,-50%) rotate(390deg) translate(220px,110px) rotate(-390deg)}}
/* Dashed orbit ring (decoration) */
.orbit-ring{
position:absolute;left:50%;top:50%;
width:580px;height:580px;border-radius:50%;
border:1px dashed rgba(255,255,255,0.05);
transform:translate(-50%,-50%);
animation:ringSpin 60s linear infinite;
pointer-events:none;
}
.orbit-ring.r2{width:660px;height:660px;animation-duration:90s;animation-direction:reverse;border-color:rgba(198,255,61,0.06)}
@keyframes ringSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* ============ MARQUEE (tech stack) ============ */
.marquee{
border-block:1px solid var(--line);
background:var(--bg-soft);
overflow:hidden;
padding:22px 0;
}
.marquee-track{display:flex;gap:64px;animation:scroll 40s linear infinite;width:max-content}
.marquee-item{font-family:var(--display);font-weight:400;font-style:italic;font-size:30px;color:var(--ink-dim);white-space:nowrap;display:flex;align-items:center;gap:64px}
.marquee-item::after{content:"✦";color:var(--accent);font-size:18px;font-style:normal}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ============ SECTIONS ============ */
section{padding:120px 0;position:relative}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.section-label{font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.section-label::before{content:"";width:24px;height:1px;background:var(--accent)}
h2.section-title{
font-family:var(--display);font-weight:500;
font-size:clamp(36px,4.6vw,60px);letter-spacing:-0.02em;line-height:1.05;max-width:18ch;
}
h2.section-title em{font-style:italic;color:var(--accent-3)}
.section-desc{font-size:17px;color:var(--ink-dim);max-width:42ch}
/* ============ ABOUT / PHILOSOPHY ============ */
.philo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}
@media(max-width:900px){.philo-grid{grid-template-columns:1fr;gap:48px}}
.philo-text p{font-size:17px;color:var(--ink-dim);margin-bottom:20px}
.philo-text p strong{color:var(--ink);font-weight:500}
.philo-text .pull{
font-family:var(--display);font-style:italic;font-size:26px;line-height:1.35;color:var(--ink);
border-left:3px solid var(--accent);padding:8px 0 8px 22px;margin:32px 0;
}
.philo-cards{display:grid;gap:16px}
.pcard{
border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);
padding:24px 26px;position:relative;overflow:hidden;
transition:transform .25s ease, border-color .25s ease;
}
.pcard:hover{transform:translateY(-3px);border-color:#2a302d}
.pcard .ix{font-family:var(--mono);font-size:11px;color:var(--ink-mute);letter-spacing:0.14em}
.pcard h4{font-family:var(--display);font-weight:600;font-size:22px;margin:8px 0 6px;letter-spacing:-0.01em}
.pcard p{font-size:14.5px;color:var(--ink-dim)}
.pcard::after{
content:"";position:absolute;right:-30px;bottom:-30px;width:100px;height:100px;
background:radial-gradient(circle, rgba(198,255,61,0.2), transparent 70%);
}
/* ============ NEW CHAPTER (Then / Bridge / Now) ============ */
.chapter-grid{
display:grid;grid-template-columns:1fr 80px 1fr;gap:0;align-items:stretch;
margin-top:24px;
}
@media(max-width:900px){.chapter-grid{grid-template-columns:1fr;gap:24px}}
.chap-card{
border:1px solid var(--line);border-radius:var(--radius);
background:var(--panel);padding:36px 36px 32px;
position:relative;overflow:hidden;
transition:transform .3s ease, border-color .3s ease;
}
.chap-card:hover{transform:translateY(-4px)}
.chap-then{background:linear-gradient(135deg, #14181a 0%, #0f1213 100%)}
.chap-now{background:linear-gradient(135deg, #16221b 0%, #0d1310 100%);border-color:rgba(198,255,61,0.25)}
.chap-now:hover{border-color:rgba(198,255,61,0.45)}
.chap-then::before{
content:"";position:absolute;left:-50px;top:-50px;width:200px;height:200px;
background:radial-gradient(circle, rgba(108,232,200,0.06), transparent 70%);
}
.chap-now::before{
content:"";position:absolute;right:-50px;bottom:-50px;width:240px;height:240px;
background:radial-gradient(circle, rgba(198,255,61,0.12), transparent 70%);
}
.chap-tag{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px;border:1px solid var(--line);border-radius:999px;
font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
color:var(--ink-dim);background:rgba(0,0,0,0.3);
}
.chap-tag-accent{color:var(--accent);border-color:rgba(198,255,61,0.3)}
.chap-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-mute)}
.chap-dot-accent{background:var(--accent);box-shadow:0 0 0 4px rgba(198,255,61,0.18);animation:pulse 2s infinite}
.chap-year{
font-family:var(--display);font-weight:500;font-size:52px;line-height:1;
color:var(--ink-mute);letter-spacing:-0.02em;margin:24px 0 22px;
}
.chap-year span{color:var(--ink)}
.chap-year .chap-year-mid{display:block;font-size:22px;color:var(--ink-mute);margin:6px 0;font-style:italic}
.chap-year-now span:not(.chap-year-mid){color:var(--accent)}
.chap-card h3{
font-family:var(--display);font-weight:500;font-size:30px;line-height:1.15;
letter-spacing:-0.02em;margin-bottom:16px;
}
.chap-card h3 em{font-style:italic;color:var(--accent-3)}
.chap-now h3 em{color:var(--accent)}
.chap-card p{font-size:15.5px;color:var(--ink-dim);line-height:1.6;margin-bottom:22px}
.chap-card p em{font-style:italic;color:var(--ink)}
.chap-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.chap-list li{
font-family:var(--mono);font-size:13px;color:var(--ink-dim);
display:flex;align-items:center;gap:10px;padding:8px 0;
border-bottom:1px dashed var(--line);
}
.chap-list li:last-child{border-bottom:0}
.chap-list li::before{
content:"✓";color:var(--ink-mute);font-family:var(--body);font-weight:700;
}
.chap-list-accent li::before{color:var(--accent)}
/* Bridge between Then & Now */
.chap-bridge{
display:flex;flex-direction:column;align-items:center;justify-content:center;
position:relative;padding:0 10px;
}
@media(max-width:900px){.chap-bridge{padding:0;height:80px;flex-direction:row}}
.bridge-line{
position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:1;
background:linear-gradient(180deg, transparent, var(--accent), transparent);
transform:translateX(-50%);
}
@media(max-width:900px){
.bridge-line{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);transform:translateY(-50%)}
}
.bridge-icon{
position:relative;z-index:2;width:52px;height:52px;border-radius:50%;
background:var(--bg);border:1px solid var(--accent);
color:var(--accent);display:grid;place-items:center;
box-shadow:0 0 30px rgba(198,255,61,0.3);
animation:bridgePulse 2s ease-in-out infinite;
}
.bridge-icon svg{width:22px;height:22px}
@media(max-width:900px){.bridge-icon svg{transform:rotate(0)}.bridge-icon{transform:rotate(0)}}
@keyframes bridgePulse{0%,100%{box-shadow:0 0 30px rgba(198,255,61,0.25)}50%{box-shadow:0 0 50px rgba(198,255,61,0.55)}}
.bridge-label{
position:relative;z-index:3;margin-top:14px;
padding:8px 4px;
background:var(--bg);
font-family:var(--mono);font-size:10px;letter-spacing:0.2em;color:var(--accent);
writing-mode:vertical-rl;text-orientation:mixed;
white-space:nowrap;
}
@media(max-width:900px){
.bridge-label{
writing-mode:horizontal-tb;
margin-top:0;margin-left:14px;
padding:4px 8px;
}
}
/* On large screens, rotate bridge icon arrow */
@media(min-width:901px){
.bridge-icon svg{transform:rotate(90deg)}
}
/* Closing statement */
.chap-closing{
margin-top:80px;max-width:780px;margin-left:auto;margin-right:auto;
text-align:center;position:relative;padding:40px 30px;
}
.chap-closing .quote-mark{
font-family:var(--display);font-style:italic;font-size:120px;line-height:1;
color:var(--accent);opacity:.3;margin-bottom:-40px;
}
.chap-closing p{
font-family:var(--display);font-weight:400;font-style:italic;
font-size:clamp(20px,2.2vw,26px);line-height:1.45;color:var(--ink-dim);
}
.chap-closing p em{color:var(--ink);font-style:italic}
/* ============ EXPERTISE / FEATURES ============ */
.features{background:linear-gradient(180deg, transparent 0%, var(--bg-soft) 40%, var(--bg-soft) 60%, transparent 100%);border-block:1px solid var(--line)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{
padding:32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
position:relative;transition:background .25s;
}
.feat:hover{background:var(--panel)}
.feat .icon{
width:42px;height:42px;border-radius:10px;background:rgba(198,255,61,0.1);
color:var(--accent);display:grid;place-items:center;margin-bottom:18px;
border:1px solid rgba(198,255,61,0.25);
}
.feat h4{font-family:var(--display);font-weight:600;font-size:20px;margin-bottom:8px;letter-spacing:-0.01em}
.feat p{font-size:14.5px;color:var(--ink-dim);line-height:1.55}
/* ============ STACK ============ */
.stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.stack-grid{grid-template-columns:repeat(2,1fr)}}
.stack-col{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:26px}
.stack-col h5{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.stack-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.stack-col li{font-size:15px;color:var(--ink-dim);display:flex;align-items:center;gap:10px}
.stack-col li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* ============ CLIENTS / AUDIENCE ============ */
.clients-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:820px){.clients-grid{grid-template-columns:1fr}}
.client{
border:1px solid var(--line);border-radius:var(--radius);
padding:36px 30px;background:var(--panel);position:relative;overflow:hidden;
min-height:280px;display:flex;flex-direction:column;justify-content:space-between;
}
.client .badge{
display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
padding:5px 10px;border-radius:6px;background:rgba(198,255,61,0.12);color:var(--accent);
border:1px solid rgba(198,255,61,0.2);align-self:flex-start;
}
.client h4{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-0.01em;margin:20px 0 12px}
.client p{color:var(--ink-dim);font-size:14.5px}
.client .num{position:absolute;right:24px;top:24px;font-family:var(--display);font-size:64px;color:var(--line);font-style:italic;line-height:1}
/* ============ PROCESS ============ */
.process{position:relative}
.pline{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.pline::before{content:"";position:absolute;left:0;right:0;top:32px;height:1px;background:linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent)}
@media(max-width:900px){.pline{grid-template-columns:1fr;gap:32px}.pline::before{display:none}}
.pnode{position:relative}
.pnode .circle{
width:64px;height:64px;border-radius:50%;background:var(--bg);
border:1px solid var(--line);display:grid;place-items:center;
font-family:var(--display);font-weight:600;font-size:22px;color:var(--accent);
position:relative;z-index:2;
}
.pnode .label{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:22px}
.pnode h5{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-0.01em;margin:6px 0 8px}
.pnode p{font-size:14px;color:var(--ink-dim);line-height:1.55}
/* ============ CTA ============ */
.cta-section{
margin:60px auto 100px;max-width:var(--max);padding:0 28px;
}
.cta-box{
background:linear-gradient(135deg, #14201a 0%, #0d1110 100%);
border:1px solid #1f2422;border-radius:24px;
padding:72px 60px;position:relative;overflow:hidden;
color:#ecebe6;
}
.cta-box::before{
content:"";position:absolute;right:-100px;top:-100px;width:400px;height:400px;
background:radial-gradient(circle, rgba(198,255,61,0.15), transparent 60%);
}
.cta-box::after{
content:"";position:absolute;left:30px;bottom:-20px;font-family:var(--mono);
font-size:200px;color:rgba(255,255,255,0.02);font-weight:700;
}
.cta-box .inner{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:center}
@media(max-width:820px){.cta-box{padding:48px 32px}.cta-box .inner{grid-template-columns:1fr}}
.cta-box h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.2vw,52px);line-height:1.05;letter-spacing:-0.02em;max-width:18ch;color:#ecebe6}
.cta-box h2 em{font-style:italic;color:#c6ff3d}
.cta-box p{color:#a8a89e;font-size:17px;margin-top:18px;max-width:48ch}
.cta-box .actions{display:flex;flex-direction:column;gap:14px}
.cta-box .big{padding:18px 28px;font-size:15px}
/* Override section-label inside the dark CTA box (keeps it readable in light mode) */
.cta-box .section-label{color:#c6ff3d}
.cta-box .section-label::before{background:#c6ff3d}
/* Keep ghost button readable on the dark CTA background even in light mode */
.cta-box .cta.ghost{color:#ecebe6;border-color:rgba(255,255,255,0.25)}
.cta-box .cta.ghost:hover{border-color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.06)}
/* Force ghost button inside the dark CTA box to stay light in ANY theme */
:root[data-theme="light"] .cta-box .cta.ghost,
:root:not([data-theme]) .cta-box .cta.ghost{color:#ecebe6;border-color:rgba(255,255,255,0.25)}
:root[data-theme="light"] .cta-box .cta.ghost:hover,
:root:not([data-theme]) .cta-box .cta.ghost:hover{border-color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.06)}
@media (prefers-color-scheme: light){
:root:not([data-theme]) .cta-box .cta.ghost{color:#ecebe6;border-color:rgba(255,255,255,0.25)}
:root:not([data-theme]) .cta-box .cta.ghost:hover{border-color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.06)}
}
/* Primary CTA inside the box should have black text on lime, not white */
:root[data-theme="light"] .cta-box .cta:not(.ghost){color:#000}
:root:not([data-theme]) .cta-box .cta:not(.ghost){color:#000}
@media (prefers-color-scheme: light){
:root:not([data-theme]) .cta-box .cta:not(.ghost){color:#000}
}
/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);background:var(--bg-soft)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:72px 0 40px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
.foot-col h6{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px}
.foot-col a{display:block;color:var(--ink-dim);font-size:15px;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-about p{color:var(--ink-dim);font-size:14.5px;max-width:42ch;margin-top:14px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0 32px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-mute);flex-wrap:wrap;gap:16px}
.foot-bottom .signature{font-family:var(--display);font-style:italic}
/* ============ Reveal animation ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* ============ CONTACT MODAL ============ */
.modal-backdrop{
position:fixed;inset:0;z-index:10100;
background:rgba(5,7,6,0.78);
backdrop-filter:blur(10px) saturate(1.2);
-webkit-backdrop-filter:blur(10px) saturate(1.2);
opacity:0;visibility:hidden;
transition:opacity .35s ease, visibility .35s ease;
display:grid;place-items:center;padding:20px;
}
.modal-backdrop.open{opacity:1;visibility:visible}
.modal{
position:relative;width:100%;max-width:560px;
background:linear-gradient(180deg, #14181a 0%, #0d1110 100%);
border:1px solid var(--line);border-radius:20px;
box-shadow:0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(198,255,61,0.06);
padding:0;overflow:hidden;
transform:translateY(20px) scale(0.96);
transition:transform .4s cubic-bezier(.2,.8,.2,1);
max-height:90vh;
/* Flex column: header + scrollable body + footer */
display:flex;flex-direction:column;
}
.modal-backdrop.open .modal{transform:translateY(0) scale(1)}
.modal::before{
/* Accent glow at top */
content:"";position:absolute;left:0;right:0;top:0;height:200px;
background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(198,255,61,0.15), transparent 70%);
pointer-events:none;
}
/* modal-form: flex container filling remaining modal space */
.modal-form{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.modal-head{
position:relative;padding:36px 36px 24px;
border-bottom:1px solid var(--line);
flex-shrink:0; /* never shrink — stays fixed at top */
}
.modal-eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
color:var(--accent);margin-bottom:14px;
}
.modal-eyebrow::before{content:"";width:20px;height:1px;background:var(--accent)}
.modal h3{
font-family:var(--display);font-weight:500;font-size:30px;
line-height:1.1;letter-spacing:-0.02em;
}
.modal h3 em{font-style:italic;color:var(--accent)}
.modal-sub{color:var(--ink-dim);font-size:15px;margin-top:10px;line-height:1.55}
.modal-close{
position:absolute;top:20px;right:20px;z-index:10;
width:36px;height:36px;border-radius:50%;padding:0;margin:0;
background:var(--bg);border:1px solid var(--line);
display:grid;place-items:center;cursor:pointer;
color:var(--ink-dim);
font-family:inherit;font-size:inherit;line-height:1;
transition:color .2s ease, border-color .2s ease, background .2s ease, transform .25s ease;
-webkit-appearance:none;appearance:none;
outline:none;
}
.modal-close:hover{
color:#000;
background:var(--accent);
border-color:var(--accent);
transform:rotate(90deg);
box-shadow:0 0 24px rgba(198,255,61,0.35);
}
.modal-close:focus-visible{
box-shadow:0 0 0 3px rgba(198,255,61,0.35);
}
.modal-close:active{transform:rotate(90deg) scale(.92)}
.modal-close svg{
width:16px;height:16px;
stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;
pointer-events:none;
}
/* modal-body: only this region scrolls */
.modal-body{flex:1;min-height:0;overflow-y:auto;padding:24px 36px}
/* modal-foot: fixed at bottom, always visible */
.modal-foot{
flex-shrink:0;
padding:20px 36px 28px;
border-top:1px solid var(--line);
background:rgba(0,0,0,0.15);
}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.field-row:last-child{margin-bottom:0}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.field label{
display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;
text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px;
}
.field label .req{color:var(--accent-2);margin-left:2px}
.field input,
.field textarea,
.field select{
width:100%;padding:13px 16px;
background:var(--bg);border:1px solid var(--line);
border-radius:10px;color:var(--ink);
font-family:var(--body);font-size:15px;
transition:border-color .2s ease, box-shadow .2s ease;
outline:none;
}
.field input:focus,
.field textarea:focus,
.field select:focus{
border-color:var(--accent);
box-shadow:0 0 0 4px rgba(198,255,61,0.1);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-mute)}
.field textarea{resize:vertical;min-height:110px;font-family:var(--body)}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field.has-error input,
.field.has-error textarea{border-color:var(--accent-2)!important;box-shadow:0 0 0 3px rgba(255,91,46,0.12)!important}
.cf-field-error{
display:none;color:var(--accent-2);
font-family:var(--mono);font-size:11px;margin-top:5px;letter-spacing:0.04em;
line-height:1.45;animation:jcErrorIn .25s ease-out;
}
.field.has-error .cf-field-error{display:block}
.cf-msg-counter{display:block;text-align:right;font-family:var(--mono);font-size:10px;color:var(--ink-mute);margin-top:3px}
/* Topic chips */
.topic-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.topic-chip{
padding:8px 14px;border-radius:999px;
background:var(--bg);border:1px solid var(--line);
font-family:var(--mono);font-size:12px;color:var(--ink-dim);
cursor:pointer;transition:all .2s ease;
}
.topic-chip:hover{color:var(--ink);border-color:var(--ink-mute)}
.topic-chip.selected{
background:rgba(198,255,61,0.12);
border-color:var(--accent);
color:var(--accent);
}
.modal-submit{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
width:100%;padding:16px 24px;
background:var(--accent);color:#000;
font-weight:700;font-size:15px;letter-spacing:0.02em;
border:none;border-radius:12px;cursor:pointer;
box-shadow:0 4px 18px rgba(198,255,61,0.3);
transition:transform .2s ease, box-shadow .2s ease;
}
.modal-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(198,255,61,0.5)}
.modal-submit svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.modal-alt{
margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);
display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:14px;
}
.modal-alt .alt-label{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.modal-alt .alt-links{display:flex;gap:18px;flex-wrap:wrap}
.modal-alt .alt-links a{
color:var(--ink-dim);font-size:14px;
display:inline-flex;align-items:center;gap:6px;
transition:color .2s ease;
}
.modal-alt .alt-links a:hover{color:var(--accent)}
/* Success state */
.modal-success{display:none}
.modal-success.show{
display:flex;flex-direction:column;align-items:center;justify-content:center;
flex:1;padding:60px 36px;text-align:center;overflow-y:auto;
}
.modal-form.hide{display:none}
.success-icon{
width:72px;height:72px;border-radius:50%;
background:rgba(198,255,61,0.12);border:1px solid var(--accent);
color:var(--accent);display:grid;place-items:center;
margin:0 auto 20px;
animation:successPop .4s cubic-bezier(.34,1.56,.64,1);
}
.success-icon svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes successPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.modal-success h4{font-family:var(--display);font-weight:500;font-size:28px;letter-spacing:-0.02em;margin-bottom:10px}
.modal-success p{color:var(--ink-dim);font-size:15px;line-height:1.55;max-width:36ch;margin:0 auto}
body.no-scroll{overflow:hidden}
/* small svg icons */
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ════════════════════════════════════════════════════════════
LIVECHAT WIDGET — Bottom-left, theme-aware
Scoped under .jc-livechat to avoid leaking styles
════════════════════════════════════════════════════════════ */
.jc-livechat,
.jc-livechat *,
.jc-livechat *::before,
.jc-livechat *::after{box-sizing:border-box}
/* === Launcher button === */
.jc-launcher{
position:fixed;bottom:24px;right:24px;z-index:9999;
width:60px;height:60px;border-radius:50%;
background:var(--accent);color:#000;
border:none;cursor:pointer;padding:0;
box-shadow:
0 0 0 1px rgba(198,255,61,0.4),
0 8px 28px rgba(198,255,61,0.35),
0 0 40px rgba(198,255,61,0.2);
display:grid;place-items:center;
transition:transform .3s cubic-bezier(.34,1.56,.64,1),
box-shadow .25s ease,
opacity .25s ease,
visibility .25s ease;
-webkit-appearance:none;appearance:none;
transform-origin:center;
}
.jc-launcher:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 0 0 1px var(--accent),0 12px 36px rgba(198,255,61,0.5),0 0 60px rgba(198,255,61,0.3)}
.jc-launcher:active{transform:translateY(-1px) scale(0.98)}
.jc-launcher:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(198,255,61,0.35), 0 8px 28px rgba(198,255,61,0.35)}
.jc-launcher svg{width:26px;height:26px;stroke:#000;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
/* Pulse halo (calls attention on first load) */
.jc-launcher::after{
content:"";position:absolute;inset:-4px;border-radius:50%;
border:2px solid var(--accent);
animation:lcLauncherHalo 2.4s ease-out infinite;
pointer-events:none;
}
@keyframes lcLauncherHalo{
0%{transform:scale(1);opacity:.6}
100%{transform:scale(1.4);opacity:0}
}
/* Unread badge */
.jc-launcher .jc-badge{
position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:11px;
background:var(--accent-2);color:#fff;
font-family:var(--mono);font-size:11px;font-weight:700;
display:none;align-items:center;justify-content:center;padding:0 6px;
border:2px solid var(--bg);
}
.jc-launcher.has-unread .jc-badge{display:flex}
/* === Launcher hidden state — when panel is open === */
.jc-launcher.is-open{
opacity:0;visibility:hidden;
transform:translateY(20px) scale(.5) rotate(-30deg);
pointer-events:none;
}
.jc-launcher.is-open::after{display:none}
/* === Panel === */
.jc-panel{
position:fixed;bottom:24px;right:24px;z-index:9998;
width:380px;height:600px;max-height:calc(100vh - 48px);
background:var(--panel);
border:1px solid var(--line);border-radius:20px;
box-shadow:0 30px 80px rgba(0,0,0,0.5);
display:flex;flex-direction:column;overflow:hidden;
opacity:0;visibility:hidden;
transform:translateY(20px) scale(.96);transform-origin:bottom right;
transition:opacity .35s cubic-bezier(.2,.8,.2,1),
transform .35s cubic-bezier(.2,.8,.2,1),
visibility .35s ease;
}
.jc-panel.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
/* On mobile, fullscreen the panel */
@media (max-width:640px){
.jc-panel{
width:100%;height:100%;max-height:100%;
bottom:0;right:0;border-radius:0;border:none;
}
.jc-launcher{bottom:18px;right:18px}
}
/* === Header === */
.jc-header{
padding:16px 18px;border-bottom:1px solid var(--line);
background:var(--bg-soft);
display:flex;align-items:center;gap:12px;flex-shrink:0;
}
.jc-avatar-stack{display:flex;align-items:center;position:relative}
.jc-avatar{
width:36px;height:36px;border-radius:50%;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
color:#000;font-family:var(--display);font-weight:600;font-size:14px;
display:grid;place-items:center;
border:2px solid var(--panel);
position:relative;
}
.jc-avatar + .jc-avatar{margin-left:-10px}
.jc-avatar .jc-status-dot{
position:absolute;bottom:-2px;right:-2px;
width:11px;height:11px;border-radius:50%;
background:#2ecc71;border:2px solid var(--panel);
}
.jc-avatar .jc-status-dot.offline{background:var(--ink-mute)}
.jc-header-info{flex:1;min-width:0}
.jc-header-title{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);line-height:1.2;letter-spacing:-0.01em}
.jc-header-status{font-family:var(--mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;margin-top:2px;display:flex;align-items:center;gap:6px}
.jc-header-status .jc-pulse{width:7px;height:7px;border-radius:50%;background:#2ecc71;animation:lcPulse 2s infinite}
@keyframes lcPulse{0%,100%{opacity:1}50%{opacity:.4}}
.jc-header-actions{display:flex;align-items:center;gap:6px}
.jc-iconbtn{
width:34px;height:34px;border-radius:50%;
background:transparent;border:1px solid transparent;color:var(--ink-dim);
cursor:pointer;display:grid;place-items:center;padding:0;
-webkit-appearance:none;appearance:none;
transition:color .2s ease, background .2s ease, border-color .2s ease;
}
.jc-iconbtn:hover{color:var(--ink);background:var(--bg)}
.jc-iconbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(198,255,61,0.3)}
.jc-iconbtn.is-active{background:rgba(198,255,61,0.12);color:var(--accent)}
.jc-iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Sidebar button — only visible during active chat */
#jcBtnSidebar{display:none}
/* Close button — same animation as .modal-close */
#jcBtnClose{
background:var(--bg);border-color:var(--line);
transition:color .2s ease, border-color .2s ease, background .2s ease, transform .25s ease;
}
#jcBtnClose:hover{
color:#000;background:var(--accent);border-color:var(--accent);
transform:rotate(90deg);box-shadow:0 0 24px rgba(198,255,61,0.35);
}
#jcBtnClose:active{transform:rotate(90deg) scale(.92)}
/* === Tabs (Welcome view) === */
.jc-tabs{
display:flex;border-bottom:1px solid var(--line);
background:var(--bg-soft);flex-shrink:0;
}
.jc-tab{
flex:1;padding:13px 16px;
background:transparent;border:none;cursor:pointer;
font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
color:var(--ink-mute);
border-bottom:2px solid transparent;
transition:color .2s ease, border-color .2s ease;
-webkit-appearance:none;appearance:none;
}
.jc-tab:hover{color:var(--ink-dim)}
.jc-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
/* === Body (changes by state) === */
.jc-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:0}
/* Welcome view container — needs flex column for tabs (fixed) + onboarding (scrollable) */
.jc-view-welcome{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
/* Onboarding state — scrollable area */
.jc-onboarding{
padding:24px 22px;
overflow-y:auto;overflow-x:hidden;
flex:1;min-height:0;
/* Pretty scrollbar matching the chat thread */
scrollbar-width:thin;
scrollbar-color:var(--line) transparent;
}
.jc-onboarding.is-hidden{display:none}
.jc-onboarding::-webkit-scrollbar{width:6px}
.jc-onboarding::-webkit-scrollbar-track{background:transparent}
.jc-onboarding::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.jc-onboarding::-webkit-scrollbar-thumb:hover{background:var(--ink-mute)}
.jc-greeting{margin-bottom:20px}
.jc-greeting h3{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-0.02em;color:var(--ink);margin-bottom:6px}
.jc-greeting h3 em{font-style:italic;color:var(--accent)}
.jc-greeting p{color:var(--ink-dim);font-size:13.5px;line-height:1.5}
.jc-field{margin-bottom:14px;position:relative}
.jc-field label{
display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px;
}
.jc-field label .req{color:var(--accent-2);margin-left:2px}
.jc-field input,
.jc-field textarea{
width:100%;padding:11px 14px;
background:var(--bg);border:1px solid var(--line);
border-radius:10px;color:var(--ink);
font-family:var(--body);font-size:14px;line-height:1.5;
transition:border-color .2s ease, box-shadow .2s ease;
outline:none;
}
.jc-field input:focus,
.jc-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,255,61,0.1)}
.jc-field input::placeholder,
.jc-field textarea::placeholder{color:var(--ink-mute)}
.jc-field textarea{resize:vertical;min-height:80px;max-height:160px;font-family:var(--body)}
.jc-field-counter{position:absolute;bottom:6px;right:10px;font-family:var(--mono);font-size:10px;color:var(--ink-mute);pointer-events:none}
.jc-field.has-error input,
.jc-field.has-error textarea{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(255,91,46,0.12)}
.jc-field-error{
display:none;color:var(--accent-2);
font-family:var(--mono);font-size:11px;margin-top:6px;letter-spacing:0.04em;
line-height:1.45;
animation:jcErrorIn .25s ease-out;
}
.jc-field.has-error .jc-field-error{display:block}
@keyframes jcErrorIn{
from{opacity:0;transform:translateY(-4px)}
to{opacity:1;transform:none}
}
/* Shake feedback when submit fails */
@keyframes jcShake{
0%,100%{transform:translateY(0) scale(1)}
20%{transform:translateY(0) scale(1) translateX(-6px)}
40%{transform:translateY(0) scale(1) translateX(6px)}
60%{transform:translateY(0) scale(1) translateX(-4px)}
80%{transform:translateY(0) scale(1) translateX(4px)}
}
.jc-submit{
width:100%;padding:13px 18px;
background:var(--accent);color:#000;
font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:0.02em;
border:none;border-radius:10px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
box-shadow:0 4px 14px rgba(198,255,61,0.25);
transition:transform .15s ease, box-shadow .2s ease;
margin-top:8px;
-webkit-appearance:none;appearance:none;
}
.jc-submit:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(198,255,61,0.4)}
.jc-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.jc-submit svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="light"] .jc-submit{color:#fff}
@media (prefers-color-scheme: light){
:root:not([data-theme]) .jc-submit{color:#fff}
}
.jc-privacy-note{
margin-top:14px;font-size:11.5px;color:var(--ink-mute);line-height:1.5;text-align:center;
}
.jc-privacy-note a{color:var(--ink-dim);border-bottom:1px dotted var(--line)}
/* Resume OTP */
.jc-resume-step.is-hidden{display:none}
.jc-otp-info{
background:var(--bg);border:1px solid var(--line);border-radius:10px;
padding:12px 14px;margin-bottom:14px;
font-size:13px;color:var(--ink-dim);line-height:1.5;
}
.jc-otp-info strong{color:var(--ink)}
.jc-otp-inputs{display:flex;gap:8px;margin-bottom:14px;justify-content:center}
.jc-otp-inputs input{
width:42px;height:50px;text-align:center;
background:var(--bg);border:1px solid var(--line);border-radius:8px;
color:var(--ink);
font-family:var(--mono);font-size:20px;font-weight:600;
transition:border-color .2s ease, box-shadow .2s ease;
outline:none;
}
.jc-otp-inputs input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,255,61,0.15)}
.jc-otp-inputs.has-error input{border-color:var(--accent-2)}
/* OTP error row — standalone, not wrapped in .jc-field */
.jc-otp-error-row{
display:none;
text-align:center;margin-bottom:14px;
}
.jc-otp-error-row.is-show{display:block}
.jc-otp-resend{
text-align:center;font-size:12px;color:var(--ink-mute);margin-bottom:14px;
}
.jc-otp-resend button{
background:none;border:none;color:var(--accent);
cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;
padding:0;text-decoration:underline;
}
.jc-otp-resend button:disabled{color:var(--ink-mute);cursor:not-allowed;text-decoration:none}
/* === Chat thread === */
.jc-thread{
flex:1;overflow-y:auto;overflow-x:hidden;
padding:18px 16px;
display:flex;flex-direction:column;gap:10px;
scroll-behavior:smooth;
}
/* Custom scrollbar */
.jc-thread::-webkit-scrollbar{width:6px}
.jc-thread::-webkit-scrollbar-track{background:transparent}
.jc-thread::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.jc-thread::-webkit-scrollbar-thumb:hover{background:var(--ink-mute)}
.jc-msg{display:flex;gap:8px;max-width:85%;animation:lcMsgIn .3s ease-out}
@keyframes lcMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jc-msg.is-user{align-self:flex-end;flex-direction:row-reverse}
.jc-msg.is-system{align-self:center;max-width:100%}
.jc-msg-avatar{
flex-shrink:0;width:28px;height:28px;border-radius:50%;
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
color:#000;font-family:var(--display);font-weight:600;font-size:11px;
display:grid;place-items:center;
margin-top:auto;
}
.jc-msg.is-user .jc-msg-avatar{
background:linear-gradient(135deg, #6a6a62 0%, #4a4f55 100%);
color:#fff;
}
.jc-msg-avatar.is-hidden{visibility:hidden}
.jc-msg-content{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.jc-msg-meta{font-family:var(--mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.04em;padding:0 4px}
.jc-msg.is-user .jc-msg-meta{text-align:right}
.jc-bubble{
padding:10px 14px;border-radius:14px;
font-size:14px;line-height:1.5;
word-wrap:break-word;overflow-wrap:break-word;
background:var(--bg);color:var(--ink);
border:1px solid var(--line);
}
.jc-msg.is-user .jc-bubble{
background:var(--accent);color:#000;border-color:var(--accent);
border-bottom-right-radius:4px;
}
.jc-msg:not(.is-user) .jc-bubble{border-bottom-left-radius:4px}
:root[data-theme="light"] .jc-msg.is-user .jc-bubble{color:#000}
.jc-bubble a{color:inherit;text-decoration:underline;text-decoration-color:rgba(0,0,0,0.3);word-break:break-all}
.jc-msg:not(.is-user) .jc-bubble a{color:var(--accent);text-decoration-color:rgba(198,255,61,0.4)}
/* System message (event in chat) */
.jc-msg.is-system .jc-bubble{
background:transparent;border:none;
color:var(--ink-mute);font-family:var(--mono);font-size:11px;
text-align:center;letter-spacing:0.06em;padding:6px 12px;
}
/* Image attachment in message */
.jc-attach-grid{
display:grid;grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
gap:4px;margin-top:6px;max-width:280px;
}
.jc-attach-grid.single{grid-template-columns:1fr;max-width:240px}
.jc-attach-img{
aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;
background:var(--bg);position:relative;
transition:transform .2s ease;
}
.jc-attach-img:hover{transform:scale(0.98)}
.jc-attach-img img{width:100%;height:100%;object-fit:cover;display:block}
.jc-attach-grid.single .jc-attach-img{aspect-ratio:auto;max-height:240px}
.jc-attach-grid.single .jc-attach-img img{object-fit:contain}
.jc-attach-file{
display:flex;align-items:center;gap:10px;
padding:10px 12px;
background:rgba(0,0,0,0.15);border:1px solid var(--line);
border-radius:8px;
cursor:pointer;
transition:background .2s ease;
margin-top:6px;
max-width:280px;
}
.jc-msg.is-user .jc-attach-file{background:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.2)}
.jc-attach-file:hover{background:rgba(0,0,0,0.25)}
.jc-attach-file-icon{
flex-shrink:0;width:32px;height:32px;border-radius:6px;
background:var(--bg);display:grid;place-items:center;color:var(--ink-dim);
}
.jc-attach-file-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.jc-attach-file-meta{flex:1;min-width:0}
.jc-attach-file-name{font-size:13px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-msg.is-user .jc-attach-file-name{color:#000}
.jc-attach-file-size{font-family:var(--mono);font-size:10px;color:var(--ink-mute);margin-top:1px}
/* Typing indicator */
.jc-typing{display:flex;gap:8px;align-self:flex-start;max-width:85%;align-items:flex-end;animation:lcMsgIn .3s ease-out}
.jc-typing .jc-msg-avatar{margin-bottom:0}
.jc-typing-bubble{
padding:14px 16px;border-radius:14px;border-bottom-left-radius:4px;
background:var(--bg);border:1px solid var(--line);
display:flex;gap:4px;
}
.jc-typing-bubble span{
width:6px;height:6px;border-radius:50%;background:var(--ink-mute);
animation:lcDotBounce 1.4s infinite ease-in-out;
}
.jc-typing-bubble span:nth-child(2){animation-delay:.15s}
.jc-typing-bubble span:nth-child(3){animation-delay:.3s}
@keyframes lcDotBounce{
0%,80%,100%{transform:scale(0.7);opacity:.5}
40%{transform:scale(1);opacity:1}
}
/* Pinned banner */
.jc-pinned-banner{
background:rgba(198,255,61,0.08);border-bottom:1px solid var(--line);
padding:8px 14px;display:flex;align-items:center;gap:8px;
font-size:12px;color:var(--ink-dim);cursor:pointer;flex-shrink:0;
}
.jc-pinned-banner:hover{background:rgba(198,255,61,0.12)}
.jc-pinned-banner svg{width:13px;height:13px;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2}
.jc-pinned-banner strong{color:var(--ink);font-weight:600}
/* ───── Message actions (pin / highlight / copy) ───── */
.jc-msg{position:relative}
.jc-msg-actions{
position:absolute;top:-12px;
display:flex;gap:2px;
background:var(--panel);border:1px solid var(--line);border-radius:999px;
padding:3px;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
opacity:0;visibility:hidden;
transform:translateY(4px);
transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
z-index:2;
}
.jc-msg:not(.is-system):hover .jc-msg-actions,
.jc-msg-actions.is-show{opacity:1;visibility:visible;transform:translateY(0)}
.jc-msg:not(.is-user) .jc-msg-actions{left:36px}
.jc-msg.is-user .jc-msg-actions{right:36px}
.jc-action-btn{
width:26px;height:26px;border-radius:50%;border:none;
background:transparent;color:var(--ink-dim);cursor:pointer;padding:0;
display:grid;place-items:center;
-webkit-appearance:none;appearance:none;
transition:color .15s ease, background .15s ease;
}
.jc-action-btn:hover{color:var(--ink);background:var(--bg)}
.jc-action-btn.is-active{color:var(--accent);background:rgba(198,255,61,0.12)}
.jc-action-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Pinned message — has subtle indicator */
.jc-msg.is-pinned .jc-bubble{
box-shadow:0 0 0 1px var(--accent);
}
.jc-msg.is-pinned .jc-bubble::before{
content:"";position:absolute;top:-4px;
width:18px;height:18px;border-radius:50%;
background:var(--accent);color:#000;
background-image:url("data:image/svg+xml;utf8,");
background-size:11px 11px;background-repeat:no-repeat;background-position:center;
box-shadow:0 0 0 2px var(--panel);
}
.jc-msg.is-pinned .jc-bubble{position:relative}
.jc-msg.is-pinned:not(.is-user) .jc-bubble::before{left:-4px}
.jc-msg.is-pinned.is-user .jc-bubble::before{right:-4px}
/* Highlight animation — temporary attention pull */
.jc-msg.is-highlighted .jc-bubble{
animation:jcHighlight 2.4s ease-out;
}
@keyframes jcHighlight{
0%{box-shadow:0 0 0 0 rgba(198,255,61,0.7), 0 0 0 0 rgba(198,255,61,0)}
20%{box-shadow:0 0 0 4px rgba(198,255,61,0.5), 0 0 24px 4px rgba(198,255,61,0.4)}
100%{box-shadow:0 0 0 0 rgba(198,255,61,0), 0 0 0 0 rgba(198,255,61,0)}
}
/* If pinned + highlighted, preserve ring after animation */
.jc-msg.is-pinned.is-highlighted .jc-bubble{
animation:jcHighlightPinned 2.4s ease-out;
}
@keyframes jcHighlightPinned{
0%{box-shadow:0 0 0 1px var(--accent), 0 0 0 0 rgba(198,255,61,0)}
20%{box-shadow:0 0 0 4px rgba(198,255,61,0.5), 0 0 24px 4px rgba(198,255,61,0.4)}
100%{box-shadow:0 0 0 1px var(--accent), 0 0 0 0 rgba(198,255,61,0)}
}
/* Marked / Highlighted persistent (yellow marker style) */
.jc-msg.is-marked .jc-bubble{
background:linear-gradient(135deg, rgba(245, 215, 110, 0.18), rgba(245, 215, 110, 0.08));
border-color:rgba(245, 215, 110, 0.4);
}
.jc-msg.is-marked.is-user .jc-bubble{
background:linear-gradient(135deg, #f5d76e, #e6c55a);
border-color:#d4b34a;
}
/* === Composer === */
.jc-composer{
flex-shrink:0;border-top:1px solid var(--line);
background:var(--bg-soft);
}
.jc-attached-preview{
padding:10px 14px 0;
display:flex;gap:6px;flex-wrap:wrap;
}
.jc-attached-preview:empty{display:none}
.jc-preview-item{
position:relative;
width:56px;height:56px;border-radius:8px;overflow:hidden;
background:var(--bg);border:1px solid var(--line);
display:grid;place-items:center;color:var(--ink-dim);
}
.jc-preview-item img{width:100%;height:100%;object-fit:cover}
.jc-preview-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.jc-preview-item .jc-preview-name{
position:absolute;left:2px;right:2px;bottom:2px;
font-family:var(--mono);font-size:8px;color:#fff;
background:rgba(0,0,0,0.7);border-radius:3px;
padding:1px 3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jc-preview-remove{
position:absolute;top:-4px;right:-4px;
width:16px;height:16px;border-radius:50%;
background:var(--accent-2);color:#fff;border:none;
display:grid;place-items:center;cursor:pointer;
font-size:10px;line-height:1;padding:0;
-webkit-appearance:none;appearance:none;
}
.jc-preview-remove svg{width:8px;height:8px;stroke:currentColor;stroke-width:3}
.jc-composer-row{
padding:10px 12px;display:flex;align-items:flex-end;gap:6px;
}
.jc-composer-input{
flex:1;
background:var(--bg);border:1px solid var(--line);border-radius:18px;
padding:9px 14px;color:var(--ink);
font-family:var(--body);font-size:14px;line-height:1.45;
resize:none;min-height:38px;max-height:120px;
outline:none;transition:border-color .2s ease;
overflow-y:auto;
}
.jc-composer-input:focus{border-color:var(--accent)}
.jc-composer-input::placeholder{color:var(--ink-mute)}
.jc-composer-btn{
flex-shrink:0;width:38px;height:38px;border-radius:50%;
background:transparent;border:none;color:var(--ink-dim);
cursor:pointer;display:grid;place-items:center;padding:0;
-webkit-appearance:none;appearance:none;
transition:color .2s ease, background .2s ease;
}
.jc-composer-btn:hover{color:var(--ink);background:var(--bg)}
.jc-composer-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jc-composer-btn.jc-send{
background:var(--accent);color:#000;
}
.jc-composer-btn.jc-send:hover{background:var(--accent);color:#000;transform:scale(1.05)}
.jc-composer-btn.jc-send:disabled{
background:var(--line);color:var(--ink-mute);cursor:not-allowed;transform:none;
}
.jc-composer-btn.jc-send svg{stroke-width:2.2}
/* Emoji picker */
.jc-emoji-picker{
position:absolute;bottom:64px;left:12px;right:12px;max-width:340px;
background:var(--panel);border:1px solid var(--line);border-radius:12px;
box-shadow:0 16px 40px rgba(0,0,0,0.3);
padding:12px;
display:none;flex-direction:column;gap:8px;
z-index:5;
}
.jc-emoji-picker.is-open{display:flex}
.jc-emoji-grid{
display:grid;grid-template-columns:repeat(8, 1fr);gap:2px;
max-height:180px;overflow-y:auto;
}
.jc-emoji-grid button{
width:32px;height:32px;font-size:20px;line-height:1;
background:none;border:none;border-radius:6px;cursor:pointer;
transition:background .15s ease;padding:0;
}
.jc-emoji-grid button:hover{background:var(--bg)}
.jc-emoji-section-label{
font-family:var(--mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;
color:var(--ink-mute);padding:0 2px;
}
/* === Sidebar (Files / Pinned) === */
.jc-sidebar{
position:absolute;inset:0;
background:var(--panel);
transform:translateX(100%);
transition:transform .3s cubic-bezier(.2,.8,.2,1);
display:flex;flex-direction:column;
z-index:4;
}
.jc-sidebar.is-open{transform:translateX(0)}
.jc-sidebar-head{
padding:14px 16px;border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:8px;
}
.jc-sidebar-title{
flex:1;font-family:var(--display);font-weight:600;font-size:16px;
letter-spacing:-0.01em;color:var(--ink);
}
.jc-sidebar-tabs{
display:flex;border-bottom:1px solid var(--line);background:var(--bg-soft);
}
.jc-sidebar-tab{
flex:1;padding:12px;
background:transparent;border:none;cursor:pointer;
font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
color:var(--ink-mute);border-bottom:2px solid transparent;
transition:color .2s ease, border-color .2s ease;
-webkit-appearance:none;appearance:none;
}
.jc-sidebar-tab:hover{color:var(--ink-dim)}
.jc-sidebar-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.jc-sidebar-body{flex:1;overflow-y:auto;padding:14px}
.jc-sidebar-empty{
text-align:center;padding:40px 20px;color:var(--ink-mute);
font-size:13px;line-height:1.5;
}
.jc-sidebar-empty svg{width:36px;height:36px;margin-bottom:12px;color:var(--line);stroke:currentColor;fill:none;stroke-width:1.5}
.jc-file-item{
display:flex;gap:10px;align-items:center;
padding:10px;border:1px solid var(--line);border-radius:10px;
margin-bottom:8px;cursor:pointer;
transition:border-color .2s ease, background .2s ease;
}
.jc-file-item:hover{border-color:var(--ink-mute);background:var(--bg)}
.jc-file-item-thumb{
flex-shrink:0;width:42px;height:42px;border-radius:8px;
background:var(--bg);display:grid;place-items:center;color:var(--ink-dim);
overflow:hidden;
}
.jc-file-item-thumb img{width:100%;height:100%;object-fit:cover}
.jc-file-item-thumb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.jc-file-item-meta{flex:1;min-width:0}
.jc-file-item-name{font-size:13px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-file-item-sub{font-family:var(--mono);font-size:10px;color:var(--ink-mute);margin-top:2px}
/* === Lightbox === */
.jc-lightbox{
position:fixed;inset:0;z-index:10000;
background:rgba(0,0,0,0.92);
display:none;align-items:center;justify-content:center;
padding:20px;
}
.jc-lightbox.is-open{display:flex;animation:lcMsgIn .2s ease-out}
.jc-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.jc-lightbox-close{
position:absolute;top:20px;right:20px;
width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,0.1);border:none;color:#fff;
cursor:pointer;display:grid;place-items:center;
-webkit-appearance:none;appearance:none;
}
.jc-lightbox-close:hover{background:rgba(255,255,255,0.2)}
.jc-lightbox-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
/* Connection status banner */
.jc-status-banner{
background:var(--accent-2);color:#fff;
padding:8px 14px;font-size:12px;text-align:center;
font-family:var(--mono);letter-spacing:0.06em;
display:none;flex-shrink:0;
}
.jc-status-banner.is-show{display:block}
/* ============ PRICING ============ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}}
.price-card{
border:1px solid var(--line);border-radius:var(--radius);
background:var(--panel);padding:36px 32px;
position:relative;overflow:hidden;
display:flex;flex-direction:column;
transition:transform .25s ease, border-color .25s ease;
}
.price-card:hover{transform:translateY(-4px)}
.price-card.featured{
border-color:rgba(198,255,61,0.4);
background:linear-gradient(135deg,#16221b 0%,#0d1310 100%);
}
.price-card.featured::before{
content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;
background:radial-gradient(circle,rgba(198,255,61,0.15),transparent 70%);
pointer-events:none;
}
.price-badge{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
padding:5px 10px;border-radius:6px;
background:rgba(198,255,61,0.12);color:var(--accent);
border:1px solid rgba(198,255,61,0.2);
align-self:flex-start;margin-bottom:20px;
}
.price-badge.neutral{background:rgba(255,255,255,0.05);color:var(--ink-dim);border-color:var(--line)}
.price-name{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-0.01em;margin-bottom:8px}
.price-desc{font-size:14.5px;color:var(--ink-dim);line-height:1.55;margin-bottom:24px}
.price-amount{
font-family:var(--display);font-weight:500;font-size:42px;line-height:1;
letter-spacing:-0.02em;margin-bottom:6px;
}
.price-amount small{font-size:16px;color:var(--ink-dim);font-family:var(--body);font-weight:400;letter-spacing:0}
.price-period{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:28px}
.price-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:32px;flex:1}
.price-list li{
font-size:14.5px;color:var(--ink-dim);
display:flex;align-items:flex-start;gap:10px;line-height:1.45;
}
.price-list li::before{
content:"✓";color:var(--accent);font-weight:700;font-family:var(--body);
flex-shrink:0;margin-top:1px;
}
.price-list li.muted::before{color:var(--ink-mute)}
.price-list li.muted{color:var(--ink-mute)}
.price-note{
margin-top:auto;padding-top:20px;border-top:1px dashed var(--line);
font-family:var(--mono);font-size:11px;color:var(--ink-mute);letter-spacing:0.08em;
}
/* ============ PROCESS STEP BUTTONS ============ */
.pnode .circle{
width:64px;height:64px;border-radius:50%;
background:var(--bg);
border:none;
outline:none;
display:grid;place-items:center;
font-family:var(--display);font-weight:600;font-size:22px;color:var(--accent);
position:relative;z-index:2;
cursor:pointer;padding:0;
box-shadow:0 0 0 1px rgba(198,255,61,0.35),0 4px 16px rgba(198,255,61,0.2);
transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
-webkit-appearance:none;appearance:none;
}
.pnode .circle::after{
content:"";position:absolute;inset:-4px;border-radius:50%;
border:1px solid var(--accent);
animation:stepHalo 2.8s ease-out infinite;
pointer-events:none;
}
.pnode:nth-child(1) .circle::after{animation-delay:0s}
.pnode:nth-child(2) .circle::after{animation-delay:.5s}
.pnode:nth-child(3) .circle::after{animation-delay:1s}
.pnode:nth-child(4) .circle::after{animation-delay:1.5s}
.pnode:nth-child(5) .circle::after{animation-delay:2s}
@keyframes stepHalo{
0%{transform:scale(1);opacity:.65}
100%{transform:scale(1.7);opacity:0}
}
.pnode .circle:hover{
transform:translateY(-3px) scale(1.08);
box-shadow:0 0 0 1px var(--accent),0 8px 28px rgba(198,255,61,0.45),0 0 44px rgba(198,255,61,0.25);
}
.pnode .circle:active{transform:scale(.96)}
.pnode .circle:focus-visible{box-shadow:0 0 0 4px rgba(198,255,61,0.35)}
/* ============ PROCESS MODALS ============ */
.pmodal-backdrop{
position:fixed;inset:0;z-index:10100;
background:rgba(5,7,6,0.82);
backdrop-filter:blur(12px) saturate(1.3);
-webkit-backdrop-filter:blur(12px) saturate(1.3);
opacity:0;visibility:hidden;
transition:opacity .3s ease, visibility .3s ease;
display:grid;place-items:center;padding:20px;
}
.pmodal-backdrop.open{opacity:1;visibility:visible}
.pmodal{
position:relative;width:100%;max-width:680px;
background:linear-gradient(160deg,#14181a 0%,#0d1110 100%);
border:1px solid var(--line);border-radius:20px;
box-shadow:0 40px 100px rgba(0,0,0,0.65),0 0 0 1px rgba(198,255,61,0.08);
overflow:hidden;display:flex;flex-direction:column;
max-height:90vh;
transform:translateY(24px) scale(.96);
transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.pmodal-backdrop.open .pmodal{transform:translateY(0) scale(1)}
.pmodal::before{
content:"";position:absolute;left:0;right:0;top:0;height:180px;
background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(198,255,61,0.12),transparent 70%);
pointer-events:none;
}
.pmodal-head{
padding:32px 36px 20px;
border-bottom:1px solid var(--line);
position:relative;flex-shrink:0;
}
.pmodal-step{
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
color:var(--accent);margin-bottom:10px;
display:flex;align-items:center;gap:10px;
}
.pmodal-step::before{content:"";width:20px;height:1px;background:var(--accent)}
.pmodal-head h3{
font-family:var(--display);font-weight:500;font-size:28px;
letter-spacing:-0.02em;line-height:1.1;
}
.pmodal-head h3 em{font-style:italic;color:var(--accent)}
.pmodal-close{
position:absolute;top:20px;right:20px;
width:36px;height:36px;border-radius:50%;padding:0;margin:0;
background:var(--bg);border:1px solid var(--line);
display:grid;place-items:center;cursor:pointer;
color:var(--ink-dim);
transition:color .2s ease, border-color .2s ease, background .2s ease, transform .25s ease;
-webkit-appearance:none;appearance:none;outline:none;font-family:inherit;
}
.pmodal-close:hover{color:#000;background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}
.pmodal-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.pmodal-body{flex:1;min-height:0;overflow-y:auto;padding:28px 36px 32px}
.pmodal-illus{
width:100%;border-radius:12px;overflow:hidden;
border:1px solid var(--line);margin-bottom:28px;
background:#0c0f0e;
}
.pmodal-illus svg{display:block;width:100%;height:auto}
.pmodal-body h4{
font-family:var(--display);font-weight:600;font-size:19px;
letter-spacing:-0.01em;margin-bottom:10px;color:var(--ink);
}
.pmodal-body p{font-size:15px;color:var(--ink-dim);line-height:1.65;margin-bottom:18px}
.pmodal-body p:last-child{margin-bottom:0}
.pmodal-example{
background:rgba(198,255,61,0.05);
border:1px solid rgba(198,255,61,0.2);
border-radius:10px;padding:18px 20px;margin-top:4px;
}
.pmodal-example .ex-label{
font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
color:var(--accent);margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.pmodal-example .ex-label::before{content:"▸";font-size:12px}
.pmodal-example p{font-size:14px;color:var(--ink-dim);line-height:1.6;margin-bottom:0}
.pmodal-example p em{color:var(--ink);font-style:normal;font-weight:500}
.pmodal-nav{
display:flex;align-items:center;justify-content:space-between;
padding:16px 36px 24px;border-top:1px solid var(--line);
background:rgba(0,0,0,0.12);flex-shrink:0;gap:12px;
}
.pmodal-nav-btn{
display:inline-flex;align-items:center;gap:8px;
padding:9px 18px;border-radius:999px;
background:transparent;border:1px solid var(--line);
color:var(--ink-dim);font-size:13px;font-family:inherit;
cursor:pointer;transition:all .2s ease;
-webkit-appearance:none;appearance:none;outline:none;
}
.pmodal-nav-btn:hover:not(:disabled){border-color:var(--ink-mute);color:var(--ink)}
.pmodal-nav-btn:disabled{opacity:.3;cursor:not-allowed}
.pmodal-nav-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.pmodal-contact{
display:inline-flex;align-items:center;gap:8px;
padding:9px 20px;border-radius:999px;
background:var(--accent);color:#000;
font-weight:700;font-size:13px;font-family:inherit;
border:none;cursor:pointer;
transition:transform .15s ease, box-shadow .2s ease;
-webkit-appearance:none;appearance:none;outline:none;
}
.pmodal-contact:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(198,255,61,0.35)}
.pmodal-dots{
display:flex;align-items:center;gap:6px;margin-top:14px;
}
.pdot{
width:28px;height:4px;border-radius:2px;border:none;padding:0;
background:var(--line);cursor:pointer;
transition:background .2s ease,width .2s ease;
-webkit-appearance:none;appearance:none;
}
.pdot.active{background:var(--accent);width:40px;}
.pdot:hover:not(.active){background:var(--ink-mute);}
.pmodal-slides{position:relative;}
.pslide{display:none;}
.pslide.active{display:block;animation:pslide-in .22s ease;}
@keyframes pslide-in{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
.pmodal-contact .label-short{display:none}
@media(max-width:640px){
.pmodal-head{padding:24px 20px 16px}
.pmodal-body{padding:20px 20px 24px}
.pmodal-nav{padding:14px 20px 18px}
.pmodal-contact .label-full{display:none}
.pmodal-contact .label-short{display:inline}
}