:root { --ink:#e9f0fa; --muted:#9aaabc; --night:#08111f; --night-soft:#0d1929; --line:rgba(176,201,229,.16); --blue:#64b7ff; --blue-bright:#a7dcff; --max:72rem; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:5rem; } body { margin:0; color:var(--ink); background:var(--night); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1rem; line-height:1.6; } a { color:inherit; text-decoration:none; } button { font:inherit; } .container { width:min(calc(100% - 2.5rem),var(--max)); margin:0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.skip-link { position:fixed; z-index:20; top:-5rem; left:1rem; padding:.65rem 1rem; color:var(--night); background:var(--blue-bright); border-radius:.35rem; transition:top .2s; }.skip-link:focus { top:1rem; }
.site-header { position:fixed; z-index:10; inset:0 0 auto; border-bottom:1px solid transparent; transition:background .25s,border-color .25s; }.site-header.is-scrolled { background:rgba(8,17,31,.9); border-color:var(--line); backdrop-filter:blur(14px); }.header-content,.footer-content { min-height:4.75rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; }.brand { display:inline-flex; align-items:center; gap:.48rem; font-size:1.18rem; font-weight:750; letter-spacing:-.055em; }.brand span span { color:var(--blue); }.brand-mark { width:1.52rem; height:1.52rem; fill:var(--blue); }.main-nav { display:flex; align-items:center; gap:1.65rem; }.main-nav a { color:var(--muted); font-size:.88rem; font-weight:600; }.main-nav a:hover,.main-nav a:focus-visible { color:var(--ink); }.menu-toggle { display:none; }
.hero { position:relative; display:grid; min-height:48rem; align-items:center; overflow:hidden; background:radial-gradient(circle at 76% 38%,rgba(47,126,206,.18),transparent 29rem),linear-gradient(110deg,#08111f 12%,#0b1a2d 100%); }.hero-grid { position:absolute; inset:0; opacity:.36; background-image:linear-gradient(rgba(135,190,242,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(135,190,242,.09) 1px,transparent 1px); background-size:4.5rem 4.5rem; mask-image:linear-gradient(to right,#000 15%,transparent 78%); }.hero-content { position:relative; padding:9.5rem 0 5rem; }.eyebrow { margin:0 0 1rem; color:var(--blue); font-size:.74rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }.hero h1,h2,h3,p { margin-top:0; }.hero h1 { max-width:50rem; margin-bottom:1.4rem; font-size:clamp(2.85rem,6.4vw,5.1rem); line-height:.98; letter-spacing:-.07em; }.hero-copy { max-width:37rem; margin-bottom:2.25rem; color:#c2cfde; font-size:clamp(1.05rem,1.5vw,1.25rem); }.hero-actions,.contact-actions { display:flex; flex-wrap:wrap; gap:.8rem; }.button { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; min-height:3.1rem; padding:.78rem 1.05rem; border:1px solid var(--line); border-radius:.35rem; font-size:.91rem; font-weight:700; transition:transform .2s,border-color .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { color:#06111e; background:var(--blue-bright); border-color:var(--blue-bright); }.button-secondary { color:var(--ink); background:rgba(255,255,255,.03); }.button-secondary:hover { border-color:var(--blue); background:rgba(100,183,255,.08); }.button-disabled { color:#77879b; border-color:rgba(176,201,229,.1); cursor:not-allowed; }.signal-line { width:min(28rem,75vw); height:1px; margin-top:4.5rem; background:linear-gradient(90deg,var(--blue),transparent); }.signal-line span { display:block; width:3rem; height:1px; background:white; animation:signal 3.5s ease-in-out infinite; }
.section { padding:7rem 0; }.section-heading { max-width:44rem; }.section-heading h2,.split-heading h2,.process-intro h2,.contact-card h2 { margin-bottom:1.25rem; font-size:clamp(2rem,4vw,3.45rem); line-height:1.05; letter-spacing:-.055em; }.section-heading > p:last-child,.split-heading > p,.process-intro > p:last-child,.contact-card > p { color:var(--muted); }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:3.5rem; background:var(--line); border:1px solid var(--line); }.service-card { min-height:15.5rem; padding:1.5rem; background:var(--night); }.service-card:hover { background:#0c1a2c; }.card-number { color:var(--blue); font-size:.76rem; font-weight:750; }.service-card h3 { margin:1.35rem 0 .65rem; font-size:1.13rem; letter-spacing:-.025em; }.service-card p,.project-card p,.process-list p { margin-bottom:0; color:var(--muted); font-size:.92rem; }
.projects-section { background:var(--night-soft); }.split-heading { display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:4rem; }.split-heading > p { max-width:25rem; margin-bottom:.4rem; }.projects-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; margin-top:3.5rem; }.project-card { grid-column:span 2; min-height:15rem; padding:1.5rem; border:1px solid var(--line); border-radius:.5rem; background:rgba(5,14,27,.35); }.project-card:nth-child(4),.project-card:nth-child(5) { grid-column:span 3; }.project-card:hover { border-color:rgba(100,183,255,.48); }.project-icon { display:grid; place-items:center; width:2.4rem; height:2.4rem; color:var(--blue-bright); border:1px solid rgba(100,183,255,.38); border-radius:.35rem; font-size:1.25rem; }.project-card h3 { margin:2rem 0 .7rem; font-size:1.12rem; line-height:1.25; letter-spacing:-.025em; }
.process-section { border-bottom:1px solid var(--line); }.process-layout { display:grid; grid-template-columns:.82fr 1.18fr; gap:7rem; }.process-list { display:grid; gap:0; padding:0; margin:0; list-style:none; border-top:1px solid var(--line); }.process-list li { display:grid; grid-template-columns:3.25rem 1fr; gap:1rem; padding:1.3rem 0; border-bottom:1px solid var(--line); }.process-list li > span { color:var(--blue); font-size:.76rem; font-weight:750; }.process-list h3 { margin-bottom:.25rem; font-size:1.02rem; }
.technology-section { background:radial-gradient(circle at 18% 50%,rgba(28,91,157,.14),transparent 23rem); }.technology-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:7rem; align-items:center; }.tech-list { display:flex; flex-wrap:wrap; gap:.7rem; padding:0; margin:0; list-style:none; }.tech-list li { padding:.65rem .9rem; color:#cbd9e8; border:1px solid var(--line); border-radius:999px; font-size:.9rem; font-weight:650; }.tech-list li:hover { color:var(--blue-bright); border-color:var(--blue); }
.contact-section { padding:2rem 0 9rem; }.contact-card { padding:clamp(2rem,5vw,4.4rem); border:1px solid rgba(100,183,255,.37); border-radius:.65rem; background:linear-gradient(120deg,#0e2540,#0b192a 64%); }.contact-card h2 { max-width:43rem; }.contact-card > p { max-width:38rem; margin-bottom:2rem; }.site-footer { border-top:1px solid var(--line); }.site-footer p { margin:0; color:#788ba0; font-size:.82rem; }.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .65s ease,transform .65s ease; }.js .reveal.is-visible { opacity:1; transform:none; }
@keyframes signal { 0%,20% { transform:translateX(0); opacity:1; } 80%,100% { transform:translateX(26rem); opacity:0; } }
@media (max-width:800px) { .header-content { min-height:4.25rem; }.menu-toggle { position:relative; z-index:2; display:grid; gap:.35rem; width:2.75rem; height:2.75rem; padding:.7rem; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:.3rem; cursor:pointer; }.menu-toggle span:not(.sr-only) { display:block; width:100%; height:1px; background:currentColor; }.main-nav { position:absolute; top:100%; right:1.25rem; left:1.25rem; display:none; flex-direction:column; align-items:stretch; gap:0; padding:.75rem; background:#0c192a; border:1px solid var(--line); border-radius:.4rem; box-shadow:0 1.25rem 3rem rgba(0,0,0,.3); }.main-nav.is-open { display:flex; }.main-nav a { padding:.75rem; }.hero { min-height:41rem; }.hero-content { padding-top:8rem; }.section { padding:5rem 0; }.service-grid { grid-template-columns:1fr 1fr; }.split-heading,.process-layout,.technology-layout { grid-template-columns:1fr; gap:2.5rem; }.projects-grid { grid-template-columns:1fr 1fr; }.project-card,.project-card:nth-child(4),.project-card:nth-child(5) { grid-column:auto; }.contact-section { padding-bottom:6.5rem; } }
@media (max-width:520px) { .container { width:min(calc(100% - 2rem),var(--max)); }.hero h1 { font-size:clamp(2.65rem,13vw,3.75rem); }.service-grid,.projects-grid { grid-template-columns:1fr; }.service-card { min-height:12.5rem; }.project-card { min-height:auto; }.site-footer .footer-content { flex-direction:column; align-items:flex-start; justify-content:center; gap:.5rem; padding:1.25rem 0; }.button { width:100%; }.contact-actions { display:grid; }.signal-line { margin-top:3.25rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }.js .reveal { opacity:1; transform:none; } }

/* Refinamentos de marca e interação */
.header-content { min-height:5rem; }.brand { gap:.62rem; color:#f2f7ff; }.brand-mark { width:2rem; height:2rem; flex:0 0 auto; object-fit:cover; border-radius:.28rem; filter:drop-shadow(0 0 .35rem rgba(100,183,255,.24)); }.main-nav a { position:relative; padding:.35rem 0; transition:color .2s ease; }.main-nav a::after { position:absolute; right:0; bottom:-.12rem; left:0; height:1px; content:""; background:var(--blue-bright); transform:scaleX(0); transform-origin:right; transition:transform .22s ease; }.main-nav a:hover::after,.main-nav a:focus-visible::after,.main-nav a.is-active::after { transform:scaleX(1); transform-origin:left; }.main-nav a.is-active { color:var(--ink); }
.hero-content { z-index:2; }.hero-visual { position:absolute; z-index:1; top:50%; right:max(2.8rem,calc((100vw - var(--max)) / 2 - 1.75rem)); width:min(42vw,31rem); aspect-ratio:1; pointer-events:none; transform:translateY(-48%); }.hero-visual::before { position:absolute; inset:11%; content:""; border:1px solid rgba(129,190,245,.16); border-radius:50%; box-shadow:0 0 0 3.4rem rgba(100,183,255,.018),0 0 4rem rgba(53,145,231,.1); }.hero-visual::after { position:absolute; inset:-7%; content:""; border:1px solid rgba(129,190,245,.08); border-radius:50%; }.hero-visual img { position:absolute; z-index:1; inset:5%; width:90%; height:90%; object-fit:contain; opacity:.46; mix-blend-mode:screen; filter:drop-shadow(0 0 1.5rem rgba(83,164,239,.23)); }.hero-orbit { position:absolute; border:1px solid rgba(139,198,248,.2); border-radius:50%; }.hero-orbit-one { inset:0 8% 16% 0; }.hero-orbit-two { inset:17% 0 0 16%; border-style:dashed; opacity:.58; }.hero-points { position:absolute; z-index:2; top:15%; right:11%; width:.38rem; height:.38rem; border-radius:50%; background:var(--blue-bright); box-shadow:-18rem 5rem 0 -.08rem rgba(167,220,255,.6),-12.5rem 17rem 0 -.1rem rgba(100,183,255,.5),-2.5rem 20rem 0 -.08rem rgba(167,220,255,.4); }
.button { transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }.button-primary:hover,.button-primary:focus-visible { box-shadow:0 .55rem 1.5rem rgba(100,183,255,.18); }.button-secondary:hover,.button-secondary:focus-visible { box-shadow:0 .45rem 1.2rem rgba(0,0,0,.15); }.button:focus-visible,.main-nav a:focus-visible { outline:2px solid var(--blue-bright); outline-offset:4px; }
.service-card,.project-card { transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease; }.service-card:hover { border-color:rgba(100,183,255,.28); transform:translateY(-3px); box-shadow:0 .7rem 1.5rem rgba(0,0,0,.12); }.project-card:hover { transform:translateY(-3px); background:rgba(12,31,53,.65); box-shadow:0 .8rem 1.7rem rgba(0,0,0,.12),inset 0 1px 0 rgba(167,220,255,.06); }.projects-section { position:relative; isolation:isolate; overflow:hidden; }.projects-section::after { position:absolute; z-index:-1; right:-9rem; bottom:-13rem; width:34rem; height:34rem; content:""; background:url("../assets/images/drox-dev-mark.png") center / contain no-repeat; opacity:.055; filter:saturate(.9); pointer-events:none; }
@media (max-width:800px) { .header-content { min-height:4.5rem; }.brand-mark { width:1.8rem; height:1.8rem; }.main-nav a::after { right:auto; width:1.5rem; bottom:.38rem; }.hero-visual { display:none; }.hero { background:radial-gradient(circle at 80% 20%,rgba(47,126,206,.14),transparent 21rem),linear-gradient(110deg,#08111f 12%,#0b1a2d 100%); }.projects-section::after { right:-13rem; bottom:-15rem; width:28rem; height:28rem; opacity:.04; } }

/* Equilíbrio do hero: texto forte, com espaço dedicado para a arte de marca. */
@media (min-width:1101px) {
  .hero h1 { max-width:43rem; font-size:clamp(2.85rem,5.45vw,4.7rem); line-height:1.03; }
  .hero-visual { right:max(3.75rem,calc((100vw - var(--max)) / 2)); width:min(37vw,27rem); }
  .hero-visual img { opacity:.34; filter:drop-shadow(0 0 1.25rem rgba(83,164,239,.16)); }
  .hero-orbit-two { opacity:.42; }
}
@media (min-width:801px) and (max-width:1100px) {
  .hero h1 { max-width:39rem; font-size:clamp(2.85rem,6.1vw,4.25rem); line-height:1.04; }
  .hero-copy { max-width:34rem; }
  .hero-visual { right:1.5rem; width:20rem; opacity:.75; }
  .hero-visual img { opacity:.28; }
}

.contact-email { margin:-.55rem 0 1.35rem !important; color:var(--blue-bright) !important; font-size:1.03rem; font-weight:700; letter-spacing:-.015em; }