:root { --primary: #080b0d; --primary-light: #101618; --text-gray: #a9b6bb; --secondary: #52eee0; --secondary-hover: #a2fff5; --border-dark: #ffffff15; --radius: 18px; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { color: #080b0d; background: #52eee0; }
nav { padding: 22px 6%; background: #080b0de8; }
.brand-container { gap: 17px; }
.text-logo-main { font-size: 1.3rem; letter-spacing: 4px; }
.text-logo-sub { font-size: .65rem; letter-spacing: 6px; }
.logo-mark { width: 25px; height: 25px; border-width: 2px; animation-duration: 24s; }
.section-links { display: flex; gap: 30px; align-items: center; }
.section-links a { color: #bac6ca; font-size: .82rem; text-decoration: none; transition: color .2s; }
.section-links a:hover, .section-links a[aria-current] { color: var(--secondary); }
.nav-actions { gap: 14px; }
.lang-btn { background: transparent; font-size: .72rem; padding: 9px 12px; min-width: 46px; }
.contact-btn { padding: 10px 21px; border-radius: 7px; font-size: .78rem; }
.hero { min-height: 850px; min-height: 100svh; padding: 175px 6% 140px; background: #080b0d; }
.hero-overlay { background: linear-gradient(90deg,#080b0df5 4%,#080b0dc2 48%,#080b0d3d 100%),linear-gradient(0deg,#080b0d,transparent 32%); }
#bg-canvas { opacity: .65; }
.hero-content { max-width: 720px; }
.hero-tag { border: 1px solid #52eee02b; border-radius: 4px; background: #52eee00b; font-size: .65rem; letter-spacing: 2px; padding: 7px 12px; margin-bottom: 28px; }
.hero h1 { font-family: var(--font-logo); font-size: clamp(3rem,5.4vw,6rem); letter-spacing: -3px; line-height: 1.06; margin-bottom: 28px; font-weight: 700; }
.hero h1 span { color: var(--secondary); }
.hero p { font-size: 1rem; max-width: 545px; line-height: 1.85; color: #bbc7cc; margin-bottom: 34px; }
.hero-btns { gap: 12px; }
.btn-primary,.btn-outline { padding: 14px 25px; border-radius: 7px; font-size: .84rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1.4; min-height: 49px; }
.btn-primary:hover { background: var(--secondary-hover); color: #080b0d; border-color: transparent; }
.btn-outline { border-color: #a9b6bb60; }
.hero-3d-canvas { width: 265px; height: 300px; margin-left: 20px; }
.orbit-label { position: absolute; bottom: -15px; width: 100%; text-align: center; color: #a7babc; font-family: var(--font-logo); font-size: .55rem; letter-spacing: 3px; }
.scroll-cue { position: absolute; left: 6%; bottom: 36px; z-index: 4; display: flex; gap: 25px; color: #b6c3c8; text-decoration: none; font-size: .67rem; letter-spacing: 1px; }
.scroll-cue span:last-child { color: var(--secondary); }
.discipline-strip { display: flex; justify-content: space-between; gap: 24px; padding: 26px 6%; border-block: 1px solid var(--border-dark); color: #a8b8bf; font-family: var(--font-logo); font-size: .72rem; letter-spacing: 2px; }
.discipline-strip span::before { content:'+'; color: var(--secondary); margin-right: 13px; }
section { padding: 110px 6%; }
.section-header { margin-bottom: 48px; }
.section-eyebrow { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; color: var(--secondary); font-size: .63rem; letter-spacing: 2px; font-weight: 600; }
.section-number { color: #91a1a8; font-family: var(--font-logo); font-size: .7rem; border-right: 1px solid #ffffff30; padding-right: 15px; }
.section-header h2 { font-family: var(--font-logo); font-size: clamp(2rem,3.4vw,3.3rem); font-weight: 700; line-height: 1.15; letter-spacing: -1.3px; margin-bottom: 18px; }
.section-header p { max-width: 600px; font-size: .95rem; line-height: 1.8; }
.sec-line { display: none; }
.portfolio-asym { gap: 40px 28px; }
.port-item { border-radius: 0; background: transparent; }
.port-media { border: 1px solid var(--border-dark); border-radius: 12px; aspect-ratio: 16/11; }
.project-link,.project-link picture { display: block; width: 100%; height: 100%; }
.project-link { position: relative; overflow: hidden; }
.port-media .project-link img { transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.port-item:hover .project-link img { transform: scale(1.025); }
.port-item:nth-child(2) .port-media { background: #fff; }
.port-item:nth-child(2) .port-media img { object-fit: contain; padding: 18px; }
.project-open { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 17px; align-items: center; background: #080b0de3; color: #eff; border: 1px solid #ffffff30; border-radius: 6px; padding: 8px 12px; font-size: .65rem; }
.project-open span:last-child { color: var(--secondary); font-size: 1rem; }
.port-info, .port-media:has(video) ~ .port-info { position: relative; bottom: auto !important; padding: 20px 2px 0; background: none; pointer-events: auto; }
.port-item:hover .port-info,.port-item:hover .port-media:has(video) ~ .port-info { transform: none; bottom: auto; }
.port-info h3 { font-family: var(--font-logo); font-size: 1.35rem; letter-spacing: -.4px; margin-bottom: 4px; }
.port-info span { color: #a4b4bc; letter-spacing: .5px; font-size: .73rem; }
.pricing-section { background: #0d1215; }
.pricing-grid { gap: 20px; }
.price-card { background: #10181c; border-radius: 12px; padding: 34px 28px; position: relative; }
.price-card.featured { transform: none; box-shadow: none; border-color: #52eee065; background: linear-gradient(145deg,#142c2b,#10181c 70%); }
.price-card h4 { color: #c7d8dc; font-size: .75rem; letter-spacing: 1px; min-height: 36px; }
.price-amount { font-family: var(--font-logo); font-size: clamp(1.9rem,3vw,2.8rem); letter-spacing: -1px; }
.price-desc { color: #91a5ae; line-height: 1.6; font-size: .74rem; }
.price-features { margin-bottom: 22px; }
.price-features li { font-size: .8rem; align-items: baseline; gap: 10px; }
.price-features i.fa-check { color: var(--secondary); }
.btn-card { border-radius: 6px; border-color: #ffffff24; background: transparent; font-size: .77rem; }
.price-note { max-width: 700px; margin: 30px auto 0; line-height: 1.8; font-size: .75rem; }
#motion { background: #080b0d; }
.reels-grid { gap: 22px; }
.reel-card { border-radius: 12px; }
.video-load { background: radial-gradient(ellipse at 50% 35%,#174b48,#10181c 65%); }
.video-load:hover { background: radial-gradient(ellipse at 50% 35%,#24635d,#10181c 65%); }
.play-symbol { border-color: #52eee070; color: var(--secondary); font-size: 20px; }
.reel-title { font-family: var(--font-logo); font-weight: 500; font-size: .83rem; text-align: left; padding-left: 2px; }
#process { border-block: 1px solid var(--border-dark); background: #0d1215; }
.process-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin-top: 45px; }
.step { min-width: 0; background: transparent; padding: 0 25px; border: 0; border-left: 1px solid #ffffff20; border-radius: 0; }
.step:first-child { padding-left: 0; border-left: 0; }
.step-num { font-family: var(--font-logo); color: var(--secondary); font-size: .85rem; margin-bottom: 26px; }
.step h4 { font-family: var(--font-logo); font-size: 1.05rem; line-height: 1.4; margin-bottom: 15px; color: #dce7eb; }
.step p { color: #91a5ae; font-size: .77rem; line-height: 1.9; }
.faq-section { display: grid; grid-template-columns: 1fr 1.25fr; gap: 90px; }
.faq-intro h2 { color: white; font-family: var(--font-logo); font-size: clamp(2rem,3.2vw,3rem); line-height: 1.2; letter-spacing: -1px; }
.faq-list details { border-bottom: 1px solid #ffffff22; padding: 20px 0; }
.faq-list details:first-child { border-top: 1px solid #ffffff22; }
.faq-list summary { color: #e0eaee; cursor: pointer; font-size: .9rem; padding-right: 24px; }
.faq-list summary::marker { color: var(--secondary); }
.faq-list details p { margin-top: 17px; font-size: .8rem; line-height: 1.9; max-width: 540px; }
.brief-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; background: radial-gradient(ellipse at 10% 100%,#16302d,#0c1417 55%); border-top: 1px solid #52eee025; }
.brief-intro h2 { color: white; font-family: var(--font-logo); font-size: clamp(2.7rem,4.7vw,4.5rem); line-height: 1.08; letter-spacing: -2px; margin-bottom: 24px; }
.brief-intro h2 span { color: var(--secondary); }
.brief-intro > p { font-size: .9rem; max-width: 390px; line-height: 1.85; margin-bottom: 24px; }
.email-link { color: #eff; text-decoration: none; font-family: var(--font-logo); font-size: clamp(.9rem,1.8vw,1.35rem); border-bottom: 1px solid #ffffff40; padding-bottom: 9px; display: inline-flex; align-items: center; gap: 24px; }
.email-link span { color: var(--secondary); }
.brief-intro .direct-contact { font-size: .75rem; margin-top: 30px; }
.direct-contact a { color: #bed2d5; text-decoration: none; display: inline-block; margin-top: 7px; }
#project-brief { border: 1px solid #ffffff20; background: #101c20b3; padding: 30px; border-radius: 14px; }
.form-row { margin-bottom: 19px; }
.form-row label { display: block; margin-bottom: 8px; color: #c9d8dd; font-size: .75rem; }
.form-row input,.form-row select,.form-row textarea { display: block; width: 100%; background: #080f12; color: #edf6f7; border: 1px solid #ffffff25; border-radius: 6px; padding: 12px; font: inherit; font-size: .82rem; line-height: 1.6; }
.form-row textarea { resize: vertical; min-height: 115px; }
.form-row input:focus,.form-row select:focus,.form-row textarea:focus { outline: 2px solid var(--secondary); outline-offset: 2px; }
.form-row textarea::placeholder { color: #718b95; }
.brief-submit { width: 100%; border: 1px solid transparent; font-family: inherit; cursor: pointer; justify-content: space-between; }
.form-note { font-size: .68rem; line-height: 1.75; color: #8da5af; margin-top: 14px; }
footer { padding: 58px 6% 28px; background: #070b0d; }
.footer-content { margin-bottom: 35px; }
.footer-brand p { font-size: .78rem; line-height: 1.8; }
.footer-contact h4 { font-size: .8rem; }
.footer-contact p { font-size: .78rem; }
.footer-bottom { font-size: .67rem; }
.whatsapp-float { width: 50px; height: 50px; font-size: 26px; right: 24px; bottom: 24px; }
dialog { position: fixed; inset: 0; margin: auto; width: min(1100px,92vw); max-height: 92svh; padding: 18px; border: 1px solid #ffffff30; border-radius: 12px; background: #0c1215; color: #dce9ed; }
dialog::backdrop { background: #020607e8; backdrop-filter: blur(8px); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.viewer-toolbar h2 { font-family: var(--font-logo); font-size: 1rem; line-height: 1.4; }
.viewer-close { background: transparent; color: #dce9ed; border: 1px solid #ffffff30; padding: 8px 12px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
#project-viewer-image { display: block; width: 100%; max-height: 71svh; object-fit: contain; background: #10181c; }
#project-viewer-original { display: inline-block; margin-top: 12px; color: var(--secondary); font-size: .72rem; }
.reveal.is-visible { animation: studio-enter .65s ease both; }
@keyframes studio-enter { from { opacity: .25; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) and (min-width: 769px) { .hero { flex-direction: row; text-align: left; gap: 20px; } .hero-content { text-align: left; display: block; max-width: 65%; } .hero-btns { justify-content: flex-start; } .hero-3d-canvas { width: 210px; height: 250px; margin: 0; } .pricing-grid,.reels-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: none; } .portfolio-asym { grid-template-columns: repeat(2,minmax(0,1fr)); } .price-card { padding: 28px 19px; } .process-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 0; } .step:nth-child(3) { border-left: 0; padding-left: 0; } .brief-section { gap: 40px; } }
@media (max-width: 768px) { html { scroll-padding-top: 135px; } nav { flex-wrap: wrap; gap: 14px; padding: 18px 5%; } .brand-container { margin-right: auto; } .section-links { order: 3; width: 100%; gap: 24px; border-top: 1px solid #ffffff14; padding-top: 11px; } .section-links a { font-size: .7rem; } .nav-actions { gap: 8px; } .hero { min-height: 0; padding: 180px 5% 90px; gap: 15px; align-items: flex-start; text-align: left; } .hero-content { display: block; max-width: 100%; text-align: left; } .hero-tag { font-size: .55rem; letter-spacing: 1.5px; margin-bottom: 22px; } .hero h1 { font-size: clamp(2.55rem,9.5vw,4rem); letter-spacing: -1.8px; margin-bottom: 22px; } .hero p { font-size: .88rem; line-height: 1.8; } .hero-btns { justify-content: flex-start; gap: 10px; } .btn-primary,.btn-outline { font-size: .76rem; padding: 13px 17px; } .hero-3d-canvas { width: 150px; height: 155px; align-self: center; margin: 30px 0 15px; } .orbit-label { font-size: .42rem; letter-spacing: 2px; } .scroll-cue { left: 5%; bottom: 26px; font-size: .6rem; } .discipline-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 22px 5%; font-size: .58rem; letter-spacing: 1px; } section { padding: 72px 5%; } .section-header { margin-bottom: 32px; } .section-header h2 { font-size: 2rem; letter-spacing: -.8px; } .section-header p { font-size: .83rem; } .section-eyebrow { margin-bottom: 19px; font-size: .56rem; letter-spacing: 1.5px; } .portfolio-asym { gap: 30px; } .port-info { padding-top: 15px; } .port-info h3 { font-size: 1.2rem; } .port-info span { font-size: .68rem; } .pricing-grid { max-width: 500px; } .price-card { padding: 28px; } .price-card h4 { min-height: 0; } .price-amount { font-size: 2.6rem !important; } .price-features li { font-size: .83rem; } .reels-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-width: none; } .reel-card { aspect-ratio: 9/17; border-radius: 8px; } .video-load { gap: 12px; padding: 13px 6px; font-size: .62rem; } .play-symbol { width: 40px; height: 40px; font-size: 13px; } .video-hint { display: none; } .reel-title { font-size: .66rem; line-height: 1.6; } .process-steps { grid-template-columns: 1fr; gap: 28px; } .step,.step:first-child { padding: 0 0 0 22px; border-left: 1px solid #52eee055; } .step-num { margin-bottom: 12px; } .step p { font-size: .82rem; } .faq-section,.brief-section { grid-template-columns: 1fr; gap: 32px; } .faq-intro h2 { font-size: 2rem; } .faq-list summary { font-size: .84rem; } .brief-intro h2 { font-size: 3rem; } .brief-intro > p { font-size: .85rem; } #project-brief { padding: 23px; } .email-link { font-size: 1.15rem; } .footer-contact p { font-size: .8rem; } .footer-content { gap: 28px; } .footer-brand p { max-width: none; } .viewer-toolbar h2 { font-size: .8rem; } .viewer-close { padding: 7px 10px; font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .reveal.is-visible { animation: none; } }