:root {
  --navy: #0f2744;
  --navy-deep: #07182a;
  --teal: #00ddea;
  --teal-core: #00b8c9;
  --teal-bright: #00f0ff;
  --blue: #009dff;
  --orange: #ff7a00;
  --gold: #ffc107;
  --ink: #0b1724;
  --muted: #64717d;
  --paper: #f5f3ee;
  --white: #fff;
  --line: rgba(15, 39, 68, 0.14);
  --heading: "Montserrat", Arial, sans-serif;
  --body: "Poppins", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.65; }
body.menu-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-header { align-items: center; backdrop-filter: blur(18px); background: rgba(7,24,42,.93); border-bottom: 1px solid rgba(255,255,255,.09); color: #fff; display: flex; height: 84px; justify-content: space-between; left: 0; padding: 0 clamp(24px,5vw,82px); position: fixed; right: 0; top: 0; z-index: 100; }
.brand-lockup { align-items: center; display: inline-flex; gap: 12px; min-width: max-content; }
.brand-mark { align-items: center; background: linear-gradient(135deg,var(--orange) 8%,var(--gold) 42%,var(--teal) 68%,var(--blue)); border-radius: 12px; color: #fff; display: inline-flex; font-family: var(--heading); font-size: 23px; font-weight: 800; height: 43px; justify-content: center; letter-spacing: -3px; line-height: 1; padding-right: 3px; transform: rotate(-3deg); width: 43px; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name strong { font-family: var(--heading); font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.brand-name small { color: rgba(255,255,255,.58); font-size: 9px; font-weight: 500; letter-spacing: .22em; margin-top: 5px; text-transform: uppercase; }
.site-header nav { align-items: center; display: flex; gap: clamp(22px,2.6vw,42px); }
.site-header nav>a { color: rgba(255,255,255,.73); font-size: 13px; font-weight: 500; transition: color .18s ease; }
.site-header nav>a:hover,.site-header nav>a:focus-visible { color: #fff; }
.site-header .nav-cta { align-items: center; background: var(--orange); border-radius: 100px; color: #fff; display: inline-flex; font-weight: 600; gap: 12px; padding: 12px 20px; }
.site-header .nav-cta:hover { background: #ff8a1d; }
.menu-button { background: transparent; border: 0; display: none; }

.hero { align-items: center; background: radial-gradient(circle at 12% 72%,rgba(0,184,201,.13),transparent 31%),radial-gradient(circle at 83% 24%,rgba(0,157,255,.16),transparent 30%),var(--navy-deep); color: #fff; display: grid; gap: clamp(28px,5vw,86px); grid-template-columns: minmax(0,1.05fr) minmax(390px,.95fr); min-height: 780px; overflow: hidden; padding: 150px clamp(24px,7vw,110px) 100px; position: relative; }
.hero-noise { 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='.08'/%3E%3C/svg%3E"); inset: 0; opacity: .35; pointer-events: none; position: absolute; }
.hero-copy,.hero-visual { position: relative; z-index: 2; }
.eyebrow,.kicker { color: var(--teal); font-family: var(--heading); font-size: 11px; font-weight: 700; letter-spacing: .2em; margin: 0 0 24px; text-transform: uppercase; }
.eyebrow { align-items: center; display: flex; gap: 10px; }
.eyebrow span { background: var(--orange); border-radius: 50%; height: 7px; width: 7px; }
.hero h1 { font-family: var(--heading); font-size: clamp(46px,5.7vw,84px); font-weight: 700; letter-spacing: -.055em; line-height: .99; margin: 0; max-width: 820px; }
.hero h1 em { background: linear-gradient(95deg,var(--gold),var(--orange) 38%,var(--teal) 76%,var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
.hero-intro { color: rgba(255,255,255,.69); font-size: clamp(16px,1.4vw,19px); line-height: 1.75; margin: 30px 0 0; max-width: 660px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 38px; }
.button { align-items: center; border: 0; border-radius: 100px; cursor: pointer; display: inline-flex; font-family: var(--heading); font-size: 13px; font-weight: 700; gap: 17px; justify-content: center; min-height: 54px; padding: 0 26px; transition: transform .18s ease,background .18s ease,box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); box-shadow: 0 13px 35px rgba(255,122,0,.22); color: #fff; }
.button-primary:hover { background: #ff8c24; box-shadow: 0 16px 40px rgba(255,122,0,.3); }
.button-secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.hero-proof { border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 22px 34px; margin-top: 54px; padding-top: 22px; }
.hero-proof span { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .04em; }
.hero-proof strong { color: var(--teal); font-family: var(--heading); margin-right: 7px; }
.hero-visual { height: 520px; min-width: 0; }
.visual-orbit { border: 1px solid rgba(255,255,255,.09); border-radius: 50%; height: 460px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 460px; }
.orbit-two { height: 330px; width: 330px; }
.visual-card { border: 1px solid rgba(255,255,255,.12); border-radius: 26px; position: absolute; }
.visual-card-back { background: linear-gradient(145deg,rgba(0,184,201,.18),rgba(0,157,255,.04)); height: 260px; padding: 24px; right: 1%; top: 37px; transform: rotate(8deg); width: 250px; }
.visual-card-back>span { color: rgba(255,255,255,.62); font-size: 10px; text-transform: uppercase; }
.palette-row { bottom: 24px; display: flex; gap: 8px; left: 24px; position: absolute; }
.palette-row i { background: var(--orange); border-radius: 8px; height: 48px; width: 32px; }
.palette-row i:nth-child(2) { background: var(--gold); }.palette-row i:nth-child(3) { background: var(--teal); }.palette-row i:nth-child(4) { background: var(--blue); }
.visual-card-main { background: linear-gradient(150deg,rgba(255,255,255,.12),transparent 45%),linear-gradient(155deg,#0f2744,#061421); box-shadow: 0 34px 80px rgba(0,0,0,.35); height: 390px; left: 4%; overflow: hidden; padding: 27px 30px; top: 62px; transform: rotate(-5deg); width: 335px; }
.visual-card-main:after { background: linear-gradient(135deg,transparent,rgba(0,184,201,.22)); border-radius: 50%; content: ""; height: 280px; position: absolute; right: -145px; top: 70px; width: 280px; }
.visual-card-top { color: rgba(255,255,255,.43); display: flex; font-size: 7px; justify-content: space-between; letter-spacing: .14em; }
.visual-logo { align-items: center; background: linear-gradient(140deg,var(--orange),var(--gold) 37%,var(--teal) 69%,var(--blue)); border-radius: 20px; display: flex; font-family: var(--heading); font-size: 66px; font-weight: 800; height: 115px; justify-content: center; letter-spacing: -10px; line-height: 1; margin-top: 44px; padding-right: 10px; width: 115px; }
.visual-card-main p { font-family: var(--heading); font-size: 27px; line-height: 1.08; margin-top: 34px; }.visual-card-main p strong { color: var(--orange); }
.visual-line { background: linear-gradient(90deg,var(--orange),var(--gold),var(--teal),var(--blue)); bottom: 0; height: 7px; left: 0; position: absolute; right: 0; }
.visual-sticker { align-items: center; background: var(--gold); border-radius: 50%; box-shadow: 0 18px 45px rgba(0,0,0,.28); color: var(--navy-deep); display: flex; flex-direction: column; font-family: var(--heading); font-size: 9px; height: 103px; justify-content: center; letter-spacing: .12em; position: absolute; right: 5%; top: 262px; transform: rotate(11deg); width: 103px; }.visual-sticker strong { font-size: 13px; }
.visual-caption { align-items: center; backdrop-filter: blur(12px); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 100px; bottom: 32px; color: rgba(255,255,255,.72); display: flex; font-size: 9px; gap: 10px; left: 17%; letter-spacing: .1em; padding: 11px 18px; position: absolute; text-transform: uppercase; }.visual-caption span { color: var(--teal); }
.intro-strip { align-items: center; background: var(--orange); color: #fff; display: flex; font-family: var(--heading); font-size: clamp(14px,1.4vw,19px); font-weight: 600; justify-content: center; min-height: 96px; overflow: hidden; padding: 20px 30px; }.intro-strip p { margin: 0; white-space: nowrap; }.intro-strip p+p:before { color: var(--gold); content: "✦"; margin: 0 clamp(20px,3vw,52px); }.intro-strip strong { color: var(--navy-deep); }

.section { padding: clamp(88px,9vw,140px) clamp(24px,7vw,110px); }
.section-heading { align-items: end; display: grid; gap: 42px; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); margin-bottom: 60px; }
.section-heading h2,.about-copy h2,.process-title h2,.contact-copy h2 { font-family: var(--heading); font-size: clamp(38px,4.7vw,68px); font-weight: 700; letter-spacing: -.05em; line-height: 1.08; margin: 0; max-width: 900px; }
.section-heading>p { color: var(--muted); font-size: 14px; line-height: 1.85; margin: 0 0 4px; max-width: 470px; }
.services-section { background: var(--paper); }
.services-grid { border-left: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); }
.service-card { background: transparent; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 390px; overflow: hidden; padding: 34px; position: relative; transition: background .22s ease,color .22s ease,transform .22s ease; }
.service-card:hover { background: var(--navy); color: #fff; transform: translateY(-4px); z-index: 2; }
.service-top { align-items: center; display: flex; justify-content: space-between; }.service-top span { color: var(--orange); font-family: var(--heading); font-size: 11px; font-weight: 700; }
.service-top i { align-items: center; border: 1px solid var(--line); border-radius: 50%; display: flex; font-style: normal; height: 38px; justify-content: center; transition: background .18s ease,transform .18s ease; width: 38px; }.service-card:hover .service-top i { background: var(--orange); border-color: var(--orange); transform: rotate(45deg); }
.service-card h3 { font-family: var(--heading); font-size: 24px; letter-spacing: -.035em; margin: 48px 0 16px; }.service-card>p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; }.service-card:hover>p { color: rgba(255,255,255,.64); }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }.tag-row span { border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: 9px; padding: 5px 10px; }.service-card:hover .tag-row span { border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6); }
.service-card>a { bottom: 28px; color: var(--orange); font-family: var(--heading); font-size: 11px; font-weight: 700; left: 34px; opacity: 0; position: absolute; transform: translateY(8px); transition: opacity .18s ease,transform .18s ease; }.service-card:hover>a,.service-card:focus-within>a { opacity: 1; transform: translateY(0); }

.work-section { background: var(--navy-deep); color: #fff; }.section-heading.light>p { color: rgba(255,255,255,.55); }
.work-toolbar { border-bottom: 1px solid rgba(255,255,255,.12); display: flex; gap: 3px; margin-bottom: 38px; overflow-x: auto; padding-bottom: 15px; }.work-toolbar button { background: transparent; border: 0; border-radius: 100px; color: rgba(255,255,255,.52); cursor: pointer; font-size: 11px; padding: 8px 15px; white-space: nowrap; }.work-toolbar button.active { background: var(--orange); color: #fff; }
.work-grid { display: grid; gap: 28px; grid-template-columns: repeat(2,1fr); }.project-card { min-width: 0; }.project-card.is-hidden { display: none; }
.project-art { align-items: center; aspect-ratio: 16/10; display: flex; justify-content: center; overflow: hidden; position: relative; }.project-art:before,.project-art:after { content: ""; position: absolute; }
.project-gridline { background-image: linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size: 48px 48px; inset: 0; opacity: .5; position: absolute; }
.project-mark { align-items: center; border: 2px solid currentColor; border-radius: 24%; display: flex; font-family: var(--heading); font-size: clamp(42px,7vw,92px); font-weight: 800; height: 42%; justify-content: center; letter-spacing: -.09em; line-height: 1; padding-right: .08em; position: relative; transform: rotate(-5deg); width: 25%; z-index: 2; }
.project-mini { bottom: 24px; font-size: 8px; left: 26px; letter-spacing: .12em; line-height: 1.7; position: absolute; text-transform: uppercase; z-index: 2; }
.project-geradi { background: linear-gradient(135deg,#071b33,#007d9c); color: #fff; }.project-geradi:before { background: var(--teal); border-radius: 50%; height: 48%; right: -6%; top: -12%; width: 35%; }
.project-crisp { background: #f5e9dd; color: #9c1922; }.project-crisp:before { background: #b51f27; border-radius: 50%; bottom: -42%; height: 85%; left: -18%; width: 64%; }
.project-winners { background: linear-gradient(150deg,#08784b,#0b3e2b); color: #ffd464; }.project-winners:after { border: 22px solid #d33d34; border-radius: 50%; height: 51%; right: -10%; top: -10%; width: 38%; }
.project-ajab { background: linear-gradient(150deg,#ffcb16,#ee781c); color: #112a53; }.project-ajab:before { background: #fff4c2; clip-path: polygon(50% 0,100% 100%,0 100%); height: 70%; left: 12%; opacity: .52; top: 18%; transform: rotate(-20deg); width: 42%; }
.project-essence { background: linear-gradient(135deg,#0f2744 15%,#07182a 75%); color: #fff; }.project-essence:after { background: linear-gradient(135deg,var(--orange),var(--gold),var(--teal),var(--blue)); border-radius: 50%; filter: blur(4px); height: 55%; right: 8%; top: 8%; width: 38%; }
.project-corporate { background: #e9edf1; color: var(--navy); }.project-corporate:before { background: linear-gradient(135deg,var(--orange),var(--teal)); height: 14px; left: 0; top: 18%; width: 100%; }
.project-meta { align-items: end; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; padding: 19px 2px 25px; }.project-meta p { color: var(--teal); font-size: 9px; letter-spacing: .12em; margin: 0 0 5px; text-transform: uppercase; }.project-meta h3 { font-family: var(--heading); font-size: 20px; margin: 0; }.project-meta>span { color: rgba(255,255,255,.48); font-size: 10px; }.portfolio-note { color: rgba(255,255,255,.35); font-size: 9px; margin: 28px 0 0; }

.about-section { align-items: stretch; background: #fff; display: grid; gap: clamp(40px,7vw,105px); grid-template-columns: minmax(0,1fr) minmax(360px,.8fr); }.about-copy h2 { max-width: 750px; }.about-copy>p:not(.kicker) { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 720px; }.about-copy .about-lead { color: var(--ink); font-size: clamp(17px,1.6vw,21px); line-height: 1.7; margin-top: 34px; }
.text-link { color: var(--orange); display: inline-block; font-family: var(--heading); font-size: 13px; font-weight: 700; margin-top: 25px; }.text-link span { margin-left: 10px; }
.about-panel { background: radial-gradient(circle at 90% 5%,rgba(0,184,201,.18),transparent 32%),var(--navy); color: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; overflow: hidden; padding: clamp(34px,4vw,58px); position: relative; }.about-panel:after { border: 1px solid rgba(255,255,255,.11); border-radius: 50%; content: ""; height: 280px; position: absolute; right: -130px; top: 125px; width: 280px; }.about-panel>p { color: var(--teal); font-family: var(--heading); font-size: 10px; font-weight: 700; letter-spacing: .18em; margin: 0; text-transform: uppercase; }.about-panel blockquote { font-family: var(--heading); font-size: clamp(24px,3vw,39px); font-weight: 600; letter-spacing: -.04em; line-height: 1.35; margin: 60px 0; position: relative; z-index: 2; }
.about-principles { border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 14px 25px; grid-template-columns: repeat(2,1fr); padding-top: 24px; }.about-principles span { color: rgba(255,255,255,.68); font-size: 10px; }.about-principles i { color: var(--orange); font-style: normal; margin-right: 6px; }
.process-section { background: var(--paper); display: grid; gap: clamp(50px,8vw,130px); grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); padding: clamp(88px,9vw,140px) clamp(24px,7vw,110px); }.process-title { align-self: start; position: sticky; top: 130px; }.process-title h2 { font-size: clamp(36px,4.4vw,60px); }.process-list { list-style: none; margin: 0; padding: 0; }.process-list li { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 25px; grid-template-columns: 52px 1fr; padding: 31px 0; }.process-list li:last-child { border-bottom: 1px solid var(--line); }.process-list>li>span { color: var(--orange); font-family: var(--heading); font-size: 11px; font-weight: 700; }.process-list h3 { font-family: var(--heading); font-size: 20px; letter-spacing: -.03em; margin: 0 0 8px; }.process-list p { color: var(--muted); font-size: 13px; margin: 0; }

.insights-section { background: #fff; }.insights-grid { display: grid; gap: 22px; grid-template-columns: repeat(3,1fr); }.insight-card { border: 1px solid var(--line); overflow: hidden; transition: transform .2s ease,box-shadow .2s ease; }.insight-card:hover { box-shadow: 0 24px 55px rgba(15,39,68,.1); transform: translateY(-5px); }.insight-art { align-items: center; aspect-ratio: 16/9; display: flex; justify-content: center; overflow: hidden; position: relative; }.insight-art span { color: rgba(255,255,255,.92); font-family: var(--heading); font-size: clamp(45px,6vw,78px); font-weight: 800; letter-spacing: -.08em; }.insight-art i { bottom: 14px; color: rgba(255,255,255,.54); font-family: var(--heading); font-size: 12px; font-style: normal; font-weight: 800; left: 16px; position: absolute; }.insight-art-1 { background: linear-gradient(135deg,var(--orange),#c74200); }.insight-art-2 { background: linear-gradient(135deg,var(--teal),var(--blue)); }.insight-art-3 { background: linear-gradient(135deg,var(--navy),#475c74); }.insight-content { padding: 25px; }.insight-content>p { color: var(--orange); font-size: 9px; letter-spacing: .09em; margin: 0 0 15px; text-transform: uppercase; }.insight-content h3 { font-family: var(--heading); font-size: 17px; letter-spacing: -.025em; line-height: 1.5; margin: 0; }.insight-link { align-items: center; color: var(--muted); display: flex; font-size: 10px; justify-content: space-between; margin-top: 25px; }.insight-link i { color: var(--orange); font-style: normal; }

.faq-section { background: var(--paper); }
.faq-list { border-top: 1px solid var(--line); margin-left: auto; max-width: 980px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { align-items: center; cursor: pointer; display: flex; font-family: var(--heading); font-size: clamp(16px,2vw,22px); font-weight: 600; gap: 25px; justify-content: space-between; letter-spacing: -.025em; list-style: none; padding: 28px 4px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { align-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--orange); display: flex; flex: 0 0 auto; font-size: 18px; height: 38px; justify-content: center; transition: transform .18s ease,background .18s ease; width: 38px; }
.faq-list details[open] summary span { background: var(--orange); color: #fff; transform: rotate(45deg); }
.faq-list details>p { color: var(--muted); font-size: 13px; line-height: 1.9; margin: -5px 70px 28px 4px; max-width: 780px; }

.contact-section { background: radial-gradient(circle at 9% 92%,rgba(0,184,201,.17),transparent 27%),var(--navy-deep); color: #fff; display: grid; gap: clamp(50px,8vw,125px); grid-template-columns: minmax(300px,.85fr) minmax(390px,1.15fr); padding: clamp(88px,9vw,140px) clamp(24px,7vw,110px); }.contact-copy>p:not(.kicker) { color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.85; margin-top: 28px; max-width: 560px; }.contact-details { border-top: 1px solid rgba(255,255,255,.13); display: grid; font-style: normal; gap: 20px; margin-top: 52px; padding-top: 28px; }.contact-details a,.contact-details div { display: flex; flex-direction: column; }.contact-details small { color: var(--teal); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }.contact-details strong { font-family: var(--heading); font-size: clamp(14px,1.3vw,18px); margin-top: 3px; overflow-wrap: anywhere; }
.quote-form { background: #fff; color: var(--ink); padding: clamp(28px,4.5vw,58px); }.field-row { display: grid; gap: 18px; grid-template-columns: repeat(2,1fr); }.quote-form label { color: var(--navy); display: flex; flex-direction: column; font-family: var(--heading); font-size: 10px; font-weight: 700; letter-spacing: .04em; margin-bottom: 21px; text-transform: uppercase; }.quote-form label>span { color: var(--orange); }.quote-form input,.quote-form select,.quote-form textarea { background: #f6f7f8; border: 1px solid transparent; border-radius: 0; color: var(--ink); font-family: var(--body); font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 8px; outline: 0; padding: 14px 15px; resize: vertical; text-transform: none; transition: border-color .18s ease,background .18s ease; width: 100%; }.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus { background: #fff; border-color: var(--teal); }.form-button { width: 100%; }.form-note { color: #89929a; font-size: 9px; line-height: 1.6; margin: 13px 0 0; text-align: center; }
footer { background: #04101d; color: #fff; padding: 60px clamp(24px,7vw,110px) 24px; }.footer-top { align-items: center; display: grid; gap: 35px; grid-template-columns: 1fr 1.1fr 1fr; padding-bottom: 50px; }.footer-top>p { color: rgba(255,255,255,.48); font-size: 11px; margin: 0; max-width: 370px; }.social-links { display: flex; flex-wrap: wrap; gap: 17px; justify-content: flex-end; }.social-links a { color: rgba(255,255,255,.68); font-size: 10px; }.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.32); display: flex; font-size: 9px; justify-content: space-between; letter-spacing: .04em; padding-top: 23px; text-transform: uppercase; }
.whatsapp-float { align-items: center; background: #25d366; border-radius: 100px; bottom: 22px; box-shadow: 0 13px 34px rgba(0,0,0,.22); color: #fff; display: flex; gap: 9px; padding: 8px 15px 8px 8px; position: fixed; right: 22px; z-index: 90; }.whatsapp-float span { align-items: center; background: rgba(255,255,255,.18); border-radius: 50%; display: flex; font-family: var(--heading); font-size: 8px; font-weight: 800; height: 33px; justify-content: center; width: 33px; }.whatsapp-float i { font-size: 10px; font-style: normal; font-weight: 600; }

@media (max-width:1050px) {
  .hero { grid-template-columns: 1fr .82fr; padding-left: 50px; padding-right: 50px; }
  .visual-card-main { left: 0; width: 290px; }.visual-card-back { right: -8%; }.services-grid { grid-template-columns: repeat(2,1fr); }.project-meta>span { display: none; }
}
@media (max-width:820px) {
  html { scroll-padding-top: 74px; }.site-header { height: 74px; padding: 0 22px; }.menu-button { align-items: center; cursor: pointer; display: flex; flex-direction: column; gap: 7px; height: 42px; justify-content: center; padding: 0; width: 42px; z-index: 102; }.menu-button span { background: #fff; display: block; height: 1px; transition: transform .18s ease; width: 23px; }.menu-button.is-open span:first-child { transform: translateY(4px) rotate(45deg); }.menu-button.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-header nav { align-items: stretch; background: var(--navy-deep); display: none; flex-direction: column; gap: 0; left: 0; padding: 95px 24px 34px; position: fixed; right: 0; top: 0; }.site-header nav.is-open { display: flex; }.site-header nav>a { border-bottom: 1px solid rgba(255,255,255,.1); font-size: 15px; padding: 15px 0; }.site-header .nav-cta { border: 0; justify-content: center; margin-top: 18px; padding: 14px; }
  .hero { display: block; min-height: auto; padding: 125px 24px 90px; }.hero-copy { max-width: 680px; }.hero-visual { height: 480px; margin: 45px auto 0; max-width: 530px; }.visual-card-main { left: 8%; }.visual-card-back { right: 5%; }
  .section-heading,.about-section,.process-section,.contact-section { grid-template-columns: 1fr; }.section-heading { align-items: start; gap: 22px; }.section-heading>p { max-width: 650px; }.process-title { position: static; }.insights-grid { grid-template-columns: 1fr; }.insight-card { display: grid; grid-template-columns: .8fr 1.2fr; }.insight-art { aspect-ratio: auto; min-height: 235px; }.contact-section { gap: 55px; }.footer-top { grid-template-columns: 1fr; }.social-links { justify-content: flex-start; }
}
@media (max-width:580px) {
  .brand-name strong { font-size: 12px; }.hero h1 { font-size: 47px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .button { width: 100%; }.hero-proof { gap: 14px; }.hero-proof span { width: calc(50% - 10px); }
  .hero-visual { height: 380px; margin-left: -7px; margin-right: -7px; }.visual-orbit { height: 340px; width: 340px; }.orbit-two { height: 250px; width: 250px; }.visual-card-main { height: 300px; left: 2%; padding: 21px; top: 44px; width: 235px; }.visual-logo { border-radius: 14px; font-size: 48px; height: 84px; margin-top: 31px; width: 84px; }.visual-card-main p { font-size: 21px; margin-top: 23px; }.visual-card-back { height: 200px; right: 0; top: 25px; width: 190px; }.visual-sticker { height: 80px; right: 1%; top: 205px; width: 80px; }.visual-caption { bottom: 10px; left: 8%; }
  .intro-strip p:nth-child(3) { display: none; }.intro-strip p+p:before { margin: 0 18px; }.section { padding-left: 20px; padding-right: 20px; }.section-heading { margin-bottom: 40px; }.services-grid { grid-template-columns: 1fr; }.service-card { min-height: 365px; }.work-grid { grid-template-columns: 1fr; }.project-meta { align-items: start; }.about-section { gap: 45px; }.about-panel { min-height: 470px; }.process-section { padding-left: 20px; padding-right: 20px; }.process-list li { grid-template-columns: 38px 1fr; }.insight-card { display: block; }.insight-art { aspect-ratio: 16/8.5; min-height: 0; }.contact-section { padding-left: 20px; padding-right: 20px; }.field-row { grid-template-columns: 1fr; gap: 0; }.quote-form { padding: 27px 20px; }footer { padding-left: 20px; padding-right: 20px; }.footer-bottom { flex-direction: column; gap: 8px; }.whatsapp-float i { display: none; }.whatsapp-float { padding-right: 8px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; }*,*:before,*:after { transition-duration: .01ms !important; } }

.site-logo{width:52px;height:52px;object-fit:contain;border-radius:50%;background:#02070d}.portfolio-page{background:#05080d;color:#fff;min-height:100vh}.portfolio-hero{padding:150px max(24px,6vw) 60px;max-width:1100px}.portfolio-hero h1{font-family:Montserrat,sans-serif;font-size:clamp(2.5rem,7vw,5.5rem);line-height:1.02;max-width:1000px;margin:.3em 0}.portfolio-hero>p:last-of-type{max-width:760px;color:#b9c4d2;font-size:1.1rem}.portfolio-gallery-section{padding:20px max(18px,5vw) 90px}.portfolio-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.portfolio-filter button{background:#111a26;color:#dfe8f2;border:1px solid #26364a;border-radius:999px;padding:11px 18px;font-weight:700}.portfolio-filter button.active{background:#00b8c9;color:#001018;border-color:#00b8c9}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.gallery-card{background:#0b111b;border:1px solid #1d2b3b;border-radius:18px;overflow:hidden;transition:.25s}.gallery-card:hover{transform:translateY(-4px);border-color:#00b8c9}.gallery-card.is-hidden{display:none}.gallery-image-button{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in}.gallery-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.gallery-caption{padding:18px}.gallery-caption p{color:#00b8c9;text-transform:uppercase;font-size:.75rem;letter-spacing:.12em;margin:0 0 6px}.gallery-caption h3{margin:0;font-family:Montserrat,sans-serif}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;place-items:center;z-index:9999;padding:60px 20px 20px}.lightbox.is-open{display:grid}.lightbox figure{margin:0;max-width:min(1000px,95vw);max-height:90vh;text-align:center}.lightbox img{max-width:100%;max-height:80vh;object-fit:contain}.lightbox figcaption{margin-top:12px;color:#fff}.lightbox-close{position:absolute;right:24px;top:18px;background:none;border:0;color:#fff;font-size:3rem;cursor:pointer}.portfolio-cta{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:70px max(24px,6vw);background:#0b1624}.home-portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.home-project{position:relative;min-height:390px;border-radius:22px;overflow:hidden;color:white;text-decoration:none}.home-project img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:.35s}.home-project:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(2,7,15,.9))}.home-project span{position:absolute;z-index:2;left:24px;right:24px;bottom:24px}.home-project small{display:block;color:#4ce7f2;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:8px}.home-project strong{font-family:Montserrat,sans-serif;font-size:1.45rem}.home-project:hover img{transform:scale(1.04)}.portfolio-more{text-align:center;margin-top:34px}
@media(max-width:850px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-portfolio-grid{grid-template-columns:1fr}.portfolio-cta{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.gallery-grid{grid-template-columns:1fr}.portfolio-hero{padding-top:120px}.site-logo{width:42px;height:42px}}

/* =========================================================
   BRAND ESSENCE V3 — TEAL-LED PREMIUM AGENCY THEME
   Official palette: Teal #00B8C9, Navy #0F2744,
   Bright Blue #009DFF, Orange #FF7A00, Gold #FFC107
   ========================================================= */
:root {
  --teal-deep: #007f8c;
  --teal-soft: #dff9fb;
  --teal-glow: rgba(0,184,201,.28);
}

.site-header {
  background: rgba(5, 22, 38, .94);
  border-bottom-color: rgba(0,184,201,.22);
  box-shadow: 0 12px 35px rgba(0,0,0,.16);
}
.site-header .nav-cta,
.button-primary {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: 0 14px 36px var(--teal-glow);
}
.site-header .nav-cta:hover,
.button-primary:hover {
  background: linear-gradient(135deg, #05c7d9, #16a8ff);
  box-shadow: 0 18px 44px rgba(0,184,201,.36);
}
.hero {
  background:
    radial-gradient(circle at 11% 76%, rgba(0,184,201,.24), transparent 34%),
    radial-gradient(circle at 86% 19%, rgba(0,157,255,.22), transparent 31%),
    radial-gradient(circle at 72% 76%, rgba(255,122,0,.08), transparent 24%),
    linear-gradient(145deg, #041320, var(--navy-deep) 48%, #092a40);
}
.hero h1 em {
  background: linear-gradient(96deg, var(--teal), #36d9e5 42%, var(--blue) 72%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-proof strong { color: #4ee4ee; }
.visual-card-main {
  border-color: rgba(0,184,201,.28);
  box-shadow: 0 34px 85px rgba(0,184,201,.14), 0 34px 80px rgba(0,0,0,.36);
}
.visual-logo {
  background: linear-gradient(140deg,var(--orange),var(--gold) 34%,var(--teal) 67%,var(--blue));
}
.visual-sticker { background: var(--teal); color: #fff; }
.intro-strip {
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #00a8ba);
}
.intro-strip strong { color: #fff; }
.intro-strip p+p:before { color: var(--gold); }
.kicker, .eyebrow { color: var(--teal); }
.service-card:hover {
  background: linear-gradient(150deg, var(--navy), #073b4b);
  box-shadow: 0 22px 54px rgba(0,184,201,.17);
}
.service-card:hover .service-top i { color: var(--teal); }
.portfolio-card:hover,
.project-card:hover {
  box-shadow: 0 26px 60px rgba(0,184,201,.18);
}
.tag-row span,
.filter-button.active {
  border-color: rgba(0,184,201,.32);
}
.filter-button.active {
  background: var(--teal);
  color: #fff;
}
.contact-section,
.site-footer {
  background: linear-gradient(145deg, #061827, #092c3c);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,184,201,.12);
}
::selection { background: var(--teal); color: #fff; }

/* Premium movement kept subtle and accessibility-friendly */
@media (prefers-reduced-motion: no-preference) {
  .visual-card-main { animation: bemFloat 6s ease-in-out infinite; }
  .visual-card-back { animation: bemFloatBack 7s ease-in-out infinite; }
  .visual-sticker { animation: bemPulse 4.8s ease-in-out infinite; }
  .portfolio-card img, .project-card img { transition: transform .55s ease; }
  .portfolio-card:hover img, .project-card:hover img { transform: scale(1.035); }
}
@keyframes bemFloat {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-10px); }
}
@keyframes bemFloatBack {
  0%,100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(9deg) translateY(8px); }
}
@keyframes bemPulse {
  0%,100% { box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 0 0 rgba(0,184,201,.20); }
  50% { box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 0 14px rgba(0,184,201,0); }
}


/* V3.1 official bright-teal brand correction */
.hero { background: radial-gradient(circle at 15% 72%,rgba(0,221,234,.20),transparent 34%),radial-gradient(circle at 84% 25%,rgba(0,240,255,.18),transparent 32%),#04111f; }
.hero h1 em { background: linear-gradient(95deg,#ff7a00 0%,#ffc107 28%,#00f0ff 70%,#009dff 100%); -webkit-background-clip:text; background-clip:text; }
.site-header .nav-cta,.button-primary { background: linear-gradient(135deg,#00f0ff,#00b8c9); color:#001018; box-shadow:0 0 28px rgba(0,240,255,.22); }
.site-header .nav-cta:hover,.button-primary:hover { background:linear-gradient(135deg,#36f6ff,#00ddea); }
.hero-logo-showcase { display:grid; place-items:center; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(18px); pointer-events:none; }
.hero-glow-one { width:430px; height:430px; background:rgba(0,240,255,.16); }
.hero-glow-two { width:300px; height:300px; background:rgba(0,157,255,.14); transform:translate(90px,-45px); }
.official-logo-card { position:relative; z-index:2; width:min(470px,92%); aspect-ratio:1/1; display:grid; place-items:center; padding:28px; border:1px solid rgba(0,240,255,.55); border-radius:34px; background:linear-gradient(145deg,rgba(0,240,255,.08),rgba(3,10,18,.94) 42%); box-shadow:0 0 0 1px rgba(0,184,201,.12),0 35px 90px rgba(0,0,0,.48),0 0 55px rgba(0,240,255,.20); transform:rotate(-2deg); overflow:hidden; }
.official-logo-card:before { content:""; position:absolute; inset:-35%; background:conic-gradient(from 210deg,transparent 0 32%,rgba(0,240,255,.18) 40%,transparent 49% 100%); animation:logoSweep 8s linear infinite; }
.official-logo-card img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; filter:saturate(1.22) brightness(1.12) contrast(1.06); }
.hero-logo-showcase .visual-caption { border-color:rgba(0,240,255,.38); background:rgba(1,16,26,.78); color:#dffcff; box-shadow:0 0 24px rgba(0,240,255,.12); }
.hero-logo-showcase .visual-caption span { color:#00f0ff; }
@keyframes logoSweep { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){.official-logo-card:before{animation:none}}
@media(max-width:560px){.official-logo-card{width:min(330px,94%);padding:18px;border-radius:25px}.hero-glow-one{width:300px;height:300px}.hero-glow-two{width:220px;height:220px}}

/* =========================================================
   BRAND ESSENCE V4 — REAL-WORK AGENCY HOMEPAGE
   Corrected bright teal system: #00F0FF / #00DDEA / #00B8C9
   ========================================================= */
:root{--teal-bright:#00f0ff;--teal-electric:#00ddea;--teal:#00b8c9;--navy:#0f2744;--orange:#ff7a00;--gold:#ffc107}
.site-logo{filter:saturate(1.25) brightness(1.12)}
.brand-name strong,.kicker,.eyebrow,.text-link,.service-card a{color:var(--teal-bright)}
.featured-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.featured-project{position:relative;min-height:380px;border-radius:24px;overflow:hidden;background:#061523;border:1px solid rgba(0,240,255,.18);box-shadow:0 20px 55px rgba(0,0,0,.28);isolation:isolate}
.featured-project:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(1,10,18,.98) 0,rgba(1,10,18,.54) 45%,transparent 76%);z-index:1}
.featured-project img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .55s ease,filter .55s ease}
.featured-project span{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:grid;gap:5px}
.featured-project small{color:var(--teal-bright);text-transform:uppercase;letter-spacing:.11em;font-weight:700}
.featured-project strong{font:700 1.35rem Montserrat,sans-serif;color:#fff}
.featured-project em{font-style:normal;color:#c8d9e6;font-size:.9rem}
.featured-project:hover img{transform:scale(1.055);filter:saturate(1.12)}
.featured-project:hover{border-color:rgba(0,240,255,.55);box-shadow:0 28px 70px rgba(0,221,234,.16)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}.trust-grid article{padding:26px;border:1px solid rgba(0,184,201,.18);border-radius:20px;background:linear-gradient(145deg,#fff,#f2fcfd)}.trust-grid article>span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#061b2a;color:var(--teal-bright);font-size:1.35rem;box-shadow:0 0 24px rgba(0,240,255,.18)}.trust-grid h3{margin:18px 0 8px}.trust-grid p{margin:0;color:#506477}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border:1px solid rgba(0,184,201,.2);border-radius:22px;overflow:hidden}.stats-row div{padding:24px;text-align:center;background:#061827}.stats-row div+div{border-left:1px solid rgba(0,240,255,.15)}.stats-row strong{display:block;color:var(--teal-bright);font:800 2rem Montserrat,sans-serif}.stats-row span{color:#c9dbe7;font-size:.88rem}
.testimonial-section{background:radial-gradient(circle at 80% 20%,rgba(0,240,255,.12),transparent 28%),#061827}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}.testimonial-grid blockquote{margin:0;padding:28px;border-radius:22px;border:1px solid rgba(0,240,255,.2);background:rgba(255,255,255,.035);color:#fff;font-size:1.08rem;line-height:1.7}.testimonial-grid cite{display:block;margin-top:20px;color:var(--teal-bright);font-style:normal;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.client-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.client-chips span{padding:13px 18px;border:1px solid rgba(0,184,201,.28);border-radius:999px;background:#f6feff;color:#0c3346;font-weight:600}.latest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}.latest-grid a{display:grid;gap:12px;color:inherit}.latest-grid img{width:100%;aspect-ratio:1/1.12;object-fit:cover;border-radius:20px;border:1px solid rgba(0,184,201,.2);box-shadow:0 16px 45px rgba(4,28,43,.12);transition:.35s}.latest-grid a:hover img{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,184,201,.18)}.latest-grid span{font-weight:700}
.location-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;padding:70px max(6vw,28px);background:linear-gradient(135deg,#04131f,#092c3c);color:#fff}.location-section h2{font-size:clamp(2rem,4vw,3.4rem);max-width:700px}.location-section p{color:#c7dbe7;max-width:620px}.location-section iframe{width:100%;min-height:420px;border:0;border-radius:24px;filter:saturate(.9) contrast(1.05);box-shadow:0 25px 70px rgba(0,0,0,.35)}
@media(max-width:980px){.featured-project-grid{grid-template-columns:repeat(2,1fr)}.trust-grid,.latest-grid{grid-template-columns:repeat(2,1fr)}.testimonial-grid{grid-template-columns:1fr}.location-section{grid-template-columns:1fr}.stats-row{grid-template-columns:repeat(2,1fr)}.stats-row div:nth-child(3){border-left:0;border-top:1px solid rgba(0,240,255,.15)}.stats-row div:nth-child(4){border-top:1px solid rgba(0,240,255,.15)}}
@media(max-width:620px){.featured-project-grid,.trust-grid,.latest-grid{grid-template-columns:1fr}.featured-project{min-height:330px}.stats-row{grid-template-columns:1fr}.stats-row div+div{border-left:0;border-top:1px solid rgba(0,240,255,.15)}.location-section{padding:54px 22px}.location-section iframe{min-height:330px}}

/* =========================================================
   BRAND ESSENCE MARKETING V5 — OFFICIAL BLUE PREMIUM SYSTEM
   Approved identity: Orange/Gold + Cyan/Royal Blue on Black
   ========================================================= */
:root {
  --brand-cyan: #00F0FF;
  --brand-aqua: #00DDEA;
  --brand-blue: #009DFF;
  --brand-royal: #075BFF;
  --brand-navy: #0F2744;
  --brand-midnight: #030914;
  --brand-orange: #FF7A00;
  --brand-gold: #FFC107;
  --teal: var(--brand-blue);
  --teal-core: var(--brand-blue);
  --teal-bright: var(--brand-cyan);
  --blue: var(--brand-royal);
  --navy: var(--brand-navy);
  --navy-deep: #061A35;
  --orange: var(--brand-orange);
  --gold: var(--brand-gold);
}
.site-header {
  background: rgba(2, 8, 18, .95);
  border-bottom: 1px solid rgba(0,157,255,.24);
  box-shadow: 0 12px 42px rgba(0,0,0,.35);
}
.brand-lockup { gap: 0; }
.site-logo {
  width: 196px;
  height: 64px;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  object-position: left center;
  filter: saturate(1.15) brightness(1.08);
}
.brand-name { display:none; }
.site-header nav>a:hover,.site-header nav>a:focus-visible { color: var(--brand-cyan); }
.site-header .nav-cta,.button-primary {
  background: linear-gradient(135deg,var(--brand-cyan),var(--brand-blue) 58%,var(--brand-royal));
  color:#fff;
  box-shadow:0 16px 40px rgba(0,157,255,.28);
}
.site-header .nav-cta:hover,.button-primary:hover {
  background:linear-gradient(135deg,#56f7ff,#0aa9ff 54%,#2867ff);
  box-shadow:0 20px 50px rgba(0,157,255,.42);
}
.hero {
  background:
    radial-gradient(circle at 12% 78%,rgba(0,240,255,.18),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(7,91,255,.24),transparent 34%),
    radial-gradient(circle at 72% 72%,rgba(255,122,0,.10),transparent 25%),
    linear-gradient(145deg,#020711 0%,#061a35 48%,#071f42 100%);
}
.hero h1 em {
  background:linear-gradient(100deg,var(--brand-orange) 0%,var(--brand-gold) 23%,var(--brand-cyan) 58%,var(--brand-blue) 77%,var(--brand-royal) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.eyebrow,.kicker,.hero-proof strong,.project-meta p,.gallery-caption p { color:var(--brand-cyan); }
.intro-strip { background:linear-gradient(90deg,#006bd8,var(--brand-blue),var(--brand-royal)); }
.intro-strip p+p:before { color:var(--brand-gold); }
.official-logo-card {
  width:min(560px,96%);
  aspect-ratio:1.34/1;
  padding:20px;
  border:1px solid rgba(0,240,255,.55);
  border-radius:36px;
  background:linear-gradient(145deg,rgba(0,157,255,.10),rgba(1,5,12,.96) 46%);
  box-shadow:0 0 0 1px rgba(7,91,255,.16),0 42px 100px rgba(0,0,0,.54),0 0 70px rgba(0,157,255,.24);
  transform:rotate(-1.5deg);
}
.official-logo-card img { filter:saturate(1.17) brightness(1.08) contrast(1.05); }
.hero-glow-one { background:rgba(0,240,255,.14); }
.hero-glow-two { background:rgba(7,91,255,.19); }
.visual-caption span { color:var(--brand-cyan); }
.service-card:hover { background:linear-gradient(150deg,#071a35,#073d78); box-shadow:0 22px 58px rgba(0,157,255,.20); }
.service-card:hover .service-top i,.text-link,.insight-content>p,.insight-link i { color:var(--brand-blue); }
.about-panel,.contact-section,.site-footer { background:radial-gradient(circle at 90% 8%,rgba(0,157,255,.18),transparent 32%),linear-gradient(145deg,#020812,#071a35); }
.about-panel>p { color:var(--brand-cyan); }
.filter-button.active,.portfolio-filter button.active { background:linear-gradient(135deg,var(--brand-cyan),var(--brand-blue)); color:#00152c; border-color:var(--brand-cyan); }
.gallery-card:hover { border-color:var(--brand-blue); box-shadow:0 22px 60px rgba(0,157,255,.16); }
input:focus,select:focus,textarea:focus { border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(0,157,255,.13); }
::selection { background:var(--brand-blue); color:#fff; }
.whatsapp-float { box-shadow:0 18px 48px rgba(0,157,255,.24); }
@media(max-width:900px){.site-logo{width:160px;height:54px}.official-logo-card{width:min(500px,96%)}}
@media(max-width:560px){.site-logo{width:135px;height:48px}.official-logo-card{aspect-ratio:1.15/1;padding:10px}.hero{padding-top:125px}}