.hc-body {
padding: 0;
background: linear-gradient(160deg, #0c0c16 0%, #08080e 100%);
height: 360px; position: relative; overflow: hidden;
display: flex;
}
.hc-sidebar {
width: 52px; flex-shrink: 0;
background: rgba(255,255,255,0.018);
border-right: 1px solid rgba(255,255,255,0.04);
padding: 12px 6px;
display: flex; flex-direction: column; gap: 7px; align-items: center;
}
.hc-sb-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); opacity: 0.85; margin-bottom: 8px; flex-shrink:0; }
.hc-sb-icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.05); flex-shrink:0; }
.hc-sb-icon.active { background: rgba(184,255,0,0.15); border: 1px solid rgba(184,255,0,0.2); }
.hc-canvas {
flex: 1; padding: 10px 12px; position: relative; overflow: hidden;
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.hc-col-left { display: flex; flex-direction: column; gap: 6px; }
.hc-col-right { display: flex; flex-direction: column; gap: 6px; }
.be {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.be.in { opacity: 1; transform: translateY(0); }
.be.pop {
transform: scale(0.88) translateY(6px);
transition: opacity 0.35s var(--ease), transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.be.pop.in { transform: scale(1) translateY(0); }
.be.slide {
transform: translateX(-14px);
transition: opacity 0.38s var(--ease), transform 0.38s var(--ease);
}
.be.slide.in { transform: translateX(0); }
.hcb-nav {
height: 26px; background: rgba(255,255,255,0.05); border-radius: 7px;
margin-bottom: 10px; display: flex; align-items: center; padding: 0 10px; gap: 8px;
border: 1px solid rgba(255,255,255,0.05);
}
.hcb-logo { width: 36px; height: 7px; background: var(--accent); border-radius: 3px; opacity: 0.85; }
.hcb-nav-links { display: flex; gap: 5px; margin-left: auto; }
.hcb-nl { height: 5px; border-radius: 2px; background: rgba(255,255,255,0.1); }
.hcb-nl:nth-child(1){width:20px;} .hcb-nl:nth-child(2){width:24px;} .hcb-nl:nth-child(3){width:18px;}
.hcb-nav-cta { width: 32px; height: 14px; background: rgba(184,255,0,0.5); border-radius: 3px; }
.hcb-hero { padding: 12px 12px 10px; background: rgba(255,255,255,0.02); border-radius: 8px; margin-bottom: 8px; }
.hcb-tag { height: 9px; width: 72px; background: rgba(184,255,0,0.2); border: 1px solid rgba(184,255,0,0.3); border-radius: 20px; margin-bottom: 8px; }
.hcb-h1 { height: 11px; background: rgba(240,240,240,0.85); border-radius: 4px; width: 88%; margin-bottom: 5px; }
.hcb-h2 { height: 11px; width: 62%; border-radius: 4px; background: var(--accent); opacity: 0.8; margin-bottom: 8px; }
.hcb-sub { height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; margin-bottom: 3px; }
.hcb-sub.w90{width:90%;} .hcb-sub.w75{width:75%;} .hcb-sub.w55{width:55%;}
.hcb-ctas { display: flex; gap: 6px; margin-top: 9px; align-items: center; }
.hcb-cta-main { height: 16px; width: 58px; background: var(--accent); border-radius: 4px; }
.hcb-cta-sec { height: 16px; width: 46px; background: rgba(255,255,255,0.08); border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }
.hcb-cta-avatar-row { display: flex; gap: -3px; margin-left: 6px; }
.hcb-av { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(8,8,8,0.8); margin-left: -3px; }
.hcb-av:nth-child(1){background:#5b7fff;} .hcb-av:nth-child(2){background:#b8ff00;} .hcb-av:nth-child(3){background:#ff6b35;}
.hcb-cards { display: flex; gap: 6px; margin-bottom: 8px; }
.hcb-card {
flex: 1; border-radius: 8px; background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07); padding: 7px 8px;
position: relative; overflow: hidden;
}
.hcb-card-icon { width: 14px; height: 14px; border-radius: 4px; margin-bottom: 5px; }
.hcb-card:nth-child(1) .hcb-card-icon { background: rgba(184,255,0,0.4); }
.hcb-card:nth-child(2) .hcb-card-icon { background: rgba(100,108,255,0.4); }
.hcb-card:nth-child(3) .hcb-card-icon { background: rgba(255,107,53,0.4); }
.hcb-card-l { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-bottom: 3px; }
.hcb-card-l.short { width: 55%; }
.hcb-card-shimmer {
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
transform: translateX(-100%);
animation: hcShimmer 2.2s ease-in-out infinite;
}
@keyframes hcShimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(200%);} }
.hcb-stats { display: flex; gap: 6px; margin-bottom: 8px; }
.hcb-stat {
flex: 1; background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06); border-radius: 7px;
padding: 5px 7px; text-align: center;
}
.hcb-stat-val { height: 8px; background: var(--accent); border-radius: 2px; opacity: 0.7; width: 60%; margin: 0 auto 3px; }
.hcb-stat-lbl { height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; width: 80%; margin: 0 auto; }
.hcb-cursor {
position: absolute; width: 2px; height: 14px;
background: var(--accent); border-radius: 1px;
box-shadow: 0 0 8px var(--accent);
opacity: 0; z-index: 10; pointer-events: none;
transition: left 0.3s var(--ease), top 0.3s var(--ease), opacity 0.2s;
}
.hcb-cursor.visible { opacity: 1; }
@keyframes cursorBlink { 0%,100%{opacity:1;} 49%{opacity:1;} 50%{opacity:0;} 99%{opacity:0;} }
.hcb-cursor.blink { animation: cursorBlink 0.9s step-end infinite; }
.hcb-progress {
position: absolute; top: 0; left: 0; height: 2px;
background: linear-gradient(90deg, var(--accent), rgba(184,255,0,0.3));
width: 0%; transition: width 0.4s ease;
box-shadow: 0 0 8px rgba(184,255,0,0.5);
z-index: 20; border-radius: 0 2px 2px 0;
}
.hcb-img-row { display: flex; gap: 6px; margin-bottom: 8px; }
.hcb-img { border-radius: 7px; overflow: hidden; position: relative; }
.hcb-img-big { flex: 2; height: 42px; background: linear-gradient(135deg, rgba(184,255,0,0.12), rgba(100,108,255,0.12)); }
.hcb-img-sm { flex: 1; height: 42px; background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(184,255,0,0.08)); }
.hcb-footer {
background: rgba(255,255,255,0.02); border-radius: 6px; padding: 6px 10px;
display: flex; align-items: center; gap: 6px;
border: 1px solid rgba(255,255,255,0.04);
}
.hcb-footer-logo { width: 28px; height: 6px; background: rgba(255,255,255,0.2); border-radius: 2px; }
.hcb-footer-links { display: flex; gap: 4px; margin-left: auto; }
.hcb-footer-link { width: 16px; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; }
.hc-notif {
position: absolute; bottom: 14px; right: 14px;
background: rgba(10,10,16,0.96); border: 1px solid rgba(184,255,0,0.3);
border-radius: 11px; padding: 9px 13px;
display: flex; align-items: center; gap: 9px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0; transform: translateY(12px) scale(0.88);
transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 20px rgba(184,255,0,0.08);
z-index: 15;
}
.hc-notif.in { opacity: 1; transform: translateY(0) scale(1); }
.hc-notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: breathe 2s infinite; flex-shrink:0; }
.hc-notif-text { font-size: 0.62rem; color: rgba(240,240,240,0.8); white-space: nowrap; line-height: 1.4; }
.hc-notif-text strong { color: var(--accent); font-weight: 700; display: block; }
.hc-float-1 {
position: absolute; bottom: -18px; left: 20px;
background: rgba(10,10,12,0.97); border: 1px solid rgba(184,255,0,0.12);
border-radius: 14px; padding: 0.85rem 1.1rem;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 20px rgba(184,255,0,0.04);
opacity: 0; animation: floatCardIn 0.7s var(--ease) 0.3s forwards;
min-width: 120px; z-index: 10;
}
.hc-float-2 {
position: absolute; bottom: -18px; left: clamp(130px, 45%, 160px);
background: rgba(10,10,12,0.97); border: 1px solid rgba(184,255,0,0.12);
border-radius: 14px; padding: 0.85rem 1.1rem;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 20px rgba(184,255,0,0.04);
opacity: 0; animation: floatCardIn 0.7s var(--ease) 0.6s forwards;
min-width: 110px; z-index: 10;
}
@keyframes floatCardIn { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
.hc-float-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.hc-float-val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; color: var(--accent); }
.hc-float-sub { font-size: 0.65rem; color: var(--muted); margin-top: 0.1rem; }
.hc-float-sparkline { display: flex; align-items: flex-end; gap: 3px; margin-top: 0.5rem; height: 22px; }
.hc-spark { width: 5px; background: rgba(184,255,0,0.25); border-radius: 2px; transition: height 0.5s var(--ease); }
.hc-spark.high { background: var(--accent); }
.hero-glow {
position: absolute; width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgba(184,255,0,0.07), transparent 70%);
top: 50%; left: 50%; transform: translate(-50%,-50%);
pointer-events: none; filter: blur(50px);
max-width: 100%; overflow: hidden;
}
/* ── MARQUEE ─────────────────────────────────────────────────────── */
.marquee-wrap {
padding: 1.75rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden; position: relative; z-index: 2;
}
.marquee-track {
display: flex; gap: 2.5rem; width: max-content;
animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
display: flex; align-items: center; gap: 0.7rem;
font-size: 0.8rem; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.marquee-sep { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; opacity: 0.5; flex-shrink:0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── SECTIONS ────────────────────────────────────────────────────── */
section { padding: 7rem 0; position: relative; z-index: 2; }
.sec-label {
display: inline-flex; align-items: center; gap: 0.6rem;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent); margin-bottom: 1rem;
}
.sec-label::before { content: ''; width: 16px; height: 1.5px; background: var(--accent); }
.sec-title {
font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, 4.5rem);
font-weight: 800; letter-spacing: -0.04em; line-height: 1.05;
margin-bottom: 1rem; text-align: center;
}
.sec-sub {
text-align: center; color: var(--muted); font-size: 1.05rem;
max-width: 620px; margin: 0 auto 4.5rem; line-height: 1.75;
}
/* ── SERVICES – BENTO ────────────────────────────────────────────── */
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.1rem;
}
/* Row 1: Website Dev (8) + E-commerce (4) */
.bc-1 { grid-column: span 8; }
.bc-2 { grid-column: span 4; }
/* Row 2: Product Upload (4) + AI/SEO (4) + Automation (4) */
.bc-3 { grid-column: span 4; }
.bc-4 { grid-column: span 4; }
.bc-5 { grid-column: span 4; }
/* Row 3: Custom App Dev (full width) */
.bc-6 { grid-column: span 12; }
.bento-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px; overflow: hidden;
transition: all 0.5s var(--ease);
position: relative;
will-change: transform;
}
.bento-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.bento-card:hover {
border-color: rgba(184,255,0,0.2);
background: rgba(255,255,255,0.04);
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(184,255,0,0.08);
}
.bento-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(184,255,0,0.03), transparent);
opacity: 0; transition: opacity 0.5s; z-index: 0;
}
.bento-card:hover::before { opacity: 1; }
.bv { width: 100%; height: 160px; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.04); flex-shrink: 0; }
.bc-1 .bv { height: 185px; }
.bc-6 .bv { height: 200px; }
/* ── FULL-WIDTH AUTOMATION VISUAL ───────────────────────────────── */
.bv-flow-wide {
width: 100%; height: 100%;
background: linear-gradient(140deg, #080e18, #0a0c18);
display: flex; align-items: center;
padding: 0 2rem; gap: 2rem;
position: relative; overflow: hidden;
}
.bv-flow-wide::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(184,255,0,0.04), transparent);
pointer-events: none;
}
/* Tool logos row */
.bfw-tools {
display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
.bfw-tool {
display: flex; flex-direction: column; align-items: center; gap: 5px;
width: 56px; flex-shrink: 0;
}
.bfw-tool svg {
width: 28px; height: 28px; color: var(--tc);
filter: drop-shadow(0 0 6px var(--tc));
}
.bfw-tool span {
font-size: 0.5rem; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
.bfw-tool-ai svg { filter: drop-shadow(0 0 8px rgba(100,108,255,0.8)); }
.bfw-tool-done svg { filter: drop-shadow(0 0 8px rgba(34,197,94,0.8)); }
.bfw-arr-outer {
width: 40px; flex-shrink: 0; position: relative;
display: flex; align-items: center;
}
.bfw-arr-line {
width: 100%; height: 1px;
background: linear-gradient(90deg, rgba(184,255,0,0.15), rgba(184,255,0,0.4));
}
.bfw-arr-pkt {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 8px var(--accent);
position: absolute; left: 0; opacity: 0;
}
@keyframes fwPkt {
0% { left: 0; opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { left: calc(100% - 7px); opacity: 0; }
}
/* Workflow rows */
.bfw-flows {
flex: 1; display: flex; flex-direction: column; gap: 8px;
}
.bfw-flow {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px; padding: 8px 12px;
opacity: 0; transform: translateX(-12px);
animation: bfwFlowIn 0.5s var(--ease) forwards;
}
.bfw-f1 { animation-delay: 0.2s; }
.bfw-f2 { animation-delay: 0.5s; }
.bfw-f3 { animation-delay: 0.8s; }
@keyframes bfwFlowIn { to { opacity: 1; transform: translateX(0); } }
.bfw-flow-icon { font-size: 0.85rem; flex-shrink: 0; }
.bfw-flow-label {
flex: 1; font-size: 0.62rem; color: rgba(240,240,240,0.55);
line-height: 1.4; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bfw-flow-status {
display: flex; align-items: center; gap: 4px;
font-size: 0.52rem; font-weight: 700; flex-shrink: 0;
}
.bfw-dot {
width: 5px; height: 5px; border-radius: 50%;
animation: breathe 2s infinite;
}
.bfw-dot-green { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,0.7); }
.bfw-dot-yellow { background: #f59e0b; box-shadow: 0 0 5px rgba(245,158,11,0.7); }
.bfw-flow-status { color: var(--muted); }
/* Stat pills */
.bfw-stats {
display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.bfw-stat {
display: flex; flex-direction: column; align-items: center;
background: rgba(184,255,0,0.05); border: 1px solid rgba(184,255,0,0.15);
border-radius: 10px; padding: 8px 14px; text-align: center;
}
.bfw-stat-num {
font-family: var(--font-display); font-size: 1.1rem; font-weight: 800;
color: var(--accent); letter-spacing: -0.04em; line-height: 1;
}
.bfw-stat-lbl {
font-size: 0.48rem; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.06em; margin-top: 3px; white-space: nowrap;
}
/* Mobile: simplify the wide flow visual */
@media(max-width:768px) {
.bv-flow-wide { padding: 1rem; gap: 1rem; flex-wrap: wrap; }
.bfw-tools { order: 1; flex-wrap: wrap; justify-content: center; gap: 4px; }
.bfw-arr-outer { width: 20px; }
.bfw-flows { order: 2; min-width: 0; width: 100%; }
.bfw-stats { order: 3; flex-direction: row; width: 100%; justify-content: center; }
.bfw-flow-label { font-size: 0.58rem; }
}
.bento-info { padding: 1.5rem 1.75rem 1.75rem; position: relative; z-index: 1; }
.bento-info h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.bento-info p { font-size: 0.85rem; color: var(--muted); line-height: 1.65; margin-bottom: 1rem; }
.bento-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.btag { font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--muted); }
/* ══ BENTO CARD VISUALS ══════════════════════════════════════════ */
.bv-web { background:linear-gradient(140deg,#0b0b16,#0e0e1e); width:100%; height:100%; position:relative; padding:12px 14px; overflow:hidden; }
.bv-web-browser { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:8px; overflow:hidden; }
.bv-web-bar { background:rgba(255,255,255,0.04); padding:5px 8px; display:flex; align-items:center; gap:5px; }
.bv-wd { width:6px; height:6px; border-radius:50%; }
.bv-wd:nth-child(1){background:#ff5f57;} .bv-wd:nth-child(2){background:#febc2e;} .bv-wd:nth-child(3){background:#28c840;}
.bv-web-url { flex:1; height:9px; background:rgba(255,255,255,0.05); border-radius:3px; margin-left:4px; }
.bv-web-body { padding:10px 10px 8px; display:flex; gap:10px; align-items:flex-start; }
.bv-logo-area { flex-shrink:0; width:52px; }
.bv-logo-svg { width:52px; height:52px; }
.bv-logo-path {
fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 200; stroke-dashoffset: 200;
animation: drawLogo 1.8s var(--ease) 0.3s forwards;
}
.bv-logo-path2 {
fill: none; stroke: rgba(184,255,0,0.4); stroke-width: 1.5; stroke-linecap: round;
stroke-dasharray: 120; stroke-dashoffset: 120;
animation: drawLogo 1.4s var(--ease) 1.2s forwards;
}
@keyframes drawLogo { to { stroke-dashoffset: 0; } }
.bv-logo-dot { fill: var(--accent); opacity: 0; animation: dotPop 0.4s var(--ease) 2s forwards; }
@keyframes dotPop { to { opacity: 1; } }
.bv-layout-lines { flex:1; padding-top:4px; }
.bv-ll { height:5px; border-radius:3px; background:rgba(255,255,255,0.08); margin-bottom:5px;
transform-origin:left; transform:scaleX(0);
animation: lineGrow 0.5s var(--ease) forwards; }
.bv-ll.accent { background:linear-gradient(90deg,var(--accent),rgba(184,255,0,0.3)); }
.bv-ll:nth-child(1){width:85%; animation-delay:0.9s;}
.bv-ll:nth-child(2){width:60%; animation-delay:1.1s;}
.bv-ll:nth-child(3){width:95%; animation-delay:1.3s;}
.bv-ll:nth-child(4){width:40%; animation-delay:1.5s;}
.bv-ll-btns { display:flex; gap:4px; margin-top:6px; }
.bv-ll-btn { height:12px; border-radius:3px; transform-origin:left; transform:scaleX(0); animation:lineGrow 0.4s var(--ease) forwards; }
.bv-ll-btn:nth-child(1){ width:38px; background:var(--accent); animation-delay:1.7s; }
.bv-ll-btn:nth-child(2){ width:28px; background:rgba(255,255,255,0.07); animation-delay:1.85s; }
@keyframes lineGrow { to { transform: scaleX(1); } }
.bv-live { position:absolute; bottom:10px; right:10px; background:rgba(8,10,18,0.92);
border:1px solid rgba(34,197,94,0.35); border-radius:6px; padding:3px 8px;
font-size:0.58rem; color:#86efac; font-weight:700; display:flex; align-items:center; gap:4px;
opacity:0; animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.2s forwards; }
.bv-live-dot { width:5px; height:5px; border-radius:50%; background:#22c55e; box-shadow:0 0 5px rgba(34,197,94,0.7); animation:breathe 2s infinite; }
@keyframes popIn { to{opacity:1;} }
.bv-eco { background:linear-gradient(140deg,#0e0a18,#0a0c16); width:100%; height:100%; padding:12px; position:relative; overflow:hidden; }
.bv-eco-shelf { display:flex; gap:6px; margin-bottom:8px; }
.bv-eco-prod {
flex:1; border-radius:8px; overflow:hidden;
border:1px solid rgba(255,255,255,0.07);
background:rgba(255,255,255,0.03);
opacity:0; transform:translateY(14px);
animation: prodSlideIn 0.5s var(--ease) forwards;
}
.bv-eco-prod:nth-child(1){animation-delay:0.2s;}
.bv-eco-prod:nth-child(2){animation-delay:0.45s;}
.bv-eco-prod:nth-child(3){animation-delay:0.7s;}
@keyframes prodSlideIn { to { opacity:1; transform:translateY(0); } }
.bv-eco-img { height:48px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.bv-eco-prod:nth-child(1) .bv-eco-img { background:linear-gradient(135deg,#1a1a2e,#16213e); }
.bv-eco-prod:nth-child(2) .bv-eco-img { background:linear-gradient(135deg,#1a120a,#2a1810); }
.bv-eco-prod:nth-child(3) .bv-eco-img { background:linear-gradient(135deg,#0a1a14,#0d2018); }
.bv-eco-svg { width:28px; height:28px; opacity:0.8; }
.bv-eco-info { padding:5px 6px 6px; }
.bv-eco-name { height:4px; background:rgba(255,255,255,0.15); border-radius:2px; margin-bottom:3px; }
.bv-eco-price { height:5px; width:45%; background:var(--accent); border-radius:2px; opacity:0.7; margin-bottom:3px; }
.bv-eco-stars { display:flex; gap:1px; }
.bv-eco-star { font-size:6px; color:#f59e0b; }
.bv-eco-cart-bar { display:flex; align-items:center; justify-content:space-between; }
.bv-cart-icon-wrap { position:relative; }
.bv-cart-svg { width:18px; height:18px; opacity:0.5; }
.bv-cart-count {
position:absolute; top:-4px; right:-5px;
width:10px; height:10px; border-radius:50%;
background:var(--accent); color:var(--bg);
font-size:6px; font-weight:800;
display:flex; align-items:center; justify-content:center;
animation: countPop 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.8s both;
opacity:0;
}
@keyframes countPop { to { opacity:1; transform:scale(1); } from { opacity:0; transform:scale(0); } }
.bv-fly-dot {
position:absolute; width:6px; height:6px; border-radius:50%;
background:var(--accent); box-shadow:0 0 6px var(--accent);
top:60px; left:20%;
animation: flyToCart 0.7s var(--ease) 1.1s forwards;
opacity:0;
}
.bv-fly-dot:nth-child(2){ left:50%; animation-delay:1.3s; }
.bv-fly-dot:nth-child(3){ left:78%; animation-delay:1.5s; }
@keyframes flyToCart {
0% { opacity:1; transform:translate(0,0) scale(1); }
80% { opacity:1; }
100%{ opacity:0; transform:translate(calc(var(--tx,50px) - 50%), -55px) scale(0.3); }
}
.bv-up { background:linear-gradient(140deg,#080e12,#0a1018); width:100%; height:100%; padding:10px 12px; }
.bv-mkt-header { display:flex; align-items:center; gap:6px; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.05); }
.bv-mkt-logo { width:18px; height:18px; border-radius:4px; background:linear-gradient(135deg,#ff6b35,#ff9f5a); display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; }
.bv-mkt-name { height:6px; width:40px; background:rgba(255,255,255,0.2); border-radius:2px; }
.bv-mkt-status { margin-left:auto; font-size:0.52rem; color:#86efac; font-weight:700; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); border-radius:10px; padding:1px 5px; }
.bv-listing {
display:flex; align-items:center; gap:7px;
background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05);
border-radius:7px; padding:5px 7px; margin-bottom:5px;
opacity:0; transform:translateX(-10px);
animation: listIn 0.4s var(--ease) forwards;
}
.bv-listing:nth-child(1){animation-delay:0.3s;}
.bv-listing:nth-child(2){animation-delay:0.6s;}
.bv-listing:nth-child(3){animation-delay:0.9s;}
@keyframes listIn { to { opacity:1; transform:translateX(0); } }
.bv-listing-thumb { width:28px; height:28px; border-radius:5px; flex-shrink:0; overflow:hidden; position:relative; }
.bv-listing:nth-child(1) .bv-listing-thumb { background:linear-gradient(135deg,rgba(184,255,0,0.3),rgba(184,255,0,0.1)); }
.bv-listing:nth-child(2) .bv-listing-thumb { background:linear-gradient(135deg,rgba(255,107,53,0.3),rgba(255,107,53,0.1)); }
.bv-listing:nth-child(3) .bv-listing-thumb { background:linear-gradient(135deg,rgba(100,108,255,0.3),rgba(100,108,255,0.1)); }
.bv-listing-thumb svg { position:absolute; inset:0; margin:auto; width:14px; height:14px; }
.bv-listing-info { flex:1; min-width:0; }
.bv-listing-title { height:4px; background:rgba(255,255,255,0.18); border-radius:2px; margin-bottom:3px; }
.bv-listing-meta { display:flex; gap:4px; align-items:center; }
.bv-listing-cat { height:3px; width:30px; background:rgba(184,255,0,0.25); border-radius:2px; }
.bv-listing-price-tag { font-size:0.52rem; color:var(--accent); font-weight:700; }
.bv-listing-badge {
font-size:0.48rem; font-weight:700; padding:1px 5px; border-radius:10px;
flex-shrink:0; white-space:nowrap;
}
.bv-listing-badge.live { background:rgba(34,197,94,0.15); color:#86efac; border:1px solid rgba(34,197,94,0.25); }
.bv-listing-badge.pending { background:rgba(251,191,36,0.1); color:#fcd34d; border:1px solid rgba(251,191,36,0.2); }
.bv-listing-badge.uploading {
background:rgba(184,255,0,0.1); color:var(--accent); border:1px solid rgba(184,255,0,0.25);
animation: uploadPulse 1.2s ease-in-out infinite;
}
@keyframes uploadPulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.bv-up-footer { margin-top:6px; display:flex; align-items:center; gap:6px; }
.bv-up-bar-wrap { flex:1; height:3px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden; }
.bv-up-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),rgba(184,255,0,0.4)); border-radius:2px; animation:upFill 3s ease-in-out infinite alternate; }
@keyframes upFill { from{width:20%;} to{width:95%;} }
.bv-up-pct { font-size:0.5rem; color:var(--accent); font-weight:700; white-space:nowrap; }
.bv-ai-bg { background:linear-gradient(140deg,#080810,#0c0b18); width:100%; height:100%; position:relative; overflow:hidden; }
.bv-ai-svg { position:absolute; inset:0; width:100%; height:100%; }
.ai-edge { stroke:rgba(184,255,0,0.12); stroke-width:1; fill:none; stroke-dasharray:5 4; animation:dash 4s linear infinite; }
.ai-edge.warm { stroke:rgba(255,107,53,0.1); animation-duration:5s; animation-direction:reverse; }
@keyframes dash { from{stroke-dashoffset:0;} to{stroke-dashoffset:-28;} }
.ai-node { fill:rgba(184,255,0,0.5); filter:drop-shadow(0 0 3px rgba(184,255,0,0.4)); animation:nodePulse 3s ease-in-out infinite; }
.ai-node:nth-child(odd) { animation-delay:1.5s; }
.ai-node-center { fill:var(--accent); filter:drop-shadow(0 0 10px rgba(184,255,0,0.9)); animation:centerPulse 2s ease-in-out infinite; }
@keyframes nodePulse { 0%,100%{opacity:0.5;} 50%{opacity:1;} }
@keyframes centerPulse { 0%,100%{r:6;filter:drop-shadow(0 0 8px rgba(184,255,0,0.8));} 50%{r:8.5;filter:drop-shadow(0 0 16px rgba(184,255,0,1));} }
.bv-seo-ranks { position:absolute; bottom:8px; left:8px; right:8px; }
.bv-seo-row {
display:flex; align-items:center; gap:5px; margin-bottom:4px;
opacity:0; animation:rankIn 0.5s var(--ease) forwards;
}
.bv-seo-row:nth-child(1){animation-delay:0.4s;}
.bv-seo-row:nth-child(2){animation-delay:0.8s;}
.bv-seo-row:nth-child(3){animation-delay:1.2s;}
@keyframes rankIn { to{opacity:1;} }
.bv-seo-pos { font-size:0.55rem; font-weight:800; color:var(--accent); width:14px; flex-shrink:0; }
.bv-seo-kw { font-size:0.52rem; color:rgba(240,240,240,0.55); flex:1; }
.bv-seo-bar-bg { width:50px; height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.bv-seo-bar { height:100%; background:var(--accent); border-radius:2px; transform-origin:left; transform:scaleX(0); animation:barGrow 0.6s var(--ease) forwards; }
.bv-seo-row:nth-child(1) .bv-seo-bar { animation-delay:0.8s; width:92%; }
.bv-seo-row:nth-child(2) .bv-seo-bar { animation-delay:1.2s; width:75%; }
.bv-seo-row:nth-child(3) .bv-seo-bar { animation-delay:1.6s; width:60%; background:rgba(184,255,0,0.5); }
@keyframes barGrow { to{transform:scaleX(1);} }
.bv-flow-bg { background:linear-gradient(140deg,#090b14,#0c0a18); width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px; }
.flow-nodes { display:flex; align-items:center; gap:5px; }
.fn { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.5rem; font-weight:800; border:1.5px solid; flex-shrink:0; transition:all 0.3s; }
.fn.trig { background:rgba(184,255,0,0.08); border-color:rgba(184,255,0,0.35); color:var(--accent); }
.fn.proc { background:rgba(100,108,255,0.08); border-color:rgba(100,108,255,0.35); color:#aab4ff; }
.fn.aint { background:rgba(255,107,53,0.08); border-color:rgba(255,107,53,0.35); color:var(--warm); }
.fn.done { background:rgba(34,197,94,0.08); border-color:rgba(34,197,94,0.35); color:#86efac; }
.fn.active { box-shadow:0 0 14px currentColor; transform:scale(1.15); }
.fn-arr { display:flex; align-items:center; position:relative; width:20px; }
.fn-line { width:100%; height:1px; background:rgba(255,255,255,0.1); }
.fn-pkt { width:6px; height:6px; border-radius:50%; background:var(--accent); position:absolute; left:0; opacity:0; box-shadow:0 0 6px var(--accent); }
@keyframes pktMove { 0%{left:0;opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:calc(100% - 6px);opacity:0;} }
.flow-labels { display:flex; align-items:center; gap:5px; margin-top:7px; }
.fl { font-size:0.48rem; color:var(--muted); text-align:center; width:30px; line-height:1.3; }
.fl-gap { width:20px; }
.flow-log { width:100%; margin-top:10px; }
.flow-log-line {
height:3px; border-radius:2px; background:rgba(255,255,255,0.05); margin-bottom:3px;
overflow:hidden; position:relative;
}
.flow-log-line::after {
content:''; position:absolute; inset:0; border-radius:2px;
background:linear-gradient(90deg,rgba(184,255,0,0.4),transparent);
transform:translateX(-100%);
animation:logScan 2.5s ease-in-out infinite;
}
.flow-log-line:nth-child(1){width:85%;}
.flow-log-line:nth-child(2){width:65%;}
.flow-log-line:nth-child(3){width:75%;}
.flow-log-line:nth-child(1)::after{animation-delay:0s;}
.flow-log-line:nth-child(2)::after{animation-delay:0.5s;}
.flow-log-line:nth-child(3)::after{animation-delay:1s;}
@keyframes logScan { 0%{transform:translateX(-100%);} 100%{transform:translateX(300%);} }
.bv-app-bg { background:linear-gradient(140deg,#0a0c10,#090c0a); width:100%; height:100%; padding:12px; display:flex; gap:24px; align-items:center; justify-content:center; }
.bv-phone-mock { width:44px; flex-shrink:0; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; overflow:hidden; padding:5px 4px; }
.bv-ph-notch { width:14px; height:4px; background:rgba(255,255,255,0.07); border-radius:2px; margin:0 auto 6px; }
.bv-ph-screen { flex:1; }
.bv-ph-sbar { height:3px; background:rgba(184,255,0,0.3); border-radius:2px; margin-bottom:5px; width:70%; }
.bv-ph-row { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; margin-bottom:3px; }
.bv-ph-card-row { display:flex; gap:3px; margin-top:5px; }
.bv-ph-card { flex:1; height:20px; background:rgba(255,255,255,0.04); border-radius:4px; border:1px solid rgba(255,255,255,0.05); position:relative; overflow:hidden; }
.bv-ph-card::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(184,255,0,0.07),transparent); animation:shimmer 2.5s infinite; }
@keyframes shimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(200%);} }
.bv-ph-tap { position:absolute; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--accent); opacity:0; transform:scale(0); animation:tapRipple 2.4s ease-out infinite 1.5s; top:18px; left:50%; margin-left:-5px; }
@keyframes tapRipple { 0%{opacity:0.8;transform:scale(0);} 100%{opacity:0;transform:scale(2.5);} }
.bv-code-block { flex:1; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.bv-code-line { height:5px; border-radius:2px; background:rgba(255,255,255,0.05); position:relative; overflow:hidden; }
.bv-code-line::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(184,255,0,0.25),transparent); animation:shimmer 2.5s infinite; }
.bv-code-line:nth-child(1){width:55%;animation-delay:0s;}
.bv-code-line:nth-child(2){width:78%;margin-left:7px;animation-delay:0.3s;}
.bv-code-line:nth-child(3){width:48%;margin-left:14px;animation-delay:0.6s;}
.bv-code-line:nth-child(4){width:68%;margin-left:7px;animation-delay:0.9s;}
.bv-code-line:nth-child(5){width:42%;animation-delay:1.2s;}
.bv-code-line:nth-child(6){width:80%;animation-delay:1.5s;}
.bv-deploy-tag { display:flex; align-items:center; gap:4px; margin-top:6px; background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); border-radius:5px; padding:3px 6px; opacity:0; animation:popIn 0.5s var(--ease) 2s forwards; width:fit-content; }
.bv-deploy-dot { width:5px; height:5px; border-radius:50%; background:#22c55e; box-shadow:0 0 5px rgba(34,197,94,0.7); animation:breathe 2s infinite; }
.bv-deploy-txt { font-size:0.52rem; color:#86efac; font-weight:700; }
/* ── PORTFOLIO ───────────────────────────────────────────────────── */
.portfolio-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr));
gap: 1.25rem; margin-top: 4rem;
}
.pitem {
position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/9;
background: #111118; border: 1px solid var(--border);
transition: all 0.5s var(--ease); cursor: none;
will-change: transform;
}
.pitem:hover { border-color: rgba(184,255,0,0.2); transform: translateY(-5px); box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.pitem img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s var(--ease); aspect-ratio:16/9; }
.pitem:hover img { transform:scale(1.05); }
.pitem-over {
position:absolute; inset:0;
background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.5) 60%,transparent 100%);
padding:1.5rem; display:flex; flex-direction:column; justify-content:flex-end;
transform:translateY(30%); opacity:0; transition:all 0.4s var(--ease);
}
.pitem:hover .pitem-over { transform:translateY(0); opacity:1; }
.ptag { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); background:rgba(184,255,0,0.1); border-radius:100px; padding:0.2rem 0.6rem; display:inline-block; margin-bottom:0.4rem; }
.pitem-over h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:0.2rem; }
.pitem-over p { color:rgba(240,240,240,0.55); font-size:0.82rem; }
/* ── TESTIMONIALS ────────────────────────────────────────────────── */
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.25rem; }
.tcard {
padding:2rem; background:var(--surface); border:1px solid var(--border); border-radius:20px;
transition:all 0.4s var(--ease); position:relative; overflow:hidden;
}
.tcard::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:linear-gradient(90deg,transparent,var(--accent),transparent); transform:scaleX(0); transition:transform 0.4s var(--ease); }
.tcard:hover::before { transform:scaleX(1); }
.tcard:hover { background:rgba(255,255,255,0.04); transform:translateY(-5px); border-color:rgba(184,255,0,0.15); box-shadow:0 20px 50px rgba(0,0,0,0.4); }
.tcard-q { font-size:3rem; line-height:1; color:rgba(184,255,0,0.12); font-family:Georgia,serif; margin-bottom:0.5rem; }
.tcard p { font-size:0.92rem; line-height:1.75; color:var(--muted); margin-bottom:1.5rem; }
.tcard-auth { display:flex; align-items:center; gap:0.75rem; }
.tcard-av { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--accent),rgba(184,255,0,0.3)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; color:var(--bg); flex-shrink:0; }
.tcard-name { font-weight: 700; font-size:0.9rem; }
.tcard-role { font-size:0.78rem; color:var(--muted); }
.stars { display:flex; gap:2px; margin-bottom:1rem; }
.stars span { color:#f59e0b; font-size:0.8rem; }
/* ── PRICING ─────────────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.25rem; max-width:1100px; margin:0 auto; }
.pcard {
padding:2.25rem 2rem; background:var(--surface); border:1px solid var(--border); border-radius:24px;
transition:all 0.4s var(--ease); position:relative; overflow:hidden;
}
.pcard:hover { transform:translateY(-6px); border-color:rgba(184,255,0,0.2); box-shadow:0 24px 60px rgba(0,0,0,0.5); background:rgba(255,255,255,0.04); }
.pcard.feat { border-color:rgba(184,255,0,0.35); background:rgba(184,255,0,0.03); }
.pcard.feat::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:linear-gradient(90deg,transparent,var(--accent) 50%,transparent); }
.pbadge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.75rem; background:var(--accent-dim); border:1px solid rgba(184,255,0,0.25); color:var(--accent); font-size:0.68rem; font-weight:700; border-radius:100px; margin-bottom:1.5rem; text-transform:uppercase; letter-spacing:0.08em; }
.pbadge-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:breathe 2s infinite; flex-shrink:0; }
.pcard h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:800; letter-spacing:-0.04em; margin-bottom:0.5rem; }
.pprice { font-family:var(--font-display); font-size:3.25rem; font-weight:800; letter-spacing:-0.06em; color:var(--text); margin-bottom:0.25rem; }
.pprice .euro { font-size:1.75rem; vertical-align:super; color:var(--accent); }
.pperiod { font-size:0.82rem; color:var(--muted); margin-bottom:1.75rem; }
.pfeats { list-style:none; margin-bottom:2rem; }
.pfeats li { padding:0.6rem 0; border-bottom:1px solid rgba(255,255,255,0.04); display:flex; align-items:flex-start; gap:0.7rem; font-size:0.875rem; color:rgba(240,240,240,0.75); }
.pfeats li::before { content:'✓'; color:var(--accent); font-weight:800; font-size:0.8rem; flex-shrink:0; margin-top:1px; }
.pbtn { display:block; width:100%; padding:0.9rem; text-align:center; font-weight:700; font-size:0.9rem; border-radius:12px; text-decoration:none; cursor:none; transition:all 0.3s var(--ease); border:1px solid var(--border); color:var(--text); background:transparent; font-family:var(--font-body); }
.pbtn:hover { background:var(--surface-hover); border-color:rgba(255,255,255,0.2); transform:translateY(-1px); }
.pcard.feat .pbtn { background:var(--accent); color:var(--bg); border-color:var(--accent); box-shadow:0 0 24px rgba(184,255,0,0.2); }
.pcard.feat .pbtn:hover { background:#ceff3a; box-shadow:0 0 40px rgba(184,255,0,0.4); }
.pricing-note { max-width:700px; margin:3rem auto 0; text-align:center; font-size:0.88rem; color:var(--muted); line-height:1.75; }
.pricing-note strong { color:var(--text); }
/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-item {
background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden;
transition: border-color 0.3s, background 0.3s;
}
.faq-item[open] { border-color: rgba(184,255,0,0.2); background: rgba(184,255,0,0.02); }
.faq-q {
padding: 1.4rem 1.75rem; font-family: var(--font-display);
font-size: 1rem; font-weight: 700; letter-spacing: -0.02em;
cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center;
gap: 1rem;
transition: color 0.25s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--accent);
flex-shrink: 0; transition: transform 0.3s var(--ease);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-item[open] .faq-q { color: var(--accent); }
.faq-a {
padding: 0 1.75rem 1.4rem; color: var(--muted);
font-size: 0.92rem; line-height: 1.75;
}
/* ── CONTACT ─────────────────────────────────────────────────────── */
.contact-inner { max-width: 700px; margin: 0 auto; width: 100%; }
.cform { display:grid; gap:1.5rem; width: 100%; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; width: 100%; }
.fg { display:flex; flex-direction:column; width: 100%; min-width: 0; }
.fg label { font-size:0.8rem; font-weight:700; margin-bottom:0.5rem; color:rgba(240,240,240,0.6); text-transform:uppercase; letter-spacing:0.06em; }
.fg input, .fg textarea, .fg select {
padding:0.9rem 1.1rem; background:rgba(255,255,255,0.05); border:1px solid var(--border);
border-radius:12px; color: #f0f0f0; font-family:var(--font-body); font-size:1rem;
transition:all 0.3s; appearance:none; -webkit-appearance:none;
width: 100%; box-sizing: border-box; max-width: 100%;
/* CRITICAL FIX: Force dark color scheme so option text is readable everywhere */
color-scheme: dark;
}
@media (max-width: 768px) {
.fg input, .fg textarea, .fg select {
font-size: 16px; /* prevents iOS Safari auto-zoom */
}
}
.fg input::placeholder, .fg textarea::placeholder { color:rgba(240,240,240,0.25); }
.fg input:focus, .fg textarea:focus, .fg select:focus {
outline:none; border-color:rgba(184,255,0,0.4); background:rgba(184,255,0,0.03);
box-shadow:0 0 0 4px rgba(184,255,0,0.06);
}
.fg select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,240,240,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
cursor: pointer;
}
/* Fix option readability across all browsers */
.fg select option {
background: #1a1a1a;
color: #f0f0f0;
font-family: var(--font-body);
font-size: 0.9rem;
padding: 0.5rem;
}
.fg select option:disabled {
color: rgba(240,240,240,0.35);
}
.fg textarea { min-height:130px; resize:vertical; }
.fsub {
padding:1.1rem; background:var(--accent); border:none; color:var(--bg);
font-family:var(--font-display); font-weight:800; font-size:0.95rem;
border-radius:12px; cursor:none; transition:all 0.3s var(--ease);
position:relative; overflow:hidden; box-shadow:0 0 30px rgba(184,255,0,0.2);
width: 100%;
}
.fsub:hover { background:#ceff3a; transform:translateY(-2px); box-shadow:0 8px 40px rgba(184,255,0,0.4); }
.fsub:disabled { opacity:0.7; cursor:not-allowed; transform:none; }
.form-success { display:none; text-align:center; padding:2rem; }
.form-success.show { display:block; }
.form-success-icon { font-size:3rem; margin-bottom:1rem; }
.form-success h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--accent); margin-bottom:0.5rem; }
/* ── FOOTER ──────────────────────────────────────────────────────── */
footer {
border-top: 1px solid var(--border); padding: 6rem 0 3rem;
position: relative; overflow: hidden; z-index: 2;
}
footer::before {
content: ''; position: absolute; bottom: -300px; left: 50%; transform: translateX(-50%);
width: 700px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(184,255,0,0.04), transparent 70%);
pointer-events: none;
}
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:2rem; text-align:center; }
.footer-cta-text {
font-family:var(--font-display); font-size:clamp(2.5rem,6vw,5rem);
font-weight:800; letter-spacing:-0.05em; line-height:1;
}
.footer-cta-text .stroke { -webkit-text-stroke:2px rgba(240,240,240,0.2); color:transparent; }
.footer-cta-text .lit { color:var(--accent); }
.footer-btn {
display:inline-flex; align-items:center; gap:0.7rem;
padding:1rem 2.25rem; background:var(--accent); color:var(--bg);
font-family:var(--font-display); font-weight:800; font-size:0.95rem;
text-decoration:none; border-radius:14px; cursor:none;
transition:all 0.3s var(--ease);
box-shadow:0 0 30px rgba(184,255,0,0.3);
will-change: transform;
}
.footer-btn:hover { background:#ceff3a; transform:translateY(-3px); box-shadow:0 12px 50px rgba(184,255,0,0.45); }
.footer-div { width:100%; height:1px; background:var(--border); }
.footer-bot { display:flex; justify-content:space-between; align-items:center; width:100%; font-size:0.82rem; color:var(--muted); }
.footer-logo-link { font-family:var(--font-display); font-size:1rem; font-weight:800; color:rgba(240,240,240,0.3); text-decoration:none; letter-spacing:-0.03em; }
@media(max-width:640px){ .footer-bot{flex-direction:column;gap:0.75rem;text-align:center;} }
/* ── MACBOOK LIGHTBOX ────────────────────────────────────────────── */
.lb-overlay {
position: fixed; inset: 0; z-index: 5000;
background: rgba(0,0,0,0); backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
pointer-events: none; opacity: 0;
transition: opacity 0.45s var(--ease), backdrop-filter 0.45s, background 0.45s;
}
.lb-overlay.open {
opacity: 1; pointer-events: all;
background: rgba(0,0,0,0.88);
backdrop-filter: blur(32px) saturate(160%);
-webkit-backdrop-filter: blur(32px) saturate(160%);
}
.lb-close {
position: fixed; top: 1.25rem; right: 1.25rem;
width: 42px; height: 42px; border-radius: 50%;
background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
color: rgba(255,255,255,0.7); font-size: 1rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.25s; z-index: 5010;
line-height: 1; backdrop-filter: blur(8px);
}
.lb-close:hover { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); transform: scale(1.1) rotate(90deg); }
/* Inner layout: macbook + info stacked, centered, scrollable */
.lb-inner {
width: 100%;
max-width: 860px;
max-height: 100vh;
max-width: min(860px, 100vw);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
transform: translateY(32px) scale(0.97);
transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.45s;
opacity: 0;
display: flex; flex-direction: column; align-items: center;
gap: 1.25rem;
padding: 0.5rem 0 1.5rem;
}
.lb-inner::-webkit-scrollbar { display: none; }
.lb-overlay.open .lb-inner { transform: translateY(0) scale(1); opacity: 1; }
/* MacBook shell wrapper — maintains aspect ratio of SVG (900:560) */
.lb-macbook {
width: 100%;
position: relative;
}
.lb-macbook svg {
width: 100%; display: block;
filter: drop-shadow(0 24px 60px rgba(0,0,0,0.95)) drop-shadow(0 0 40px rgba(184,255,0,0.06));
}
/* Screen cutout — precisely mapped to SVG inner bezel coords:
x=66 y=16 w=768 h=478 on a 900×560 viewBox
left: 66/900=7.333% top: 16/560=2.857%
right margin: (900-834)/900=7.333% bottom margin: (560-494)/560=11.786% */
.lb-screen-wrap {
position: absolute;
top: 2.857%;
left: 7.333%;
right: 7.333%;
bottom: 11.786%;
border-radius: 2px;
overflow: hidden;
background: #0d0d12; /* match SVG bezel color — NO white */
}
/* 16:9 crop window inside the screen */
.lb-screen-crop {
width: 100%;
/* enforce 16:9 — the screen area is 768×478 ≈ 1.608:1, very close to 16:9 (1.778)
We fill the width and let the image be cropped/scrolled vertically */
overflow-y: auto;
overflow-x: hidden;
height: 100%;
scrollbar-width: none;
scroll-behavior: smooth;
position: relative;
}
.lb-screen-crop::-webkit-scrollbar { display: none; }
.lb-screen-img {
width: 100%;
height: auto;
display: block;
transition: opacity 0.35s ease;
}
.lb-screen-img.loading { opacity: 0; }
/* Loading shimmer shown while image loads */
.lb-screen-loader {
position: absolute; inset: 0;
background: linear-gradient(90deg,
rgba(255,255,255,0.03) 0%,
rgba(255,255,255,0.07) 40%,
rgba(255,255,255,0.03) 80%);
background-size: 200% 100%;
animation: lbShimmer 1.4s ease-in-out infinite;
opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.lb-screen-loader.active { opacity: 1; }
@keyframes lbShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Browser chrome bar inside the screen — adds realism */
.lb-browser-bar {
position: sticky; top: 0; left: 0; right: 0; z-index: 2;
background: rgba(22,22,30,0.96);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 6px 10px;
display: flex; align-items: center; gap: 7px;
flex-shrink: 0;
}
.lb-browser-dots { display: flex; gap: 4px; }
.lb-browser-dots span {
width: 8px; height: 8px; border-radius: 50%;
}
.lb-browser-dots span:nth-child(1) { background: #ff5f57; }
.lb-browser-dots span:nth-child(2) { background: #febc2e; }
.lb-browser-dots span:nth-child(3) { background: #28c840; }
.lb-browser-url {
flex: 1; background: rgba(255,255,255,0.06);
border-radius: 5px; padding: 3px 10px;
font-size: 0.62rem; color: rgba(240,240,240,0.4);
font-family: var(--font-body);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Navigation arrows — overlaid inside the screen area, always visible */
.lb-arrow {
position: absolute;
/* Vertically center on the screen portion only (top 2.857%, bottom 11.786%) */
top: 2.857%;
height: calc(100% - 2.857% - 11.786%);
width: 14%;
display: flex; align-items: center;
cursor: pointer; z-index: 20;
border: none; background: transparent; padding: 0;
transition: background 0.25s;
}
.lb-arrow.prev {
left: 7.333%; /* aligns with screen left edge */
justify-content: flex-start;
padding-left: 10px;
border-radius: 13px 0 0 13px;
background: linear-gradient(to right, rgba(0,0,0,0.35), transparent);
}
.lb-arrow.next {
right: 7.333%; /* aligns with screen right edge */
justify-content: flex-end;
padding-right: 10px;
border-radius: 0 13px 13px 0;
background: linear-gradient(to left, rgba(0,0,0,0.35), transparent);
}
.lb-arrow:hover.prev { background: linear-gradient(to right, rgba(0,0,0,0.55), transparent); }
.lb-arrow:hover.next { background: linear-gradient(to left, rgba(0,0,0,0.55), transparent); }
/* The visible icon pill inside each arrow */
.lb-arrow-icon {
width: 40px; height: 40px; border-radius: 50%;
background: rgba(10,10,16,0.75);
border: 1px solid rgba(255,255,255,0.18);
color: #fff; font-size: 1rem;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.22s var(--ease);
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
flex-shrink: 0;
}
.lb-arrow:hover .lb-arrow-icon {
background: var(--accent);
border-color: var(--accent);
color: #000;
transform: scale(1.12);
box-shadow: 0 0 24px rgba(184,255,0,0.45), 0 4px 20px rgba(0,0,0,0.5);
}
/* Always show on all screen sizes — remove old hide rule */
@media (max-width: 768px) {
.lb-arrow { width: 18%; }
.lb-arrow-icon { width: 34px; height: 34px; font-size: 0.85rem; }
}
.lb-info {
text-align: center; opacity: 0; transform: translateY(12px);
transition: opacity 0.4s var(--ease) 0.2s, transform 0.4s var(--ease) 0.2s;
width: 100%;
}
.lb-overlay.open .lb-info { opacity: 1; transform: translateY(0); }
.lb-tag {
display: inline-block; font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
background: var(--accent-dim); border: 1px solid rgba(184,255,0,0.2);
border-radius: 100px; padding: 0.22rem 0.7rem; margin-bottom: 0.5rem;
}
.lb-title {
font-family: var(--font-display); font-size: clamp(1.3rem,2.5vw,2rem);
font-weight: 800; letter-spacing: -0.04em; margin-bottom: 0.25rem; color: #fff;
}
.lb-desc { font-size: 0.88rem; color: var(--muted); }
/* Dot indicators */
.lb-dots {
display: flex; gap: 8px; justify-content: center;
}
.lb-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.18);
cursor: pointer; transition: all 0.3s; border: none; padding: 0;
}
.lb-dot:hover { background: rgba(255,255,255,0.4); transform: scale(1.2); }
.lb-dot.active {
background: var(--accent); width: 22px; border-radius: 3px;
box-shadow: 0 0 10px rgba(184,255,0,0.5);
}
/* Responsive */
@media (max-width: 960px) {
.lb-inner { max-width: 720px; }
}
@media (max-width: 768px) {
.lb-overlay { padding: 0.75rem; }
.lb-inner { max-width: 100%; gap: 0.85rem; padding-top: 3.5rem; }
}
@media (min-width: 769px) {
.lb-mobile-nav { display: none; }
}
/* Mobile lightbox prev/next buttons */
.lb-mobile-nav {
display: flex; justify-content: center; gap: 1rem;
width: 100%; padding: 0.25rem 0;
}
.lb-mobile-btn {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.15);
color: #fff; font-size: 1.1rem;
cursor: pointer;
transition: all 0.22s var(--ease);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.lb-mobile-btn:hover, .lb-mobile-btn:active {
background: var(--accent);
border-color: var(--accent);
color: #000;
box-shadow: 0 0 20px rgba(184,255,0,0.4);
}
/* ── ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
@keyframes slideDown { from{opacity:0;transform:translateY(-15px);} to{opacity:1;transform:translateY(0);} }
.fade-in { opacity:0; transform:translateY(36px); transition:opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.fade-in.vis { opacity:1; transform:translateY(0); }
.s1{transition-delay:0.07s;} .s2{transition-delay:0.14s;} .s3{transition-delay:0.21s;}
.s4{transition-delay:0.28s;} .s5{transition-delay:0.35s;} .s6{transition-delay:0.42s;}
/* ── RESPONSIVE ──────────────────────────────────────────────────── */
/* Tablet */
@media(max-width:1100px){
/* Row 1 stays: 8+4 */
.bc-1 { grid-column: span 8; }
.bc-2 { grid-column: span 4; }
/* Row 2: collapse to 2 per row */
.bc-3 { grid-column: span 6; }
.bc-4 { grid-column: span 6; }
.bc-5 { grid-column: span 12; }
/* Row 3: full width stays */
.bc-6 { grid-column: span 12; }
.hero-left{ gap:2.5rem; }
.hc-body{ height:300px; }
}
/* Large mobile / small tablet */
@media(max-width:768px){
.hero{ padding:110px 0 60px; min-height:auto; }
.hero-layout{ gap:2.5rem; }
.hero-left{ grid-template-columns:1fr; gap:0; }
.hero-metrics{
flex-direction:row; flex-wrap:wrap; gap:1.25rem;
padding-left:0; border-left:none;
padding-top:1.5rem; margin-top:1.5rem;
border-top:1px solid rgba(255,255,255,0.06);
}
.hero-right{ overflow:hidden; }
.hc-main{ border-radius:12px; }
.hc-body{ height:220px; }
.hc-sidebar{ width:38px; }
.hc-sb-logo{ width:20px; height:20px; border-radius:5px; }
.hc-sb-icon{ width:18px; height:18px; }
.hc-canvas{ padding:8px 10px; gap:7px; }
/* hide right col on small screens */
.hc-col-right{ display:none; }
/* hide float chips on mobile */
.hc-float-1, .hc-float-2{ display:none; }
/* bento: all full width on mobile */
.bc-1,.bc-2,.bc-3,.bc-4,.bc-5,.bc-6{ grid-column:span 12; }
/* portfolio */
.portfolio-grid{ grid-template-columns:1fr; }
/* form */
.frow{ grid-template-columns:1fr; }
/* pricing */
.pricing-grid{ grid-template-columns:1fr; max-width:400px; margin-left:auto; margin-right:auto; }
/* testimonials */
.tgrid{ grid-template-columns:1fr; }
/* sections */
section{ padding:4.5rem 0; }
.sec-title{ font-size:clamp(1.8rem,7vw,2.8rem); }
.sec-sub{ font-size:0.95rem; margin-bottom:3rem; }
/* footer */
.footer-cta-text{ font-size:clamp(2rem,8vw,3.5rem); }
/* Touch devices: restore cursor on interactive elements */
.btn-primary, .btn-ghost, .nav-cta, .pbtn, .fsub, .footer-btn,
.bento-card, .pitem, .pcard, .tcard, .lb-close, .lb-arrow, .lb-dot,
.mobile-toggle, .footer-logo-link { cursor: pointer; }
}
/* Mobile portrait */
@media(max-width:480px){
nav{ top:0.75rem; padding:0.7rem 1.2rem; border-radius:60px; }
.hero{ padding:90px 0 50px; }
.hero-title{ font-size:clamp(2.4rem,10vw,3.2rem); letter-spacing:-0.01em; }
.hero-sub{ font-size:1rem; }
.hc-body{ height:180px; }
.hcb-nav{ height:18px; }
.hcb-h1{ height:8px; }
.hcb-h2{ height:8px; }
.hcb-tag{ height:7px; width:52px; }
.hcb-cta-main{ height:12px; width:44px; }
.hcb-cta-sec{ height:12px; width:32px; }
.hcb-sub{ height:3px; }
.hcb-img-big,.hcb-img-sm{ height:28px; }
.sec-title{ font-size:1.9rem; }
.pprice{ font-size:2.5rem; }
.footer-cta-text{ font-size:2rem; }
.hero-metrics .metric-num{ font-size:1.4rem; }
.container{ padding:0 4%; }
.bv{ height:120px; }
}
/* Very small phones */
@media(max-width:360px){
.hero-title{ font-size:2.1rem; }
.hc-body{ height:150px; }
.hero-metrics{ gap:1rem; }
.metric-num{ font-size:1.3rem !important; }
}
/* ── BV-DEVSITE: Website Dev Bento Visual ───────────────────── */
.bv-devsite {
width: 100%; height: 100%;
background: #0d0d16;
display: flex; flex-direction: column;
overflow: hidden; position: relative;
font-size: 0; /* prevent inline-block gaps */
}
/* Browser chrome bar */
.bvd-bar {
display: flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 5px 8px; flex-shrink: 0;
}
.bvd-dots { display: flex; gap: 4px; }
.bvd-dots span { width: 7px; height: 7px; border-radius: 50%; display: block; }
.bvd-url {
flex: 1; display: flex; align-items: center; gap: 4px;
background: rgba(255,255,255,0.05); border-radius: 4px;
padding: 2px 7px; font-size: 0.58rem;
font-family: var(--font-body); color: rgba(240,240,240,0.45);
}
.bvd-devtools-btn { display: flex; flex-direction: column; gap: 2px; padding: 2px 3px; }
.bvd-devtools-btn span { width: 12px; height: 1.5px; background: rgba(255,255,255,0.25); border-radius: 1px; display: block; }
/* Body: page preview + devtools side panel */
.bvd-body {
flex: 1; display: flex; overflow: hidden; min-height: 0;
}
/* ── LEFT: page preview ── */
.bvd-page {
flex: 1; display: flex; flex-direction: column;
overflow: hidden; border-right: 1px solid rgba(255,255,255,0.06);
}
/* Hero image block — colorful gradient + shapes */
.bvd-hero { flex-shrink: 0; }
.bvd-hero-img {
position: relative; overflow: hidden;
height: 62px;
}
.bvd-hero-gradient {
position: absolute; inset: 0;
background: linear-gradient(135deg, #1a0a2e 0%, #0f1a3d 35%, #0d2a1a 70%, #1a1a08 100%);
}
.bvd-hero-shapes { position: absolute; inset: 0; }
.bvd-shape { position: absolute; border-radius: 50%; filter: blur(8px); }
.bvd-s1 {
width: 50px; height: 50px; top: -10px; left: 20%;
background: radial-gradient(circle, rgba(99,102,241,0.7), transparent 70%);
animation: bvdFloat 4s ease-in-out infinite;
}
.bvd-s2 {
width: 40px; height: 40px; top: 5px; right: 25%;
background: radial-gradient(circle, rgba(184,255,0,0.5), transparent 70%);
animation: bvdFloat 5s ease-in-out infinite 1s;
}
.bvd-s3 {
width: 35px; height: 35px; bottom: -8px; left: 55%;
background: radial-gradient(circle, rgba(255,107,53,0.5), transparent 70%);
animation: bvdFloat 3.5s ease-in-out infinite 0.5s;
}
@keyframes bvdFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.08); }
}
.bvd-hero-overlay {
position: absolute; inset: 0; padding: 8px 10px;
display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.bvd-htag {
width: 38px; height: 5px; border-radius: 10px;
background: rgba(184,255,0,0.4); border: 1px solid rgba(184,255,0,0.3);
}
.bvd-h1 {
height: 7px; width: 72%; border-radius: 3px;
background: rgba(255,255,255,0.85);
animation: bvdPulse 3s ease-in-out infinite;
}
.bvd-h1b { width: 50%; background: rgba(184,255,0,0.75); animation-delay: 0.3s; }
@keyframes bvdPulse { 0%,100%{opacity:1;} 50%{opacity:0.7;} }
.bvd-hbtns { display: flex; gap: 4px; margin-top: 3px; }
.bvd-hbtn-primary {
height: 10px; width: 36px; border-radius: 3px;
background: var(--accent);
box-shadow: 0 0 8px rgba(184,255,0,0.4);
}
.bvd-hbtn-ghost {
height: 10px; width: 28px; border-radius: 3px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
}
/* Cards row */
.bvd-cards-row {
display: flex; gap: 4px; padding: 5px 6px 3px; flex-shrink: 0;
}
.bvd-card {
flex: 1; background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 5px; padding: 5px 5px;
opacity: 0; transform: translateY(6px);
animation: bvdCardIn 0.4s var(--ease) forwards;
}
.bvd-c1 { animation-delay: 0.3s; }
.bvd-c2 { animation-delay: 0.55s; }
.bvd-c3 { animation-delay: 0.8s; }
@keyframes bvdCardIn { to { opacity: 1; transform: translateY(0); } }
.bvd-card-icon { width: 12px; height: 12px; border-radius: 3px; margin-bottom: 4px; }
.bvd-card-line { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); margin-bottom: 2px; }
.bvd-short { width: 60%; }
/* Text + image row */
.bvd-text-row {
flex: 1; display: flex; gap: 5px; padding: 4px 6px 5px;
min-height: 0;
}
.bvd-text-block { flex: 1.2; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.bvd-tl { height: 3.5px; border-radius: 2px; background: rgba(255,255,255,0.1); }
.bvd-tl-accent { background: rgba(184,255,0,0.35); width: 40%; }
.bvd-tl-short { width: 70%; }
.bvd-img-block {
flex: 1; border-radius: 5px; overflow: hidden;
background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(255,107,53,0.08));
border: 1px solid rgba(255,255,255,0.07);
display: flex; align-items: center; justify-content: center;
}
/* ── RIGHT: devtools panel ── */
.bvd-devtools {
width: 90px; flex-shrink: 0;
background: #0a0a12;
display: flex; flex-direction: column;
overflow: hidden;
position: relative;
}
.bvd-dt-tab {
display: flex; gap: 0; flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bvd-dt-tab span {
font-family: var(--font-body); font-size: 0.48rem;
color: rgba(240,240,240,0.3);
padding: 3px 5px; cursor: default;
display: block;
}
.bvd-dt-tab-active {
color: var(--accent) !important;
border-bottom: 1.5px solid var(--accent);
}
/* HTML code lines */
.bvd-dt-code {
padding: 4px 4px 2px; flex-shrink: 0;
display: flex; flex-direction: column; gap: 1.5px;
}
.bvd-dt-line {
font-family: 'Courier New', monospace; font-size: 0.46rem;
line-height: 1.4; white-space: nowrap; overflow: hidden;
display: flex; align-items: center; gap: 1px;
}
.bvd-indent { padding-left: 7px; }
.bvd-dim { opacity: 0.45; }
.bvd-tag { color: rgba(184,255,0,0.85); }
.bvd-attr { color: rgba(99,178,255,0.9); }
.bvd-val { color: rgba(255,165,89,0.9); }
.bvd-blink {
color: var(--accent); font-weight: bold;
animation: bvdBlink 1s step-end infinite;
}
@keyframes bvdBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }
/* CSS styles panel */
.bvd-dt-styles {
padding: 3px 4px; border-top: 1px solid rgba(255,255,255,0.05);
display: flex; flex-direction: column; gap: 2px;
}
.bvd-ds-line {
display: flex; align-items: center; gap: 2px;
font-family: 'Courier New', monospace; font-size: 0.44rem;
white-space: nowrap; overflow: hidden;
}
.bvd-prop { color: rgba(99,178,255,0.8); }
.bvd-val-s { color: rgba(255,165,89,0.8); }
.bvd-num { color: rgba(184,255,0,0.8); }
.bvd-swatch {
width: 7px; height: 7px; border-radius: 1px;
flex-shrink: 0; border: 0.5px solid rgba(255,255,255,0.2);
}
/* Perf score circle */
.bvd-perf {
display: flex; flex-direction: column; align-items: center;
padding: 4px 4px 5px;
border-top: 1px solid rgba(255,255,255,0.05);
margin-top: auto;
gap: 1px;
}
.bvd-perf-lbl {
font-size: 0.42rem; color: rgba(184,255,0,0.6);
font-family: var(--font-body); text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Animated selection box overlay on the page */
.bvd-select-box {
position: absolute;
border: 1.5px solid rgba(99,102,241,0.8);
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(99,102,241,0.2), inset 0 0 8px rgba(99,102,241,0.05);
pointer-events: none;
/* Animate between selecting different elements */
animation: bvdSelect 5s ease-in-out infinite;
}
@keyframes bvdSelect {
0% { top: 20px; left: 6px; width: 55%; height: 58px; opacity: 0; }
8% { opacity: 1; }
30% { top: 20px; left: 6px; width: 55%; height: 58px; opacity: 1; }
42% { top: 92px; left: 4px; width: 32%; height: 36px; opacity: 1; }
55% { top: 92px; left: 4px; width: 32%; height: 36px; opacity: 1; }
67% { top: 130px; left: 45%; width: 48%; height: 34px; opacity: 1; }
80% { top: 130px; left: 45%; width: 48%; height: 34px; opacity: 1; }
92% { opacity: 0; }
100% { opacity: 0; }
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding: 5rem 0;
  box-sizing: border-box;
  width: 100%;
}
.about-body {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 1.25rem;
  max-width: 520px;
}
.about-contact-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.about-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.25s;
}
.about-contact-pill:hover {
  color: var(--accent);
  border-color: rgba(184,255,0,0.3);
  background: var(--accent-dim);
}
.about-stats-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.about-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  transition: border-color 0.25s, background 0.25s;
}
.about-stat-card:hover {
  border-color: rgba(184,255,0,0.2);
  background: var(--surface-hover);
}
.about-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.about-stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.about-stat-sub {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 3rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  .about-text-col {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .about-body {
    max-width: 100%;
  }
  .about-stats-col {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
  }
  .about-contact-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .about-contact-pill {
    width: fit-content;
  }
  .about-stat-num {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .about-stats-col {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  .about-stat-card {
    padding: 1rem 0.9rem;
  }
  .about-stat-num {
    font-size: 1.5rem;
  }
  .about-stat-sub {
    font-size: 0.65rem;
  }
}

/* ── MOBILE PERFORMANCE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  #particle-canvas { display: none !important; }
  #cursor-trail { display: none !important; }
  .bento-card { will-change: auto; }
  .hc-main { transform-style: flat; }
  .hc-main:hover { transform: none; }
}

/* ── GREEK TYPOGRAPHY FIX ───────────────────────────────────────────── */
:lang(el) .hero-title { font-size: clamp(2.2rem, 4.8vw, 5.2rem); letter-spacing: -0.01em; }
:lang(el) .about-inner .sec-title { font-size: clamp(1.8rem, 3.6vw, 3.8rem) !important; }
:lang(el) .sec-title        { letter-spacing: -0.02em; }
:lang(el) .footer-cta-text  { font-size: clamp(2rem, 4.5vw, 3.8rem); letter-spacing: -0.03em; }
:lang(el) .pcard h3         { letter-spacing: -0.02em; }
:lang(el) .pprice           { letter-spacing: -0.03em; }
:lang(el) .bento-info h3    { letter-spacing: -0.015em; }
:lang(el) .about-stat-num   { letter-spacing: -0.02em; }
:lang(el) .lb-title         { letter-spacing: -0.02em; }
:lang(el) .faq-q            { letter-spacing: -0.01em; }