/* Final tuning based on the supplied visual references. */
.hero { padding-top: 72px; padding-bottom: 72px; }
.hero .eyebrow { display: none; }
.hero h1 { max-width: 860px; font-size: clamp(2.45rem, 4.3vw, 4rem); }
.hero-copy { max-width: 650px; }
.code-window { width: min(450px, 100%); border-radius: 10px; }
.code-window pre { padding: 22px 25px; }
.about { padding: 112px 0; }
.about-grid { max-width: 910px; grid-template-columns: 288px 1fr; gap: 138px; }
.portrait-frame { display: block; width: 288px; height: 384px; object-fit: cover; object-position: center; background: transparent; }
.about-copy h2 { font-size: 2rem; letter-spacing: -.035em; }
.about-copy>p:not(.eyebrow) { font-size: .9rem; line-height: 1.72; margin-bottom: 17px; }
.about blockquote { border: 0; padding: 0; margin-top: 24px; color: #1680ff; font-style: italic; }
.skills { background: #0d141d; padding-top: 70px; padding-bottom: 76px; }
.section-heading .eyebrow { display: none; }
.section-heading h2 { font-size: 2rem; letter-spacing: -.035em; }
.section-heading { margin-bottom: 42px; }
.skill-grid { max-width: 1150px; margin: auto; gap: 24px; }
.skill-card { min-height: 190px; padding: 24px; background: #050a12; border-color: #263142; }
.skill-card .icon { background: #031d3b; border-radius: 8px; width: 47px; height: 47px; font-size: 1.25rem; }
.services { padding: 92px 0 88px; position:relative; overflow:hidden; background:#030507; }
.services::before { content:''; position:absolute; width:500px; height:320px; left:50%; top:140px; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(211,226,255,.14),transparent 68%); pointer-events:none; }
.services .shell { position:relative; z-index:1; }
.service-grid { max-width: 1056px; margin: auto; gap: 12px; align-items:stretch; }
.service-card { min-height: 480px; padding: 30px; border-radius:17px; background:linear-gradient(150deg,rgba(31,34,38,.95),rgba(5,6,8,.98) 58%); border-color:rgba(255,255,255,.17); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 55px rgba(0,0,0,.22); }
.service-card::before { content:''; position:absolute; width:150px; height:110px; top:-30px; left:18%; background:radial-gradient(ellipse,rgba(255,255,255,.25),transparent 69%); filter:blur(12px); opacity:.5; pointer-events:none; }
.service-card.featured { transform:translateY(-12px); border-color:rgba(255,255,255,.46); background:linear-gradient(150deg,rgba(55,59,64,.94),rgba(10,11,14,.98) 58%); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 34px 70px rgba(0,0,0,.45); }
.service-card:hover { transform:translateY(-7px); border-color:rgba(255,255,255,.5); }
.service-card.featured:hover { transform:translateY(-18px); }
.service-card .icon { position:relative; z-index:1; background:rgba(255,255,255,.08); border-radius:50%; color:#fff; font-size:1rem; width:34px; height:34px; }
.service-card h3,.service-card .price,.service-card ul,.service-card a { position:relative; z-index:1; }
.service-card .button.secondary { border-color:rgba(255,255,255,.27); background:#030405; color:#fff; border-radius:999px; }
.service-card.featured .button.secondary { background:#fff; color:#090b0f; border-color:#fff; }
.popular { color:#101217; background:#fff; border:0; border-radius:999px; font-weight:700; padding:5px 9px; }
.projects { padding: 76px 0; }
.project-grid { max-width: 1150px; margin: auto; gap: 24px; }
.project-image { height: 192px; background: #151f2b; color: #d0d8e6; }
.project-image:before { display: none; }
.vision { padding: 72px 0 104px; background: #101823; }
.vision .eyebrow { display: none; }
.vision h2 { font-size: 1.9rem; }
.contact { padding: 106px 0 88px; background: #050a12; }
.contact-heading { text-align: center; max-width: 780px; margin-bottom: 48px; }
.contact-heading h2 { font-size: 2rem; margin-bottom: 16px; }
.contact-heading p { color: var(--muted); margin: 0; }
.contact-grid { max-width: 970px; grid-template-columns: .9fr 1.15fr; gap: 100px; }
.facebook { margin: 0 0 30px; }
.emails { gap: 8px; }
.emails b { color: #dbe7f9; font-size: .7rem; margin-top: 8px; }
.emails a { font-size: .86rem; color: #f1f6ff; text-decoration: none; }
.contact-form { padding: 32px; grid-template-columns: 1fr; background: #101721; }
.contact-form label:nth-of-type(3), .contact-form label:nth-of-type(4) { grid-column: auto; }
.contact-form input, .contact-form textarea { padding: 12px 14px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #d0d8e7; opacity: 1; }
.contact-form button { grid-column: auto; }

/* Softer transitions between the dark sections */
body { background: #070b12; }
.navbar { border-bottom: 0; background: linear-gradient(180deg, rgba(13,20,29,.98) 0%, rgba(10,16,24,.93) 65%, rgba(7,11,18,.72) 100%); }
.navbar::after { content:''; position:absolute; left:0; right:0; bottom:-28px; height:28px; pointer-events:none; background:linear-gradient(180deg,rgba(7,11,18,.72),transparent); }
.hero { background: radial-gradient(ellipse at 50% -20%, rgba(37,94,185,.13), transparent 46%), linear-gradient(180deg, #070b12 0%, #080d14 72%, #0a1019 100%); }
.about { background: linear-gradient(180deg, #0a1019 0%, #090f1a 54%, #0a111c 100%); }
.skills { background: linear-gradient(180deg, #0a111c 0%, #0d141d 46%, #0b121b 100%); }
.projects { background: linear-gradient(180deg, #0b121b 0%, #0a1019 52%, #090f18 100%); }
.services { background: radial-gradient(ellipse at 50% 15%, rgba(122,151,195,.1), transparent 39%), linear-gradient(180deg, #090f18 0%, #05080c 48%, #030507 100%); }
.vision { background: linear-gradient(180deg, #030507 0%, #0a121d 42%, #101823 100%); }
.contact { background: linear-gradient(180deg, #101823 0%, #090f18 42%, #050a12 100%); }
@media(max-width:800px) { .navbar::after { bottom:-18px; height:18px; } }

/* Project previews and subtle hover effects */
.project-card { position: relative; overflow: hidden; }
.project-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 32%, rgba(165,205,255,.13) 49%, transparent 66%); transform: translateX(-110%); transition: transform .7s ease, opacity .25s ease; }
.project-card:hover::after { opacity: 1; transform: translateX(110%); }
.project-image { overflow: hidden; isolation: isolate; }
.project-image::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -50px; bottom: -72px; background: rgba(119,165,255,.3); filter: blur(10px); transition: transform .45s ease; }
.project-card:hover .project-image::after { transform: scale(1.35) translate(-14px,-12px); }
.project-preview { width: 63%; height: 64%; padding: 14px; border: 1px solid rgba(235,244,255,.42); border-radius: 7px; background: rgba(5,12,23,.42); box-shadow: 0 18px 30px rgba(0,0,0,.18); transform: rotate(-4deg); transition: transform .45s cubic-bezier(.2,.75,.25,1); position: relative; z-index: 1; }
.project-card:hover .project-preview { transform: rotate(0) translateY(-6px) scale(1.04); }
.preview-dot { display:block; width:8px; height:8px; border-radius:50%; background:#fff; opacity:.82; margin-bottom:11px; }.preview-line { display:block; width:58%; height:5px; border-radius:4px; background:rgba(255,255,255,.56); margin:7px 0; }.preview-line.wide { width:82%; height:10px; background:rgba(255,255,255,.88); }.preview-panel { display:block; position:absolute; left:14px; right:14px; bottom:13px; height:29%; border-radius:4px; background:rgba(255,255,255,.19); }.project-label { position:absolute; right:17px; top:16px; z-index:2; text-transform:uppercase; font-size:.62rem; letter-spacing:.14em; opacity:.72; }
.project-portfolio { background:linear-gradient(135deg,#253959,#5f7fa7); }.project-event { background:linear-gradient(135deg,#522d68,#d0608f); }.project-shop { background:linear-gradient(135deg,#725422,#e9ba65); }.project-local { background:linear-gradient(135deg,#153d49,#50a7a0); }.project-restaurant { background:linear-gradient(135deg,#492620,#c97b4f); }.project-notes { background:linear-gradient(135deg,#254276,#7d98f2); }.project-blog { background:linear-gradient(135deg,#36544d,#9bbf9b); }.project-launch { background:linear-gradient(135deg,#54254d,#d87fba); }.project-photo { background:linear-gradient(135deg,#354253,#94a6b8); }.project-community { background:linear-gradient(135deg,#204465,#58a8ce); }

/* Highlighted offer: old price, clear red discount, then current price */
.price-sale { display: block; margin: 0 0 23px; }
.price-sale > div:first-child { display:flex; align-items:center; gap:9px; margin-bottom:0; }
.price-sale > div:last-child { display:flex; align-items:baseline; gap:8px; }
.old-price { color:#8492a7; font-size:.82rem; text-decoration:line-through; }
.discount { display:inline-flex; background:#e52c3b; color:#fff; padding:3px 7px; border-radius:4px; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.price-sale b { font-size:2rem; letter-spacing:-.05em; }
.price-sale > div:last-child > span { color:var(--muted); font-size:.74rem; }
@media(max-width:800px) { .service-card.featured,.service-card.featured:hover { transform:none; } }
@media(max-width:800px) { .about-grid { grid-template-columns: 1fr; gap: 40px; max-width: 590px; } .portrait-frame { width: 100%; height: auto; aspect-ratio: 3/4; } .contact-grid { grid-template-columns: 1fr; gap: 46px; } }

/* New art direction: dark glass, warm red light, and generous curves. */
:root { --bg:#090a0c; --bg2:#101114; --card:rgba(24,24,27,.55); --line:rgba(255,255,255,.16); --white:#f8f5f5; --muted:#b7afb1; --blue:#e7363f; --blue-soft:#ff8c91; }
body { background:#090a0c; color:var(--white); }
.navbar { height:84px; display:flex; align-items:center; background:linear-gradient(180deg,rgba(9,10,12,.94),rgba(9,10,12,.45) 68%,transparent); backdrop-filter:none; }
.navbar::after { display:none; }
.nav-inner { width:min(930px,calc(100% - 48px)); height:46px; padding:0 16px 0 20px; background:rgba(28,28,31,.53); border:1px solid rgba(255,255,255,.18); border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 12px 45px rgba(0,0,0,.35); backdrop-filter:blur(18px); }
.logo { font-size:1.1rem; color:#fff; }.nav-links { gap:15px; flex-wrap:nowrap; font-size:.75rem; color:#d2cacc; }.nav-links a { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }.nav-links a:hover { color:#ff737a; }.nav-icon { display:inline-grid; place-items:center; width:15px; height:15px; }.nav-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }.nav-links a:first-child .nav-icon { color:#ff737a; }.language-switch { font-size:.7rem; }.language-switch .active { color:#ff747b; }
.hero { min-height:720px; display:flex; align-items:center; padding:90px 0 100px; background:radial-gradient(circle at 77% 43%,rgba(219,35,45,.26),transparent 15%),radial-gradient(ellipse at 67% 67%,rgba(102,14,21,.5),transparent 32%),linear-gradient(135deg,#08090b 4%,#151416 52%,#09090b 100%); }
.hero::before,.hero::after { content:''; position:absolute; border-radius:50%; pointer-events:none; filter:blur(1px); }.hero::before { width:470px; height:470px; right:-90px; top:110px; background:radial-gradient(circle at 38% 34%,#ed4b51 0 2%,#661217 9%,#25080b 37%,transparent 68%); opacity:.92; }.hero::after { width:360px; height:360px; right:21%; bottom:-160px; border:58px solid rgba(207,44,52,.38); box-shadow:0 0 85px rgba(242,41,50,.3); transform:rotate(-22deg); }
.hero-content { text-align:left; width:min(1110px,calc(100% - 48px)); display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:35px; }.hero-content > h1,.hero-content > .hero-copy,.hero-content > .actions { grid-column:1; }.hero h1 { margin:0; max-width:650px; font-size:clamp(3.3rem,6.2vw,6.5rem); line-height:.93; letter-spacing:-.075em; text-wrap:balance; }.hero h1::first-line { color:#fff; }.hero-copy { font-size:1rem; margin:28px 0 0; color:#d0c7c8; }.actions { justify-content:flex-start; margin:31px 0 0; }.button { border-radius:999px; padding:13px 21px; }.button.primary { background:#e7363f; box-shadow:0 10px 25px rgba(231,54,63,.26); }.button.primary:hover { background:#ff4d55; }.button.secondary { background:rgba(20,20,23,.46); border-color:rgba(255,255,255,.3); backdrop-filter:blur(12px); }
.code-window { grid-column:2; grid-row:1 / span 3; width:min(430px,100%); min-height:288px; align-self:center; margin:0; border-radius:29px; border-color:rgba(255,255,255,.27); background:linear-gradient(135deg,rgba(44,43,46,.61),rgba(13,13,16,.7)); box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 35px 70px rgba(0,0,0,.42); backdrop-filter:blur(23px); transform:rotate(-2deg); }.code-window::before { content:''; position:absolute; width:160px; height:160px; right:-73px; top:-56px; border-radius:50%; background:radial-gradient(circle at 33% 30%,#fd696e,#a91620 22%,#220508 63%,transparent 68%); box-shadow:0 0 45px rgba(240,44,55,.45); }.window-top { border-bottom-color:rgba(255,255,255,.1); }.window-top i:first-child { background:#e7363f; }.code-window pre { position:relative; z-index:1; padding:42px 32px; color:#e8dfe0; }.code-window em,.code-window strong { color:#ff7e84; }.code-orb { background:radial-gradient(circle at 30% 30%,#f04851,rgba(110,12,20,.28) 45%,transparent 69%); }
.section { position:relative; overflow:hidden; padding:115px 0; background:#0b0b0d; }.about { background:linear-gradient(180deg,#09090b,#121113 52%,#0d0c0e); }.about::after,.projects::before,.vision::before { content:''; position:absolute; width:440px; height:440px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(207,39,48,.18),transparent 67%); filter:blur(12px); }.about::after { left:-220px; bottom:-180px; }.about-grid { position:relative; z-index:1; gap:100px; }.portrait-frame { border-radius:28px; box-shadow:0 28px 65px rgba(0,0,0,.4); }.about-copy h2,.section-heading h2,.contact h2,.vision h2 { font-size:clamp(2.6rem,4.5vw,4.5rem); }.about blockquote { color:#ff747b; }
.skills { background:linear-gradient(180deg,#0d0c0e,#171416 48%,#0c0b0d); }.skill-grid { gap:18px; }.skill-card,.project-card { border-radius:23px; border-color:rgba(255,255,255,.14); background:linear-gradient(135deg,rgba(43,42,46,.54),rgba(16,15,18,.6)); box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 19px 43px rgba(0,0,0,.2); backdrop-filter:blur(14px); }.skill-card:hover,.project-card:hover { border-color:rgba(255,111,118,.7); background:linear-gradient(135deg,rgba(82,44,48,.62),rgba(19,15,17,.72)); }.skill-card .icon { border-radius:15px; color:#ff8c91; background:rgba(190,28,39,.18); }.skill-card h3,.project-content h3 { color:#fff; }
.projects { background:linear-gradient(180deg,#0c0b0d,#111012 55%,#08090a); }.projects::before { right:-160px; top:40px; }.project-grid { gap:20px; }.project-card::after { background:linear-gradient(110deg,transparent 33%,rgba(255,180,184,.18) 49%,transparent 66%); }.project-image { height:215px; }.project-image::after { background:rgba(235,52,62,.38); }.project-preview { border-radius:15px; border-color:rgba(255,255,255,.4); background:rgba(27,16,18,.45); }.project-portfolio { background:linear-gradient(135deg,#361319,#ad3038); }.project-event { background:linear-gradient(135deg,#3b151a,#d14b53); }.project-shop { background:linear-gradient(135deg,#42151a,#be4147); }.project-local { background:linear-gradient(135deg,#281317,#9e3038); }.project-restaurant { background:linear-gradient(135deg,#4a1b1d,#d2524c); }.project-notes { background:linear-gradient(135deg,#35141b,#a73742); }.project-blog { background:linear-gradient(135deg,#321419,#8e2d37); }.project-launch { background:linear-gradient(135deg,#54151c,#e0484f); }.project-photo { background:linear-gradient(135deg,#2d1719,#823239); }.project-community { background:linear-gradient(135deg,#381216,#c53f48); }
.project-image.has-cover { background:#0c090b; }.project-cover { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; position:relative; z-index:1; transition:transform .5s ease; }.project-image.has-cover::after { z-index:2; opacity:.32; pointer-events:none; }.project-card:hover .project-cover { transform:scale(1.035); }
.services { background:radial-gradient(ellipse at 50% 16%,rgba(234,49,60,.22),transparent 33%),linear-gradient(180deg,#08090a,#100d0f 45%,#080809); }.services::before { background:radial-gradient(ellipse,rgba(255,215,216,.16),transparent 68%); }.service-grid { gap:18px; }.service-card { border-radius:28px; background:linear-gradient(145deg,rgba(47,43,45,.65),rgba(10,10,12,.78) 63%); border-color:rgba(255,255,255,.18); }.service-card.featured { border-color:rgba(255,148,153,.75); background:linear-gradient(145deg,rgba(94,43,48,.74),rgba(17,9,11,.86) 63%); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 34px 70px rgba(90,8,14,.32); }.service-card .icon { background:rgba(220,44,53,.16); color:#ff9ba0; }.popular { color:#fff; background:#df3540; }.service-card.featured .button.secondary { background:#e7363f; color:#fff; border-color:#e7363f; }.discount { background:#e7363f; }.price-sale b { color:#fff; }
.vision { background:linear-gradient(135deg,#1b080b,#510f17 54%,#15080a); }.vision::before { width:700px; height:700px; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,68,77,.23),transparent 64%); }.vision .shell { position:relative; z-index:1; }.contact { background:linear-gradient(180deg,#0e090b,#08090b); }.contact-form { border-radius:28px; border-color:rgba(255,255,255,.16); background:linear-gradient(135deg,rgba(46,42,45,.55),rgba(13,12,14,.7)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 50px rgba(0,0,0,.27); backdrop-filter:blur(17px); }.contact-form input,.contact-form textarea { background:rgba(8,8,10,.5); border-color:rgba(255,255,255,.14); }.contact-form input:focus,.contact-form textarea:focus { border-color:#e7363f; box-shadow:0 0 0 3px rgba(231,54,63,.16); }.facebook { background:#d52f3a; border-radius:999px; }.facebook:hover { background:#eb414b; }footer { background:#08090a; }
@media(max-width:800px) { .navbar { height:68px; }.nav-inner { height:42px; }.hero { min-height:auto; padding:110px 0 75px; }.hero-content { display:flex; flex-direction:column; align-items:flex-start; }.hero h1 { font-size:clamp(3.2rem,14vw,5.5rem); }.code-window { width:100%; min-height:230px; transform:none; }.hero::before { width:300px; height:300px; right:-110px; top:245px; }.service-card,.service-card.featured { border-radius:24px; } }

/* Crimson Noir palette and handwritten signature */
:root { --bg:#121212; --bg2:#2c2c2c; --white:#f5f5f5; --muted:#c6b9bd; --blue:#c50337; --blue-soft:#f0809f; }
.logo { font-family:'Allura',cursive; font-size:2.05rem; font-weight:400; letter-spacing:.015em; color:#f5f5f5; transform:translateY(1px); }
.logo:hover { color:#ff9ab5; }
.skill-logo { padding:7px; }
.skill-logo svg { width:100%; height:100%; overflow:visible; }
.skill-logo .shield { fill:rgba(197,3,55,.22); stroke:#ff8d9c; stroke-width:2; stroke-linejoin:round; }
.skill-logo .mark { fill:#ffdce1; font-family:Arial,sans-serif; font-size:30px; font-weight:800; }
.css-logo .shield { fill:rgba(99,30,42,.32); stroke:#f29bb0; }
.css-logo .mark { fill:#ffb8c5; }
.hero::before { background:radial-gradient(circle at 38% 34%,#e13a69 0 2%,#c50337 13%,#330510 42%,transparent 68%); }
.hero::after { border-color:rgba(197,3,55,.42); box-shadow:0 0 85px rgba(197,3,55,.28); }
.button.primary,.service-card.featured .button.secondary { background:#c50337; box-shadow:0 10px 25px rgba(197,3,55,.28); }
.button.primary:hover,.service-card.featured .button.secondary:hover { background:#e11653; }
.popular,.discount { background:#c50337; }
.facebook { background:#c50337; }.facebook:hover { background:#e11653; }
.mobile-side-nav,.mobile-nav-overlay,.mobile-nav-head,.mobile-nav-close { display:none; }

/* Mobile polish: comfortable spacing, touch-friendly controls, and readable cards. */
@media(max-width:540px) {
  html, body { overflow-x:hidden; overscroll-behavior-x:none; }
  body.mobile-nav-open { overflow:hidden; }
  .mobile-nav-overlay {
    position:fixed;
    z-index:40;
    inset:0;
    display:block;
    opacity:0;
    visibility:hidden;
    background:rgba(4,3,5,.54);
    backdrop-filter:blur(3px);
    transition:opacity .28s ease,visibility .28s ease;
  }
  .mobile-nav-overlay.open { opacity:1; visibility:visible; }
  .mobile-side-nav {
    position:fixed;
    z-index:50;
    left:0;
    top:0;
    display:flex;
    flex-direction:column;
    width:min(82vw,310px);
    height:100dvh;
    gap:6px;
    padding:calc(18px + env(safe-area-inset-top)) 15px calc(22px + env(safe-area-inset-bottom));
    transform:translateX(-105%);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    border-right:1px solid rgba(255,255,255,.22);
    border-radius:0 28px 28px 0;
    background:linear-gradient(160deg,rgba(64,43,48,.94),rgba(16,12,16,.97) 62%,rgba(9,8,10,.99));
    box-shadow:inset -1px 1px 0 rgba(255,255,255,.12),22px 0 48px rgba(0,0,0,.42),0 0 32px rgba(197,3,55,.15);
    backdrop-filter:blur(22px);
    transition:transform .32s cubic-bezier(.22,.75,.22,1);
  }
  .mobile-side-nav.open { transform:translateX(0); }
  .mobile-nav-head { display:flex; align-items:center; justify-content:space-between; margin:1px 3px 20px; color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
  .mobile-nav-close { display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(255,255,255,.07); color:#fff; font:400 1.65rem/1 Arial,sans-serif; cursor:pointer; }
  .mobile-side-nav a {
    display:flex;
    width:100%;
    min-height:51px;
    align-items:center;
    gap:13px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:15px;
    color:#eee2e4;
    font-size:.92rem;
    font-weight:600;
    line-height:1;
    transition:background .2s,border-color .2s,box-shadow .2s,color .2s;
  }
  .mobile-side-nav .nav-icon { width:20px; height:20px; flex:0 0 20px; }
  .mobile-nav-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-side-nav a.active,
  .mobile-side-nav a:active {
    color:#fff;
    border-color:rgba(255,179,185,.58);
    background:linear-gradient(110deg,#d50740,#9e062d);
    box-shadow:0 9px 22px rgba(197,3,55,.28),inset 0 1px 0 rgba(255,255,255,.3);
  }
  .mobile-side-nav a:focus-visible { outline:2px solid #ffb1b8; outline-offset:3px; }
  .menu-toggle { display:flex; }
  .nav-links.open { display:none; }
  .hero-content.reveal { opacity:1; transform:none; }
  .shell { width:min(100% - 32px,var(--shell)); }
  .navbar { height:70px; }
  .nav-inner { width:calc(100% - 32px); height:45px; padding:0 14px 0 17px; gap:12px; }
  .logo { font-size:1.8rem; }
  .language-switch { font-size:.66rem; gap:4px; }
  .menu-toggle { width:38px; height:38px; margin-left:auto; border-radius:50%; background:rgba(255,255,255,.1); align-items:center; transition:background .2s; }
  .menu-toggle span { width:17px; background:#f5f5f5; transition:transform .22s ease; }
  body.mobile-nav-open .menu-toggle { background:#c50337; }
  body.mobile-nav-open .menu-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }
  body.mobile-nav-open .menu-toggle span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .hero { padding:101px 0 64px; contain:paint; }
  .hero-content { gap:0; }
  .hero h1 { font-size:clamp(3rem,14.2vw,4.35rem); line-height:.95; letter-spacing:-.07em; }
  .hero-copy { margin-top:22px; font-size:.94rem; line-height:1.65; }
  .actions { width:100%; margin-top:25px; gap:10px; }
  .actions .button { min-height:48px; flex:1; padding:12px 13px; font-size:.8rem; }
  .code-window { min-height:205px; margin-top:39px; border-radius:24px; }
  .code-window pre { padding:29px 21px; font-size:.69rem; line-height:1.75; }
  .code-window::before { width:125px; height:125px; right:-49px; top:-44px; }
  .section { padding:78px 0; }
  .section-heading { margin-bottom:29px; }
  .section-heading h2,.about-copy h2,.contact h2,.vision h2 { font-size:clamp(2.3rem,11.4vw,3.35rem); line-height:.98; }
  .about-grid { gap:35px; }.portrait-frame { border-radius:22px; }
  .about-copy>p:not(.eyebrow) { font-size:.92rem; line-height:1.7; }
  .skill-grid,.project-grid { gap:14px; }.skill-card { min-height:0; padding:22px; border-radius:20px; }.skill-card .icon { width:42px; height:42px; }.skill-card h3 { margin-top:13px; }
  .project-card { border-radius:22px; }.project-image { height:205px; }.project-content { padding:19px 20px 21px; }
  .services { padding:80px 0 74px; }.service-grid { gap:17px; }.service-card,.service-card.featured { min-height:0; padding:27px 24px; border-radius:24px; }.service-card h3 { font-size:1.25rem; }.service-card ul { margin-bottom:23px; }.service-card .button { width:100%; min-height:47px; }
  .vision { padding:83px 0; }.vision h2 { max-width:310px; margin-left:auto; margin-right:auto; }.vision>div>p:last-child { font-size:.93rem; }
  .contact { padding:78px 0; }.contact-heading { margin-bottom:34px; }.contact-grid { gap:35px; }.facebook { max-width:none; min-height:48px; justify-content:center; }.contact-form { padding:21px 18px; border-radius:23px; }.contact-form input,.contact-form textarea { min-height:45px; }.contact-form button { width:100%; min-height:48px; }
  footer { padding-top:36px; }.footer-grid { grid-template-columns:1fr; gap:18px; }.footer-grid>div:first-child { grid-column:auto; }.copyright { margin-top:25px; }
}

/* Tablet / iPad: fixed bottom navigation. Phone-only side navigation stays below 540px. */
@media (min-width:541px) and (max-width:1024px) {
  .navbar { height:78px; }
  .nav-inner { width:calc(100% - 48px); height:48px; padding:0 17px 0 20px; gap:14px; }
  .logo { font-size:1.75rem; }
  .menu-toggle, .nav-links { display:none !important; }
  .language-switch { margin-left:auto; font-size:.68rem; }
  main { padding-bottom:106px; }
  .mobile-side-nav {
    position:fixed;
    z-index:30;
    left:50%;
    bottom:12px;
    top:auto;
    display:flex !important;
    width:min(620px,calc(100% - 52px));
    min-height:64px;
    padding:7px 10px 9px;
    transform:translateX(-50%) !important;
    opacity:1 !important;
    pointer-events:auto !important;
    flex-direction:row;
    justify-content:space-between;
    gap:3px;
    border:1px solid rgba(255,255,255,.21);
    border-radius:24px;
    background:linear-gradient(135deg,rgba(58,45,48,.82),rgba(14,12,15,.9));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 16px 42px rgba(0,0,0,.48),0 0 32px rgba(197,3,55,.18);
    backdrop-filter:blur(20px);
  }
  .mobile-side-nav a {
    position:relative;
    display:flex;
    width:auto;
    height:52px;
    min-width:54px;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:0;
    border-radius:16px;
    background:transparent;
    box-shadow:none;
    color:#d8cccf;
    font-size:1rem;
  }
  .mobile-side-nav .nav-icon { width:19px; height:19px; }
  .mobile-nav-label { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:.57rem; font-weight:600; letter-spacing:.01em; }
  .mobile-side-nav a.active,
  .mobile-side-nav a:active {
    transform:none;
    color:#fff;
    border:1px solid rgba(255,202,207,.74);
    background:radial-gradient(circle at 35% 25%,#f65a68,#c50337 52%,#59051d 100%);
    box-shadow:0 0 20px rgba(218,16,57,.48),inset 0 1px 0 rgba(255,255,255,.4);
  }
  .hero { min-height:620px; padding:90px 0 86px; }
  .hero-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(265px,.82fr); gap:26px; align-items:center; }
  .hero h1 { font-size:clamp(3.3rem,7vw,4.5rem); }
  .hero-copy { margin-top:24px; }
  .code-window { grid-column:2; grid-row:1 / span 3; min-height:255px; }
  .about-grid { grid-template-columns:.8fr 1.2fr; gap:52px; }
  .portrait-frame { height:auto; aspect-ratio:3/4; }
  .contact-grid { grid-template-columns:.82fr 1.18fr; gap:42px; }
  .service-grid { grid-template-columns:repeat(2,1fr); gap:18px; }
  .service-card:last-child { grid-column:1 / -1; max-width:calc(50% - 9px); justify-self:center; }
}

/* Examples: a compact portfolio of visual directions, placed directly after projects. */
.examples { background:linear-gradient(180deg,#08090a 0%,#100c0e 50%,#0b0a0c 100%); }
.examples::before { content:''; position:absolute; width:540px; height:540px; left:48%; top:-280px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(197,3,55,.14),transparent 66%); filter:blur(18px); }
.examples .shell { position:relative; z-index:1; }
.examples-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.example-card { overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:23px; background:linear-gradient(135deg,rgba(45,42,45,.56),rgba(14,13,15,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 19px 43px rgba(0,0,0,.2); transition:transform .25s,border-color .25s,background .25s; }
.example-card:hover { transform:translateY(-5px); border-color:rgba(255,111,118,.7); background:linear-gradient(135deg,rgba(82,44,48,.62),rgba(19,15,17,.72)); }
.example-visual { position:relative; height:238px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.12); }
.example-content { padding:20px 21px 23px; }
.example-content>span { color:#ff8c91; font-size:.67rem; font-weight:700; letter-spacing:.12em; }
.example-content h3 { margin:7px 0 8px; color:#fff; font-size:1.1rem; line-height:1.2; }
.example-content p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.6; }
.visual-landing { padding:28px; background:radial-gradient(circle at 77% 42%,rgba(232,44,61,.5),transparent 17%),radial-gradient(ellipse at 72% 72%,rgba(119,12,24,.64),transparent 34%),linear-gradient(135deg,#0d0d10,#272025 58%,#0c0b0d); }
.visual-security { padding:28px; background:radial-gradient(circle at 78% 24%,rgba(90,177,141,.24),transparent 18%),radial-gradient(ellipse at 77% 76%,rgba(20,101,72,.32),transparent 31%),linear-gradient(135deg,#0a1012,#182224 57%,#0b0f11); }
.visual-security { padding:0; }
.example-visual { height:auto; aspect-ratio:16 / 9; }
.example-screenshot { display:block; width:100%; height:100%; object-fit:contain; object-position:center; background:#0b0f11; }
.security-label { position:relative; z-index:2; display:block; color:#c9d5d1; font-size:.51rem; font-weight:700; letter-spacing:.15em; }
.visual-security strong { position:relative; z-index:2; display:block; margin-top:28px; color:#f8f8f6; font-size:clamp(1.75rem,3.2vw,2.7rem); line-height:.92; letter-spacing:-.075em; }
.security-copy { position:relative; z-index:2; display:block; width:35%; height:5px; margin-top:21px; border-radius:999px; background:rgba(238,247,242,.49); box-shadow:0 10px 0 rgba(238,247,242,.17); }
.security-action { position:relative; z-index:2; display:inline-flex; align-items:center; gap:21px; margin-top:28px; padding:8px 12px; border:1px solid rgba(223,243,234,.38); border-radius:999px; color:#f5fbf7; font-size:.57rem; }.security-action b { color:#a6ddb9; font-size:.9rem; }
.security-panel { position:absolute; right:27px; top:24px; width:39%; height:73%; overflow:hidden; border:1px solid rgba(219,238,230,.3); border-radius:16px; background:linear-gradient(145deg,rgba(78,95,91,.42),rgba(14,21,22,.48)); box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 16px 30px rgba(0,0,0,.24); }
.security-panel>span { position:absolute; top:16px; left:16px; width:6px; height:6px; border-radius:50%; background:#9dd5af; box-shadow:13px 0 0 rgba(215,235,224,.45); }.security-panel i { position:absolute; left:50%; top:56%; width:75px; height:75px; border:1px solid rgba(181,214,198,.35); border-radius:50%; transform:translate(-50%,-50%); }.security-panel i:nth-child(3) { width:49px; height:49px; }.security-panel i:nth-child(4) { width:23px; height:23px; }.security-panel b { position:absolute; width:10px; height:10px; left:59%; top:43%; border-radius:50%; background:#a6dfb8; box-shadow:0 0 17px rgba(166,223,184,.55); }
.visual-kicker { position:relative; z-index:2; display:block; color:#e6d8db; font-size:.51rem; font-weight:700; letter-spacing:.15em; }
.visual-landing strong { position:relative; z-index:2; display:block; margin-top:28px; color:#fff; font-size:clamp(1.75rem,3.2vw,2.7rem); line-height:.92; letter-spacing:-.075em; }
.visual-copy { position:relative; z-index:2; display:block; width:38%; height:5px; margin-top:21px; border-radius:999px; background:rgba(255,255,255,.48); box-shadow:0 10px 0 rgba(255,255,255,.18); }
.visual-button { position:relative; z-index:2; display:inline-flex; align-items:center; gap:21px; margin-top:28px; padding:8px 12px; border:1px solid rgba(255,255,255,.4); border-radius:999px; color:#fff; font-size:.57rem; }
.visual-button b { color:#ff96a7; font-size:.9rem; }
.visual-orb { position:absolute; width:170px; height:170px; right:3%; bottom:-36px; border-radius:50%; background:radial-gradient(circle at 36% 28%,#f55b73 0 3%,#c50337 17%,#4b0817 48%,transparent 70%); box-shadow:0 0 38px rgba(220,24,59,.42); }
.visual-ring { position:absolute; width:145px; height:145px; right:17%; top:15px; border:23px solid rgba(255,155,164,.23); border-radius:50%; transform:rotate(-25deg); }
.visual-glass { background:radial-gradient(circle at 76% 22%,rgba(218,62,73,.28),transparent 19%),linear-gradient(135deg,#111013,#282327 58%,#0d0c0e); }
.glass-top { position:absolute; top:25px; left:24px; width:65px; height:6px; border-radius:9px; background:rgba(255,255,255,.72); box-shadow:75px 0 0 rgba(255,255,255,.23),105px 0 0 rgba(255,255,255,.23); }
.glass-window { position:absolute; inset:61px 24px 45px; border:1px solid rgba(255,255,255,.42); border-radius:17px; background:linear-gradient(130deg,rgba(255,255,255,.17),rgba(255,255,255,.035)); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 16px 30px rgba(0,0,0,.22); transform:rotate(-4deg); }
.glass-window::after { content:''; position:absolute; width:95px; height:95px; right:-36px; bottom:-49px; border-radius:50%; background:radial-gradient(circle,#ec5665 0 5%,#981229 32%,transparent 69%); opacity:.8; }
.glass-window i,.glass-window b,.glass-window em,.glass-window small { position:absolute; display:block; border-radius:999px; }
.glass-window i { top:21px; left:18px; width:8px; height:8px; background:#ff8490; }.glass-window b { top:23px; left:38px; width:44%; height:5px; background:rgba(255,255,255,.72); }.glass-window em { top:43px; left:18px; width:66%; height:4px; background:rgba(255,255,255,.27); }.glass-window small { left:18px; right:18px; bottom:17px; height:28%; border-radius:8px; background:rgba(255,255,255,.12); }
.glass-pills { position:absolute; bottom:16px; left:24px; display:flex; gap:7px; }.glass-pills span { width:36px; height:7px; border-radius:999px; background:rgba(255,255,255,.38); }.glass-pills span:last-child { width:21px; background:#ed5362; }
.visual-palette { padding:20px; background:radial-gradient(circle at 76% 21%,rgba(234,47,74,.48),transparent 15%),linear-gradient(145deg,#250c14,#690f28 62%,#240a12); }
.visual-palette>span { position:relative; z-index:1; color:#ffe3e7; font-size:.55rem; font-weight:700; letter-spacing:.15em; }
.palette-card { position:absolute; inset:51px 26px 20px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:9px; padding:10px; border:1px solid rgba(255,255,255,.25); border-radius:17px; background:rgba(16,7,11,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 16px 35px rgba(0,0,0,.25); transform:rotate(3deg); }
.palette-card i { display:block; border-radius:10px; background:#c50337; }.palette-card i:nth-child(2) { background:#090a0d; }.palette-card i:nth-child(3) { background:linear-gradient(135deg,#f284a3,#c50337 55%,#280912); }.palette-card b { border-radius:10px; background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.22)); }
@media(max-width:540px) { .examples { padding:78px 0; }.examples-grid { grid-template-columns:1fr; gap:14px; }.example-card { border-radius:22px; }.example-visual { height:220px; }.example-content { padding:19px 20px 21px; }.visual-security,.visual-landing { padding:25px; }.visual-security { padding:0; }.visual-security strong,.visual-landing strong { font-size:2.15rem; }.visual-orb { width:160px; height:160px; right:1%; }.visual-ring { width:135px; height:135px; right:18%; }.security-panel { right:20px; top:20px; } }