:root {--pink:#FF3E9D;--pink-cta:#D91678;--pink-light:#FF79C1;--pink-pale:#FFD6ED;--hot-pink:#FF007F;--magenta:#E8009A;--yellow:#FFE247;--cyan:#00F5D4;--bg-primary:#0D0D0D;--bg-secondary:#1A0D14;--bg-card:#1E0A18;--text-primary:#FFFFFF;--text-secondary:rgba(255,255,255,0.7);--text-muted:rgba(255,255,255,0.68);--border-color:rgba(255,62,157,0.12);--border-hover:rgba(255,62,157,0.4);--nav-scrolled:rgba(13,13,13,0.88);--card-hover-shadow:0 20px 60px rgba(255,62,157,0.15);--gray:#C4A0B0;--font-display:'Playfair Display',Georgia,serif;--font-mono:'Space Mono',monospace;--font-ui:'Syne',sans-serif;--radius:20px;--radius-sm:12px;--transition:0.35s cubic-bezier(0.4,0,0.2,1);} [data-theme="light"] {--bg-primary:#FAF5F8;--bg-secondary:#F2E8F0;--bg-card:#FFFFFF;--text-primary:#1A0D14;--text-secondary:rgba(26,13,20,0.72);--text-muted:rgba(26,13,20,0.65);--border-color:rgba(255,62,157,0.18);--border-hover:rgba(255,62,157,0.55);--nav-scrolled:rgba(250,245,248,0.92);--card-hover-shadow:0 20px 60px rgba(255,62,157,0.12);--gray:#6D4B5C;--pink:#B3127C;--pink-cta:#B3127C;--pink-light:#C21885;} *,*::before,*::after {box-sizing:border-box;margin:0;padding:0;} html {scroll-behavior:smooth;font-size:16px;overflow-x:hidden;} body {font-family:var(--font-ui);background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;transition:background-color 0.4s ease,color 0.4s ease;} @media (max-width:768px) {body {cursor:auto;} .cursor,.cursor-trail {display:none;} } ::selection {background:var(--pink);color:#ffffff;} a {color:inherit;text-decoration:none;} ul {list-style:none;} img {max-width:100%;display:block;} .noise-overlay {position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px;} [data-theme="light"] .noise-overlay {opacity:0.02;} .cursor {position:fixed;top:0;left:0;width:16px;height:16px;background:var(--pink);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);mix-blend-mode:difference;} .cursor-trail {position:fixed;top:0;left:0;width:40px;height:40px;border:2px solid var(--pink);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:0.5;} .cursor.big {transform:translate(-50%,-50%) scale(2);} .container {max-width:1200px;margin:0 auto;padding:0 24px;} .ia-highlight,.logo-ia,.ia-s {color:var(--pink);font-style:normal;} .nav {position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;transition:background var(--transition),backdrop-filter var(--transition);} .nav.scrolled {background:var(--nav-scrolled);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);box-shadow:0 4px 30px rgba(0,0,0,0.08);} .nav-logo {font-family:var(--font-display);font-size:1.5rem;font-weight:900;letter-spacing:-0.02em;} .logo-ia {background:linear-gradient(135deg,var(--pink),var(--yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .nav-links {display:flex;align-items:center;gap:28px;} .nav-link {font-size:0.83rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-secondary);transition:color var(--transition);position:relative;} .nav-link::after {content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--pink);transition:width var(--transition);} .nav-link:hover::after {width:100%;} .nav-link:hover {color:var(--text-primary);} .nav-cta {background:var(--pink-cta);color:#ffffff !important;padding:10px 22px;border-radius:100px;font-size:0.82rem;letter-spacing:0.05em;transition:transform var(--transition),box-shadow var(--transition);} .nav-cta:hover {transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,62,157,0.5);} .nav-cta::after {display:none;} .nav-controls {display:flex;align-items:center;gap:12px;} .lang-toggle {display:flex;align-items:center;gap:4px;background:var(--border-color);border:1px solid var(--border-color);border-radius:100px;padding:7px 14px;font-family:var(--font-mono);font-size:0.72rem;font-weight:700;letter-spacing:0.08em;color:var(--text-primary);cursor:pointer;transition:background-color var(--transition),border-color var(--transition),color var(--transition);white-space:nowrap;} .lang-toggle:hover {border-color:var(--pink);color:var(--pink);background:rgba(255,62,157,0.08);} .lang-option {transition:opacity var(--transition);} .lang-inactive {opacity:0.4;} .lang-sep {opacity:0.4;margin:0 2px;} .theme-toggle {width:38px;height:38px;border-radius:50%;background:var(--border-color);border:1px solid var(--border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--transition),border-color var(--transition),transform var(--transition);font-size:1rem;position:relative;overflow:hidden;} .theme-toggle:hover {border-color:var(--pink);background:rgba(255,62,157,0.1);transform:rotate(20deg);} .theme-icon {position:absolute;transition:opacity 0.3s,transform 0.3s;} [data-theme="dark"] .theme-icon-dark {opacity:1;transform:scale(1);} [data-theme="dark"] .theme-icon-light {opacity:0;transform:scale(0);} [data-theme="light"] .theme-icon-dark {opacity:0;transform:scale(0);} [data-theme="light"] .theme-icon-light {opacity:1;transform:scale(1);} .burger {display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;} .burger span {display:block;width:24px;height:2px;background:var(--text-primary);border-radius:2px;transition:var(--transition);} .burger.active span:nth-child(1) {transform:translateY(7px) rotate(45deg);} .burger.active span:nth-child(2) {opacity:0;} .burger.active span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);} .mobile-menu {position:fixed;inset:0;background:var(--bg-secondary);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;transform:translateY(-100%);transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);} .mobile-menu.open {transform:translateY(0);} .mobile-link {font-family:var(--font-display);font-size:2.4rem;font-weight:700;color:var(--text-primary);transition:color var(--transition);} .mobile-link:hover {color:var(--pink);} .mobile-controls {display:flex;gap:16px;align-items:center;margin-top:8px;} .mobile-lang {padding:10px 20px;font-size:0.8rem;} .mobile-theme {width:44px;height:44px;} .hero {min-height:100vh;display:flex;align-items:center;position:relative;padding:100px 40px 60px;overflow:hidden;} [data-theme="dark"] .hero {background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(255,62,157,0.12) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(255,226,71,0.05) 0%,transparent 60%),var(--bg-primary);} [data-theme="light"] .hero {background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(255,62,157,0.08) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(255,226,71,0.04) 0%,transparent 60%),var(--bg-primary);} .hero-bg-elements {position:absolute;inset:0;pointer-events:none;overflow:hidden;} .floating-shape {position:absolute;border-radius:50%;animation:floatAnim 8s ease-in-out infinite;} .shape-1 {width:500px;height:500px;background:radial-gradient(circle,rgba(255,62,157,0.12) 0%,transparent 70%);top:-100px;right:-100px;animation-delay:0s;} .shape-2 {width:300px;height:300px;background:radial-gradient(circle,rgba(255,226,71,0.08) 0%,transparent 70%);bottom:100px;left:50px;animation-delay:-3s;} .shape-3 {width:200px;height:200px;background:radial-gradient(circle,rgba(0,245,212,0.06) 0%,transparent 70%);top:200px;right:300px;animation-delay:-6s;} .shape-4 {width:150px;height:150px;background:radial-gradient(circle,rgba(255,62,157,0.1) 0%,transparent 70%);bottom:200px;right:200px;animation-delay:-2s;} @keyframes floatAnim {0%,100% {transform:translateY(0) scale(1);} 50% {transform:translateY(-30px) scale(1.05);} } .pixel-grid {position:absolute;top:-60px;left:-60px;width:calc(100% + 120px);height:calc(100% + 120px);background-image:linear-gradient(rgba(255,62,157,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,62,157,0.07) 1px,transparent 1px);background-size:60px 60px;animation:gridDrift 18s linear infinite;will-change:transform;} @keyframes gridDrift {from {transform:translate3d(0,0,0);} to {transform:translate3d(60px,60px,0);} } .hero-content {flex:1;max-width:580px;position:relative;z-index:2;animation:fadeInUp 0.7s ease both;} .hero-badge {display:inline-flex;align-items:center;gap:8px;background:rgba(255,62,157,0.1);border:1px solid rgba(255,62,157,0.3);padding:8px 16px;border-radius:100px;font-size:0.8rem;font-weight:600;letter-spacing:0.05em;margin-bottom:28px;color:var(--pink-light);} .badge-dot {width:8px;height:8px;background:#00FF88;border-radius:50%;animation:pulse 2s ease infinite;} @keyframes pulse {0%,100% {opacity:1;transform:scale(1);} 50% {opacity:0.5;transform:scale(1.4);} } .hero-title {font-family:var(--font-display);font-weight:900;line-height:1;letter-spacing:-0.03em;margin-bottom:16px;} .title-line {display:block;animation:slideInLeft 0.6s ease both;} .line-1 {font-size:clamp(3rem,8vw,6rem);animation-delay:0.05s;} .line-2 {font-size:clamp(2.5rem,7vw,5.5rem);animation-delay:0.15s;} .line-2 em {font-style:italic;color:var(--pink);} .line-3 {font-size:clamp(3rem,8vw,5rem);animation-delay:0.25s;color:var(--pink);} .title-dot {color:var(--yellow);} @keyframes slideInLeft {from {transform:translateX(-60px);} to {transform:translateX(0);} } .hero-name {font-family:var(--font-mono);font-size:0.9rem;letter-spacing:0.12em;color:var(--gray);text-transform:uppercase;margin-bottom:20px;animation:fadeInUp 0.7s ease 0.35s both;} .hero-subtitle {font-size:1.1rem;color:var(--text-secondary);margin-bottom:36px;min-height:30px;animation:fadeInUp 0.7s ease 0.45s both;} .cursor-blink {animation:blink 1s step-end infinite;color:var(--pink);} @keyframes blink {0%,100% {opacity:1;} 50% {opacity:0;} } .hero-stats {display:flex;align-items:center;gap:24px;margin-bottom:40px;animation:fadeInUp 0.7s ease 0.6s both;} .stat-item {text-align:center;} .stat-number {display:block;font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--pink);line-height:1;} .stat-label {font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--gray);margin-top:4px;} .stat-divider {width:1px;height:40px;background:rgba(255,62,157,0.2);} .hero-actions {display:flex;gap:16px;flex-wrap:wrap;animation:fadeInUp 0.7s ease 0.75s both;} .btn {display:inline-flex;align-items:center;padding:14px 28px;border-radius:100px;font-family:var(--font-ui);font-weight:700;font-size:0.9rem;letter-spacing:0.04em;transition:transform var(--transition),box-shadow var(--transition);cursor:pointer;border:none;} .btn:hover {transform:translateY(-3px);} .btn-primary {background:var(--pink-cta);color:#ffffff;box-shadow:0 4px 20px rgba(255,62,157,0.4);} .btn-primary:hover {box-shadow:0 8px 40px rgba(255,62,157,0.6);} .btn-secondary {background:transparent;color:var(--text-primary);border:2px solid rgba(255,62,157,0.3);} .btn-secondary:hover {border-color:var(--pink);color:var(--pink);box-shadow:0 4px 20px rgba(255,62,157,0.2);} .btn-block {width:100%;justify-content:center;} .hero-visual {flex:0 0 420px;position:relative;z-index:2;animation:heroVisualIn 0.7s ease-out;display:flex;align-items:center;justify-content:center;} @keyframes heroVisualIn {from {transform:translateX(30px);} to {transform:translateX(0);} } @keyframes fadeInUp {from {opacity:0;transform:translateY(30px);} to {opacity:1;transform:translateY(0);} } .hero-photo-wrap {position:relative;width:340px;height:380px;} .photo-ring {position:absolute;border-radius:50%;border:2px solid rgba(255,62,157,0.3);animation:spinRing 20s linear infinite;will-change:transform;} .ring-1 {width:380px;height:380px;top:-20px;left:-20px;border-style:dashed;} .ring-2 {width:420px;height:420px;top:-40px;left:-40px;animation-direction:reverse;animation-duration:30s;opacity:0.4;} @keyframes spinRing {from {transform:rotate(0);} to {transform:rotate(360deg);} } .photo-container {position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;border:3px solid rgba(255,62,157,0.4);box-shadow:0 0 60px rgba(255,62,157,0.25),0 0 120px rgba(255,62,157,0.1);} .hero-photo {width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(1.1);} .photo-overlay-tag {position:absolute;background:rgba(13,13,13,0.85);backdrop-filter:blur(10px);border:1px solid rgba(255,62,157,0.3);padding:8px 14px;border-radius:100px;font-size:0.75rem;font-weight:700;white-space:nowrap;animation:tagFloat 3s ease-in-out infinite;color:#fff;} .tag-1 {top:16px;left:16px;animation-delay:0s;} .tag-2 {top:16px;right:16px;animation-delay:-1.5s;} .tag-3 {top:64px;left:16px;animation-delay:-3s;} @keyframes tagFloat {0%,100% {transform:translateY(0);} 50% {transform:translateY(-8px);} } .deco-monitor {position:absolute;bottom:-20px;right:-40px;width:100px;} .monitor-screen {background:var(--bg-card);border:2px solid var(--pink);border-radius:8px;padding:10px 12px;box-shadow:0 0 20px rgba(255,62,157,0.3);} .screen-line {height:3px;background:var(--pink);border-radius:2px;margin-bottom:5px;opacity:0.6;animation:screenBlink 2s ease infinite;} .screen-line:nth-child(2) {width:70%;animation-delay:0.3s;} .screen-line:nth-child(3) {width:85%;animation-delay:0.6s;} .screen-bar {height:20px;background:linear-gradient(90deg,var(--pink),var(--yellow));border-radius:3px;margin-top:8px;opacity:0.4;animation:barGrow 3s ease infinite;} @keyframes screenBlink {0%,100% {opacity:0.6;} 50% {opacity:1;} } @keyframes barGrow {0%,100% {transform:scaleX(0.6);transform-origin:left;} 50% {transform:scaleX(1);} } .monitor-stand {width:30px;height:12px;background:var(--bg-card);border:2px solid rgba(255,62,157,0.3);border-top:none;border-radius:0 0 6px 6px;margin:0 auto;} .scroll-hint {position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray);animation:fadeInUp 0.7s ease 1s both;} .scroll-line {width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--pink));animation:scrollLineAnim 2s ease infinite;} @keyframes scrollLineAnim {0% {transform:scaleY(0);} 50% {transform:scaleY(1);} 100% {transform:scaleY(0);} } .section-header {margin-bottom:60px;} .section-tag {display:inline-block;font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;} .section-title {font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:-0.03em;line-height:1.1;color:var(--text-primary);} .about {padding:100px 0;background:linear-gradient(to bottom,var(--bg-primary),var(--bg-secondary));} .interactive-game {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;} .about-intro {font-size:1.1rem;line-height:1.7;color:var(--text-secondary);margin-bottom:20px;} .about-intro strong {color:var(--text-primary);} .about-text {font-size:1rem;line-height:1.7;color:var(--text-muted);margin-bottom:32px;} .game-instructions {display:flex;align-items:center;gap:12px;background:rgba(255,62,157,0.06);border:1px solid rgba(255,62,157,0.2);border-radius:12px;padding:14px 18px;margin-bottom:28px;font-size:0.9rem;color:var(--text-secondary);} .game-icon {font-size:1.5rem;} .skill-detail-panel {background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:24px;min-height:130px;transition:var(--transition);} .sdp-inner {display:flex;flex-direction:column;gap:8px;} .sdp-emoji {font-size:1.8rem;} .sdp-inner h3 {font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-primary);} .sdp-inner p {font-size:0.85rem;color:var(--text-muted);} .sdp-bar-wrap {height:4px;background:rgba(255,255,255,0.1);border-radius:2px;margin-top:8px;overflow:hidden;} [data-theme="light"] .sdp-bar-wrap {background:rgba(0,0,0,0.08);} .sdp-bar {height:100%;background:var(--pink);border-radius:2px;transition:width 0.8s cubic-bezier(0.4,0,0.2,1);} .skill-solar-system {position:relative;width:420px;height:420px;margin:0 auto;} .sun {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:radial-gradient(circle,var(--pink) 0%,var(--hot-pink) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.75rem;font-weight:900;text-align:center;line-height:1.2;color:#fff;box-shadow:0 0 40px rgba(255,62,157,0.6),0 0 80px rgba(255,62,157,0.3);z-index:10;} .sun .ia-s {color:var(--yellow);} .sun::after {content:'';position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,62,157,0.55) 0%,rgba(255,62,157,0) 70%);z-index:-1;pointer-events:none;animation:sunPulse 3s ease infinite;will-change:transform,opacity;} @keyframes sunPulse {0%,100% {opacity:0.5;transform:scale(1);} 50% {opacity:1;transform:scale(1.18);} } .orbit {position:absolute;top:50%;left:50%;border:1px dashed rgba(255,62,157,0.15);border-radius:50%;transform:translate(-50%,-50%);animation:orbitSpin linear infinite;pointer-events:none;} .planet {position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:var(--bg-card);border:2px solid rgba(255,62,157,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;animation:counterSpin linear infinite;z-index:5;pointer-events:auto;} .planet:hover,.planet.active {border-color:var(--pink);box-shadow:0 0 20px rgba(255,62,157,0.5);transform:translate(-50%,-50%) scale(1.2);} @keyframes orbitSpin {from {transform:translate(-50%,-50%) rotate(var(--a0,0deg));} to {transform:translate(-50%,-50%) rotate(calc(var(--a0,0deg) + 360deg));} } @keyframes counterSpin {from {transform:translate(-50%,-50%) rotate(0deg);} to {transform:translate(-50%,-50%) rotate(-360deg);} } .skills {padding:100px 0;background:var(--bg-secondary);} .skills-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:60px;} .skill-card {background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:28px 24px;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);position:relative;overflow:hidden;} .skill-card::before {content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pink),transparent);opacity:0;transition:opacity var(--transition);} .skill-card:hover {transform:translateY(-6px);border-color:var(--border-hover);box-shadow:var(--card-hover-shadow);} .skill-card:hover::before {opacity:1;} .skill-card-icon {font-size:2rem;margin-bottom:14px;} .skill-card h3 {font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:8px;color:var(--text-primary);} .skill-card p {font-size:0.82rem;line-height:1.6;color:var(--text-muted);margin-bottom:14px;} .skill-tags {display:flex;flex-wrap:wrap;gap:6px;} .skill-tags span {background:rgba(255,62,157,0.08);border:1px solid rgba(255,62,157,0.2);color:var(--pink-light);padding:3px 10px;border-radius:100px;font-size:0.7rem;font-weight:600;font-family:var(--font-mono);} .languages-section {background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:36px;} .lang-title {font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:28px;color:var(--text-primary);} .lang-bars {display:flex;flex-direction:column;gap:20px;} .lang-info {display:flex;justify-content:space-between;font-size:0.85rem;font-weight:600;margin-bottom:8px;color:var(--text-secondary);} .lang-bar-bg {height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;} [data-theme="light"] .lang-bar-bg {background:rgba(0,0,0,0.08);} .lang-bar-fill {height:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));border-radius:3px;width:0;transition:width 1.5s cubic-bezier(0.4,0,0.2,1);} .experience {padding:100px 0;background:var(--bg-primary);} .timeline {position:relative;padding-left:40px;} .timeline::before {content:'';position:absolute;left:16px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--pink),rgba(255,62,157,0.1));} .timeline-item {position:relative;margin-bottom:48px;opacity:0;transform:translateX(-20px);transition:opacity 0.6s ease,transform 0.6s ease;} .timeline-item.visible {opacity:1;transform:translateX(0);} .timeline-dot {position:absolute;left:-32px;top:24px;width:32px;height:32px;background:var(--bg-card);border:2px solid var(--pink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;box-shadow:0 0 15px rgba(255,62,157,0.3);} .timeline-card {background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:28px 32px;transition:border-color var(--transition),box-shadow var(--transition);} .timeline-card:hover {border-color:var(--border-hover);box-shadow:var(--card-hover-shadow);} .tc-header {display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:16px;flex-wrap:wrap;} .tc-badge {display:inline-block;font-family:var(--font-mono);font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--pink);background:rgba(255,62,157,0.1);padding:4px 10px;border-radius:100px;margin-bottom:6px;} .tc-badge.current {background:rgba(0,255,136,0.1);color:#00CC66;} [data-theme="light"] .tc-badge.current {color:#00885A;} .tc-header h3 {font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:4px;color:var(--text-primary);} .tc-company {font-size:0.82rem;color:var(--text-muted);font-weight:600;} .tc-type {font-family:var(--font-mono);font-size:0.7rem;font-weight:700;letter-spacing:0.1em;color:var(--gray);white-space:nowrap;} .tc-bullets {margin:0 0 16px 0;padding-left:16px;border-left:2px solid rgba(255,62,157,0.2);} .tc-bullets li {font-size:0.87rem;line-height:1.6;color:var(--text-muted);margin-bottom:8px;list-style:disc;list-style-position:inside;} .tc-bullets li:last-child {margin-bottom:0;} .tc-bullets strong {color:var(--text-primary);} .tc-tags {display:flex;flex-wrap:wrap;gap:6px;} .tc-tags span {background:rgba(255,62,157,0.06);border:1px solid rgba(255,62,157,0.15);color:var(--text-muted);padding:3px 10px;border-radius:100px;font-size:0.7rem;font-family:var(--font-mono);} .projects {padding:100px 0;background:var(--bg-secondary);} .projects-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} .blog-preview {padding:100px 0;background:var(--bg-primary);border-bottom:1px solid var(--border-color);} .blog-header {display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px;} .blog-view-all {display:inline-flex;align-items:center;gap:8px;font-size:0.86rem;font-weight:700;color:var(--pink);padding:12px 22px;border-radius:100px;border:1px solid var(--border-color);background:var(--bg-card);transition:border-color 0.3s,transform 0.3s;} .blog-view-all:hover {border-color:var(--pink);transform:translateY(-2px);box-shadow:var(--card-hover-shadow);} .blog-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .blog-card {display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-color);border-radius:18px;overflow:hidden;transition:transform 0.35s var(--transition),box-shadow 0.35s var(--transition),border-color 0.35s;} .blog-card:hover {transform:translateY(-6px);box-shadow:var(--card-hover-shadow);border-color:var(--pink);} .blog-card-media {position:relative;aspect-ratio:16/9;overflow:hidden;} .blog-card-media img {width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;} .blog-card:hover .blog-card-media img {transform:scale(1.05);} .blog-card-body {padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;} .blog-card-meta {display:flex;align-items:center;justify-content:space-between;gap:10px;} .blog-card-cat {font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--pink);font-weight:700;} .blog-card-meta time {font-family:var(--font-mono);font-size:0.66rem;color:var(--text-muted);} .blog-card-title {font-family:var(--font-display);font-size:1.08rem;line-height:1.35;color:var(--text-primary);} .blog-card:hover .blog-card-title {color:var(--pink);} .project-card {background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:32px;position:relative;overflow:hidden;transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);cursor:pointer;} .project-card.pc-featured {border-color:rgba(255,62,157,0.3);background:linear-gradient(135deg,rgba(255,62,157,0.06) 0%,var(--bg-card) 100%);} .project-card.pc-wide {grid-column:1 / -1;} .project-card:hover {transform:translateY(-8px);border-color:rgba(255,62,157,0.5);box-shadow:0 24px 60px rgba(255,62,157,0.18);} .pc-hover-glow {position:absolute;inset:0;background:radial-gradient(ellipse at var(--mx,50%) var(--my,50%),rgba(255,62,157,0.07) 0%,transparent 60%);opacity:0;transition:opacity 0.3s;pointer-events:none;} .project-card:hover .pc-hover-glow {opacity:1;} .pc-emoji {font-size:2.2rem;margin-bottom:12px;} .pc-sector {font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--pink);margin-bottom:10px;display:block;} .pc-content h3 {font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:12px;line-height:1.3;color:var(--text-primary);} .pc-content p {font-size:0.85rem;line-height:1.6;color:var(--text-muted);margin-bottom:20px;} .pc-results {display:flex;gap:20px;flex-wrap:wrap;margin-bottom:16px;} .pc-result {display:flex;flex-direction:column;} .pc-result strong {font-family:var(--font-display);font-size:1.4rem;font-weight:900;color:var(--pink);line-height:1;} .pc-result span {font-size:0.7rem;color:var(--gray);margin-top:2px;font-weight:600;} .pc-tags {display:flex;flex-wrap:wrap;gap:6px;} .pc-tags span {background:rgba(255,62,157,0.08);border:1px solid rgba(255,62,157,0.2);color:var(--pink-light);padding:3px 10px;border-radius:100px;font-size:0.7rem;font-family:var(--font-mono);font-weight:600;} .education {padding:100px 0;background:var(--bg-primary);} .edu-wrap {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;} .edu-card {display:flex;align-items:flex-start;gap:20px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:28px;margin-bottom:16px;transition:border-color var(--transition);} .edu-card:hover {border-color:var(--border-hover);} .edu-icon {font-size:2rem;flex-shrink:0;} .edu-card h3 {font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:4px;color:var(--text-primary);} .edu-sub {display:block;font-size:0.85rem;color:var(--pink);font-weight:600;margin-bottom:4px;} .edu-school {font-size:0.8rem;color:var(--gray);font-family:var(--font-mono);} .markets-globe {background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:36px;} .markets-globe h3 {font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:24px;color:var(--text-primary);} .market-flags {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px;} .market-flag {background:rgba(255,62,157,0.05);border:1px solid rgba(255,62,157,0.15);border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:2rem;transition:border-color var(--transition),transform var(--transition);} .market-flag:hover {border-color:rgba(255,62,157,0.4);transform:scale(1.05);} .market-flag span {font-size:0.8rem;font-weight:700;letter-spacing:0.05em;color:var(--text-secondary);} .market-sectors {display:flex;flex-wrap:wrap;gap:8px;} .market-sectors span {background:rgba(255,62,157,0.07);border:1px solid rgba(255,62,157,0.2);color:var(--pink-light);padding:5px 12px;border-radius:100px;font-size:0.75rem;font-weight:600;} .contact {padding:120px 0;background:var(--bg-secondary);position:relative;overflow:hidden;} .contact::before {content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(255,62,157,0.08) 0%,transparent 70%);pointer-events:none;} .contact-wrap {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;} .contact-title {font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:900;letter-spacing:-0.03em;line-height:1.1;margin-bottom:20px;color:var(--text-primary);} .contact-sub {font-size:1rem;color:var(--text-muted);margin-bottom:36px;line-height:1.6;} .contact-links {display:flex;flex-direction:column;gap:14px;} .contact-link {display:flex;align-items:center;gap:12px;font-size:0.9rem;font-weight:600;color:var(--text-secondary);transition:color var(--transition);} .contact-link:hover {color:var(--pink);} .cl-icon {font-size:1.2rem;} .calendly-card {background:var(--bg-card);border:1px solid rgba(255,62,157,0.25);border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px rgba(255,62,157,0.12);} .cc-top {background:rgba(255,62,157,0.05);padding:14px 20px;display:flex;gap:8px;border-bottom:1px solid rgba(255,62,157,0.1);} .cc-dot {width:12px;height:12px;border-radius:50%;} .cc-dot-pink {background:var(--pink);} .cc-dot-yellow {background:var(--yellow);} .cc-dot-green {background:#00FF88;} .cc-body {padding:40px 36px;text-align:center;} .cc-icon {font-size:3rem;margin-bottom:16px;} .cc-body h3 {font-family:var(--font-display);font-size:1.8rem;font-weight:900;margin-bottom:12px;color:var(--text-primary);} .cc-body p {font-size:0.9rem;color:var(--text-muted);margin-bottom:28px;line-height:1.5;} .cc-note {font-size:0.75rem !important;margin-top:14px !important;margin-bottom:0 !important;color:var(--gray) !important;font-family:var(--font-mono);letter-spacing:0.05em;} .tally-block {margin:0;max-width:100%;text-align:center;padding:42px 32px 30px;border:1px solid var(--border-color);border-radius:28px;background:linear-gradient(180deg,rgba(255,62,157,0.06),rgba(255,62,157,0));align-self:center;} .tally-block-title {font-size:clamp(1.4rem,3vw,1.9rem);color:var(--text-primary);margin-bottom:10px;letter-spacing:-0.01em;} .tally-block-sub {color:var(--gray);margin-bottom:26px;font-size:0.95rem;line-height:1.5;max-width:520px;margin-left:auto;margin-right:auto;} .tally-cta-actions {display:flex;flex-direction:column;gap:12px;max-width:360px;margin:0 auto;} .tally-cta-actions .btn-block {width:100%;} @media (min-width:600px) {.tally-cta-actions {flex-direction:row;max-width:480px;} .tally-cta-actions .btn {flex:1;} } @media (max-width:480px) {.tally-block {padding:30px 18px 20px;} } .footer {background:var(--bg-primary);border-top:1px solid var(--border-color);padding:40px 0;} .footer-inner {text-align:center;} .footer-logo {font-family:var(--font-display);font-size:1.5rem;font-weight:900;margin-bottom:8px;color:var(--text-primary);} .footer-tagline {font-size:0.82rem;color:var(--gray);margin-bottom:20px;font-family:var(--font-mono);} .footer-links {display:flex;justify-content:center;gap:24px;margin-bottom:20px;} .footer-links a {font-size:0.82rem;font-weight:600;color:var(--text-muted);transition:color var(--transition);} .footer-links a:hover {color:var(--pink);} .footer-copy {font-size:0.75rem;color:var(--text-muted);font-family:var(--font-mono);} .reveal {opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease;} .reveal.visible {opacity:1;transform:translateY(0);} .trusted-by,.about,.skills,.experience,.projects,.blog-preview,.education,.contact,.footer {content-visibility:auto;contain-intrinsic-size:auto 900px;} @media (prefers-reduced-motion:reduce) {.floating-shape,.photo-ring,.badge-dot,.cursor-blink,.scroll-line,.sun::after,.fab-badge,.trusted-track,.screen-line,.photo-overlay-tag,.scroll-hint,.orbit,.planet,.pixel-grid {animation:none !important;} [data-theme="dark"] .hero,[data-theme="light"] .hero {background-color:var(--bg-primary);} } @media (max-width:1024px) {.hero {flex-direction:column;padding:120px 24px 80px;text-align:center;} .hero-content {max-width:100%;} .hero-stats {justify-content:center;} .hero-actions {justify-content:center;} .hero-visual {flex:none;} .hero-photo-wrap {width:280px;height:320px;} .ring-1 {width:320px;height:320px;} .ring-2 {width:360px;height:360px;} .interactive-game {grid-template-columns:1fr;} .skill-solar-system {width:340px;height:340px;} .skills-grid {grid-template-columns:repeat(2,1fr);} .projects-grid {grid-template-columns:repeat(2,1fr);} .blog-grid {grid-template-columns:repeat(2,1fr);} .pc-wide {grid-column:1;} .edu-wrap {grid-template-columns:1fr;} .contact-wrap {grid-template-columns:1fr;} } @media (max-width:768px) {.nav {padding:14px 20px;} .nav-links {display:none;} .theme-toggle.nav-theme {display:none;} .burger {display:flex;} .blog-header {flex-direction:column;align-items:flex-start;} .blog-grid {grid-template-columns:1fr;} .hero {padding:100px 20px 60px;} .line-1 {font-size:2.8rem;} .line-2 {font-size:2.5rem;} .line-3 {font-size:3rem;} .hero-stats {gap:16px;} .stat-number {font-size:1.3rem;} .skills-grid {grid-template-columns:1fr;} .timeline {padding-left:28px;} .timeline-dot {left:-24px;width:26px;height:26px;} .timeline-card {padding:20px;} .tc-header {flex-direction:column;} .section-title {font-size:2rem;} .contact-title {font-size:2.5rem;} .photo-overlay-tag {display:none;} .deco-monitor {display:none;} .skill-solar-system {width:300px;height:300px;} .sun {width:60px;height:60px;font-size:0.6rem;} .cc-body {padding:28px 20px;} } @media (max-width:480px) {.nav {padding:12px 16px;} .hero-photo-wrap {width:240px;height:270px;} .ring-1 {width:280px;height:280px;} .ring-2 {display:none;} .hero-stats {flex-wrap:wrap;justify-content:center;gap:12px;} .stat-divider {display:none;} .projects-grid {gap:14px;} .project-card {padding:22px;} .mobile-link {font-size:2rem;} } .trusted-by{padding:44px 0 50px;border-bottom:1px solid var(--border-color);overflow:hidden;} .trusted-by-label{text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:28px;} .trusted-marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .trusted-track{display:flex;align-items:center;gap:14px;width:max-content;animation:trustedScroll 38s linear infinite;will-change:transform;} .trusted-marquee:hover .trusted-track{animation-play-state:paused;} @keyframes trustedScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .trusted-logo{flex:0 0 auto;padding:14px 26px;border:1px solid var(--border-color);border-radius:100px;background:var(--bg-card);transition:all .35s var(--transition);} .trusted-logo span{font-family:var(--font-display);font-size:1.05rem;color:var(--text-secondary);white-space:nowrap;letter-spacing:.01em;} .trusted-logo:hover{border-color:var(--pink);transform:translateY(-3px);box-shadow:var(--card-hover-shadow);} .trusted-logo:hover span{color:var(--pink);} @media(max-width:600px){.trusted-logo{padding:10px 18px;} .trusted-logo span{font-size:.9rem;} } .pv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:5000;display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--transition),visibility 0s linear .4s;} .pv-overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--transition),visibility 0s;} .pv-modal{position:relative;width:100%;max-width:1160px;max-height:88vh;background:var(--bg-card);border:1px solid var(--border-color);border-radius:28px;display:grid;grid-template-columns:400px 1fr;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.55);transform:scale(.92) translateY(30px);opacity:0;transition:transform .5s cubic-bezier(.16,.84,.44,1),opacity .5s ease;} .pv-overlay.open .pv-modal{transform:scale(1) translateY(0);opacity:1;} .pv-close{position:absolute;top:18px;right:18px;z-index:30;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s,transform .3s;font-size:1.1rem;line-height:1;} .pv-close:hover{background:var(--pink);transform:rotate(90deg);} .pv-phone-stage{position:relative;background:radial-gradient(circle at 50% 25%,rgba(255,62,157,.22),transparent 60%),linear-gradient(160deg,#150a12,#0a0a0a);display:flex;align-items:center;justify-content:center;padding:50px 30px;perspective:1300px;overflow:hidden;} .pv-phone{position:relative;width:230px;height:468px;border-radius:38px;background:#0a0a0a;border:6px solid #1c1c1c;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transform:rotateY(-18deg) rotateX(4deg);transform-style:preserve-3d;animation:pvFloat 5s ease-in-out infinite;} @keyframes pvFloat{0%,100%{transform:rotateY(-18deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-13deg) rotateX(2deg) translateY(-10px)}} .pv-phone::before{content:'';position:absolute;top:13px;left:50%;transform:translateX(-50%);width:66px;height:16px;background:#0a0a0a;border-radius:12px;z-index:6;} .pv-phone-screen{position:absolute;inset:5px;border-radius:32px;overflow:hidden;background:#111;} .pv-slides{display:flex;height:100%;transition:transform .5s cubic-bezier(.16,.84,.44,1);touch-action:pan-y;} .pv-slide{min-width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px 24px;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--pv-c1,#2a0f24),var(--pv-c2,#0a0a0a));} .pv-slide::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 55%);} .pv-slide-icon{font-size:2.4rem;margin-bottom:16px;position:relative;z-index:1;} .pv-slide-kicker{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-bottom:10px;color:#fff;position:relative;z-index:1;} .pv-slide-title{font-family:var(--font-display);font-size:1.25rem;color:#fff;line-height:1.3;margin-bottom:10px;position:relative;z-index:1;} .pv-slide-text{font-size:.76rem;color:rgba(255,255,255,.72);line-height:1.6;position:relative;z-index:1;} .pv-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:10;} .pv-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .3s;cursor:pointer;} .pv-dots span.active{background:#fff;width:16px;border-radius:3px;} .pv-phone-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:15;opacity:0;transition:opacity .3s;} .pv-phone-stage:hover .pv-phone-nav{opacity:1;} .pv-phone-nav.prev{left:8px;} .pv-phone-nav.next{right:8px;} .pv-fullscreen-btn{position:absolute;bottom:10px;right:10px;width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:15;font-size:.75rem;} .pv-info{padding:48px 44px;overflow-y:auto;} .pv-info-eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:10px;} .pv-info h2{font-family:var(--font-display);font-size:1.9rem;color:var(--text-primary);margin-bottom:6px;line-height:1.2;} .pv-info-sector{font-size:.84rem;color:var(--text-muted);margin-bottom:26px;} .pv-block{margin-bottom:20px;} .pv-block h4{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;} .pv-block p{font-size:.9rem;color:var(--text-secondary);line-height:1.7;} .pv-list{list-style:none;display:flex;flex-direction:column;gap:6px;} .pv-list li{font-size:.88rem;color:var(--text-secondary);line-height:1.6;padding-left:16px;position:relative;} .pv-list li::before{content:'—';position:absolute;left:0;color:var(--pink);} .pv-chip-row{display:flex;flex-wrap:wrap;gap:8px;} .pv-chip-row span{font-size:.73rem;padding:6px 12px;border-radius:100px;border:1px solid var(--border-color);color:var(--text-secondary);} .pv-links{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;} .pv-links a{font-size:.8rem;font-weight:600;padding:10px 18px;border-radius:100px;background:var(--pink);color:#fff;display:inline-flex;align-items:center;gap:6px;transition:all .3s;} .pv-links a:hover{background:var(--hot-pink);transform:translateY(-2px);} .pv-links a.secondary{background:transparent;border:1px solid var(--border-color);color:var(--text-primary);} .pv-note{font-size:.72rem;color:var(--text-muted);margin-top:26px;padding-top:18px;border-top:1px dashed var(--border-color);line-height:1.6;} .pv-iframe-wrap{position:relative;width:100%;height:100%;overflow:hidden;background:#0a0a0a;} .pv-iframe-wrap iframe{width:100%;height:100%;border:0;transform:scale(1);transform-origin:top left;pointer-events:none;} .pv-scroll-badge{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:12;background:rgba(0,0,0,.55);color:#fff;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.15);} .pv-phone-stage.pv-is-website{padding:0;align-items:stretch;justify-content:stretch;height:min(72vh,780px);} .pv-phone-stage.pv-is-website .pv-phone{width:100%;height:100%;border:none;border-radius:0;background:#0a0a0a;box-shadow:none;transform:none;animation:none;} .pv-phone-stage.pv-is-website .pv-phone::before{display:none;} .pv-phone-stage.pv-is-website .pv-phone-screen{border-radius:0;inset:0;} .pv-phone-stage.pv-is-website .pv-iframe-wrap iframe{pointer-events:auto;} @media(max-width:860px){.pv-modal{grid-template-columns:1fr;max-height:92vh;overflow-y:auto;} .pv-phone-stage{padding:34px 20px;} .pv-phone{width:190px;height:388px;} .pv-info{padding:36px 26px;} .pv-phone-stage.pv-is-website{padding:0;height:56vh;min-height:340px;} .pv-phone-stage.pv-is-website .pv-phone{width:100%;height:100%;} } .pv-overlay.pv-fs{padding:0;} .pv-overlay.pv-fs .pv-modal{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;} [data-i18n] {transition:opacity 0.2s ease;} .lang-switching [data-i18n] {opacity:0;} .fab-cluster {position:fixed;bottom:28px;right:28px;z-index:5000;display:flex;flex-direction:column;align-items:flex-end;gap:14px;} .fab {position:relative;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s ease;text-decoration:none;animation:fabEntrance 0.6s cubic-bezier(0.34,1.56,0.64,1) both;} .fab:nth-child(1) {animation-delay:0.1s;} .fab:nth-child(2) {animation-delay:0.25s;} .fab:nth-child(3) {animation-delay:0.4s;} @keyframes fabEntrance {from {opacity:0;transform:scale(0) translateY(20px);} to {opacity:1;transform:scale(1) translateY(0);} } .fab:hover {transform:translateY(-5px) scale(1.08);} .fab-whatsapp {background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);box-shadow:0 6px 24px rgba(37,211,102,0.45);color:#fff;} .fab-whatsapp:hover {box-shadow:0 12px 36px rgba(37,211,102,0.6);} .fab-icon {width:26px;height:26px;fill:#fff;} .fab-form {background:linear-gradient(135deg,#FFB200 0%,#FF7A00 100%);box-shadow:0 6px 24px rgba(255,178,0,0.45);color:#fff;} .fab-form:hover {box-shadow:0 12px 36px rgba(255,178,0,0.6);} .fab-form-icon {font-size:1.35rem;line-height:1;} .fab-chatbot {background:linear-gradient(135deg,var(--pink) 0%,#9b59b6 100%);box-shadow:0 6px 24px rgba(255,62,157,0.5);overflow:hidden;padding:0;} .fab-chatbot:hover {box-shadow:0 12px 40px rgba(255,62,157,0.7);} .fab-avatar {width:100%;height:100%;object-fit:cover;border-radius:50%;} .fab-avatar-fallback {width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--pink),#9b59b6);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;} .fab-badge {position:absolute;top:0;right:0;width:20px;height:20px;background:var(--yellow);color:#1a0d14;border-radius:50%;font-family:var(--font-mono);font-size:0.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-primary);animation:badgePulse 2.5s ease infinite;transition:opacity 0.3s,transform 0.3s;} @keyframes badgePulse {0%,100% {transform:scale(1);} 50% {transform:scale(1.2);} } .fab-badge.hidden {opacity:0;transform:scale(0);pointer-events:none;} .fab-tooltip {position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:var(--bg-card);color:var(--text-primary);font-family:var(--font-ui);font-size:0.78rem;font-weight:600;white-space:nowrap;padding:7px 14px;border-radius:8px;border:1px solid var(--border-color);box-shadow:0 4px 20px rgba(0,0,0,0.2);opacity:0;pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease;transform:translateY(-50%) translateX(8px);} .fab-tooltip::after {content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right:none;border-left-color:var(--border-color);} .fab:hover .fab-tooltip {opacity:1;transform:translateY(-50%) translateX(0);} .chatbot-overlay {position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:5998;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.35s ease,visibility 0s linear 0.35s;} .chatbot-overlay.active {opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0.35s ease,visibility 0s;} .chatbot-modal {position:fixed;bottom:104px;right:28px;width:400px;max-width:calc(100vw - 32px);height:580px;max-height:calc(100vh - 140px);background:var(--bg-card);border:1px solid rgba(255,62,157,0.25);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;z-index:5999;box-shadow:0 32px 80px rgba(0,0,0,0.45),0 0 0 1px rgba(255,62,157,0.1),0 0 60px rgba(255,62,157,0.08);opacity:0;visibility:hidden;transform:translateY(30px) scale(0.94);pointer-events:none;transition:opacity 0.4s cubic-bezier(0.34,1.56,0.64,1),transform 0.4s cubic-bezier(0.34,1.56,0.64,1),visibility 0s linear 0.4s;transform-origin:bottom right;} .chatbot-modal.active {opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible;transition:opacity 0.4s cubic-bezier(0.34,1.56,0.64,1),transform 0.4s cubic-bezier(0.34,1.56,0.64,1),visibility 0s;} .cb-header {display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(135deg,rgba(255,62,157,0.12) 0%,rgba(155,89,182,0.08) 100%);border-bottom:1px solid rgba(255,62,157,0.15);flex-shrink:0;} .cb-header-left {display:flex;align-items:center;gap:12px;} .cb-avatar-wrap {position:relative;width:44px;height:44px;flex-shrink:0;} .cb-avatar {width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,62,157,0.5);box-shadow:0 0 16px rgba(255,62,157,0.35);} .cb-avatar-fallback {width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--pink),#9b59b6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:#fff;border:2px solid rgba(255,62,157,0.5);box-shadow:0 0 16px rgba(255,62,157,0.35);} .cb-status-dot {position:absolute;bottom:1px;right:1px;width:11px;height:11px;background:#00CC66;border-radius:50%;border:2px solid var(--bg-card);animation:pulse 2s ease infinite;} .cb-header-info {flex:1;min-width:0;} .cb-name {font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text-primary);margin:0;line-height:1.3;} .cb-status {font-family:var(--font-mono);font-size:0.68rem;color:var(--text-muted);margin:0;letter-spacing:0.04em;} .cb-header-actions {display:flex;align-items:center;gap:8px;} .cb-book-btn {width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background var(--transition),transform var(--transition);text-decoration:none;} .cb-book-btn:hover {background:rgba(255,62,157,0.2);transform:scale(1.1);} .cb-close-btn {width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--transition),border-color var(--transition),color var(--transition);flex-shrink:0;} .cb-close-btn:hover {background:rgba(255,62,157,0.15);border-color:rgba(255,62,157,0.3);color:var(--pink);transform:rotate(90deg);} .cb-close-btn svg {width:16px;height:16px;} .cb-messages {flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth;} .cb-messages::-webkit-scrollbar {width:4px;} .cb-messages::-webkit-scrollbar-track {background:transparent;} .cb-messages::-webkit-scrollbar-thumb {background:rgba(255,62,157,0.2);border-radius:10px;} .cb-messages::-webkit-scrollbar-thumb:hover {background:rgba(255,62,157,0.4);} .cb-msg {display:flex;gap:10px;animation:cbMsgIn 0.35s cubic-bezier(0.34,1.2,0.64,1) both;} @keyframes cbMsgIn {from {opacity:0;transform:translateY(12px);} to {opacity:1;transform:translateY(0);} } .cb-msg.user {justify-content:flex-end;} .cb-msg.bot {justify-content:flex-start;} .cb-msg-avatar {width:30px;height:30px;border-radius:50%;flex-shrink:0;overflow:hidden;border:1.5px solid rgba(255,62,157,0.4);box-shadow:0 0 10px rgba(255,62,157,0.25);margin-top:4px;background:linear-gradient(135deg,var(--pink),#9b59b6);} .cb-msg-avatar img {width:100%;height:100%;object-fit:cover;} .cb-msg-avatar-fallback {width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:#fff;font-family:var(--font-display);} .cb-bubble {max-width:82%;padding:12px 16px;border-radius:18px;font-size:0.875rem;line-height:1.65;word-break:break-word;} .cb-msg.user .cb-bubble {background:linear-gradient(135deg,var(--pink) 0%,#c0397b 100%);color:#fff;border-radius:18px 4px 18px 18px;box-shadow:0 4px 16px rgba(255,62,157,0.35);} .cb-msg.bot .cb-bubble {background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:4px 18px 18px 18px;box-shadow:0 4px 16px rgba(0,0,0,0.15);} [data-theme="light"] .cb-msg.bot .cb-bubble {background:#ffffff;border-color:rgba(255,62,157,0.15);} .cb-msg.bot .cb-bubble strong {color:var(--text-primary);font-weight:700;} .cb-msg.bot .cb-bubble a {color:var(--pink);text-decoration:underline;text-underline-offset:3px;transition:color 0.2s;} .cb-msg.bot .cb-bubble a:hover {color:var(--pink-light);} .cb-typing {display:flex;align-items:center;gap:5px;padding:14px 18px;} .cb-typing-dot {width:7px;height:7px;background:var(--gray);border-radius:50%;animation:cbTypingBounce 1.4s infinite ease-in-out both;} .cb-typing-dot:nth-child(1) {animation-delay:-0.32s;} .cb-typing-dot:nth-child(2) {animation-delay:-0.16s;} .cb-typing-dot:nth-child(3) {animation-delay:0s;} @keyframes cbTypingBounce {0%,80%,100% {transform:scale(0.6);opacity:0.4;} 40% {transform:scale(1);opacity:1;} } .cb-quick-prompts {display:flex;gap:7px;padding:0 14px 12px;overflow-x:auto;flex-shrink:0;scrollbar-width:none;} .cb-quick-prompts::-webkit-scrollbar {display:none;} .cb-chip {white-space:nowrap;padding:6px 14px;border-radius:100px;font-family:var(--font-mono);font-size:0.7rem;font-weight:600;background:transparent;border:1px solid rgba(255,62,157,0.3);color:var(--pink);cursor:pointer;transition:background-color var(--transition),color var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition);flex-shrink:0;} .cb-chip:hover {background:var(--pink);color:#fff;border-color:var(--pink);transform:translateY(-2px);box-shadow:0 4px 14px rgba(255,62,157,0.35);} .cb-chip:disabled {opacity:0.4;pointer-events:none;} .cb-input-area {padding:12px 14px 14px;border-top:1px solid var(--border-color);flex-shrink:0;background:var(--bg-card);} .cb-input-wrap {position:relative;display:flex;align-items:center;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:100px;transition:border-color var(--transition),box-shadow var(--transition);overflow:hidden;} .cb-input-wrap:focus-within {border-color:rgba(255,62,157,0.6);box-shadow:0 0 0 3px rgba(255,62,157,0.1);} .cb-input {flex:1;background:transparent;border:none;outline:none;padding:12px 18px;font-family:var(--font-ui);font-size:0.875rem;color:var(--text-primary);min-width:0;} .cb-input::placeholder {color:var(--text-muted);} .cb-input:disabled {opacity:0.6;} .cb-send-btn {width:40px;height:40px;border-radius:50%;background:var(--pink);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:4px;flex-shrink:0;transition:background-color var(--transition),transform var(--transition),box-shadow var(--transition);box-shadow:0 2px 10px rgba(255,62,157,0.4);} .cb-send-btn:hover {background:var(--hot-pink);transform:scale(1.08);box-shadow:0 4px 18px rgba(255,62,157,0.6);} .cb-send-btn:disabled {opacity:0.5;cursor:not-allowed;transform:none;} .cb-send-btn svg {margin-left:2px;} .cb-powered {text-align:center;font-family:var(--font-mono);font-size:0.62rem;color:var(--text-muted);margin-top:8px;letter-spacing:0.03em;} .cb-welcome {display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 16px;gap:10px;animation:cbMsgIn 0.5s ease both;} .cb-welcome-avatar {width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,62,157,0.4);box-shadow:0 0 30px rgba(255,62,157,0.25);margin-bottom:6px;} .cb-welcome-avatar-fallback {width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(255,62,157,0.2),rgba(155,89,182,0.2));display:flex;align-items:center;justify-content:center;font-size:2rem;border:3px solid rgba(255,62,157,0.3);margin-bottom:6px;} .cb-welcome h3 {font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text-primary);margin:0;} .cb-welcome p {font-size:0.8rem;color:var(--text-muted);max-width:260px;line-height:1.5;margin:0;} @media (max-width:480px) {.fab-cluster {bottom:18px;right:18px;gap:12px;} .fab {width:52px;height:52px;} .chatbot-modal {left:0;right:0;bottom:0;width:auto;max-width:none;height:92vh;max-height:92vh;border-radius:20px 20px 0 0;border-bottom:none;transform-origin:bottom center;} .fab-tooltip {display:none;} } .skip-link {position:fixed;top:-60px;left:16px;z-index:10001;padding:10px 18px;background:var(--pink);color:#ffffff;font-weight:700;font-size:0.85rem;border-radius:0 0 12px 12px;transition:top 0.2s ease;} .skip-link:focus {top:0;} .tally-backdrop {position:fixed;inset:0;z-index:9990;background:rgba(13,13,13,0.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity 0.18s ease;cursor:default;} [data-theme="light"] .tally-backdrop {background:rgba(245,242,248,0.6);} .tally-backdrop.show {opacity:1;}