/* LUVA-DEV — Midnight design system inspired by DESIGN.md.
   Original Raycast reference informs styling only; LUVA-DEV retains its identity and copy. */
:root {
  color-scheme: dark;
  --bg:#040506; --panel:#07080a; --text:#fff; --muted:#9c9c9d;
  --blue:#ff6363; --green:#e6e6e6; --max:1200px;
  --void:#040506; --ink:#07080a; --obsidian:#111214;
  --graphite:#1b1c1e; --ash:#9c9c9d; --smoke:#77787b;
  --mist:#e6e6e6; --iron:#454647; --border:#363739;
  --coral:#ff6363;
  --key-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.3);
}
html {scroll-padding-top:112px}
body {background:var(--void);color:#fff;font-weight:400;line-height:1.6}
::selection {background:#713b3d;color:#fff}
a:focus-visible,button:focus-visible {outline:2px solid #e6e6e6;outline-offset:4px}
.ambient {display:none}
.scroll-progress {height:2px;background:var(--coral)}
.container {width:min(calc(100% - 48px),1200px)}
/* Restrained floating glass navigation */
.site-header {
  position:sticky;top:12px;z-index:50;
  width:min(calc(100% - 32px),1200px);margin:12px auto 0;
  border:1px solid var(--border);border-radius:14px;
  background:rgba(12,13,15,.78);box-shadow:inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(48px) saturate(1.25);-webkit-backdrop-filter:blur(48px) saturate(1.25);
}
.header-inner {width:calc(100% - 32px);min-height:64px;gap:20px}
.brand {gap:10px}
.brand img {width:37px;height:37px;filter:none}
.brand-label strong {font-size:18px;font-weight:600;letter-spacing:.015em;line-height:1.1}
.brand-label small {font-size:10px;color:var(--ash);letter-spacing:.06em}
.main-nav {gap:29px}
.main-nav a {font-size:13px;font-weight:500;color:var(--ash)}
.main-nav a:hover,.main-nav a.active {color:#fff}
.main-nav a.active:after {display:none}
.btn,.btn-green,.btn-primary,.btn-outline {
  background:var(--mist);color:#242527;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;font-size:13px;font-weight:600;padding:11px 16px;
  box-shadow:0 4px 4px rgba(0,0,0,.25);
  transition:transform .2s,background .2s,border-color .2s;
}
.btn:after {display:none}
.btn:hover {transform:translateY(-2px);background:#fff;border-color:#fff}
.btn-outline {background:rgba(255,255,255,.035);color:var(--mist);border:1px solid var(--border);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.btn-outline:hover {background:#17181b;color:#fff;border-color:#727375}
.header-cta {padding:9px 12px;font-size:12px}
/* Cinematic hero: color confined to atmospheric red/blue geometry */
.hero {
  overflow:hidden;isolation:isolate;
  padding:87px 0 54px;min-height:min(770px,calc(100vh - 80px));
  background:radial-gradient(ellipse 40% 32% at 50% 79%,rgba(16,52,118,.33),transparent 80%),var(--void);
}
.hero:before {
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(1050px,145vw);height:520px;top:17%;left:50%;
  transform:translateX(-50%);opacity:.74;
  background:
    radial-gradient(ellipse at 29% 57%,rgba(255,99,99,.33),transparent 41%),
    radial-gradient(ellipse at 71% 48%,rgba(68,126,246,.36),transparent 42%);
  filter:blur(60px)
}
.hero:after {
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:160px;height:540px;top:17%;left:calc(50% - 58px);
  background:linear-gradient(180deg,rgba(255,99,99,0),rgba(255,99,99,.3) 45%,rgba(255,99,99,0));
  transform:rotate(53deg);filter:blur(52px);
}
.hero-grid {display:flex;flex-direction:column;justify-content:center;gap:32px;min-height:0}
.hero-copy {max-width:850px;margin:auto;text-align:center}
.eyebrow {font-family:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.4;
  letter-spacing:.075em;color:var(--ash);font-weight:500;margin-bottom:22px}
.eyebrow-dot {background:var(--coral);box-shadow:none;width:6px;height:6px}
.hero h1 {max-width:780px;margin:0 auto 23px;font-size:clamp(40px,5.2vw,64px);
  line-height:1.12;letter-spacing:.004em;font-weight:400}
.hero h1 span,.section-heading h2 span,.contact h2 span {color:inherit}
.hero-lead {margin:0 auto 26px;color:var(--ash);font-size:16px;line-height:1.65;max-width:555px}
.hero-actions {justify-content:center;gap:10px}
.hero-actions .btn {min-width:0;padding:12px 18px}
.hero-note {justify-content:center;flex-wrap:wrap;margin-top:20px;color:var(--smoke);font-size:11px}
.status-indicator {background:var(--mist);box-shadow:none;width:6px;height:6px}
.share-home {background:var(--obsidian);color:var(--ash);border:1px solid var(--border);border-radius:8px;font-weight:500;padding:5px 9px}
.share-home:hover {color:#fff;border-color:#797979;background:var(--graphite)}
.hero-art {width:min(850px,100%);height:360px;margin:0 auto;perspective:1200px}
.hero-art::before {content:"";position:absolute;inset:13% 18%;border-radius:50%;
 background:radial-gradient(ellipse,rgba(40,95,188,.25),transparent 67%);filter:blur(35px)}
.laptop {max-width:530px;width:74%;filter:drop-shadow(0 25px 36px rgba(0,0,0,.65))}
.laptop-screen {background:radial-gradient(ellipse at 45% 0%,#192336,#07080a 70%);
 border:8px solid #242528;border-bottom-color:#151619;box-shadow:var(--key-shadow),0 0 42px rgba(31,61,118,.18)}
.laptop-screen:before {border-color:rgba(255,255,255,.06)}
.laptop-screen img {filter:none}
.laptop-screen strong {font-weight:500;letter-spacing:.02em;font-size:28px}
.laptop-screen span {color:var(--ash)}
.laptop-base {background:linear-gradient(#7c7d80,#343538 35%,#18191b 83%,#0a0a0b)}
.laptop-notch {background:#a0a1a4}
.circuit {border-color:#555b6c;opacity:.24}
.art-grid {opacity:.15;background-image:linear-gradient(#80838b44 1px,transparent 1px),linear-gradient(90deg,#80838b44 1px,transparent 1px)}
.art-tag {color:var(--mist)!important;background:rgba(15,16,19,.83);border:1px solid #393a3d;
 border-radius:8px;padding:9px 12px;font-family:"Geist Mono",ui-monospace,monospace;
 font-size:10px;font-weight:500;letter-spacing:.03em;box-shadow:var(--key-shadow)}
.art-tag-top {right:7%;top:50px}.art-tag-bottom {left:7%;bottom:34px}
.orb-one {background:radial-gradient(ellipse,rgba(16,61,138,.18),transparent 68%)}
.orb-two {background:radial-gradient(ellipse,rgba(255,99,99,.14),transparent 68%)}
/* Typography and spacious dark-only sections */
.services,.projects,.contact {background:var(--void);border:0}
.services {padding:96px 0 100px}
.projects {padding:80px 0 95px}
.contact {padding:70px 0 90px}
.services .container,.projects .container {border-top:1px solid #202123;padding-top:43px}
.section-heading {max-width:850px;margin-bottom:41px}
.section-heading h2,.contact h2 {font-size:clamp(32px,4.6vw,52px);line-height:1.17;
 letter-spacing:.004em;font-weight:400;margin:0 0 12px}
.section-heading .eyebrow {margin-bottom:15px}
.section-heading p:not(.eyebrow){color:var(--ash)}
/* Keycap-like panels, no floating card drop shadow */
.services-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.service-card,.service-card.blue,.service-card.green,.service-card.violet,.service-card.orange {
  --accent:var(--mist);
  min-height:237px;isolation:isolate;
  padding:25px 27px;border-radius:16px;border:1px solid #292a2c;
  background:var(--ink);box-shadow:var(--key-shadow);
  transition:background .2s,border-color .2s,transform .2s;
}
.service-card:before {display:none}
.service-card:hover {transform:translateY(-2px);border-color:#555659;box-shadow:var(--key-shadow);background:#0d0e10}
.service-icon {width:47px;height:47px;display:grid;place-items:center;border-radius:50%;
  background:var(--obsidian);color:var(--mist)}
.service-icon svg {width:25px;height:25px;stroke-width:1.6}
.service-card h3 {font-size:20px;line-height:1.3;font-weight:500;letter-spacing:.01em;margin:18px 0 8px}
.service-card p {font-size:14px;line-height:1.65;color:var(--ash);margin:0 0 18px}
.service-card>a {border:0;padding:0;background:transparent!important;border-radius:0;
 color:var(--mist);font-weight:500;font-size:12px;gap:12px;min-height:24px}
.service-card>a:hover {color:#fff}
.project {border:1px solid #292a2c;border-radius:20px;background:var(--ink);
  box-shadow:var(--key-shadow);transition:background .2s,border-color .2s,transform .2s}
.project:hover {transform:translateY(-2px);border-color:#555659;box-shadow:var(--key-shadow);background:#0d0e10}
.projects-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.project-visual,.project-nutri,.project-converter,.project-perfumery .project-visual,.project-interviews .project-visual {
  background:radial-gradient(ellipse at 50% 30%,#1a1c22 0%,#101114 55%,#0a0b0d 100%);
  height:245px;border-bottom:1px solid #242527;
}
.project-visual::after {content:"";position:absolute;inset:0;
 background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 48%);
 pointer-events:none}
.project-badge {background:rgba(18,19,21,.84);color:var(--mist)!important;
  border:1px solid #363739;border-radius:6px;padding:5px 9px;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;font-weight:400;box-shadow:none}
.project-info {background:transparent;padding:25px 26px 26px}
.project-info h3 {font-size:21px;letter-spacing:.01em;font-weight:500;margin-bottom:8px}
.project-info p {font-size:14px;line-height:1.6;color:var(--ash)}
.project-live-link,.project-private-note {
  border:1px solid var(--border);border-radius:8px;
  background:var(--obsidian);color:var(--mist);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
  font-size:12px;font-weight:500;padding:9px 12px
}
.project-live-link:hover {background:var(--graphite);color:#fff;transform:translateY(-1px)}
.project-private-note {color:var(--ash)}
.app-preview {background:#101216;border:1px solid #4b4d52;border-radius:12px;box-shadow:0 14px 30px #0007}
.app-sidebar {background:#1c1d20}
.app-sidebar i {background:#5e6063}
.app-title {background:#606166}
.app-charts span {background:#949596}
.app-lines i {background:#393b40}
.converter-preview {background:#0c0d10;border:1px solid #48494c;box-shadow:var(--key-shadow);border-radius:16px}
.converter-icon {background:#22242a;color:#ececec;font-weight:400}
.converter-bars span,.converter-bars span:nth-child(2){background:#424348}
.converter-caption {color:var(--ash)}
.perfume-artwork,.forms-artwork {filter:saturate(.6) drop-shadow(0 16px 24px rgba(0,0,0,.5))}
.contact-box {border:1px solid #353638;border-radius:20px;background:var(--ink);
 padding:39px 43px;box-shadow:var(--key-shadow)}
.contact .eyebrow {margin-bottom:14px}
.contact p:not(.eyebrow){color:var(--ash);line-height:1.6}
.contact-actions {min-width:260px;gap:10px}
.contact-number {color:var(--mist);font-size:13px;font-weight:500}
.invoice-available {
  display:flex;flex-direction:row;align-items:center;align-self:flex-start;gap:11px;
  width:auto;max-width:310px;padding:12px 14px;border:1px solid #292a2c;
  border-radius:13px;background:#111214;box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.invoice-available svg {
  display:block;flex:0 0 30px;width:30px;height:30px;padding:5px;
  fill:none;stroke:currentColor;color:var(--mist);
  border:1px solid #303133;border-radius:9px;background:#1b1c1e;
}
.invoice-available > span {min-width:0;display:block;flex:1}
.invoice-available strong {
  display:block;font-size:12px;line-height:1.35;font-weight:600;color:var(--mist);
}
.invoice-available small {
  display:block;margin-top:3px;font-size:11px;line-height:1.4;color:var(--smoke);
}
.contact-sub {color:var(--smoke)}
.site-footer {background:var(--void);border-top:1px solid #222325}
.footer-top {padding-block:29px}
.footer-top .brand-label strong {font-size:16px}
.footer-top .brand-label small {font-size:9px}
.footer-top nav a,.footer-location {color:var(--ash)}
.footer-top nav a:hover {color:#fff}
.footer-bottom {border-color:#242527;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:11px;color:var(--smoke)}
.whatsapp-float {background:var(--mist);color:#252527;border:1px solid #fff3;
  box-shadow:0 6px 25px rgba(0,0,0,.4);border-radius:8px;
  font-size:12px;font-weight:600}
.whatsapp-float:hover {transform:translateY(-2px);box-shadow:0 6px 25px rgba(0,0,0,.4)}
/* responsive refinements */
@media(max-width:1080px){
  .header-cta {display:none}
  .hero {min-height:0}
}
@media(max-width:760px){
  html {scroll-padding-top:100px}
  .container {width:calc(100% - 36px)}
  .site-header {top:8px;margin:8px auto 0;width:calc(100% - 20px);border-radius:12px}
  .header-inner {min-height:60px;width:calc(100% - 22px)}
  .brand img {width:34px;height:34px}
  .brand-label strong {font-size:16px}
  .brand-label small {font-size:9px}
  .menu-toggle {border:1px solid var(--border);border-radius:8px;background:var(--obsidian);width:39px;height:39px}
  .menu-toggle span {background:var(--mist)}
  .main-nav {top:calc(100% + 9px);left:0;right:0;padding:10px;
    border:1px solid var(--border);border-radius:12px;
    background:rgba(13,14,16,.96);box-shadow:0 12px 30px #0008;
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
  .main-nav a {color:var(--ash);padding:12px;font-size:14px}
  .main-nav a:hover,.main-nav a.active {color:#fff;background:#1b1c1e}
  .hero {padding:79px 0 32px}
  .hero-grid {gap:25px}
  .hero-copy {text-align:center}
  .hero h1 {font-size:clamp(38px,8.1vw,55px);line-height:1.12}
  .hero-lead {font-size:15px}
  .hero-art {height:290px;max-width:580px}
  .laptop {width:85%}
  .art-tag-top {right:0;top:30px}
  .art-tag-bottom {left:0;bottom:16px}
  .services {padding:69px 0 67px}
  .projects {padding:65px 0}
  .services .container,.projects .container {padding-top:32px}
  .services-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-card {padding:22px;min-height:270px}
  .service-card h3 {font-size:18px}
  .projects-grid {grid-template-columns:1fr}
  .contact {padding:50px 0 65px}
  .contact-box {padding:28px;gap:24px}
  .contact h2 {font-size:clamp(31px,6vw,43px)}
  .footer-top nav {gap:18px}
}
@media(max-width:540px){
  .container {width:calc(100% - 34px)}
  .hero {padding:70px 0 30px}
  .hero h1 {font-size:clamp(37px,10vw,49px)}
  .hero-actions {flex-direction:column}
  .hero-actions .btn {width:100%}
  .hero-lead {font-size:14px}
  .hero-note {gap:8px;line-height:1.6}
  .hero-art {height:225px}
  .laptop {width:85%;transform:rotate(-3deg) translateY(10px)}
  .laptop-screen img {width:46px;height:46px;margin-bottom:6px}
  .laptop-screen strong {font-size:19px}
  .laptop-screen span {font-size:8px}
  .art-tag {font-size:8px;padding:7px 9px}
  .art-tag-top {top:22px;right:0}
  .art-tag-bottom {bottom:10px;left:0}
  .services-grid {grid-template-columns:1fr}
  .service-card {min-height:0;padding:24px}
  .project-visual {height:225px}
  .project-info {padding:24px}
  .contact-box {padding:26px 22px}
  .contact-actions {min-width:0;width:100%}
  .invoice-available {min-width:0;width:auto;max-width:310px}
  .contact-actions .btn {width:100%}
  .whatsapp-float {padding:12px;border-radius:12px}
  .footer-top {gap:17px}
  .footer-top nav {gap:14px}
}
@media(prefers-reduced-motion:reduce){
 .hero-art .laptop,.hero-art .art-tag,.orb-one,.orb-two {animation:none!important}
 .service-card,.project {transition:none!important}
}