@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --navy:#06173d; --ink:#071b42; --cobalt:#1459d9; --blue:#287bf2; --sky:#48caff; --pale:#e8f5ff; --paper:#f6fbff; --soft:#a9c7e9; --body:#476782; --white:#fff; --line:rgba(157,211,255,.24); --sans:'DM Sans',Arial,sans-serif; --serif:'Playfair Display',Georgia,serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.whatsapp-logo { fill:currentColor; stroke:none; }
a:focus-visible { outline:3px solid var(--sky); outline-offset:4px; }
em { font-family:var(--serif); font-weight:500; letter-spacing:-.06em; }
.kicker { margin:0 0 13px; color:var(--sky); font:500 10px/1.2 var(--mono); letter-spacing:.2em; }

/* Link on bio: intentional, compact, and action-led */
.bio-page { min-height:100svh; color:var(--white); background:radial-gradient(circle at 96% 8%,rgba(72,202,255,.45),transparent 21rem),radial-gradient(circle at 3% 97%,rgba(20,89,217,.5),transparent 28rem),linear-gradient(155deg,#051535 0%,#09225b 57%,#06173d 100%); }
.bio-shell { min-height:100svh; position:relative; isolation:isolate; display:grid; place-items:center; padding:30px 20px 22px; overflow:hidden; }
.bio-grid { position:absolute; inset:0; z-index:-2; opacity:.12; background-image:linear-gradient(90deg,rgba(159,221,255,.16) 1px,transparent 1px),linear-gradient(rgba(159,221,255,.13) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 58% 43% at 50% 48%,transparent 0 48%,black 100%); }
.bio-glow { position:absolute; z-index:-1; border:1px solid rgba(150,224,255,.25); border-radius:50%; }
.glow-a { width:330px; height:330px; right:-164px; top:64px; box-shadow:inset 0 0 90px rgba(72,202,255,.12); }
.glow-b { width:455px; height:455px; left:-347px; bottom:-175px; }
.bio-content { width:min(100%,482px); position:relative; isolation:isolate; padding:22px 0 18px; text-align:center; }
.bio-content::before { content:""; position:absolute; inset:-28px -24px; z-index:-1; border-radius:30px; background:radial-gradient(ellipse at center,rgba(6,23,61,.75) 0%,rgba(6,23,61,.48) 54%,transparent 75%); }
.brand-seal { width:92px; height:92px; display:grid; place-items:center; margin:0 auto 18px; padding:4px; overflow:hidden; border-radius:50%; background:var(--white); box-shadow:0 0 0 7px rgba(193,237,255,.14),0 16px 37px rgba(0,0,0,.28); }
.brand-seal img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.bio-content h1 { margin:0; font-size:clamp(37px,10vw,57px); line-height:.98; letter-spacing:-.057em; text-shadow:0 3px 18px rgba(0,0,0,.28); }
.bio-intro { max-width:345px; margin:19px auto 27px; color:#eef8ff; font-size:15px; line-height:1.55; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.bio-primary-actions { display:grid; gap:10px; }
.action { min-height:75px; padding:11px 14px 11px 12px; display:grid; grid-template-columns:45px 1fr 20px; align-items:center; gap:12px; border-radius:18px; text-align:left; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.action:hover { transform:translateY(-2px); }
.action-light { color:var(--navy); background:var(--sky); box-shadow:0 13px 28px rgba(25,150,227,.32); }
.action-light:hover { background:#91e1ff; }
.action-outline { border:1px solid rgba(169,222,255,.46); background:rgba(7,28,71,.83); box-shadow:0 10px 24px rgba(0,0,0,.16); }
.action-outline:hover { border-color:rgba(169,222,255,.78); background:rgba(255,255,255,.16); }
.action-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:14px; color:var(--sky); background:rgba(72,202,255,.13); }
.action-light .action-icon { color:var(--navy); background:rgba(255,255,255,.52); }
.action-icon svg { width:21px; height:21px; }
.action > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.action strong { font-size:15px; line-height:1.15; }
.action small { color:#d9ebff; font-size:12px; line-height:1.25; font-weight:500; }
.action-light small { color:#245477; }
.action i { color:var(--sky); font-size:20px; font-style:normal; }
.action-light i { color:var(--navy); }
.direct-contact { margin-top:22px; padding-top:18px; border-top:1px solid rgba(175,226,255,.2); }
.direct-contact > p { margin:0 0 11px; color:#b7d2f3; font:500 9px var(--mono); letter-spacing:.16em; }
.direct-contact > div { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.direct-contact a { min-height:68px; display:grid; place-items:center; align-content:center; gap:6px; border:1px solid rgba(175,226,255,.26); border-radius:14px; color:#f2f9ff; background:rgba(7,28,71,.72); font-size:11px; font-weight:600; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.direct-contact a:hover { transform:translateY(-2px); border-color:rgba(141,219,255,.7); background:rgba(255,255,255,.13); }
.direct-contact svg { width:20px; height:20px; color:var(--sky); }
.instagram-row { min-height:53px; display:grid; grid-template-columns:24px 1fr auto 16px; align-items:center; gap:8px; margin-top:14px; padding:0 4px; color:#e5f3ff; border-top:1px solid rgba(175,226,255,.18); font-size:12px; text-align:left; }
.instagram-row svg { width:18px; height:18px; color:var(--sky); }
.instagram-row b { color:var(--sky); font-size:11px; }
.instagram-row i { color:var(--sky); font-size:15px; font-style:normal; }
.bio-footer { align-self:end; padding-top:26px; color:#aac7e7; font:10px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.bio-footer a { color:var(--sky); }

/* Full website: richer dark-and-blue editorial layout */
.site-page { color:var(--ink); background:#071b42; }
.site-header { min-height:70px; position:sticky; top:0; z-index:20; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; color:var(--white); background:rgba(6,23,61,.88); border-bottom:1px solid rgba(157,211,255,.15); backdrop-filter:blur(13px); }
.header-brand,.footer-brand { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; line-height:.82; letter-spacing:-.045em; }
.header-brand img { width:39px; height:39px; border-radius:50%; object-fit:cover; }
.site-header nav { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:600; }
.site-header nav a { color:#d6eaff; }
.site-header nav a:hover { color:var(--sky); }
.site-header .nav-bio { padding:8px 10px; border-radius:999px; color:var(--navy); background:var(--sky); }
.site-hero { min-height:558px; position:relative; padding:76px 22px 69px; overflow:hidden; color:var(--white); background:radial-gradient(circle at 92% 19%,rgba(72,202,255,.38),transparent 17rem),radial-gradient(circle at 0 94%,rgba(20,89,217,.47),transparent 23rem),linear-gradient(135deg,#06173d,#092967 72%,#06173d); }
.site-hero::before { content:""; position:absolute; inset:0; opacity:.11; background-image:linear-gradient(90deg,rgba(160,223,255,.14) 1px,transparent 1px),linear-gradient(rgba(160,223,255,.1) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to bottom,transparent,black 25%,black); }
.hero-copy { position:relative; z-index:1; max-width:690px; }
.site-hero h1 { margin:0; font-size:clamp(45px,12.5vw,75px); line-height:.96; letter-spacing:-.063em; text-shadow:0 3px 20px rgba(0,0,0,.24); }
.site-hero h1 + p { max-width:450px; margin:22px 0 28px; color:#edf7ff; font-size:15px; line-height:1.58; text-shadow:0 2px 12px rgba(0,0,0,.24); }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.solid-button,.ghost-button { min-height:47px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 16px; border-radius:999px; font-size:13px; font-weight:700; }
.solid-button { color:var(--navy); background:var(--sky); box-shadow:0 12px 24px rgba(0,0,0,.2); }
.solid-button:hover { background:#91e1ff; }
.solid-button svg { width:17px; height:17px; }
.ghost-button { color:#d8eeff; border:1px solid rgba(169,222,255,.35); background:rgba(255,255,255,.08); }
.ghost-button:hover { background:rgba(255,255,255,.16); }
.hero-lines { position:absolute; right:-38px; top:92px; width:280px; height:300px; transform:rotate(-16deg); opacity:.8; }
.hero-lines span { position:absolute; display:block; width:170px; height:170px; clip-path:polygon(0 0,100% 0,57% 57%,0 100%); background:linear-gradient(135deg,rgba(72,202,255,.8),rgba(40,123,242,.1)); }
.hero-lines span:nth-child(1) { right:0; top:0; }
.hero-lines span:nth-child(2) { right:59px; top:63px; background:linear-gradient(135deg,rgba(40,123,242,.72),rgba(72,202,255,.06)); }
.hero-lines span:nth-child(3) { right:117px; top:126px; background:linear-gradient(135deg,rgba(226,247,255,.88),rgba(72,202,255,.1)); }
.hero-badge { position:absolute; right:20px; bottom:27px; z-index:1; width:134px; height:134px; display:grid; place-content:center; gap:7px; padding:15px; border:1px solid rgba(182,232,255,.47); border-radius:50%; text-align:center; background:rgba(5,22,58,.18); backdrop-filter:blur(7px); }
.hero-badge span { font:500 31px/1 var(--serif); letter-spacing:-.08em; }
.hero-badge small { color:#bfe9ff; font:8px var(--mono); letter-spacing:.1em; }
.services-block { padding:68px 21px; color:var(--white); background:linear-gradient(160deg,#0d3578,#0b2a61); }
.section-intro { max-width:605px; }
.section-intro h2,.approach-head h2,.contact-copy h2 { margin:0; font-size:clamp(37px,10vw,60px); line-height:.98; letter-spacing:-.058em; }
.section-intro > p:not(.kicker) { max-width:510px; margin:19px 0 0; color:#c9ddf5; font-size:14px; line-height:1.6; }
.service-grid { display:grid; gap:10px; margin-top:31px; }
.service-card { min-height:199px; position:relative; display:flex; flex-direction:column; padding:21px; overflow:hidden; border:1px solid rgba(173,221,255,.25); border-radius:21px; color:var(--white); background:rgba(255,255,255,.08); }
.service-card::after { content:""; position:absolute; right:-32px; bottom:-45px; width:138px; height:138px; border:1px solid rgba(184,232,255,.18); border-radius:50%; }
.service-card:hover { border-color:rgba(173,221,255,.56); background:rgba(255,255,255,.13); }
.card-deep { color:var(--navy); background:var(--sky); border-color:transparent; }
.card-deep::after { border-color:rgba(6,23,61,.15); }
.service-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:50%; color:var(--sky); background:rgba(72,202,255,.13); }
.service-icon svg { width:21px; height:21px; }
.card-deep .service-icon { color:var(--navy); background:rgba(255,255,255,.5); }
.service-card p { margin:19px 0 auto; color:#9ec8ee; font:10px var(--mono); letter-spacing:.11em; }
.card-deep p { color:#245277; }
.service-card h3 { margin:9px 0 7px; font-size:21px; letter-spacing:-.045em; }
.service-card > span:last-child { max-width:240px; color:#cce3fa; font-size:13px; line-height:1.48; }
.card-deep > span:last-child { color:#245277; }
.approach-block { padding:67px 21px; color:var(--ink); background:linear-gradient(135deg,#e1f3ff,#f0f9ff); }
.approach-head { max-width:555px; }
.approach-steps { display:grid; gap:10px; margin-top:30px; }
.approach-steps article { min-height:184px; padding:21px; border:1px solid #c5e0f3; border-radius:18px; background:rgba(255,255,255,.72); }
.approach-steps b { color:var(--blue); font:10px var(--mono); letter-spacing:.12em; }
.approach-steps h3 { margin:27px 0 7px; font-size:19px; letter-spacing:-.04em; }
.approach-steps p { margin:0; color:var(--body); font-size:13px; line-height:1.52; }
.contact-block { padding:68px 21px; color:var(--white); background:radial-gradient(circle at 91% 13%,rgba(72,202,255,.35),transparent 16rem),linear-gradient(140deg,#06173d,#0b43a9); }
.contact-copy { max-width:610px; }
.contact-copy > p:not(.kicker) { max-width:495px; margin:20px 0 0; color:#c8e0fb; font-size:14px; line-height:1.6; }
.contact-grid { display:grid; gap:10px; margin-top:31px; }
.contact-grid a { min-height:82px; padding:13px 15px; display:grid; grid-template-columns:43px 1fr 18px; align-items:center; gap:12px; border:1px solid rgba(179,226,255,.28); border-radius:18px; color:#eff9ff; background:rgba(255,255,255,.09); transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.contact-grid a:hover { transform:translateY(-3px); border-color:rgba(173,226,255,.76); background:rgba(255,255,255,.16); }
.contact-grid i { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; color:var(--sky); background:rgba(72,202,255,.13); }
.contact-grid i svg { width:20px; height:20px; }
.contact-grid span { display:grid; gap:4px; }
.contact-grid small { color:#b5d9f7; font:9px var(--mono); letter-spacing:.1em; }
.contact-grid strong { font-size:14px; }
.contact-grid b { color:var(--sky); font-size:18px; font-weight:400; }
.site-footer { min-height:112px; padding:25px 21px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:19px; color:#ecf7ff; background:#030e28; }
.footer-brand img { width:47px; height:47px; border-radius:50%; object-fit:cover; background:#fff; }
.site-footer > div { display:flex; gap:16px; color:#a9cbe9; font-size:11px; }
.site-footer > div a:last-child { color:var(--sky); }

@media (min-width:700px) {
  .bio-shell { padding-top:37px; }
  .site-header,.site-hero,.services-block,.approach-block,.contact-block,.site-footer { padding-left:max(38px,calc((100vw - 1120px)/2)); padding-right:max(38px,calc((100vw - 1120px)/2)); }
  .site-header { min-height:78px; }
  .header-brand img { width:43px; height:43px; }
  .site-header nav { gap:22px; font-size:13px; }
  .site-hero { min-height:623px; padding-top:121px; padding-bottom:104px; }
  .site-hero h1 { font-size:clamp(60px,7.9vw,97px); }
  .hero-lines { right:8%; top:107px; width:345px; height:340px; }
  .hero-badge { right:max(38px,calc((100vw - 1120px)/2)); bottom:40px; width:164px; height:164px; }
  .hero-badge span { font-size:39px; }
  .services-block,.approach-block,.contact-block { padding-top:100px; padding-bottom:104px; }
  .service-grid { grid-template-columns:repeat(2,1fr); gap:13px; margin-top:43px; }
  .service-card { min-height:250px; padding:27px; }
  .approach-steps { grid-template-columns:repeat(3,1fr); gap:13px; margin-top:43px; }
  .approach-steps article { min-height:233px; padding:25px; }
  .contact-block { display:grid; grid-template-columns:.9fr 1.1fr; align-items:end; gap:60px; }
  .contact-grid { margin-top:0; }
  .site-footer { min-height:126px; }
}
@media (min-width:1000px) {
  .service-grid { grid-template-columns:repeat(4,1fr); }
  .service-card { min-height:279px; }
  .service-card h3 { margin-top:11px; font-size:22px; }
}