/* Layana brand layer (v1.3.0): logo blue + orange tokens, dark mode, sticky header,
   language/theme switchers, typing hero and back-to-top button. Loaded after colorful.css. */

/* ---------- Tokens ---------- */
:root{
  --brand-navy:#0b2160;--brand-navy-deep:#071640;
  --primary:#1a43b0;--primary-hover:#12348a;--primary-solid:#1a43b0;--primary-solid-hover:#12348a;
  --primary-soft:#eaf0ff;--primary-line:#c5d4f7;--primary-shadow:#1a43b026;
  --accent:#f7931e;--accent-strong:#f2621b;--accent-text:#c2540a;--accent-soft:#fff1e2;--accent-ring:#f7931e24;--accent-glow:#ffe6cc;--accent-on-dark:#ffb547;
  --grad-accent:linear-gradient(120deg,#ffb81c 0%,#f7931e 48%,#f26a1b 100%);
  --grad-accent-text:linear-gradient(100deg,#f7931e 10%,#f2541b 90%);
  --on-accent:#0b2160;
  --bg:#ffffff;--surface:#ffffff;--surface-2:#f6f8ff;--surface-3:#fff7ef;
  --text:#0f1f45;--text-soft:#3b4a6b;--text-muted:#5f6c85;
  --border:#e3e9f4;--border-strong:#cad7ed;
  --glass:#fffffff5;--frame:#ffffff;
  --hero-glow-1:#e3ebff;--hero-glow-2:#ffeedd;--hero-accent-1:#ffd7a3;--hero-accent-2:#c9d8ff;
  --header-bg:#ffffffd9;--header-shadow:#0b216014;
  --tooltip-bg:#0b2160;--tooltip-text:#ffffff;
  --contact-bg:radial-gradient(ellipse at 100% 100%,#f7931e47,transparent 58%),linear-gradient(110deg,#0b2160,#1a43b0);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --brand-navy:#0c1a45;--brand-navy-deep:#050d24;
  --primary:#7fa3ff;--primary-hover:#a3bdff;--primary-solid:#2f5fe0;--primary-solid-hover:#3f6ef0;
  --primary-soft:#18295a;--primary-line:#34508f;--primary-shadow:#00000040;
  --accent:#ffa23a;--accent-strong:#ff8a2a;--accent-text:#ffb25e;--accent-soft:#3a2614;--accent-ring:#ffa23a26;--accent-glow:#f7931e1f;--accent-on-dark:#ffbb5c;
  --grad-accent-text:linear-gradient(100deg,#ffb81c 5%,#ff7a2a 95%);
  --bg:#0a1430;--surface:#111e40;--surface-2:#0d1838;--surface-3:#121b38;
  --text:#e8eefb;--text-soft:#c3cee6;--text-muted:#9aa9c7;
  --border:#22335f;--border-strong:#2d4275;
  --glass:#13224ae6;--frame:#1a2a52;
  --hero-glow-1:#18306e;--hero-glow-2:#3a24104d;--hero-accent-1:#f7931e59;--hero-accent-2:#1a43b080;
  --header-bg:#0a1430cc;--header-shadow:#00000059;
  --tooltip-bg:#e8eefb;--tooltip-text:#0a1430;
  --contact-bg:radial-gradient(ellipse at 100% 100%,#f7931e33,transparent 58%),linear-gradient(110deg,#0c1a45,#17368a);
  color-scheme:dark;
}
.theme-transition,.theme-transition *,.theme-transition *:before,.theme-transition *:after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease!important}

/* ---------- Base surfaces ---------- */
body{background:var(--bg);color:var(--text)}
::selection{background:var(--accent);color:var(--on-accent)}
.skip-link{background:var(--primary-solid);color:#fff;border-radius:8px;z-index:200}
.capabilities{background:var(--surface)}
.capabilities .container{color:var(--text-muted)}
.service-card{background:var(--surface)}
.service-top>span:last-child{color:var(--text-muted)}
.service-card:nth-child(3) .service-icon{background:var(--primary-soft);color:var(--primary)}
.hero-photo-frame,.furniture-frame{border-color:var(--frame)}
.hero-image-accent{background:linear-gradient(140deg,var(--hero-accent-1),var(--hero-accent-2))}
.photo-badge{border-color:var(--border)}
.photo-badge strong,.product-float strong{color:var(--text)}
.product-section{background:radial-gradient(ellipse at 90% 50%,var(--accent-glow),transparent 55%),var(--surface-2)}
.process-section{background:linear-gradient(120deg,var(--surface-2),var(--surface-3))}
.mint-dot{color:var(--accent)}
.contact-section{background:var(--contact-bg)}
.contact-section h2 span{color:var(--accent-on-dark)}
.site-header .brand-subtitle{color:var(--accent-text)}

/* ---------- Buttons ---------- */
.button{transition:transform .2s,background .2s,box-shadow .2s,filter .2s}
.button-mint,.contact-section .button-mint{background:var(--grad-accent);color:var(--on-accent);box-shadow:0 10px 24px #f2621b33}
.button-mint:hover,.contact-section .button-mint:hover{background:var(--grad-accent);color:var(--on-accent);filter:brightness(1.06) saturate(1.05);box-shadow:0 14px 30px #f2621b40}
.button-dark{background:var(--primary-solid);color:#fff;box-shadow:0 9px 24px var(--primary-shadow)}
.button-dark:hover{background:var(--primary-solid-hover);color:#fff}
.contact-grid>div>.button svg{width:20px;height:20px}

/* ---------- Hero typing ---------- */
.hero h1>span{background:none;color:inherit;-webkit-text-fill-color:currentColor}
.hero-title .typing{display:block}
.typing-line{display:grid}
.typing-line>span{grid-area:1/1;min-width:0}
.hero-title.is-typing .typing-ghost{visibility:hidden}
.hero-title .typing-accent>span{background:var(--grad-accent-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent-strong)}
.typing-caret{display:inline-block;width:.075em;min-width:3px;height:.92em;margin:0 calc(-.075em - 4px) 0 4px;vertical-align:-.1em;border-radius:2px;background:var(--accent);-webkit-text-fill-color:initial;animation:layana-caret 1s steps(1) infinite}
@keyframes layana-caret{50%{opacity:0}}

/* ---------- Sticky header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--header-bg);color:var(--text);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);transition:box-shadow .3s,background-color .3s}
.site-header .nav-wrap{border-bottom-color:var(--border);transition:min-height .3s}
.site-header.is-scrolled{box-shadow:0 10px 30px var(--header-shadow)}
.site-header.is-scrolled .nav-wrap{border-bottom-color:transparent}
.site-header .brand-mark{transition:width .3s,height .3s,flex-basis .3s}
@media(min-width:901px){
  .site-header.is-scrolled .nav-wrap{min-height:74px}
  .site-header.is-scrolled .brand-mark{width:54px;height:54px;flex-basis:54px}
}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(max-width:600px){.admin-bar .site-header{top:0}}
html{scroll-padding-top:100px}

/* Navigation + CTA with leading icon */
.primary-nav{color:var(--text-soft)}
.primary-nav a:hover{color:var(--primary)}
.primary-nav .nav-cta{display:inline-flex;align-items:center;gap:9px;background:var(--grad-accent);color:var(--on-accent);border:0;font-weight:700;box-shadow:0 8px 20px #f2621b2e;transition:filter .2s,box-shadow .2s,transform .2s}
.primary-nav .nav-cta svg{width:18px;height:18px;stroke-width:2}
.primary-nav .nav-cta span{margin-left:0}
.primary-nav .nav-cta:hover{background:var(--grad-accent);color:var(--on-accent);filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 26px #f2621b3d}

/* Language + theme tools */
.header-tools{display:flex;align-items:center;gap:10px;margin-left:18px}
.lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border-strong);border-radius:999px;color:var(--text-muted)}
.lang-switch>svg{width:16px;height:16px;margin:0 4px 0 6px}
.lang-switch a{display:grid;place-items:center;min-width:34px;height:30px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-soft);transition:background .2s,color .2s}
.lang-switch a:hover{color:var(--primary);background:var(--primary-soft)}
.lang-switch a[aria-current]{background:var(--primary-solid);color:#fff}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--border-strong);border-radius:50%;background:transparent;color:var(--text-soft);cursor:pointer;transition:background .2s,color .2s,transform .3s}
.theme-toggle:hover{background:var(--primary-soft);color:var(--primary)}
.theme-toggle:active{transform:rotate(-20deg) scale(.94)}
.theme-toggle svg{width:19px;height:19px}
.theme-icon{display:grid;place-items:center}
.theme-icon-sun{display:none}
[data-theme="dark"] .theme-icon-sun{display:grid;color:var(--accent)}
[data-theme="dark"] .theme-icon-moon{display:none}
@media(max-width:1050px){.header-tools{margin-left:12px;gap:8px}.lang-switch>svg{display:none}}
@media(max-width:900px){
  .header-tools{margin-left:auto}
  .primary-nav{background:var(--surface);border-color:var(--border)}
  .primary-nav .nav-cta{justify-content:center;margin-top:14px}
  .menu-toggle{border-color:var(--border-strong)}
  .menu-toggle>span:not(.sr-only){background:var(--text)}
}
@media(max-width:420px){
  .brand-mark{width:52px!important;height:52px!important;flex-basis:52px!important}
  .brand-wordmark{font-size:20px!important}.brand-subtitle{font-size:10px!important}
  .header-tools{gap:6px}
  .lang-switch a{min-width:30px;height:28px;padding:0 6px;font-size:10px}
  .theme-toggle{width:38px;height:38px}
  .menu-toggle{width:40px}
}

/* ---------- Back to top ---------- */
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:70;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:var(--primary-solid);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 28px var(--primary-shadow),0 2px 6px #0000001f;opacity:0;visibility:hidden;transform:translateY(18px) scale(.9);transition:opacity .3s,transform .3s,visibility .3s,background .2s}
.back-to-top[hidden]{display:none}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--primary-solid-hover)}
.back-to-top>svg:last-child{width:20px;height:20px;stroke-width:2.2;transition:transform .2s}
.back-to-top:hover>svg:last-child{transform:translateY(-2px)}
.back-to-top-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:3}
.back-to-top-ring circle{stroke:#ffffff33}
.back-to-top-ring .back-to-top-progress{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .15s linear}
.back-to-top:before,.back-to-top:after{position:absolute;top:50%;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.back-to-top:before{content:attr(data-tooltip);right:calc(100% + 14px);transform:translate(6px,-50%);padding:7px 12px;border-radius:8px;background:var(--tooltip-bg);color:var(--tooltip-text);font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;box-shadow:0 8px 20px #0000002e}
.back-to-top:after{content:'';right:calc(100% + 8px);transform:translate(6px,-50%);border:6px solid transparent;border-left-color:var(--tooltip-bg);border-right:0}
.back-to-top:hover:before,.back-to-top:hover:after,.back-to-top:focus-visible:before,.back-to-top:focus-visible:after{opacity:1;transform:translate(0,-50%)}
@media(max-width:650px){.back-to-top{right:16px;bottom:16px;width:48px;height:48px}}
@media(hover:none){.back-to-top:hover:before,.back-to-top:hover:after{opacity:0}}

/* ---------- Dark mode details ---------- */
[data-theme="dark"] .hero-photo-frame,[data-theme="dark"] .furniture-frame{box-shadow:0 20px 55px #00000066}
[data-theme="dark"] .photo-badge,[data-theme="dark"] .product-float{box-shadow:0 12px 35px #00000059}
[data-theme="dark"] .service-card{box-shadow:none}
[data-theme="dark"] .service-card:hover{box-shadow:0 16px 40px #00000052}
[data-theme="dark"] .site-footer{background:var(--brand-navy-deep)}
[data-theme="dark"] .hero-photo-frame img,[data-theme="dark"] .furniture-frame img,[data-theme="dark"] .service-photo{filter:brightness(.92)}

@media(prefers-reduced-motion:reduce){.typing-caret{display:none}.back-to-top{transition:none}}
@media print{.site-header{position:static}.back-to-top,.header-tools{display:none}}

/* ---------- WhatsApp contact ---------- */
.contact-wa-icon{color:#25d366}
.contact-wa-icon svg,.footer-wa-link svg{fill:currentColor}
.contact-detail a.contact-phone{display:inline-block;font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1.5;font-variant-numeric:tabular-nums}
.contact-detail a.contact-phone:hover{text-decoration:underline;text-underline-offset:5px;color:var(--accent-on-dark)}
.footer-wa-link svg{width:17px;height:17px;color:#25d366}
.contact-grid>div>.button svg[fill="currentColor"]{width:20px;height:20px}
@media(max-width:900px){.contact-detail a.contact-phone{font-size:21px}}
@media(max-width:650px){.contact-detail a.contact-phone{font-size:23px}}

/* ---------- Content protection (assets/protect.js) ---------- */
.is-protected body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.is-protected input,.is-protected textarea,.is-protected select,.is-protected .allow-select{-webkit-user-select:text;user-select:text}
.is-protected img,.is-protected svg{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
.footer-mail-link{overflow-wrap:anywhere}
.footer-mail-link svg{width:17px;height:17px;color:var(--accent-on-dark)}
.footer-company .footer-contact-link{display:flex;width:fit-content;max-width:100%}