:root{ --black:#000000; --navy:#00183D; --navy-soft:#051d3f; --blue:#1E5BFF; --blue-soft:#4d7bff; --purple:#7A3CFF; --teal:#00D1B2; --orange:#FF9A3C; --white:#FFFFFF; --bg:#050608; --bg-alt:#0a0d14; --card:#0d1017; --card-border:rgba(255,255,255,0.08); --card-border-hover:rgba(30,91,255,0.45); --text:#F5F6F8; --text-dim:#9AA3B2; --text-faint:#6b7280; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px; --maxw:1200px; --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --shadow-glow: 0 0 0 1px rgba(30,91,255,0.15), 0 20px 60px -20px rgba(30,91,255,0.35); --ease: cubic-bezier(.16,.84,.44,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--font); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p{ margin:0; } section{ position:relative; } .container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } .bg-glow{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; background:radial-gradient(circle at 30% 65%, rgba(0,209,178,0.09) 0%, rgba(0,209,178,0) 55%); } .bg-glow::before{ content:''; position:absolute; top:-20%; right:-10%; width:60%; height:60%; background:radial-gradient(circle, rgba(30,91,255,0.22) 0%, rgba(30,91,255,0) 70%); filter:blur(10px); } .bg-glow::after{ content:''; position:absolute; bottom:-20%; left:-10%; width:50%; height:50%; background:radial-gradient(circle, rgba(122,60,255,0.16) 0%, rgba(122,60,255,0) 70%); } .dot-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size:26px 26px; mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%); } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft); margin-bottom:18px; } .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 12px 2px rgba(30,91,255,0.7); } .h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:800; line-height:1.08; letter-spacing:-0.02em; } .h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); font-weight:800; line-height:1.14; letter-spacing:-0.015em; } .h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); font-weight:700; line-height:1.3; } .lead{ font-size:clamp(1.05rem, 1.4vw, 1.25rem); color:var(--text-dim); line-height:1.6; font-weight:400; } .body{ font-size:1rem; color:var(--text-dim); line-height:1.7; } .accent-text{ color:var(--blue-soft); } .gradient-text{ background:linear-gradient(90deg, var(--blue) 0%, var(--purple) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; border-radius:var(--radius-pill); font-weight:700; font-size:14px; white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; border:1px solid transparent; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .25s var(--ease); } .btn:hover svg{ transform:translateX(3px); } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:linear-gradient(90deg, var(--blue), #3f6dff); color:#fff; box-shadow:0 10px 30px -8px rgba(30,91,255,0.6); } .btn-primary:hover{ box-shadow:0 16px 40px -8px rgba(30,91,255,0.75); } .btn-ghost{ background:transparent; color:var(--text); border-color:rgba(255,255,255,0.16); } .btn-ghost:hover{ border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.04); } .btn-block{ width:100%; } .btn-sm{ padding:11px 20px; font-size:14px; } .site-header{ position:sticky; top:0; z-index:100; background:rgba(5,6,8,0.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,0.06); } .nav{ max-width:var(--maxw); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .nav-logo img{ height:55px; width:auto; } .nav-logo .logo-icon{ display:none; } .nav-links{ display:flex; align-items:center; gap:32px; font-size:14.5px; font-weight:600; color:var(--text-dim); } .nav-links a{ transition:color .2s; position:relative; } .nav-links a:hover, .nav-links a.active{ color:var(--white); } .nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:var(--blue); border-radius:2px; } .nav-cta{ display:flex; align-items:center; gap:14px; } .nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; } .nav-toggle span{ width:22px; height:2px; background:var(--white); border-radius:2px; } .nav-mobile{ display:none; } @media (max-width:940px){ .nav-logo .logo-full{ display:none; } .nav-logo .logo-icon{ display:block; height:40px; } .nav-links{ display:none; } .nav-cta .btn-ghost{ display:none; } .nav-cta .btn-sm{ padding:10px 14px; font-size:12.5px; letter-spacing:.01em; } .nav-toggle{ display:flex; } .nav-mobile{ display:none; flex-direction:column; gap:2px; padding:10px 24px 22px; border-top:1px solid rgba(255,255,255,0.06); } .nav-mobile.open{ display:flex; } .nav-mobile a{ padding:14px 0; font-weight:600; color:var(--text-dim); border-bottom:1px solid rgba(255,255,255,0.05); } .nav-mobile a.active{ color:var(--white); } .nav-mobile .btn{ margin-top:14px; } } .site-footer{ border-top:1px solid rgba(255,255,255,0.07); background:var(--bg-alt); padding:64px 0 28px; } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.07); } .footer-brand img{ height:32px; margin-bottom:16px; } .footer-brand p{ color:var(--text-dim); font-size:14.5px; line-height:1.7; max-width:320px; } .footer-col h2{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:18px; } .footer-col ul li{ margin-bottom:12px; } .footer-col a{ color:var(--text-dim); font-size:14.5px; transition:color .2s; } .footer-col a:hover{ color:var(--white); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:28px; font-size:13px; color:var(--text-faint); } .footer-legal{ display:flex; gap:10px; flex-wrap:wrap; } .footer-social{ display:flex; gap:12px; } .footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:all .2s; } .footer-social a:hover{ border-color:var(--blue); color:var(--white); background:rgba(30,91,255,0.1); } @media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; gap:32px 24px; } .footer-brand{ grid-column:1/-1; } } @media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } } .card{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:32px; transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .card:hover{ border-color:var(--card-border-hover); transform:translateY(-4px); box-shadow:var(--shadow-glow); } .icon-badge{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px; border:1px solid rgba(255,255,255,0.1); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .icon-badge svg{ width:22px; height:22px; } .card:hover .icon-badge{ transform:scale(1.06); } .icon-badge.blue{ background:rgba(30,91,255,0.1); color:var(--blue-soft); border-color:rgba(30,91,255,0.3); box-shadow:0 0 0 4px rgba(30,91,255,0.06), 0 0 24px -8px rgba(30,91,255,0.6); } .icon-badge.purple{ background:rgba(122,60,255,0.1); color:var(--purple); border-color:rgba(122,60,255,0.3); box-shadow:0 0 0 4px rgba(122,60,255,0.06), 0 0 24px -8px rgba(122,60,255,0.6); } .icon-badge.teal{ background:rgba(0,209,178,0.1); color:var(--teal); border-color:rgba(0,209,178,0.3); box-shadow:0 0 0 4px rgba(0,209,178,0.06), 0 0 24px -8px rgba(0,209,178,0.6); } .icon-badge.orange{ background:rgba(255,154,60,0.1); color:var(--orange); border-color:rgba(255,154,60,0.3); box-shadow:0 0 0 4px rgba(255,154,60,0.06), 0 0 24px -8px rgba(255,154,60,0.6); } @property --x{ syntax:'<length-percentage>'; inherits:true; initial-value:50%; } @property --y{ syntax:'<length-percentage>'; inherits:true; initial-value:50%; } .card-glow{ position:relative; overflow:hidden; --x:50%; --y:50%; } .card-glow > *{ position:relative; z-index:2; } .card-glow::before{ content:''; position:absolute; inset:0; padding:1px; border-radius:inherit; z-index:1; background:radial-gradient( 220px circle at var(--x) var(--y), rgba(30,91,255,1), rgba(122,60,255,0.55) 25%, rgba(30,91,255,0.12) 50%, transparent 70% ); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s var(--ease); pointer-events:none; } .card-glow::after{ content:''; position:absolute; z-index:0; width:260px; height:260px; left:var(--x); top:var(--y); transform:translate(-50%,-50%); background:radial-gradient( circle, rgba(30,91,255,0.16), rgba(122,60,255,0.09) 40%, transparent 70% ); filter:blur(24px); opacity:0; transition:opacity .3s var(--ease); pointer-events:none; } .card-glow:hover::before, .card-glow:hover::after, .card-glow.is-active::before, .card-glow.is-active::after{ opacity:1; } @media (prefers-reduced-motion: reduce){ .card-glow::before, .card-glow::after{ transition:none; } } .section{ padding:110px 0; } .section-tight{ padding:70px 0; } .section-head{ max-width:680px; margin-bottom:56px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head .lead{ margin-top:18px; } .panel-alt{ background:var(--bg-alt); } .story-section{ position:relative; } .story-stage{ position:relative; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--black); } .story-slide{ position:absolute; inset:0; opacity:0; will-change:opacity; } .story-slide:first-child{ opacity:1; } .story-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; will-change:transform; transform:scale(1.0); } .story-img-idea{ object-position:68% center; } .story-img-content{ object-position:62% center; } .story-img-team{ object-position:68% center; } @media (max-width:940px){ .story-img-idea{ object-position:78% center; } .story-img-content{ object-position:70% center; } .story-img-team{ object-position:78% center; } } .story-slide::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.35) 70%, rgba(5,6,8,0.85) 100%), radial-gradient(90% 60% at 50% 55%, rgba(0,0,0,0.25), rgba(0,0,0,0.55)); pointer-events:none; } .story-headline{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:0 24px; text-align:center; pointer-events:none; opacity:0; will-change:transform, opacity; } .story-headline h2{ font-size:clamp(1.7rem, 5.4vw, 4.4rem); font-weight:900; text-transform:uppercase; letter-spacing:.06em; line-height:1.16; color:var(--white); max-width:1080px; text-shadow:0 4px 40px rgba(0,0,0,0.55); } .story-progress{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:4; } .story-progress span{ width:34px; height:3px; border-radius:3px; background:rgba(255,255,255,0.22); transition:background .4s var(--ease); } .story-progress span.active{ background:var(--blue); box-shadow:0 0 12px rgba(30,91,255,0.8); } .story-scroll-hint{ position:absolute; bottom:70px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.55); font-size:12px; letter-spacing:.18em; text-transform:uppercase; z-index:4; } @media (max-width:640px){ .story-headline h2{ letter-spacing:.04em; } .story-progress{ bottom:24px; } .story-scroll-hint{ display:none; } } @media (prefers-reduced-motion: reduce){ .story-stage{ height:auto; display:block; } .story-slide{ position:relative; opacity:1 !important; height:72vh; } .story-img{ transform:none !important; } .story-headline{ position:absolute; left:0; right:0; bottom:auto; height:72vh; opacity:1 !important; transform:none !important; } .story-headline-1{ top:0; } .story-headline-2{ top:72vh; } .story-headline-3{ top:144vh; } .story-progress, .story-scroll-hint{ display:none; } } .hero{ padding:100px 0 90px; position:relative; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; position:relative; z-index:1; } .hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid rgba(30,91,255,0.35); background:rgba(30,91,255,0.08); border-radius:var(--radius-pill); font-size:13px; font-weight:600; color:var(--blue-soft); margin-bottom:28px; box-shadow:0 0 24px -8px rgba(30,91,255,0.5); } .hero h1{ max-width:920px; } .hero .lead{ max-width:640px; margin-top:24px; } .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top:38px; } @media (max-width:640px){ .hero{ padding:56px 0 60px; } .hero-ctas{ flex-direction:column; align-items:stretch; } .hero-ctas .btn{ width:100%; } .section{ padding:56px 0; } } @media (max-width:640px){ .btn{ white-space:normal; text-align:center; max-width:100%; padding:14px 20px; letter-spacing:.03em; line-height:1.35; } .btn svg{ align-self:center; } } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } @media (max-width:980px){ .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:1fr 1fr; } } @media (min-width:641px) and (max-width:980px){ .grid-3{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .grid-2{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:1fr; } } .pill-num{ font-size:13px; font-weight:800; color:var(--text-faint); letter-spacing:.1em; margin-bottom:14px; display:block; } .stats-bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--card-border); border:1px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; } .stat-item{ background:var(--card); padding:36px 28px; text-align:center; transition:background .3s var(--ease), transform .3s var(--ease); } .stat-item:hover{ background:var(--bg-alt); transform:translateY(-3px); } .stat-num{ font-size:clamp(2rem, 3.4vw, 2.8rem); font-weight:800; background:linear-gradient(90deg, var(--white), var(--blue-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin-bottom:8px; } .stat-label{ color:var(--text-dim); font-size:14.5px; font-weight:500; } @media (max-width:700px){ .stats-bar{ grid-template-columns:1fr; } } .process-flow{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; } .process-step{ flex:1; min-width:220px; position:relative; padding:28px 24px; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-md); margin-right:20px; } .process-step:last-child{ margin-right:0; } .process-step .step-num{ width:34px; height:34px; border-radius:50%; background:rgba(30,91,255,0.12); color:var(--blue-soft); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; margin-bottom:16px; border:1px solid rgba(30,91,255,0.3); } @media (max-width:900px){ .process-flow{ flex-direction:column; } .process-step{ margin-right:0; margin-bottom:20px; width:100%; } } .tag-cloud{ display:flex; flex-wrap:wrap; gap:12px; } .tag-pill{ padding:12px 22px; border-radius:var(--radius-pill); border:1px solid var(--card-border); background:var(--card); font-weight:600; font-size:14.5px; color:var(--text); transition:all .25s var(--ease); } .tag-pill:hover{ border-color:var(--blue); color:var(--blue-soft); transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(30,91,255,0.6); } .case-card{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; } .case-card-top{ padding:32px; padding-bottom:24px; background:linear-gradient(135deg, rgba(30,91,255,0.10), rgba(122,60,255,0.06)); border-bottom:1px solid var(--card-border); } .case-tag{ display:inline-block; padding:5px 12px; border-radius:var(--radius-pill); background:rgba(0,209,178,0.12); color:var(--teal); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; } .case-card-body{ padding:28px 32px 32px; flex:1; display:flex; flex-direction:column; } .case-services{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; } .case-services li{ position:relative; padding-left:22px; font-size:14.5px; line-height:1.5; color:var(--text-dim); } .case-services li::before{ content:''; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(0,209,178,0.14); } .case-note{ margin-top:16px; font-size:13.5px; line-height:1.55; color:var(--text-faint); font-style:italic; } .case-subhead{ margin:26px 0 12px; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--blue-soft); } .case-subhead:first-child{ margin-top:0; } .case-quote{ margin:18px 0 0; padding:14px 0 14px 18px; border-left:2px solid var(--teal); font-size:14.5px; line-height:1.6; color:var(--text-dim); font-style:italic; } .case-quote::before{ content:'\201E'; } .case-quote::after{ content:'\201C'; } .carousel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; } .carousel-count{ font-size:13.5px; font-weight:600; color:var(--text-faint); margin:0; } .carousel-nav{ display:flex; gap:10px; } .carousel-btn{ width:44px; height:44px; border-radius:50%; cursor:pointer; border:1px solid var(--card-border); background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .carousel-btn svg{ width:18px; height:18px; } .carousel-btn:hover:not(:disabled){ border-color:var(--blue); color:var(--blue-soft); background:rgba(30,91,255,0.08); } .carousel-btn:disabled{ opacity:.35; cursor:default; } .carousel-track{ display:flex; gap:24px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; overflow-anchor:none; } .carousel-track::-webkit-scrollbar{ display:none; } .carousel-track:focus-visible{ outline:2px solid var(--blue); outline-offset:4px; border-radius:var(--radius-lg); } .carousel-track > .case-card, .carousel-track > .video-card, .carousel-track > .photo-card, .carousel-track > .social-card{ flex:0 0 calc((100% - 48px) / 3); scroll-snap-align:start; } .carousel-track > .reel-card{ flex:0 0 calc((100% - 72px) / 4); scroll-snap-align:start; } @media (max-width:980px){ .carousel-track > .case-card, .carousel-track > .video-card, .carousel-track > .photo-card, .carousel-track > .social-card{ flex-basis:calc((100% - 24px) / 2); } .carousel-track > .reel-card{ flex-basis:calc((100% - 48px) / 3); } } @media (max-width:640px){ .carousel-track{ gap:16px; } .carousel-track > .case-card, .carousel-track > .video-card, .carousel-track > .photo-card, .carousel-track > .social-card{ flex-basis:100%; } .carousel-track > .reel-card{ flex-basis:calc((100% - 16px) / 2); } } .carousel-track.is-measuring{ align-items:flex-start; height:auto !important; } .carousel-progress{ margin-top:24px; height:3px; border-radius:3px; background:var(--card-border); overflow:hidden; } .carousel-progress span{ display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg, var(--blue), var(--purple)); transition:width .18s var(--ease); } .carousel-hint{ margin:12px 0 0; font-size:12.5px; color:var(--text-faint); } @media (prefers-reduced-motion: reduce){ .carousel-track{ scroll-behavior:auto; transition:none; } .carousel-progress span{ transition:none; } } .circular-testimonials{ display:grid; gap:40px; align-items:center; touch-action:pan-y; } .circular-image-stack{ position:relative; width:100%; aspect-ratio:4/5; perspective:1200px; margin:0 auto; max-width:340px; } .circular-testimonial-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:var(--radius-lg); border:1px solid var(--card-border); box-shadow:0 20px 40px rgba(0,0,0,0.4); transition:transform .8s cubic-bezier(.4,2,.3,1), opacity .8s cubic-bezier(.4,2,.3,1); } .circular-testimonial-image.pos-hidden{ opacity:0; pointer-events:none; z-index:1; } .circular-testimonial-image.pos-left{ opacity:1; z-index:2; transform:translateX(-38px) translateY(-18px) scale(.82) rotateY(12deg); } .circular-testimonial-image.pos-right{ opacity:1; z-index:2; transform:translateX(38px) translateY(-18px) scale(.82) rotateY(-12deg); } .circular-testimonial-image.pos-active{ opacity:1; z-index:3; transform:translateX(0) translateY(0) scale(1) rotateY(0); } .circular-content{ display:flex; flex-direction:column; text-align:center; } .circular-name{ font-size:1.4rem; font-weight:800; color:var(--text); margin-bottom:4px; } .circular-designation{ font-size:13.5px; color:var(--text-faint); margin-bottom:22px; } .circular-quote{ font-size:1.02rem; line-height:1.75; color:var(--text-dim); min-height:120px; } .circular-quote span{ display:inline-block; opacity:0; filter:blur(6px); transform:translateY(4px); animation:circularWordIn .3s var(--ease) forwards; } @keyframes circularWordIn{ to{ opacity:1; filter:blur(0); transform:translateY(0); } } .circular-arrows{ display:flex; gap:16px; margin-top:28px; justify-content:center; } .circular-arrow-btn{ width:44px; height:44px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--card-border); color:var(--text-dim); transition:all .25s var(--ease); } .circular-arrow-btn:hover{ background:rgba(30,91,255,0.12); border-color:var(--blue); color:var(--white); } .circular-arrow-btn svg{ width:18px; height:18px; } @media (min-width:860px){ .circular-testimonials{ grid-template-columns:1fr 1fr; gap:64px; } .circular-image-stack{ max-width:380px; } .circular-testimonial-image.pos-left{ transform:translateX(-64px) translateY(-24px) scale(.82) rotateY(12deg); } .circular-testimonial-image.pos-right{ transform:translateX(64px) translateY(-24px) scale(.82) rotateY(-12deg); } .circular-content{ text-align:left; } .circular-arrows{ justify-content:flex-start; } } .quiz-block{ border-radius:var(--radius-lg); border:1px solid rgba(30,91,255,0.25); background:linear-gradient(135deg, rgba(30,91,255,0.10), rgba(122,60,255,0.08)); padding:56px; position:relative; overflow:hidden; } .quiz-block::before{ content:''; position:absolute; top:-40%; right:-10%; width:50%; height:140%; background:radial-gradient(circle, rgba(30,91,255,0.25), transparent 70%); pointer-events:none; } .quiz-inner{ position:relative; z-index:1; max-width:640px; } @media (max-width:700px){ .quiz-block{ padding:32px 24px; } } .quiz-app{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:48px; max-width:760px; margin:0 auto; } @media (max-width:640px){ .quiz-app{ padding:28px 20px; } } .quiz-progress{ display:flex; gap:6px; margin-bottom:32px; } .quiz-progress-seg{ flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; } .quiz-progress-seg.done{ background:var(--blue); } .quiz-progress-seg.current{ background:linear-gradient(90deg, var(--blue), rgba(30,91,255,0.3)); } .quiz-question{ font-size:1.4rem; font-weight:700; margin-bottom:28px; line-height:1.35; } .quiz-options{ display:flex; flex-direction:column; gap:12px; margin-bottom:32px; } .quiz-option{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--radius-md); border:1px solid var(--card-border); background:rgba(255,255,255,0.02); cursor:pointer; font-size:15px; font-weight:600; color:var(--text-dim); transition:all .2s; text-align:left; } .quiz-option:hover{ border-color:rgba(30,91,255,0.4); color:var(--white); } .quiz-option.selected{ border-color:var(--blue); background:rgba(30,91,255,0.1); color:var(--white); } .quiz-option .dot{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,0.2); flex-shrink:0; display:flex; align-items:center; justify-content:center; } .quiz-option.selected .dot{ border-color:var(--blue); background:var(--blue); } .quiz-nav{ display:flex; justify-content:space-between; align-items:center; gap:16px; } .quiz-nav .btn-ghost{ opacity:.8; } .quiz-result-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:var(--radius-pill); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; } .quiz-result-badge.tier-1{ background:rgba(255,255,255,0.06); color:var(--text-dim); } .quiz-result-badge.tier-2{ background:rgba(30,91,255,0.14); color:var(--blue-soft); } .quiz-result-badge.tier-3{ background:rgba(0,209,178,0.14); color:var(--teal); } .quiz-score-bar{ height:10px; border-radius:10px; background:rgba(255,255,255,0.08); overflow:hidden; margin:20px 0 28px; } .quiz-score-fill{ height:100%; border-radius:10px; background:linear-gradient(90deg, var(--blue), var(--teal)); width:0%; transition:width 1s var(--ease); } .quiz-hidden{ display:none !important; } .quiz-lead-form{ margin-top:8px; } .quiz-field{ margin-bottom:18px; } .quiz-field label{ display:block; margin-bottom:8px; font-size:13.5px; font-weight:600; color:var(--text-dim); } .quiz-field input, .quiz-field textarea{ width:100%; padding:14px 16px; border-radius:10px; border:1px solid var(--card-border); background:rgba(255,255,255,0.03); color:var(--text); font-family:inherit; font-size:15px; transition:border-color .2s; } .quiz-field textarea{ resize:vertical; min-height:100px; } .quiz-field input:focus, .quiz-field textarea:focus{ outline:none; border-color:var(--blue); } .quiz-consent{ display:flex; align-items:flex-start; gap:10px; margin-top:4px; font-size:13.5px; line-height:1.55; color:var(--text-dim); cursor:pointer; } .quiz-consent input{ margin-top:2px; width:16px; height:16px; accent-color:var(--blue); flex-shrink:0; cursor:pointer; } .quiz-error{ color:#ff6b6b; margin-top:14px; } .about-grid{ grid-template-columns:280px 1fr; } @media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } } .founder-letter{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:52px; column-count:1; } .founder-letter p{ color:var(--text-dim); line-height:1.85; margin-bottom:20px; font-size:1.02rem; } .founder-letter p:first-of-type{ color:var(--text); font-size:1.15rem; font-weight:500; } .founder-sign{ margin-top:32px; font-weight:700; color:var(--white); } @media (max-width:640px){ .founder-letter{ padding:28px 22px; } } .team-card{ text-align:left; } .team-avatar{ width:100%; aspect-ratio:3/4; border-radius:var(--radius-md); margin-bottom:20px; overflow:hidden; background:linear-gradient(135deg, rgba(30,91,255,0.18), rgba(122,60,255,0.14)); display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:800; color:var(--blue-soft); } .team-avatar img{ width:100%; height:100%; object-fit:cover; border:1px solid var(--card-border); } .team-name{ font-weight:700; font-size:1.05rem; margin-bottom:4px; } .team-role{ color:var(--blue-soft); font-size:13.5px; font-weight:600; margin-bottom:10px; } .team-desc{ color:var(--text-dim); font-size:14px; line-height:1.6; } .blog-layout{ display:grid; grid-template-columns:2.1fr 1fr; gap:48px; align-items:start; } @media (max-width:900px){ .blog-layout{ grid-template-columns:1fr; } } .filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; } .filter-chip{ padding:9px 18px; border-radius:var(--radius-pill); border:1px solid var(--card-border); font-size:13.5px; font-weight:600; color:var(--text-dim); cursor:pointer; background:transparent; transition:all .2s; } .filter-chip.active, .filter-chip:hover{ border-color:var(--blue); color:var(--white); background:rgba(30,91,255,0.08); } .post-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } @media (max-width:700px){ .post-grid{ grid-template-columns:1fr; } } .post-card{ display:flex; flex-direction:column; } .post-thumb{ aspect-ratio:16/10; border-radius:var(--radius-md); margin-bottom:18px; background:linear-gradient(135deg, var(--navy) 0%, #061229 60%, rgba(30,91,255,0.25) 140%); position:relative; overflow:hidden; border:1px solid var(--card-border); } .post-thumb img{ width:100%; height:100%; object-fit:cover; } .post-cat{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); margin-bottom:10px; } .post-title{ font-weight:700; font-size:1.05rem; margin-bottom:10px; line-height:1.4; } .post-excerpt{ color:var(--text-dim); font-size:14px; line-height:1.6; } .sidebar-box{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:30px; margin-bottom:24px; } .sidebar-box h2{ font-size:1rem; font-weight:700; margin-bottom:12px; } .sidebar-box p{ color:var(--text-dim); font-size:14px; line-height:1.6; margin-bottom:18px; } .post-body{ font-size:1.05rem; line-height:1.8; color:var(--text-dim); } .post-body p{ margin-bottom:22px; } .post-body h2{ font-size:1.6rem; font-weight:800; color:var(--text); margin:48px 0 20px; letter-spacing:-0.01em; } .post-body h3{ font-size:1.25rem; font-weight:700; color:var(--text); margin:36px 0 16px; } .post-body ul, .post-body ol{ margin:0 0 22px; padding-left:22px; } .post-body li{ margin-bottom:10px; } .post-body strong{ color:var(--text); } .post-body a{ color:var(--blue-soft); text-decoration:underline; text-underline-offset:3px; } .post-body blockquote{ margin:32px 0; padding:20px 26px; border-left:3px solid var(--blue); background:rgba(30,91,255,0.06); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--text); font-style:italic; } .post-body table{ width:100%; border-collapse:collapse; margin:24px 0 32px; font-size:14.5px; } .post-body th, .post-body td{ padding:12px 16px; border:1px solid var(--card-border); text-align:left; } .post-body th{ background:rgba(255,255,255,0.03); color:var(--text); } .faq-section{ margin-top:56px; } .faq-item{ border:1px solid var(--card-border); border-radius:var(--radius-md); background:var(--card); padding:24px 28px; margin-bottom:14px; } .faq-item h3{ font-size:1.05rem; font-weight:700; margin-bottom:10px; color:var(--text); } .faq-item p{ color:var(--text-dim); font-size:14.5px; line-height:1.7; margin:0; } .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .cta-band{ border-radius:var(--radius-lg); text-align:center; padding:70px 40px; position:relative; overflow:hidden; background:linear-gradient(115deg, var(--navy) 0%, var(--blue) 65%, var(--purple) 130%); border:1px solid rgba(255,255,255,0.1); box-shadow:0 30px 70px -30px rgba(30,91,255,0.55); } .cta-band::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 90% at 85% 0%, rgba(255,255,255,0.14), transparent 60%); } .cta-band .eyebrow{ color:rgba(255,255,255,0.85); position:relative; z-index:1; } .cta-band .eyebrow::before{ background:#fff; box-shadow:0 0 12px 2px rgba(255,255,255,0.7); } .cta-band .h2{ max-width:680px; margin:0 auto 16px; color:#fff; position:relative; z-index:1; } .cta-band .lead{ max-width:560px; margin:0 auto; color:rgba(255,255,255,0.82); position:relative; z-index:1; } .cta-band .hero-ctas{ justify-content:center; position:relative; z-index:1; } .cta-band .btn-primary{ background:#fff; color:var(--navy); box-shadow:0 10px 30px -8px rgba(0,0,0,0.35); } .cta-band .btn-primary:hover{ box-shadow:0 16px 40px -8px rgba(0,0,0,0.45); } .page-hero{ padding:70px 0 60px; text-align:left; } .page-hero .eyebrow{ margin-bottom:20px; } .breadcrumb{ font-size:13.5px; color:var(--text-faint); margin-bottom:24px; } .breadcrumb a{ color:var(--text-dim); } .breadcrumb a:hover{ color:var(--white); } .hp-field{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; left:-9999px; } .portfolio-item{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s var(--ease), transform .25s var(--ease); } .portfolio-item:hover{ border-color:var(--card-border-hover); transform:translateY(-3px); } .portfolio-thumb{ aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--navy) 0%, #061229 60%, rgba(30,91,255,0.25) 140%); } button.portfolio-thumb{ appearance:none; -webkit-appearance:none; border:none; padding:0; margin:0; width:100%; display:block; cursor:pointer; font:inherit; color:inherit; text-align:inherit; } a.portfolio-thumb{ display:block; width:100%; text-decoration:none; color:inherit; } .portfolio-thumb.is-wide{ aspect-ratio:16/9; } .portfolio-thumb.is-reel{ aspect-ratio:9/16; } .portfolio-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .portfolio-thumb.is-placeholder{ display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; border:1px dashed var(--card-border); background:linear-gradient(135deg, var(--navy) 0%, #061229 60%, rgba(30,91,255,0.12) 140%); } .portfolio-thumb.is-placeholder span{ font-size:13px; font-style:italic; color:var(--text-faint); } .portfolio-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; } .portfolio-play span{ width:56px; height:56px; border-radius:50%; background:rgba(5,6,8,0.55); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .portfolio-play svg{ width:20px; height:20px; fill:var(--white); margin-left:3px; } .portfolio-play svg.icon-external{ fill:none; stroke:var(--white); margin-left:0; } button.portfolio-thumb:hover .portfolio-play span, a.portfolio-thumb:hover .portfolio-play span{ background:rgba(30,91,255,0.7); border-color:var(--blue); transform:scale(1.08); } .portfolio-body{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; } .portfolio-tag{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); margin-bottom:8px; } .portfolio-title{ font-weight:700; font-size:1.02rem; line-height:1.4; margin-bottom:6px; } .portfolio-note{ color:var(--text-faint); font-size:13px; font-style:italic; line-height:1.55; margin-top:auto; padding-top:10px; } .portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media (max-width:980px){ .portfolio-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .portfolio-grid{ grid-template-columns:1fr; } } .photo-stack{ position:relative; padding:10px; } .photo-stack-frame{ position:relative; aspect-ratio:4/3; } .photo-stack-frame:empty{ border:1px dashed var(--card-border); border-radius:var(--radius-md); background:linear-gradient(135deg, var(--navy) 0%, #061229 60%, rgba(30,91,255,0.12) 140%); display:flex; align-items:center; justify-content:center; } .photo-stack-frame:empty::after{ content:'Photos coming soon'; font-size:13px; font-style:italic; color:var(--text-faint); } .photo-stack-card{ position:absolute; inset:0; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--card-border); box-shadow:0 20px 40px rgba(0,0,0,0.4); background:linear-gradient(135deg, var(--navy) 0%, #061229 60%, rgba(30,91,255,0.25) 140%); cursor:pointer; transform-origin:center center; transition:transform .5s var(--ease), opacity .5s var(--ease); } .photo-stack-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(28px) brightness(.55) saturate(1.15); transform:scale(1.2); display:block; pointer-events:none; } .photo-stack-fg{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; } .photo-stack-card.no-transition{ transition:none; } .photo-stack-card[data-depth="0"]{ transform:translate(0,0) scale(1) rotate(0deg); z-index:5; opacity:1; } .photo-stack-card[data-depth="1"]{ transform:translate(0,0) scale(1) rotate(0deg); z-index:4; opacity:1; } .photo-stack-card[data-depth="2"]{ transform:translate(0,0) scale(1) rotate(0deg); z-index:3; opacity:1; } .photo-stack-card[data-depth="3"]{ transform:translate(0,0) scale(1) rotate(0deg); z-index:2; opacity:1; } .photo-stack-card[data-depth="0"]:hover{ transform:translate(0,-4px) scale(1.01); } .photo-stack-card[data-depth="0"]:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; } .photo-stack-card.is-leaving{ transform:translate(130%,-14%) rotate(10deg) scale(.96); opacity:0; z-index:6; transition:transform .45s var(--ease), opacity .45s var(--ease); } .photo-stack-card.is-entering{ transform:translate(-130%,-14%) rotate(-10deg) scale(.96); opacity:0; z-index:6; } .photo-stack-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; } .photo-stack-dot{ width:6px; height:6px; border-radius:50%; background:var(--card-border); transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); } .photo-stack-dot.is-active{ background:var(--blue); box-shadow:0 0 8px rgba(30,91,255,0.8); transform:scale(1.3); } .photo-stack-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:34px; height:34px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,0.18); background:rgba(0,10,25,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:var(--text); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .photo-stack-arrow svg{ width:16px; height:16px; } .photo-stack-arrow-prev{ left:10px; } .photo-stack-arrow-next{ right:10px; } .photo-stack:hover .photo-stack-arrow, .photo-stack-arrow:focus-visible{ opacity:1; pointer-events:auto; } .photo-stack-arrow:hover{ border-color:var(--blue); background:rgba(30,91,255,0.45); } @media (hover:none){ .photo-stack-arrow{ opacity:.85; pointer-events:auto; } } @media (max-width:640px){ .photo-stack{ padding:6px; } .photo-stack-arrow{ width:30px; height:30px; } .photo-stack-arrow svg{ width:14px; height:14px; } } @media (prefers-reduced-motion: reduce){ .photo-stack-card{ transition:none; } } .showcase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } @media (max-width:980px){ .showcase-grid{ grid-template-columns:1fr; gap:32px; } } .showcase-media{ width:100%; } .showcase-media-inner{ position:relative; width:100%; padding-top:73%; } .showcase-slide{ position:absolute; inset:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--card-border); background:linear-gradient(135deg, var(--navy) 0%, #061229 60%, rgba(30,91,255,0.25) 140%); opacity:0; transform:scale(.93) rotate(-5deg); z-index:1; transition:opacity .4s var(--ease), transform .4s var(--ease); } .showcase-slide.is-active{ opacity:1; transform:scale(1) rotate(0deg); z-index:2; } .showcase-slide img{ width:100%; height:100%; object-fit:cover; display:block; } .showcase-body{ display:flex; flex-direction:column; } .showcase-name{ font-weight:700; font-size:1.7rem; line-height:1.3; margin-bottom:8px; } .showcase-position{ color:var(--teal); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; } .showcase-quote{ color:var(--text-faint); font-size:1.05rem; line-height:1.7; margin-bottom:30px; } .showcase-quote .word{ display:inline-block; opacity:0; filter:blur(6px); transform:translateY(4px); animation:showcaseWordIn .35s var(--ease) forwards; } @keyframes showcaseWordIn{ to{ opacity:1; filter:blur(0); transform:translateY(0); } } .showcase-actions{ display:flex; gap:14px; flex-wrap:wrap; } .showcase-btn{ padding:2px; border:0; border-radius:9px; cursor:pointer; font-family:inherit; background:linear-gradient(to right, var(--blue), var(--teal)); transition:opacity .2s var(--ease); } .showcase-btn span{ display:flex; align-items:center; justify-content:center; min-width:126px; padding:12px 22px; border-radius:7px; background:var(--navy); color:var(--white); font-weight:700; font-size:14px; transition:background .2s var(--ease); } .showcase-btn:hover span{ background:transparent; } .showcase-btn-open{ background:linear-gradient(to right, var(--teal), var(--blue)); } .showcase-btn:disabled{ opacity:.45; cursor:not-allowed; } .showcase-btn:disabled span{ background:var(--navy); } .coverflow{ --cf-card:clamp(148px, 22vw, 260px); position:relative; } .coverflow-frame{ cursor:grab; overflow:hidden; padding:44px 0; outline:none; touch-action:pan-y; perspective:calc(var(--cf-card) * 3); } .coverflow-frame:active{ cursor:grabbing; } .coverflow-frame:focus-visible{ box-shadow:0 0 0 2px var(--teal) inset; border-radius:var(--radius-lg); } .coverflow-track{ position:relative; height:var(--cf-card); transform-style:preserve-3d; } .coverflow-card{ position:absolute; top:0; left:50%; width:var(--cf-card); aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; will-change:transform; user-select:none; background:linear-gradient(135deg, var(--card) 0%, var(--bg-alt) 100%); border:1px solid var(--card-border); box-shadow:0 20px 40px rgba(0,0,0,0.35); } .coverflow-card img{ width:100%; height:100%; object-fit:contain; padding:28px; display:block; } .coverflow-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:200; width:40px; height:40px; border-radius:50%; border:1px solid var(--card-border); background:rgba(5,6,8,0.55); backdrop-filter:blur(4px); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease); } .coverflow-nav:hover{ background:rgba(5,6,8,0.8); border-color:var(--card-border-hover); } .coverflow-nav.prev{ left:4px; } .coverflow-nav.next{ right:4px; } @media (max-width:640px){ .coverflow-nav{ display:none; } } .mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;} .mt-64{margin-top:64px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;} .text-center{ text-align:center; } .flex{ display:flex; } .flex-wrap{ flex-wrap:wrap; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .items-center{ align-items:center; } .justify-center{ justify-content:center; } .small{ font-size:13.5px; } .divider{ height:1px; background:var(--card-border); border:none; margin:0; }