:root { --ink: #06040a; --panel: #0d0714; --panel-2: #160a22; --white: #f8f7fb; --mist: #b8afc2; --muted: #796f84; --magenta: #ff2b7a; --cyan: #50dfff; --violet: #8b5cf6; --line: rgba(255,255,255,.13); --line-dark: rgba(12,7,18,.14); --max: 1240px; --pad: clamp(20px,4vw,64px); --radius: 24px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--white); font-family: "Manrope",sans-serif; overflow-x: hidden; } body.menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } img, video { display: block; width: 100%; height: auto; } button { font: inherit; } ::selection { background: var(--magenta); color: #fff; } .noise { position: fixed; inset: 0; z-index: 90; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); } .cursor-glow { position: fixed; z-index: 0; width: 28rem; height: 28rem; margin: -14rem 0 0 -14rem; border-radius: 50%; pointer-events: none; background: radial-gradient(circle,rgba(255,43,122,.10),transparent 65%); } .site-header { position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 84px; padding: 0 var(--pad); display: grid; grid-template-columns: 210px 1fr auto; align-items: center; border-bottom: 1px solid transparent; transition: .3s ease; } .site-header.scrolled { height: 70px; background: rgba(6,4,10,.82); border-color: var(--line); backdrop-filter: blur(18px); } .brand-lockup img { width: 180px; height: 45px; object-fit: contain; object-position: left center; } .desktop-nav { justify-self:center; display:flex; align-items:center; gap:clamp(12px,1.5vw,25px); } .desktop-nav a { position:relative; min-width:48px; padding:8px 0; display:flex; flex-direction:column; align-items:center; gap:3px; color:rgba(255,255,255,.68); font-size:.56rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .nav-icon-shell { width:30px; height:27px; display:grid; place-items:center; perspective:300px; } .nav-icon-shell img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(80,223,255,.2)); animation:navIconFloat 4s ease-in-out infinite; transition:transform .35s ease,filter .35s ease; } .desktop-nav a:nth-child(even) .nav-icon-shell img { animation-delay:-1.7s; } .desktop-nav a:hover .nav-icon-shell img,.desktop-nav a[aria-current="page"] .nav-icon-shell img { transform:translateY(-3px) rotateY(12deg) scale(1.14); filter:drop-shadow(0 0 12px rgba(80,223,255,.65)) drop-shadow(0 0 18px rgba(255,43,122,.28)); } .nav-hover-card { position:absolute; top:calc(100% + 19px); left:50%; width:250px; min-height:116px; padding:13px 15px; display:grid; grid-template-columns:82px 1fr; gap:13px; align-items:center; border:1px solid rgba(255,255,255,.2); border-radius:16px; background:rgba(8,5,14,.94); box-shadow:0 24px 55px rgba(0,0,0,.55),inset 0 0 30px rgba(139,92,246,.06); backdrop-filter:blur(18px); opacity:0; pointer-events:none; transform:translate(-50%,8px) scale(.96); transition:.25s ease; } .nav-hover-card::before { content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(120deg,rgba(255,43,122,.45),transparent 38%,rgba(80,223,255,.4)); padding:1px; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; } .nav-hover-card img { height:88px; object-fit:contain; filter:drop-shadow(0 0 15px rgba(80,223,255,.22)); } .nav-hover-card b,.nav-hover-card small { display:block; text-transform:none; } .nav-hover-card b { color:#fff; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; } .nav-hover-card small { margin-top:7px; color:var(--muted); font-size:.62rem; line-height:1.5; letter-spacing:0; } .desktop-nav a:hover .nav-hover-card,.desktop-nav a:focus-visible .nav-hover-card { opacity:1; transform:translate(-50%,0) scale(1); } .desktop-nav a::after { content:""; position:absolute; left:0; bottom:3px; width:100%; height:1px; background:linear-gradient(90deg,var(--magenta),var(--cyan)); transform:scaleX(0); transform-origin:right; transition:transform .3s; } .desktop-nav a:hover,.desktop-nav a[aria-current="page"] { color:#fff; } .desktop-nav a:hover::after,.desktop-nav a[aria-current="page"]::after { transform:scaleX(1); transform-origin:left; } .header-actions { display:flex; align-items:center; gap:18px; } .language-toggle { border:0; background:none; color:rgba(255,255,255,.45); display:flex; gap:7px; align-items:center; cursor:pointer; font-size:.62rem; font-weight:800; letter-spacing:.12em; } .language-toggle i { width:18px; height:1px; background:var(--line); } body[data-language="en"] [data-language-option="en"],body[data-language="id"] [data-language-option="id"] { color:var(--cyan); } body[data-language="en"] .id-only, body[data-language="id"] .en-only { display:none !important; } .header-cta,.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; padding:0 18px; border:1px solid rgba(255,255,255,.26); font-size:.64rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; transition:.3s ease; } .header-cta:hover,.button-primary { background:var(--magenta); border-color:var(--magenta); box-shadow:0 0 30px rgba(255,43,122,.25); } .button-secondary:hover { border-color:var(--cyan); color:var(--cyan); } .menu-toggle { display:none; width:40px; height:40px; border:1px solid var(--line); background:none; color:#fff; } .menu-toggle span { display:block; width:17px; height:1px; margin:5px auto; background:currentColor; transition:.25s; } .menu-toggle.active span:first-child { transform:translateY(3px) rotate(45deg); } .menu-toggle.active span:last-child { transform:translateY(-3px) rotate(-45deg); } .mobile-menu { display:none; position:fixed; z-index:70; inset:0; padding:110px var(--pad) 40px; background:rgba(6,4,10,.98); opacity:0; pointer-events:none; transition:.25s; } .mobile-menu.active { opacity:1; pointer-events:auto; } .mobile-menu a { display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line); font-size:clamp(1.45rem,7vw,2.8rem); font-weight:700; letter-spacing:-.04em; } .mobile-nav-icon { width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(80,223,255,.22)); } .mobile-nav-label { flex:1; align-self:center; margin-left:16px; }.mobile-nav-no{align-self:center;color:var(--muted);font-size:.65rem;letter-spacing:.12em} .section { position:relative; padding:clamp(92px,11vw,160px) var(--pad); } .section-inner { width:min(100%,var(--max)); margin:auto; } .section-light { background:var(--white); color:var(--ink); } .section-dark { background:var(--ink); color:var(--white); } .eyebrow { margin:0 0 20px; color:var(--magenta); font-family:"Michroma",sans-serif; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; } .eyebrow.cyan { color:var(--cyan); } .section-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.65fr); gap:48px; align-items:end; margin-bottom:clamp(42px,7vw,84px); } .section-heading h2,.page-hero h1 { margin:0; max-width:900px; font-size:clamp(2.6rem,5vw,4.8rem); line-height:.96; letter-spacing:-.055em; text-wrap:balance; } .section-heading p,.page-lead { margin:0; color:var(--mist); font-size:clamp(.95rem,1.2vw,1.1rem); line-height:1.7; } .section-light .section-heading p { color:#5f5868; } .gradient-word { color:transparent; background:linear-gradient(100deg,var(--magenta) 0%,var(--violet) 22%,var(--cyan) 45%,#fff 52%,var(--magenta) 72%,var(--cyan) 100%); background-size:300% 100%; background-clip:text; -webkit-background-clip:text; animation:spectrumFlow 6s linear infinite; } .hero { position:relative; min-height:100svh; display:flex; padding:120px var(--pad) 44px; overflow:hidden; isolation:isolate; background:#050308; } .hero-background { position:absolute; z-index:-4; inset:0; overflow:hidden; } .hero-background img { width:100%; height:100%; object-fit:cover; object-position:center center; animation:heroDrift 14s ease-in-out infinite alternate; } .hero-background-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,3,8,.88) 0%,rgba(4,3,8,.65) 35%,rgba(5,3,10,.16) 68%,rgba(12,3,17,.12) 100%),linear-gradient(180deg,rgba(3,2,6,.46),transparent 24%,transparent 72%,rgba(3,2,6,.58)); } .hero-neon-beam { position:absolute; pointer-events:none; opacity:.42; filter:blur(1px); } .hero-neon-beam::after { content:""; position:absolute; inset:0; background:inherit; filter:blur(14px); opacity:.65; } .beam-one { top:0; bottom:0; width:2px; right:8%; background:linear-gradient(transparent,var(--magenta),#fff,var(--magenta),transparent); animation:beamVertical 7s ease-in-out infinite; } .beam-two { left:42%; right:0; height:2px; top:58%; background:linear-gradient(90deg,transparent,var(--cyan),#fff,var(--magenta),transparent); animation:beamHorizontal 5.5s ease-in-out infinite; } #neural-canvas,.hero-grid { position:absolute; inset:0; width:100%; height:100%; z-index:-2; } .hero-grid { z-index:-1; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,#000,transparent 82%); } .hero-inner { width:min(100%,var(--max)); margin:auto; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr); gap:clamp(20px,4vw,64px); align-items:center; } .hero-copy { position:relative; z-index:3; } .hero h1 { margin:0; max-width:760px; font-size:clamp(3.25rem,6.4vw,6.55rem); line-height:.9; letter-spacing:-.075em; text-wrap:balance; } .hero-white { display:inline-block; color:#fff; animation:whiteNeon 3.6s ease-in-out infinite; } .hero-spectrum { display:inline-block; color:transparent; background: linear-gradient(94deg, #ff2b7a 0%, #b757ff 48%, #50dfff 100%); background-size:240% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 0; font-weight: 800; letter-spacing: -.065em; filter: drop-shadow(0 8px 24px rgba(139,92,246,.18)); animation:heroSpectrum 4.8s ease-in-out infinite; } .hero-lead { max-width:600px; margin:28px 0 30px; color:rgba(255,255,255,.66); font-size:clamp(.96rem,1.2vw,1.12rem); line-height:1.7; } .hero-buttons { display:flex; flex-wrap:wrap; gap:12px; } .hero-meta { position:absolute; bottom:28px; left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; color:rgba(255,255,255,.42); font-size:.57rem; font-weight:800; letter-spacing:.15em; } .hero-meta i { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px var(--cyan); } .hero-visual { position:relative; min-height:min(70vh,680px); z-index:1; } .background-orbit { position:absolute; left:50%; top:50%; aspect-ratio:1; border-radius:50%; pointer-events:none; } .orbit-one { width:76%; border:1px solid rgba(80,223,255,.2); box-shadow:0 0 80px rgba(255,43,122,.1),inset 0 0 70px rgba(80,223,255,.05); transform:translate(-50%,-50%); animation:orbitSpin 28s linear infinite; } .orbit-two { width:57%; border:1px dashed rgba(255,43,122,.32); transform:translate(-50%,-50%); animation:orbitSpinReverse 20s linear infinite; } .core-scan { position:absolute; z-index:3; width:70%; height:2px; background:linear-gradient(90deg,transparent,var(--magenta),#fff,var(--cyan),transparent); box-shadow:0 0 18px var(--magenta); animation:scan 4s ease-in-out infinite; } .hero-chip { position:absolute; z-index:4; padding:10px 12px; border:1px solid rgba(255,255,255,.24); background:rgba(7,4,11,.55); backdrop-filter:blur(12px); font-size:.57rem; font-weight:800; letter-spacing:.14em; } .hero-chip.one { top:18%; left:0; }.hero-chip.two { top:48%; right:-2%; }.hero-chip.three { bottom:15%; left:5%; } .signal-line { height:1px; background:linear-gradient(90deg,transparent,var(--magenta),var(--cyan),transparent); } .feature-strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .feature-strip article { min-height:170px; padding:30px; border-right:1px solid var(--line); } .feature-strip article:last-child { border:0; } .feature-strip span { color:var(--cyan); font-family:"Michroma",sans-serif; font-size:.58rem; } .feature-strip h3 { margin:28px 0 0; font-size:clamp(1.25rem,2vw,1.8rem); letter-spacing:-.04em; } .feature-strip p { margin:14px 0 0; color:var(--mist); font-size:.78rem; line-height:1.6; } .media-showcase { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(20px,3vw,42px); align-items:start; } .video-card,.image-card,.service-card,.article-card,.value-card { position:relative; overflow:hidden; border:1px solid var(--line); background:var(--panel); } .video-card { border-radius:var(--radius); } .video-card video { aspect-ratio:4/5; object-fit:cover; } .video-card::after,.image-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(5,3,8,.82)); } .media-label { position:absolute; z-index:2; left:20px; right:20px; bottom:18px; display:flex; justify-content:space-between; align-items:end; gap:20px; } .media-label strong { font-size:clamp(1.15rem,2vw,1.7rem); } .media-label span { color:rgba(255,255,255,.65); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; } .image-stack { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .image-card { border-radius:20px; } .image-card:first-child { grid-column:1/-1; } .image-card img { height:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s; } .image-card:not(:first-child) img { aspect-ratio:4/5; } .image-card:hover img { transform:scale(1.045); filter:saturate(1.08); } .preview-grid,.services-grid,.article-grid,.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .preview-card { position:relative; min-height:420px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgba(255,43,122,.12),rgba(80,223,255,.04)); } .preview-card::before { content:""; position:absolute; width:220px; height:220px; right:-70px; top:-70px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 55px rgba(255,43,122,.14); transition:.6s; } .preview-card:hover::before { transform:scale(1.3) rotate(35deg); border-color:var(--cyan); } .preview-card span,.service-card .tag,.article-card .tag,.value-card .tag { color:var(--cyan); font-family:"Michroma",sans-serif; font-size:.55rem; letter-spacing:.13em; text-transform:uppercase; } .preview-card h3 { margin:auto 0 14px; max-width:290px; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1; letter-spacing:-.05em; } .preview-card p { margin:0 0 28px; color:var(--mist); line-height:1.6; font-size:.9rem; } .preview-card b { font-size:.68rem; letter-spacing:.12em; } .page-hero { position:relative; min-height:72vh; padding:160px var(--pad) 80px; display:flex; align-items:end; overflow:hidden; background:radial-gradient(circle at 78% 25%,rgba(255,43,122,.19),transparent 34%),linear-gradient(145deg,#06040a,#12081b); } .page-hero::before { content:""; position:absolute; right:-9vw; top:8%; width:min(46vw,600px); aspect-ratio:1; border:1px solid rgba(80,223,255,.16); border-radius:50%; box-shadow:0 0 100px rgba(139,92,246,.16); animation:spin 30s linear infinite; } .page-hero .section-inner { position:relative; z-index:1; } .page-hero h1 { max-width:980px; font-size:clamp(3rem,6.3vw,6.4rem); } .visual-page-hero { isolation:isolate; background:linear-gradient(115deg,#05030a 0%,#100519 48%,#050914 100%); } .visual-page-hero::after { content:""; position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(4,3,8,.96) 0%,rgba(4,3,8,.74) 43%,rgba(4,3,8,.16) 77%),url('/agenz-hero-core.webp') center/cover; opacity:.7; } .page-hero-art { position:absolute; z-index:-1; right:2vw; top:10%; width:min(48vw,650px); height:82%; display:grid; place-items:center; perspective:1000px; } .page-hero-image { width:62%; height:68%; background:var(--page-visual) center/contain no-repeat; filter:drop-shadow(0 0 28px rgba(80,223,255,.38)) drop-shadow(0 0 52px rgba(255,43,122,.22)); animation:pageVisualFloat 7s ease-in-out infinite; } .page-hero-orbit { position:absolute; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:inset 0 0 55px rgba(139,92,246,.06),0 0 45px rgba(80,223,255,.06); }.page-hero-orbit::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan);top:14%;left:14%} .orbit-one { width:82%; aspect-ratio:1; animation:spin 26s linear infinite; }.orbit-two{width:56%;aspect-ratio:1;border-color:rgba(255,43,122,.24);animation:spinReverse 17s linear infinite}.orbit-two::after{background:var(--magenta);box-shadow:0 0 16px var(--magenta);top:auto;left:auto;right:9%;bottom:22%} .page-hero-scan { position:absolute; width:76%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 18px var(--cyan); animation:pageScan 5s ease-in-out infinite; } .page-lead { max-width:680px; margin-top:28px; } .page-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; } .portfolio-card { grid-column:span 6; position:relative; overflow:hidden; min-height:620px; border-radius:22px; background:#120b17; } .portfolio-card.wide { grid-column:1/-1; min-height:680px; } .portfolio-card img,.portfolio-card video { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); } .portfolio-card:hover img { transform:scale(1.035); } .portfolio-card .media-label { padding-top:120px; background:linear-gradient(transparent,rgba(6,4,10,.78)); margin:-120px -20px -18px; padding-inline:40px; padding-bottom:26px; } .portfolio-note { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:42px; padding-top:32px; border-top:1px solid var(--line); } .portfolio-note p { margin:0; color:var(--mist); line-height:1.7; } .service-card { min-height:620px; padding:28px; border-radius:22px; display:flex; flex-direction:column; background:linear-gradient(145deg,#120919,#09070d); } .service-card .icon { width:58px; height:58px; display:grid; place-items:center; margin:28px 0 34px; border:1px solid rgba(80,223,255,.35); border-radius:50%; color:var(--cyan); font-size:1.2rem; box-shadow:0 0 30px rgba(80,223,255,.08); } .service-card h2 { margin:24px 0 12px; font-size:1.65rem; line-height:1.1; letter-spacing:-.04em; } .service-card p { margin:0 0 22px; color:var(--mist); font-size:.9rem; line-height:1.65; } .service-card .service-summary { min-height:88px; color:rgba(255,255,255,.76); } .service-detail { padding:17px 0; border-top:1px solid var(--line); } .service-detail strong { display:block; margin-bottom:8px; color:var(--magenta); font-size:.56rem; letter-spacing:.13em; } .service-detail p { margin:0; font-size:.8rem; } .service-detail ul { margin:0; padding:0; list-style:none; } .service-detail li { position:relative; padding:5px 0 5px 14px; color:var(--mist); font-size:.8rem; line-height:1.45; } .service-detail li::before { content:""; position:absolute; left:0; top:12px; width:5px; height:1px; background:var(--cyan); } .service-card a { margin-top:auto; padding-top:22px; border-top:1px solid var(--line); font-size:.65rem; font-weight:800; letter-spacing:.12em; } .case-products { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; } .product-card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--panel); } .product-card img { aspect-ratio:4/5; object-fit:cover; transition:transform .8s; } .product-card:hover img { transform:scale(1.04); } .product-card div { padding:24px; } .product-card span { color:var(--magenta); font-size:.58rem; font-weight:800; letter-spacing:.13em; } .product-card h3 { margin:10px 0; font-size:1.5rem; } .product-card p { margin:0; color:var(--mist); font-size:.88rem; line-height:1.6; } .service-process-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); } .service-process { min-height:300px; padding:28px; border-right:1px solid var(--line-dark); } .service-process:last-child { border-right:0; } .service-process span { color:#7a7183; font-family:"Michroma",sans-serif; font-size:.54rem; letter-spacing:.12em; } .service-process h3 { margin:96px 0 14px; font-size:1.45rem; letter-spacing:-.035em; } .service-process p { margin:0; color:#5f5868; font-size:.86rem; line-height:1.65; } .article-card { min-height:0; padding:0; display:flex; flex-direction:column; border-radius:22px; background:linear-gradient(145deg,#120919,#09070d); } .article-thumb { position:relative; overflow:hidden; border-bottom:1px solid var(--line); } .article-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(6,4,10,.44)); pointer-events:none; } .article-thumb img { aspect-ratio:16/10; object-fit:cover; transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .75s; } .article-card:hover .article-thumb img { transform:scale(1.045); filter:saturate(1.08); } .article-card-content { flex:1; display:flex; flex-direction:column; padding:26px; } .article-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-bottom:24px; color:var(--muted); font-size:.58rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .article-card h2 { margin:0 0 14px; font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.22; letter-spacing:-.035em; } .article-card p { margin:0 0 26px; color:var(--mist); font-size:.88rem; line-height:1.65; } .article-card a { margin-top:auto; font-size:.65rem; font-weight:800; letter-spacing:.12em; } .article-body { max-width:860px; margin:90px auto 0; padding-top:70px; border-top:1px solid var(--line); scroll-margin-top:90px; } .article-body h2 { margin:0 0 22px; font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.05em; } .article-body h3 { margin:42px 0 14px; font-size:1.35rem; } .article-body p,.article-body li { color:var(--mist); font-size:1rem; line-height:1.85; } .article-body ol { padding-left:22px; } .article-body ul { padding-left:22px; } .article-body figure { margin:36px 0; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--panel); } .article-body figure img { max-height:620px; object-fit:cover; } .article-body figcaption { padding:14px 18px; color:var(--muted); font-size:.7rem; line-height:1.55; letter-spacing:.06em; } .article-body blockquote { margin:34px 0; padding:22px 26px; border-left:2px solid var(--magenta); background:rgba(255,43,122,.06); color:#fff; font-size:1.15rem; line-height:1.65; } .article-checklist { margin:30px 0; padding:24px 28px; border:1px solid var(--line); border-radius:18px; background:rgba(80,223,255,.04); } .article-checklist strong { display:block; margin-bottom:12px; color:var(--cyan); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; } .about-story { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,7vw,100px); } .about-story h2 { position:sticky; top:110px; margin:0; font-size:clamp(2.6rem,5vw,4.8rem); line-height:.95; letter-spacing:-.055em; } .about-copy p { margin:0 0 24px; color:var(--mist); font-size:clamp(1rem,1.3vw,1.16rem); line-height:1.8; } .about-copy .lead { color:#fff; font-size:clamp(1.4rem,2.4vw,2.25rem); line-height:1.35; letter-spacing:-.035em; } .value-card { min-height:300px; padding:28px; border-radius:22px; background:linear-gradient(145deg,#140b1b,#09070d); } .value-card h3 { margin:90px 0 15px; font-size:1.7rem; } .value-card p { margin:0; color:var(--mist); line-height:1.65; font-size:.9rem; } .founder-card { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; padding:clamp(28px,5vw,70px); border:1px solid var(--line); border-radius:24px; background:radial-gradient(circle at 80% 40%,rgba(255,43,122,.16),transparent 35%),var(--panel); } .founder-identity { display:flex; flex-direction:column; align-items:flex-start; min-width:0; } .founder-portrait { position:relative; width:clamp(148px,14vw,190px); aspect-ratio:1; margin:0 0 30px; padding:6px; overflow:visible; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:linear-gradient(145deg,rgba(255,43,122,.95),rgba(80,223,255,.82)); box-shadow:0 22px 54px rgba(0,0,0,.42),0 0 34px rgba(80,223,255,.12); isolation:isolate; } .founder-portrait::before { content:""; position:absolute; z-index:-1; inset:-10px; border:1px solid rgba(255,255,255,.11); border-radius:50%; } .founder-portrait span { display:block; width:100%; height:100%; overflow:hidden; border:3px solid #0d0714; border-radius:50%; background:#606060; } .founder-portrait img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 43%; transform:scale(1.15); transform-origin:50% 43%; } .founder-copy { align-self:center; } .founder-card h2 { margin:10px 0; font-size:clamp(2rem,4vw,4rem); letter-spacing:-.055em; } .founder-card p { color:var(--mist); line-height:1.75; } .faq-list { max-width:980px; margin:auto; border-top:1px solid var(--line); } .faq-item { border-bottom:1px solid var(--line); } .faq-question { width:100%; padding:28px 0; display:grid; grid-template-columns:44px 1fr 28px; gap:18px; align-items:center; border:0; background:none; color:#fff; text-align:left; cursor:pointer; } .faq-question span:first-child { color:var(--cyan); font-family:"Michroma",sans-serif; font-size:.58rem; } .faq-question strong { font-size:clamp(1rem,2vw,1.25rem); } .faq-question i { font-style:normal; font-size:1.5rem; transition:transform .3s; } .faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; } .faq-answer > div { overflow:hidden; } .faq-answer p { max-width:760px; margin:0 0 28px; padding-left:62px; color:var(--mist); line-height:1.75; } .faq-item.open .faq-answer { grid-template-rows:1fr; } .faq-item.open .faq-question i { transform:rotate(45deg); } .legal-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(40px,8vw,110px); align-items:start; } .legal-sidebar { position:sticky; top:105px; } .legal-sidebar > span { display:block; margin-bottom:18px; color:var(--magenta); font-family:"Michroma",sans-serif; font-size:.55rem; letter-spacing:.13em; } .legal-sidebar nav { display:flex; flex-direction:column; border-top:1px solid var(--line); } .legal-sidebar a { padding:13px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.07em; transition:.2s; } .legal-sidebar a:hover,.legal-sidebar a[aria-current="page"] { color:#fff; padding-left:8px; } .legal-sidebar a[aria-current="page"] { border-bottom-color:rgba(80,223,255,.45); } .legal-document { max-width:850px; } .legal-meta { display:flex; flex-wrap:wrap; gap:10px 28px; margin-bottom:42px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:.62rem; letter-spacing:.08em; } .legal-notice { margin-bottom:42px; padding:22px 24px; border:1px solid rgba(80,223,255,.24); border-radius:16px; color:var(--mist); background:rgba(80,223,255,.04); font-size:.88rem; line-height:1.7; } .legal-section { padding:0 0 38px; margin-bottom:38px; border-bottom:1px solid var(--line); } .legal-section:last-child { margin-bottom:0; border-bottom:0; } .legal-section h2 { margin:0 0 18px; font-size:clamp(1.45rem,3vw,2.25rem); line-height:1.15; letter-spacing:-.04em; } .legal-section h3 { margin:30px 0 12px; font-size:1.05rem; } .legal-section p,.legal-section li { color:var(--mist); font-size:.94rem; line-height:1.82; } .legal-section p { margin:0 0 16px; } .legal-section ul,.legal-section ol { margin:14px 0 18px; padding-left:20px; } .legal-section a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; } .legal-identity { display:grid; grid-template-columns:150px 1fr; gap:13px 24px; } .legal-identity dt { color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .legal-identity dd { margin:0; color:var(--mist); font-size:.9rem; line-height:1.6; } .cta-band { overflow:hidden; background:linear-gradient(120deg,#160718,#0a0710 55%,#071016); } .cta-band .section-inner { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; } .cta-band h2 { margin:0; max-width:800px; font-size:clamp(2.8rem,6vw,6rem); line-height:.92; letter-spacing:-.065em; } .cta-band p { margin:20px 0 0; max-width:580px; color:var(--mist); line-height:1.7; } .site-footer { padding:70px var(--pad) 34px; background:#050308; border-top:1px solid var(--line); } .footer-grid { width:min(100%,var(--max)); margin:auto; display:grid; grid-template-columns:1.2fr .55fr .55fr .8fr; gap:40px; } .footer-logo img { width:220px; height:60px; object-fit:contain; object-position:left; } .footer-col span { color:var(--muted); font-size:.58rem; font-weight:800; letter-spacing:.14em; } .footer-col p,.footer-col a { display:block; margin:12px 0 0; color:var(--mist); font-size:.86rem; line-height:1.65; } .footer-end { width:min(100%,var(--max)); margin:52px auto 0; padding-top:24px; display:flex; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:.58rem; letter-spacing:.13em; } .ai-launcher { position:fixed; z-index:86; right:clamp(18px,2.5vw,34px); bottom:clamp(18px,2.5vw,32px); min-height:54px; padding:0 18px; display:flex; align-items:center; gap:11px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:linear-gradient(115deg,rgba(255,43,122,.96),rgba(139,92,246,.94)); box-shadow:0 16px 42px rgba(0,0,0,.48),0 0 28px rgba(255,43,122,.24); cursor:pointer; font-size:.63rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; transition:transform .3s ease,box-shadow .3s ease; } .ai-launcher:hover { transform:translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.54),0 0 38px rgba(80,223,255,.22); } .ai-launcher-orb { position:relative; width:20px; height:20px; border:1px solid rgba(255,255,255,.65); border-radius:50%; } .ai-launcher-orb::before,.ai-launcher-orb::after { content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; box-shadow:0 0 13px #fff,0 0 24px var(--cyan); } .ai-launcher-orb::after { inset:-5px; border:1px dashed rgba(255,255,255,.4); background:none; animation:spin 9s linear infinite; } .ai-chat { position:fixed; z-index:87; right:clamp(18px,2.5vw,34px); bottom:clamp(82px,7vw,98px); width:min(410px,calc(100vw - 36px)); height:min(650px,calc(100svh - 120px)); display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:24px; background:rgba(8,5,13,.96); box-shadow:0 32px 90px rgba(0,0,0,.66),0 0 70px rgba(139,92,246,.13); backdrop-filter:blur(22px); opacity:0; transform:translateY(16px) scale(.97); pointer-events:none; transform-origin:bottom right; transition:opacity .25s ease,transform .25s ease; } .ai-chat.open { opacity:1; transform:none; pointer-events:auto; } .ai-chat-header { position:relative; padding:18px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); background:linear-gradient(110deg,rgba(255,43,122,.12),rgba(80,223,255,.06)); } .ai-chat-mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(80,223,255,.4); border-radius:50%; color:var(--cyan); box-shadow:inset 0 0 18px rgba(80,223,255,.08); } .ai-chat-title { flex:1; } .ai-chat-title strong { display:block; font-size:.77rem; letter-spacing:.08em; } .ai-chat-title span { display:flex; align-items:center; gap:6px; margin-top:4px; color:var(--muted); font-size:.54rem; letter-spacing:.11em; text-transform:uppercase; } .ai-chat-title i { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); } .ai-chat-close { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; color:#fff; background:none; cursor:pointer; font-size:1.1rem; } .ai-chat-messages { overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; } .ai-message { max-width:88%; padding:12px 14px; border:1px solid var(--line); border-radius:16px 16px 16px 4px; color:var(--mist); background:rgba(255,255,255,.045); font-size:.82rem; line-height:1.62; white-space:pre-wrap; overflow-wrap:anywhere; } .ai-message.user { align-self:flex-end; border-color:rgba(255,43,122,.26); border-radius:16px 16px 4px 16px; color:#fff; background:rgba(255,43,122,.12); } .ai-message.error { border-color:rgba(255,43,122,.3); color:#f8b8ce; } .ai-message.typing { width:66px; display:flex; gap:5px; align-items:center; } .ai-message.typing i { width:5px; height:5px; border-radius:50%; background:var(--cyan); animation:aiTyping 1s ease-in-out infinite; } .ai-message.typing i:nth-child(2){animation-delay:.15s}.ai-message.typing i:nth-child(3){animation-delay:.3s} .ai-suggestions { display:flex; flex-wrap:wrap; gap:7px; padding:0 20px 12px; } .ai-suggestion { padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:rgba(255,255,255,.72); background:rgba(255,255,255,.03); cursor:pointer; font-size:.62rem; line-height:1.35; text-align:left; transition:.2s; } .ai-suggestion:hover { border-color:var(--cyan); color:#fff; } .ai-chat-form { padding:12px; border-top:1px solid var(--line); background:rgba(5,3,8,.8); } .ai-input-shell { display:grid; grid-template-columns:1fr 42px; gap:8px; align-items:end; padding:9px 9px 9px 13px; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(255,255,255,.035); transition:border-color .2s; } .ai-input-shell:focus-within { border-color:rgba(80,223,255,.55); } .ai-chat-form textarea { width:100%; max-height:110px; min-height:38px; resize:none; border:0; outline:0; color:#fff; background:none; font:500 .8rem/1.5 "Manrope",sans-serif; } .ai-chat-form textarea::placeholder { color:var(--muted); } .ai-send { width:40px; height:40px; border:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--magenta),var(--violet)); cursor:pointer; font-size:1rem; } .ai-send:disabled,.ai-chat-form textarea:disabled { opacity:.45; cursor:not-allowed; } .ai-disclaimer { margin:8px 4px 0; color:var(--muted); font-size:.5rem; line-height:1.4; text-align:center; letter-spacing:.04em; } .service-companion { position:fixed; z-index:85; left:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); width:62px; height:62px; pointer-events:none; transition:width .35s ease,height .35s ease; } .service-companion.open { width:470px; height:300px; } .companion-robot { position:absolute; z-index:2; left:0; bottom:0; width:62px; height:62px; padding:4px; overflow:hidden; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:linear-gradient(145deg,#1a0b24,#07121a); cursor:pointer; pointer-events:auto; box-shadow:0 12px 35px rgba(0,0,0,.52),0 0 25px rgba(80,223,255,.2); animation:launcherPulse 3.5s ease-in-out infinite; transition:width .35s ease,height .35s ease,border-radius .35s ease,background .35s ease; } .companion-robot img { height:115px; object-fit:contain; object-position:center 4px; transition:height .35s ease,object-position .35s ease; } .service-companion.open .companion-robot { width:135px; height:225px; border-color:transparent; border-radius:25px; background:transparent; box-shadow:none; animation:companionFloat 4.8s ease-in-out infinite; overflow:visible; } .service-companion.open .companion-robot img { height:100%; object-position:center bottom; } .companion-status { position:absolute; z-index:3; top:5px; right:5px; width:11px; height:11px; border:2px solid #09060e; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px var(--cyan); transition:.35s ease; }.service-companion.open .companion-status{top:40px;right:17px} .companion-bubble { position:absolute; z-index:1; left:110px; bottom:54px; width:320px; padding:19px; border:1px solid rgba(255,255,255,.22); border-radius:20px 20px 20px 5px; color:#fff; background:linear-gradient(135deg,rgba(18,8,27,.97),rgba(6,12,20,.96)); box-shadow:0 26px 70px rgba(0,0,0,.62),0 0 35px rgba(139,92,246,.13); backdrop-filter:blur(20px); opacity:0; pointer-events:none; transform:translate(-12px,12px) scale(.94); transform-origin:bottom left; transition:.32s cubic-bezier(.2,.8,.2,1); } .service-companion.open .companion-bubble { opacity:1; pointer-events:auto; transform:none; } .companion-close { position:absolute; top:10px; right:11px; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; color:#fff; background:rgba(255,255,255,.04); cursor:pointer; } .companion-kicker { display:flex; align-items:center; gap:7px; color:var(--cyan); font-size:.52rem; font-weight:800; letter-spacing:.13em; }.companion-kicker i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)} .companion-bubble strong { display:block; margin:13px 25px 7px 0; font-size:1.08rem; letter-spacing:-.025em; }.companion-bubble p{margin:0;color:var(--mist);font-size:.72rem;line-height:1.55} .companion-choices { display:flex; gap:7px; margin:14px 0; }.companion-choices button{padding:7px 9px;border:1px solid var(--line);border-radius:999px;color:rgba(255,255,255,.75);background:rgba(255,255,255,.035);cursor:pointer;font-size:.58rem}.companion-choices button:hover,.companion-choices button.active{border-color:var(--cyan);color:#fff;background:rgba(80,223,255,.08)} .companion-cta { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--line); color:#fff; font-size:.61rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.companion-cta span{color:var(--magenta);font-size:1rem} .reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1); } .reveal.visible { opacity:1; transform:none; } .delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.24s; } @keyframes float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-16px) rotate(1deg)} } @keyframes spin { to{transform:rotate(360deg)} } @keyframes spinReverse { to{transform:rotate(-360deg)} } @keyframes scan { 0%,100%{top:25%;opacity:0} 15%,85%{opacity:1} 50%{top:72%} } @keyframes heroDrift { 0%{transform:scale(1.015) translate3d(0,0,0)} 100%{transform:scale(1.06) translate3d(-1.2%,.6%,0)} } @keyframes whiteNeon { 0%,100%{text-shadow:0 0 0 rgba(255,255,255,0),0 0 10px rgba(80,223,255,.08)} 48%{text-shadow:0 0 7px rgba(255,255,255,.52),0 0 20px rgba(80,223,255,.28),0 0 38px rgba(255,43,122,.16)} 56%{text-shadow:0 0 3px rgba(255,255,255,.28),0 0 13px rgba(80,223,255,.18)} } @keyframes heroSpectrum { 0%,100%{background-position:0% 50%;filter:drop-shadow(0 8px 20px rgba(255,43,122,.16))} 50%{background-position:100% 50%;filter:drop-shadow(0 8px 28px rgba(80,223,255,.28))} } @keyframes spectrumFlow { to{background-position:-300% 50%} } @keyframes orbitSpin { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} } @keyframes orbitSpinReverse { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(-360deg)} } @keyframes beamVertical { 0%,100%{transform:translateX(0);opacity:.18} 50%{transform:translateX(-7vw);opacity:.58} } @keyframes beamHorizontal { 0%,100%{transform:translateY(-4vh);opacity:.15} 50%{transform:translateY(6vh);opacity:.52} } @keyframes aiTyping { 0%,100%{opacity:.25;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)} } @keyframes navIconFloat { 0%,100%{transform:translateY(0) rotateY(-4deg)} 50%{transform:translateY(-3px) rotateY(7deg)} } @keyframes companionFloat { 0%,100%{transform:translateY(0) rotate(-.4deg)} 50%{transform:translateY(-7px) rotate(.7deg)} } @keyframes launcherPulse { 0%,100%{transform:translateY(0);box-shadow:0 12px 35px rgba(0,0,0,.52),0 0 18px rgba(80,223,255,.18)} 50%{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.56),0 0 30px rgba(255,43,122,.28)} } @keyframes pageVisualFloat { 0%,100%{transform:translateY(0) rotateY(-4deg) rotateX(1deg)} 50%{transform:translateY(-16px) rotateY(6deg) rotateX(-2deg)} } @keyframes pageScan { 0%,100%{transform:translateY(-170px);opacity:0} 18%,82%{opacity:.65} 50%{transform:translateY(170px)} } @media (max-width:1050px) { .site-header { grid-template-columns:170px 1fr auto; }.desktop-nav { display:none; }.menu-toggle,.mobile-menu { display:block; } .hero-inner { grid-template-columns:1fr 44%; }.hero-visual { min-height:520px; } .feature-strip { grid-template-columns:1fr 1fr; }.feature-strip article:nth-child(2){border-right:0}.feature-strip article:nth-child(-n+2){border-bottom:1px solid var(--line)} .preview-grid,.services-grid,.article-grid,.values-grid { grid-template-columns:1fr 1fr; } .case-products { grid-template-columns:1fr 1fr; } .service-process-grid { grid-template-columns:1fr 1fr; }.service-process:nth-child(2){border-right:0}.service-process:nth-child(-n+2){border-bottom:1px solid var(--line-dark)} } @media (max-width:760px) { .site-header { height:70px; grid-template-columns:1fr auto; }.brand-lockup img { width:155px; }.header-cta,.language-toggle { display:none; } .hero { min-height:100svh; padding-top:110px; padding-bottom:70px; }.hero-inner { grid-template-columns:1fr; align-content:center; }.hero h1 { font-size:clamp(3rem,15vw,4.8rem); } .hero-background img { object-position:67% center; }.hero-background-wash { background:linear-gradient(180deg,rgba(4,3,8,.64),rgba(4,3,8,.48) 48%,rgba(4,3,8,.78)); } .hero-visual { min-height:250px; margin-top:-8px; }.hero-chip { font-size:.48rem; }.hero-chip.one{left:2%}.hero-chip.two{right:2%} .hero-meta { display:none; }.section { padding-block:88px; }.section-heading { grid-template-columns:1fr; gap:22px; }.section-heading h2,.page-hero h1 { font-size:clamp(2.6rem,12vw,4rem); } .feature-strip,.preview-grid,.services-grid,.article-grid,.values-grid,.case-products { grid-template-columns:1fr; }.feature-strip article { border-right:0;border-bottom:1px solid var(--line)!important }.feature-strip article:last-child{border-bottom:0!important} .media-showcase { grid-template-columns:1fr; }.image-stack { gap:12px; }.image-card:first-child{grid-column:1/-1}.media-label{left:14px;right:14px;bottom:14px}.media-label strong{font-size:1rem}.media-label span{font-size:.52rem} .page-hero { min-height:60vh; padding-top:130px; }.portfolio-card,.portfolio-card.wide { grid-column:1/-1; min-height:520px; }.portfolio-note,.about-story,.founder-card { grid-template-columns:1fr; }.about-story h2{position:static}.founder-identity{align-items:center;text-align:center}.founder-portrait{width:156px;margin-bottom:26px}.founder-copy{text-align:left}.service-card{min-height:0}.service-card .service-summary{min-height:0} .service-process-grid { grid-template-columns:1fr; }.service-process{min-height:230px;border-right:0!important;border-bottom:1px solid var(--line-dark)}.service-process:last-child{border-bottom:0}.service-process h3{margin-top:60px} .legal-layout { grid-template-columns:1fr; gap:50px; }.legal-sidebar{position:static}.legal-sidebar nav{display:grid;grid-template-columns:1fr 1fr}.legal-sidebar a:nth-child(odd){padding-right:12px}.legal-identity{grid-template-columns:1fr;gap:4px}.legal-identity dd{margin-bottom:14px} .cta-band .section-inner { grid-template-columns:1fr; align-items:start; }.footer-grid { grid-template-columns:1fr; }.footer-end { flex-direction:column;gap:12px }.faq-answer p{padding-left:0}.faq-question{grid-template-columns:32px 1fr 24px} .ai-launcher { min-height:50px; padding:0 15px; font-size:.56rem; }.ai-chat { right:10px; bottom:76px; width:calc(100vw - 20px); height:min(680px,calc(100svh - 92px)); border-radius:20px; }.ai-chat-messages{padding:16px}.ai-suggestions{padding-inline:16px}.ai-message{max-width:92%} .page-hero-art{right:-16vw;top:15%;width:72vw;height:62%;opacity:.6}.page-hero-image{width:68%;height:66%}.visual-page-hero::after{background:linear-gradient(180deg,rgba(4,3,8,.82),rgba(4,3,8,.6) 55%,rgba(4,3,8,.9)),url('/agenz-hero-core.webp') 70% center/cover} .service-companion{left:12px;bottom:12px;width:54px;height:54px}.service-companion.open{width:calc(100vw - 12px);height:275px}.companion-robot{width:54px;height:54px}.companion-robot img{height:98px}.service-companion.open .companion-robot{width:98px;height:165px}.service-companion.open .companion-status{top:28px;right:10px}.companion-bubble{position:fixed;left:10px;right:10px;bottom:148px;width:auto;border-radius:18px}.companion-bubble strong{font-size:1rem} } @media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.hero-background img,.hero-white,.hero-spectrum,.gradient-word,.background-orbit,.hero-neon-beam,.core-scan,.nav-icon-shell img,.companion-robot{animation:none!important} } /* Agenz Design Intelligence */ .design-hero{position:relative;min-height:100svh;padding:145px var(--pad) 70px;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 75% 45%,rgba(80,223,255,.13),transparent 27%),radial-gradient(circle at 80% 30%,rgba(255,43,122,.17),transparent 42%),#050308}.design-hero::before{content:"";position:absolute;z-index:-2;inset:0;background:url('/agenz-hero-core.webp') center/cover;opacity:.22}.design-hero-grid{position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:65px 65px;mask-image:radial-gradient(circle at 70%,#000,transparent 72%)}.design-hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.design-hero h1{margin:0;max-width:850px;font-size:clamp(3.3rem,6.3vw,6.5rem);line-height:.91;letter-spacing:-.075em}.design-hero-lead{max-width:680px;margin:28px 0;color:var(--mist);font-size:1.02rem;line-height:1.75}.trust-row{display:flex;flex-wrap:wrap;gap:16px 25px;margin-top:28px;color:rgba(255,255,255,.6);font-size:.6rem;letter-spacing:.06em}.trust-row span{display:flex;align-items:center;gap:7px}.trust-row i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.design-core{position:relative;min-height:570px;display:grid;place-items:center}.design-core img{position:relative;z-index:2;width:58%;filter:drop-shadow(0 0 40px rgba(80,223,255,.28));animation:float 7s ease-in-out infinite}.design-core-ring{position:absolute;border:1px solid rgba(255,255,255,.17);border-radius:50%}.ring-a{width:80%;aspect-ratio:1;animation:spin 28s linear infinite}.ring-b{width:57%;aspect-ratio:1;border-style:dashed;border-color:rgba(255,43,122,.4);animation:spinReverse 18s linear infinite}.core-label{position:absolute;z-index:3;padding:9px 11px;border:1px solid var(--line);background:rgba(6,4,10,.7);backdrop-filter:blur(10px);font-size:.52rem;font-weight:800;letter-spacing:.12em}.label-a{top:16%;left:0}.label-b{right:0;top:46%}.label-c{left:10%;bottom:15%} .design-workspace-section{background:#08050d}.design-workspace{display:grid;grid-template-columns:1fr .8fr;gap:24px}.design-intake,.analysis-panel{border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.025)}.design-intake{padding:24px}.upload-zone{position:relative;min-height:260px;display:grid;place-items:center;align-content:center;gap:8px;overflow:hidden;border:1px dashed rgba(80,223,255,.38);border-radius:18px;background:linear-gradient(145deg,rgba(80,223,255,.04),rgba(255,43,122,.04));cursor:pointer;text-align:center}.upload-zone input{position:absolute;opacity:0}.upload-zone strong{font-size:.76rem;letter-spacing:.12em}.upload-zone small{color:var(--muted);font-size:.65rem}.upload-icon{font-size:2rem;color:var(--cyan)}#upload-preview{position:absolute;inset:0;height:100%;object-fit:contain;padding:16px;background:#09060e;opacity:0;transition:.25s}#upload-preview.visible{opacity:1}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.design-intake label:not(.upload-zone):not(.consent-row){display:block;margin-top:15px}.design-intake label>span{display:block;margin-bottom:7px;color:var(--mist);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.design-intake input,.design-intake select,.design-intake textarea{width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;outline:0;color:#fff;background:#0d0913;font:500 .8rem/1.5 Manrope,sans-serif}.design-intake input:focus,.design-intake select:focus,.design-intake textarea:focus{border-color:var(--cyan)}.consent-row{display:grid!important;grid-template-columns:18px 1fr;gap:10px;align-items:start;margin:17px 0}.consent-row input{width:16px;height:16px}.consent-row span{margin:0!important;color:var(--muted)!important;font-size:.66rem!important;line-height:1.5;text-transform:none!important;letter-spacing:0!important}.analyze-button{width:100%}.analysis-panel{position:relative;min-height:580px;padding:28px;display:grid;place-items:center;overflow:hidden}.analysis-panel::before{content:"";position:absolute;width:330px;aspect-ratio:1;border:1px solid rgba(80,223,255,.14);border-radius:50%;box-shadow:0 0 80px rgba(139,92,246,.12);animation:spin 30s linear infinite}.analysis-state{position:absolute;top:24px;left:24px;display:flex;align-items:center;gap:8px;color:var(--cyan);font-size:.56rem;font-weight:800;letter-spacing:.12em}.analysis-state i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.analysis-empty,.analysis-result{position:relative;z-index:2;max-width:430px;text-align:center}.scan-product{width:110px;height:110px;margin:0 auto 24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:22px;color:var(--cyan);font-size:2.5rem;animation:launcherPulse 3s ease infinite}.analysis-panel h3{margin:0 0 12px;font-size:1.5rem}.analysis-panel p{color:var(--mist);font-size:.82rem;line-height:1.65}.analysis-result>span{color:var(--magenta);font-size:.56rem;font-weight:800;letter-spacing:.14em}.analysis-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:17px 0}.analysis-tags span{padding:7px 9px;border:1px solid var(--line);border-radius:999px;color:var(--mist);font-size:.6rem}.privacy-notice{margin-top:24px;padding:18px 21px;display:grid;grid-template-columns:210px 1fr;gap:20px;border:1px solid rgba(80,223,255,.22);border-radius:16px;background:rgba(80,223,255,.035)}.privacy-notice strong{color:var(--cyan);font-size:.63rem;letter-spacing:.11em}.privacy-notice p{margin:0;color:var(--mist);font-size:.72rem;line-height:1.6}.privacy-notice code{color:#fff} .template-market{background:#f4f1f6;color:#09060e}.template-market .section-heading p{color:#625c69}.template-toolbar{margin-bottom:22px;display:flex;justify-content:space-between;align-items:center}.template-toolbar span{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.template-toolbar select{padding:10px 14px;border:1px solid #d5ceda;border-radius:999px;background:#fff}.template-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.template-card{padding:0;overflow:hidden;border:1px solid #d9d2dd;border-radius:14px;color:#0a0710;background:#fff;cursor:pointer;text-align:left;transition:.25s}.template-card:hover,.template-card.selected{transform:translateY(-5px);border-color:#a437ff;box-shadow:0 18px 38px rgba(32,10,45,.14)}.template-card.selected{outline:2px solid var(--magenta)}.template-preview{aspect-ratio:4/5;padding:15px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:radial-gradient(circle at 70% 20%,hsla(var(--hue),95%,68%,.95),transparent 32%),linear-gradient(145deg,hsl(var(--hue),55%,12%),#07040a 72%);position:relative;overflow:hidden}.template-preview::before{content:"";position:absolute;inset:12% 13%;border:1px solid rgba(255,255,255,.25);transform:rotate(-7deg)}.template-preview i{position:absolute;top:14px;right:14px;color:rgba(255,255,255,.55);font-style:normal;font-size:.55rem}.template-preview b,.template-preview small{position:relative;z-index:2}.template-preview b{font-size:1rem;line-height:1}.template-preview small{margin-top:6px;font-size:.43rem;letter-spacing:.08em}.template-info{padding:10px;display:flex;justify-content:space-between;gap:6px}.template-info b,.template-info small{display:block}.template-info b{font-size:.65rem}.template-info small{margin-top:3px;color:#827889;font-size:.5rem}.template-info strong{font-size:.62rem;white-space:nowrap} .generation-flow .section-heading p{color:#5f5868}.flow-cards{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-dark)}.flow-cards article{min-height:260px;padding:28px;border-right:1px solid var(--line-dark)}.flow-cards article:last-child{border:0}.flow-cards span{color:#9a22e7;font-family:Michroma;font-size:.7rem}.flow-cards h3{margin:75px 0 12px;font-size:1.2rem}.flow-cards p{color:#625c69;font-size:.76rem;line-height:1.6}.payment-section{background:linear-gradient(140deg,#12051a,#050a10)}.payment-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.payment-methods article{padding:22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}.payment-methods strong,.payment-methods span{display:block}.payment-methods strong{font-size:1.05rem}.payment-methods span{margin-top:7px;color:var(--muted);font-size:.66rem}.payment-status{margin:18px 0 0;padding:14px 18px;border-left:2px solid var(--magenta);color:var(--mist);background:rgba(255,43,122,.06);font-size:.72rem;line-height:1.6}.category-item{border-top:1px solid var(--line)}.category-item:last-child{border-bottom:1px solid var(--line)}.category-item>button{width:100%;padding:22px 0;display:grid;grid-template-columns:55px 1fr auto 30px;gap:18px;align-items:center;border:0;color:#fff;background:none;cursor:pointer;text-align:left}.category-item>button span{color:var(--cyan);font-family:Michroma;font-size:.55rem}.category-item>button strong{font-size:1.15rem}.category-item>button small{color:var(--muted)}.category-item>button i{font-style:normal;font-size:1.2rem;transition:.25s}.category-item.open>button i{transform:rotate(45deg)}.category-content{display:flex;flex-wrap:wrap;gap:8px;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}.category-item.open .category-content{max-height:400px;padding:0 0 24px 73px}.category-content span{padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:var(--mist);font-size:.66rem}.format-guide{margin-top:50px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.format-guide article{padding:25px;background:#08050d}.format-guide strong{color:var(--cyan)}.format-guide p{margin:8px 0 0;color:var(--mist);font-size:.72rem;line-height:1.5} @media(max-width:1100px){.template-grid{grid-template-columns:repeat(3,1fr)}.design-core{min-height:460px}} @media(max-width:760px){.design-hero{padding-top:120px}.design-hero-inner,.design-workspace{grid-template-columns:1fr}.design-core{min-height:300px}.design-core img{width:45%}.design-hero h1{font-size:clamp(2.8rem,13vw,4.4rem)}.trust-row{display:grid}.field-grid{grid-template-columns:1fr}.analysis-panel{min-height:480px}.privacy-notice{grid-template-columns:1fr}.template-grid{grid-template-columns:repeat(2,1fr)}.flow-cards,.payment-methods{grid-template-columns:1fr}.flow-cards article{min-height:210px;border-right:0;border-bottom:1px solid var(--line-dark)}.flow-cards h3{margin-top:45px}.format-guide{grid-template-columns:1fr}.category-item>button{grid-template-columns:35px 1fr auto 20px}.category-item>button small{display:none}.category-item.open .category-content{padding-left:0}} .template-toolbar>div{display:flex;gap:8px}.template-preview{aspect-ratio:9/16;padding:0;background:#09060e}.template-preview::before{display:none}.template-preview img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.template-card:hover .template-preview img{transform:scale(1.035)}.template-preview::after{content:"PREVIEW";position:absolute;left:8px;bottom:8px;padding:4px 6px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:rgba(255,255,255,.8);background:rgba(0,0,0,.38);font-size:.42rem;font-weight:800;letter-spacing:.1em;backdrop-filter:blur(7px)}.template-preview i{top:8px;right:8px;padding:4px 6px;border-radius:999px;color:#fff;background:rgba(0,0,0,.5)}.template-preview em{position:absolute;top:8px;left:8px;padding:4px 6px;border-radius:999px;color:#fff;background:rgba(0,0,0,.5);font-size:.44rem;font-style:normal;font-weight:800}.template-info{align-items:start}.template-info span{min-width:0}.template-info b{line-height:1.35}.template-info small{line-height:1.35}.template-modal{position:fixed;z-index:120;inset:0;padding:clamp(18px,4vw,60px);display:grid;grid-template-columns:minmax(280px,520px) minmax(280px,420px);justify-content:center;align-items:center;gap:clamp(24px,4vw,58px);color:#fff;background:rgba(3,2,6,.9);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:.28s}.template-modal.open{opacity:1;pointer-events:auto}.template-modal-close{position:absolute;top:22px;right:24px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:#fff;background:rgba(255,255,255,.05);cursor:pointer;font-size:1.4rem}.template-modal-image{position:relative;max-height:82svh;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:20px;background:#07050b;box-shadow:0 28px 80px rgba(0,0,0,.65)}.template-modal-image img{width:auto;max-width:100%;height:auto;max-height:82svh;object-fit:contain}.watermark-layer{position:absolute;inset:-5%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);align-items:center;justify-items:center;transform:rotate(-18deg);pointer-events:none}.watermark-layer span{color:rgba(255,255,255,.25);font:800 clamp(.6rem,1.2vw,.9rem)/1 Michroma,sans-serif;letter-spacing:.08em;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5)}.template-modal-copy h3{margin:0 0 14px;font-size:clamp(2rem,4vw,3.6rem);line-height:.95;letter-spacing:-.055em}.template-modal-copy p{color:var(--mist);font-size:.85rem;line-height:1.7}.template-specs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.template-specs span{padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:var(--mist);font-size:.61rem}.template-price{display:block;margin:0 0 18px;color:var(--cyan);font-size:1.15rem}.selected-template-bar{margin-bottom:18px;padding:12px;display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;border:1px solid rgba(80,223,255,.36);border-radius:15px;background:rgba(80,223,255,.05)}.selected-template-bar img{height:76px;object-fit:cover;border-radius:8px}.selected-template-bar small,.selected-template-bar strong,.selected-template-bar em{display:block}.selected-template-bar small{color:var(--cyan);font-size:.5rem;font-weight:800;letter-spacing:.11em}.selected-template-bar strong{margin-top:5px;font-size:.82rem}.selected-template-bar em{margin-top:3px;color:var(--muted);font-size:.6rem;font-style:normal} @media(max-width:760px){.template-toolbar{align-items:flex-start;gap:12px}.template-toolbar>div{width:58%;display:grid}.template-toolbar select{width:100%;font-size:.65rem}.template-modal{padding:65px 12px 18px;display:block;overflow-y:auto}.template-modal-image{height:52svh}.template-modal-image img{height:100%;width:100%;object-fit:contain}.template-modal-copy{padding:22px 5px}.template-modal-copy h3{font-size:2.1rem}.template-modal-close{top:12px;right:12px}} /* Cinematic opening */ body.cinematic-playing{overflow:hidden}.cinematic-intro{position:fixed;z-index:500;inset:0;overflow:hidden;color:#fff;background:#010103;opacity:1;transition:opacity .85s ease,visibility .85s ease}.cinematic-intro.leaving{opacity:0;visibility:hidden;pointer-events:none}.cinema-space{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 52%,rgba(107,28,112,.26),transparent 28%),radial-gradient(circle at 50% 50%,rgba(80,223,255,.08),transparent 43%),#010103}.cinema-space::before{content:"";position:absolute;inset:-20%;opacity:.15;background-image:radial-gradient(#fff 0.6px,transparent .7px);background-size:23px 23px;animation:cinemaStars 6.5s ease-out both}.cinema-letterbox{position:absolute;z-index:8;left:0;right:0;height:8vh;background:#000;animation:letterboxOpen 1s 5.1s ease forwards}.cinema-letterbox.top{top:0}.cinema-letterbox.bottom{bottom:0}.cinema-horizon{position:absolute;left:-15%;right:-15%;top:52%;height:1px;background:linear-gradient(90deg,transparent,var(--magenta),#fff,var(--cyan),transparent);box-shadow:0 0 18px var(--cyan),0 0 60px var(--magenta);transform:scaleX(0);animation:horizonReveal 1.4s .35s cubic-bezier(.2,.8,.2,1) forwards}.cinema-flare{position:absolute;left:50%;top:52%;width:1px;height:1px;border-radius:50%;box-shadow:0 0 30px 12px #fff,0 0 110px 36px rgba(80,223,255,.52),0 0 240px 80px rgba(255,43,122,.3);opacity:0;animation:flareReveal 2.5s .5s ease forwards}.cinema-orbit{position:absolute;left:50%;top:52%;aspect-ratio:1;border-radius:50%;opacity:0}.cinema-orbit.orbit-a{width:min(68vw,830px);border:1px solid rgba(80,223,255,.28);animation:cinemaOrbitA 5.2s .7s ease forwards}.cinema-orbit.orbit-b{width:min(48vw,580px);border:1px dashed rgba(255,43,122,.4);animation:cinemaOrbitB 5.2s .8s ease forwards}.cinema-logo{position:absolute;z-index:4;left:50%;top:50%;width:min(76vw,780px);text-align:center;transform:translate(-50%,-45%)}.cinema-logo img{width:100%;height:170px;object-fit:contain;opacity:0;filter:blur(18px) brightness(3);animation:logoCinematic 2s 1.4s cubic-bezier(.15,.8,.2,1) forwards}.cinema-kicker,.cinema-tagline{display:block;font-family:Michroma,sans-serif;font-size:clamp(.42rem,.75vw,.62rem);letter-spacing:.34em;opacity:0}.cinema-kicker{color:var(--cyan);transform:translateY(12px);animation:cinemaCopyIn .9s 1s ease forwards}.cinema-tagline{margin-top:5px;color:rgba(255,255,255,.56);transform:translateY(-10px);animation:cinemaCopyIn .9s 2.2s ease forwards}.cinema-final{position:absolute;z-index:5;left:50%;top:50%;width:90%;text-align:center;font-size:clamp(1.9rem,5vw,5rem);font-weight:300;line-height:.95;letter-spacing:-.045em;opacity:0;transform:translate(-50%,-38%) scale(.96);animation:cinemaFinal 1.6s 4s ease both}.cinema-final b{color:transparent;background:linear-gradient(90deg,var(--magenta),#fff,var(--cyan));background-clip:text;-webkit-background-clip:text}.cinema-skip{position:absolute;z-index:10;right:28px;bottom:28px;padding:10px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:rgba(255,255,255,.65);background:rgba(255,255,255,.03);cursor:pointer;font-size:.55rem;font-weight:800;letter-spacing:.12em}.cinema-progress{position:absolute;z-index:10;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}.cinema-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--magenta),var(--cyan));box-shadow:0 0 12px var(--cyan);animation:cinemaProgress 6.2s linear forwards} @keyframes cinemaStars{from{transform:scale(1.2);opacity:0}25%{opacity:.15}to{transform:scale(1);opacity:.04}}@keyframes horizonReveal{to{transform:scaleX(1)}}@keyframes flareReveal{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:.18;transform:scale(2)}}@keyframes cinemaOrbitA{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(0)}30%{opacity:1}100%{opacity:.1;transform:translate(-50%,-50%) scale(1.2) rotate(180deg)}}@keyframes cinemaOrbitB{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(0)}30%{opacity:1}100%{opacity:.08;transform:translate(-50%,-50%) scale(.72) rotate(-220deg)}}@keyframes logoCinematic{0%{opacity:0;filter:blur(18px) brightness(3);transform:scale(.88)}45%{opacity:1;filter:blur(0) brightness(1.8)}100%{opacity:0;filter:blur(4px) brightness(1);transform:scale(1.045)}}@keyframes cinemaCopyIn{to{opacity:1;transform:none}}@keyframes cinemaFinal{0%,15%{opacity:0}35%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-56%) scale(1.025)}}@keyframes cinemaProgress{to{width:100%}}@keyframes letterboxOpen{to{height:0}}@keyframes cinemaStars{from{transform:scale(1.2);opacity:0}25%{opacity:.15}to{transform:scale(1);opacity:.04}} /* AI Tools visual cleanup */ .design-ai-page .site-header{background:linear-gradient(180deg,rgba(3,2,7,.82),transparent)}.design-hero{min-height:100svh;padding-bottom:105px;background:linear-gradient(90deg,rgba(3,2,7,.98) 0%,rgba(7,4,12,.9) 42%,rgba(7,4,12,.22) 72%,rgba(3,2,7,.68) 100%),radial-gradient(circle at 74% 42%,rgba(255,43,122,.2),transparent 28%),#030207}.design-hero::before{opacity:.12;filter:saturate(1.2) contrast(1.1)}.design-hero-ambient{position:absolute;z-index:-1;inset:0;overflow:hidden;opacity:.12;filter:blur(3px) saturate(1.3)}.design-hero-ambient img{position:absolute;width:26vw;max-width:380px;height:78vh;object-fit:cover;transform:rotate(8deg)}.design-hero-ambient img:nth-child(1){right:30%;top:12%}.design-hero-ambient img:nth-child(2){right:8%;top:6%;transform:rotate(-5deg)}.design-hero-ambient img:nth-child(3){right:-10%;top:18%;transform:rotate(10deg)}.design-hero-inner{grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);gap:clamp(35px,5vw,75px)}.design-hero-copy{position:relative;z-index:5}.design-showcase{position:relative;min-height:620px;perspective:1200px}.showcase-orbit{position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;border:1px solid rgba(80,223,255,.19);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 80px rgba(255,43,122,.09);animation:spin 32s linear infinite}.showcase-card{position:absolute;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:#07040b;box-shadow:0 28px 70px rgba(0,0,0,.58);transition:.4s}.showcase-card img{height:100%;object-fit:cover}.showcase-card figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;background:rgba(3,2,7,.62);backdrop-filter:blur(10px);font-size:.46rem;font-weight:800;letter-spacing:.1em;text-align:center}.card-main{z-index:3;left:26%;top:6%;width:48%;height:88%;animation:showcaseMain 7s ease-in-out infinite}.card-left{z-index:2;left:0;top:19%;width:36%;height:67%;transform:rotateY(17deg) rotate(-5deg);opacity:.82;animation:showcaseLeft 7.8s ease-in-out infinite}.card-right{z-index:2;right:0;top:17%;width:34%;height:69%;transform:rotateY(-17deg) rotate(5deg);opacity:.84;animation:showcaseRight 8.2s ease-in-out infinite}.showcase-chip{position:absolute;z-index:5;padding:10px 12px;border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(5,3,9,.62);backdrop-filter:blur(13px);font-size:.5rem;font-weight:800;letter-spacing:.12em}.chip-top{right:2%;top:8%}.chip-bottom{left:4%;bottom:5%}.design-steps{position:absolute;left:var(--pad);right:var(--pad);bottom:25px;display:flex;align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,.48);font-size:.57rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.design-steps span{display:flex;align-items:center;gap:7px}.design-steps b{color:var(--cyan);font-family:Michroma;font-size:.48rem}.design-steps i{width:48px;height:1px;background:linear-gradient(90deg,var(--magenta),rgba(255,255,255,.18))}.design-steps .active{color:#fff}.design-workspace-section{background:radial-gradient(circle at 85% 18%,rgba(80,223,255,.06),transparent 26%),linear-gradient(180deg,#08050d,#050308)}.design-workspace{align-items:start}.design-intake{position:sticky;top:95px}.analysis-panel{background:radial-gradient(circle at 50%,rgba(139,92,246,.09),transparent 42%),rgba(255,255,255,.025)}.template-market{background:linear-gradient(180deg,#f5f2f7,#ebe6ef)}.template-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.template-card{border-radius:18px}.template-preview{aspect-ratio:3/4}.template-preview img{object-fit:contain;background:#09060e}.template-info{padding:13px}.template-info b{font-size:.72rem}.template-toolbar{position:sticky;z-index:12;top:76px;padding:12px 14px;border:1px solid #d8d0dc;border-radius:16px;background:rgba(245,242,247,.9);backdrop-filter:blur(14px)} @keyframes showcaseMain{0%,100%{transform:translateY(0) rotateY(-2deg)}50%{transform:translateY(-13px) rotateY(3deg)}}@keyframes showcaseLeft{0%,100%{transform:translateY(0) rotateY(17deg) rotate(-5deg)}50%{transform:translateY(10px) rotateY(12deg) rotate(-3deg)}}@keyframes showcaseRight{0%,100%{transform:translateY(0) rotateY(-17deg) rotate(5deg)}50%{transform:translateY(-8px) rotateY(-12deg) rotate(3deg)}} @media(max-width:1180px){.site-header{grid-template-columns:180px 1fr auto}.desktop-nav{display:none}.menu-toggle,.mobile-menu{display:block}.design-hero-inner{grid-template-columns:1fr 430px}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.cinema-logo{width:88vw}.cinema-logo img{height:110px}.cinema-kicker,.cinema-tagline{letter-spacing:.2em}.cinema-orbit.orbit-a{width:95vw}.cinema-orbit.orbit-b{width:72vw}.cinema-final{font-size:2.5rem}.cinema-skip{right:14px;bottom:18px}.design-hero{padding-top:118px;padding-bottom:110px}.design-hero-inner{grid-template-columns:1fr}.design-showcase{min-height:390px;margin-top:20px}.card-main{left:24%;width:52%}.card-left{width:39%}.card-right{width:38%}.design-steps{left:16px;right:16px;bottom:22px;justify-content:flex-start;overflow-x:auto;gap:8px}.design-steps span{white-space:nowrap}.design-steps i{width:22px;flex:0 0 22px}.design-intake{position:static}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.template-info{display:block}.template-info>strong{display:block;margin-top:7px}.template-toolbar{top:68px}.design-hero-ambient img{width:50vw;opacity:.6}} @media(prefers-reduced-motion:reduce){.cinematic-intro{display:none}.showcase-card,.showcase-orbit{animation:none!important}} /* v21 workflow, accessibility, conversion */ :focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button:disabled{opacity:.46;cursor:not-allowed}.cinema-logo img{animation-duration:1.4s;animation-delay:.7s}.cinema-kicker{animation-delay:.35s}.cinema-tagline{animation-delay:1.45s}.cinema-final{animation-delay:2.45s;animation-duration:1.5s}.cinema-progress i{animation-duration:4.3s}.cinema-letterbox{animation-delay:3.7s}.recommendation-panel{margin-top:55px;padding:clamp(24px,4vw,48px);border:1px solid rgba(80,223,255,.24);border-radius:26px;background:radial-gradient(circle at 85% 15%,rgba(80,223,255,.1),transparent 30%),rgba(255,255,255,.025)}.recommendation-panel>div:first-child{max-width:780px}.recommendation-panel h2{margin:0;font-size:clamp(2.2rem,4.5vw,4.4rem);line-height:.95;letter-spacing:-.055em}.recommendation-panel>div>p:last-child{color:var(--mist);line-height:1.65}.recommendation-grid{margin:30px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.recommendation-grid button{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;color:#fff;background:#0c0811;cursor:pointer;text-align:left}.recommendation-grid img{height:210px;object-fit:cover}.recommendation-grid span{display:block;padding:12px}.recommendation-grid b,.recommendation-grid small{display:block}.recommendation-grid b{font-size:.67rem;line-height:1.35}.recommendation-grid small{margin-top:5px;color:var(--muted);font-size:.55rem;line-height:1.4}.template-modal-actions{display:grid;gap:9px}.compare-drawer{position:fixed;z-index:105;left:50%;bottom:18px;width:min(650px,calc(100vw - 28px));padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid rgba(80,223,255,.32);border-radius:999px;color:#fff;background:rgba(8,5,13,.94);box-shadow:0 18px 50px rgba(0,0,0,.55);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:.25s}.compare-drawer.visible{opacity:1;pointer-events:auto;transform:translate(-50%,0)}.compare-drawer>span{font-size:.55rem;font-weight:800;letter-spacing:.08em}.compare-thumbs{display:flex;gap:5px}.compare-thumbs img{width:32px;height:40px;object-fit:cover;border-radius:5px}.compare-drawer>button{padding:9px 13px;border:0;border-radius:999px;color:#fff;background:linear-gradient(110deg,var(--magenta),var(--violet));font-size:.56rem;font-weight:800}.compare-modal{position:fixed;z-index:130;inset:0;padding:80px var(--pad) 30px;overflow-y:auto;color:#fff;background:rgba(4,2,7,.96);backdrop-filter:blur(20px)}.compare-modal>:first-child{position:fixed;top:18px;right:20px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;color:#fff;background:#0c0811;font-size:1.2rem}.compare-modal>div{width:min(100%,1100px);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.compare-modal article{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.compare-modal img{height:55vh;object-fit:contain;background:#050308}.compare-modal h3{margin:14px 0 8px}.compare-modal article>span,.compare-modal article>b{display:block;color:var(--mist);font-size:.7rem}.compare-modal article>b{margin-top:6px;color:var(--cyan)}.compare-modal article>button{width:100%;margin-top:15px;padding:12px;border:0;border-radius:10px;color:#fff;background:var(--magenta);font-weight:800}.package-section{padding-top:110px}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.package-grid article{position:relative;padding:30px;border:1px solid var(--line-dark);border-radius:20px;background:#fff}.package-grid article.featured{color:#fff;border-color:rgba(80,223,255,.4);background:linear-gradient(145deg,#16091f,#07131a);transform:translateY(-12px);box-shadow:0 25px 55px rgba(33,10,45,.18)}.package-grid span{font-family:Michroma;font-size:.56rem;color:#9124d4}.package-grid .featured span{color:var(--cyan)}.package-grid h3{margin:22px 0 8px;font-size:1.7rem}.package-grid strong{font-size:.75rem}.package-grid ul{margin:25px 0;padding:0;list-style:none}.package-grid li{padding:10px 0;border-bottom:1px solid currentColor;color:#655c69;font-size:.72rem;opacity:.8}.package-grid .featured li{color:var(--mist)}.package-grid a{font-size:.64rem;font-weight:800;letter-spacing:.09em}.case-study-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-dark)}.case-study-grid article{min-height:300px;padding:28px;border-right:1px solid var(--line-dark)}.case-study-grid article:last-child{border:0}.case-study-grid span{color:#8d22d3;font-family:Michroma;font-size:.53rem}.case-study-grid h3{margin:70px 0 14px}.case-study-grid p{color:#625b68;font-size:.76rem;line-height:1.65} .replay-opening{border:0;color:var(--muted);background:none;cursor:pointer;font:800 .55rem/1 Manrope,sans-serif;letter-spacing:.11em} .workspace-page,.brief-page,.order-page{min-height:100vh;background:#06040a}.workspace-header,.simple-header{height:76px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(6,4,10,.94)}.workspace-header img,.simple-header img{width:180px;height:44px;object-fit:contain}.workspace-header>span,.workspace-back,.simple-header>a:last-child{color:var(--muted);font-size:.56rem;font-weight:800;letter-spacing:.11em}.workspace-shell{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 76px)}.workspace-sidebar{padding:28px 20px;border-right:1px solid var(--line);background:#09060e}.workspace-progress{display:grid;gap:4px}.workspace-progress span{padding:11px;display:flex;gap:10px;color:var(--muted);font-size:.66rem}.workspace-progress span.active{color:#fff;background:rgba(80,223,255,.06);border-left:2px solid var(--cyan)}.workspace-progress b{color:var(--cyan);font-family:Michroma;font-size:.5rem}.workspace-selected,.workspace-security{margin-top:28px;padding:14px;border:1px solid var(--line);border-radius:15px}.workspace-selected small,.workspace-selected strong,.workspace-selected span,.workspace-selected a{display:block}.workspace-selected small,.workspace-security strong{color:var(--cyan);font-size:.5rem;letter-spacing:.1em}.workspace-selected img{height:180px;margin:12px 0;object-fit:contain;background:#050308;border-radius:9px}.workspace-selected strong{font-size:.8rem}.workspace-selected span{margin-top:4px;color:var(--muted);font-size:.6rem}.workspace-selected a{margin-top:13px;font-size:.56rem;font-weight:800}.workspace-security p{margin-bottom:0;color:var(--muted);font-size:.62rem;line-height:1.55}.workspace-main{padding:clamp(28px,5vw,70px);max-width:1150px}.workspace-topline{display:flex;justify-content:space-between;gap:25px;align-items:end}.workspace-topline h1{margin:0;font-size:clamp(2.8rem,5.5vw,5.3rem);line-height:.92;letter-spacing:-.065em}.workspace-section{margin-top:35px;padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025)}.workspace-section-title{display:grid;grid-template-columns:45px 1fr;gap:12px}.workspace-section-title>span{color:var(--cyan);font-family:Michroma;font-size:.6rem}.workspace-section-title h2{margin:0;font-size:1.35rem}.workspace-section-title p{margin:6px 0 0;color:var(--muted);font-size:.72rem}.workspace-fields{margin-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:15px}.workspace-fields .full{grid-column:1/-1}.workspace-fields label>span,.choice-block>strong{display:block;margin-bottom:7px;color:var(--mist);font-size:.6rem;font-weight:800;letter-spacing:.08em}.workspace-fields input,.workspace-fields textarea{width:100%;padding:13px;border:1px solid var(--line);border-radius:11px;outline:0;color:#fff;background:#0c0812}.choice-block{margin-top:26px}.choice-chips{display:flex;flex-wrap:wrap;gap:8px}.choice-chips button,.lock-grid label{padding:10px 12px;border:1px solid var(--line);border-radius:999px;color:var(--mist);background:rgba(255,255,255,.025);font-size:.65rem}.choice-chips button.active{border-color:var(--cyan);color:#fff;background:rgba(80,223,255,.08)}.output-plans{margin-top:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.output-plans button{padding:18px;border:1px solid var(--line);border-radius:14px;color:#fff;background:#0c0812;text-align:left}.output-plans button.active{border-color:var(--magenta);background:rgba(255,43,122,.08)}.output-plans span,.output-plans strong,.output-plans small{display:block}.output-plans span{color:var(--cyan);font-size:.5rem;font-weight:800;letter-spacing:.1em}.output-plans strong{margin-top:16px;font-size:1.2rem}.output-plans small{margin-top:5px;color:var(--muted)}.lock-grid{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}.lock-grid label{cursor:pointer}.lock-grid input{accent-color:var(--magenta)}.qc-panel{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:14px}.qc-panel>strong{font-size:.58rem;letter-spacing:.1em}.qc-panel ul{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}.qc-panel li{color:#e8a5b9;font-size:.68rem}.qc-panel li::before{content:'○';margin-right:7px}.qc-panel li.pass{color:#79d8e9}.qc-panel li.pass::before{content:'✓'}.workspace-preview{position:relative;margin:25px auto 0;max-width:460px;max-height:650px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#050308}.workspace-preview>img{max-height:650px;object-fit:contain}.workspace-actions{margin-top:20px;display:flex;justify-content:center;gap:10px}.workspace-disclaimer{text-align:center;color:var(--muted);font-size:.62rem}.workspace-toast{position:fixed;z-index:50;left:50%;bottom:20px;padding:12px 18px;border:1px solid rgba(80,223,255,.35);border-radius:999px;color:#fff;background:#0b0810;opacity:0;transform:translate(-50%,20px);transition:.25s}.workspace-toast.show{opacity:1;transform:translate(-50%,0)} .brief-shell{width:min(100%,1180px);margin:auto;padding:110px var(--pad);display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.brief-intro h1,.order-shell h1{margin:0;font-size:clamp(3rem,6vw,6rem);line-height:.9;letter-spacing:-.07em}.brief-intro>p{color:var(--mist);line-height:1.7}.brief-trust{display:grid;gap:9px;margin-top:28px;color:var(--muted);font-size:.68rem}.project-brief-form{padding:28px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025)}.project-brief-form .field-grid{margin:0}.project-brief-form label>span,.order-shell label>span{display:block;margin-bottom:7px;color:var(--mist);font-size:.6rem;font-weight:800;letter-spacing:.07em}.project-brief-form input,.project-brief-form select,.project-brief-form textarea,.order-shell input{width:100%;padding:13px;border:1px solid var(--line);border-radius:11px;color:#fff;background:#0d0913}.form-note{color:var(--muted);font-size:.6rem;line-height:1.5}.brief-result{position:fixed;left:50%;bottom:20px;width:min(520px,calc(100vw - 30px));padding:15px;border:1px solid rgba(80,223,255,.3);border-radius:14px;color:#fff;background:#0b0810;transform:translateX(-50%)}.brief-result:empty{display:none}.brief-result strong,.brief-result span{display:block}.brief-result span{margin-top:5px;color:var(--muted);font-size:.65rem}.order-shell{width:min(900px,calc(100% - 40px));margin:auto;padding:110px 0}.order-shell form{margin-top:35px;padding:22px;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;border:1px solid var(--line);border-radius:18px}.order-demo{margin-top:35px;padding:25px;border:1px solid var(--line);border-radius:20px}.order-demo>div{display:flex;justify-content:space-between;gap:20px}.order-demo>div span{color:var(--cyan);font-family:Michroma;font-size:.56rem}.order-demo>div strong{color:var(--magenta);font-size:.6rem}.order-demo ol{margin:25px 0 0;padding:0;list-style:none}.order-demo li{position:relative;padding:15px 15px 15px 38px;border-left:1px solid var(--line);color:var(--muted)}.order-demo li::before{content:'';position:absolute;left:-5px;top:20px;width:9px;height:9px;border-radius:50%;background:#413947}.order-demo li.done::before,.order-demo li.active::before{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.order-demo li.active{color:#fff}.order-demo b,.order-demo small{display:block}.order-demo small{margin-top:4px} @media(max-width:900px){.recommendation-grid{grid-template-columns:repeat(2,1fr)}.package-grid,.case-study-grid{grid-template-columns:1fr 1fr}.case-study-grid article:nth-child(2){border-right:0}.workspace-shell{grid-template-columns:1fr}.workspace-sidebar{border-right:0;border-bottom:1px solid var(--line)}.workspace-progress{grid-template-columns:repeat(4,1fr)}.workspace-selected{display:grid;grid-template-columns:80px 1fr;gap:10px}.workspace-selected img{grid-row:1/5;height:90px;margin:0}.brief-shell{grid-template-columns:1fr;gap:40px}.order-shell form{grid-template-columns:1fr}} @media(max-width:600px){.recommendation-grid{grid-template-columns:1fr 1fr}.recommendation-grid img{height:170px}.compare-drawer{grid-template-columns:1fr auto}.compare-thumbs{display:none}.compare-modal>div{grid-template-columns:1fr}.compare-modal img{height:45vh}.package-grid,.case-study-grid{grid-template-columns:1fr}.package-grid article.featured{transform:none}.case-study-grid article{border-right:0;border-bottom:1px solid var(--line-dark)}.workspace-header>span{display:none}.workspace-header img{width:145px}.workspace-back{font-size:.48rem}.workspace-main{padding:28px 16px}.workspace-topline{display:block}.workspace-topline button{margin-top:18px}.workspace-fields,.output-plans,.qc-panel ul{grid-template-columns:1fr}.workspace-fields .full{grid-column:auto}.workspace-progress{overflow-x:auto}.workspace-progress span{white-space:nowrap}.brief-shell{padding:80px 20px}.project-brief-form{padding:18px}.project-brief-form .field-grid{grid-template-columns:1fr}.project-brief-form .field-grid .full{grid-column:auto}.order-demo>div{display:grid}} .project-form-external{position:relative;margin:18px 0 26px;padding:20px;overflow:hidden;border:1px solid rgba(80,223,255,.22);border-radius:16px;background:linear-gradient(135deg,rgba(80,223,255,.08),rgba(148,83,255,.05))} .project-form-external::after{content:"";position:absolute;right:-70px;top:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(80,223,255,.18),transparent 68%);pointer-events:none} .project-form-external strong,.project-form-external p,.project-form-external a{position:relative;z-index:1} .project-form-external strong{display:block;color:#fff;font-size:.82rem} .project-form-external p{margin:7px 0 16px;color:var(--muted);font-size:.66rem;line-height:1.6} .project-form-external .button{width:100%;justify-content:center;text-align:center} .project-form-divider{display:flex;align-items:center;gap:12px;margin:0 0 24px;color:var(--muted);font-size:.52rem;font-weight:800;letter-spacing:.09em} .project-form-divider::before,.project-form-divider::after{content:"";height:1px;flex:1;background:var(--line)}