/*
Theme Name: Soltech — Taskly Edition
Theme URI: https://www.soltech-lab.cl
Author: Soltech
Description: One-page agency theme for Soltech inspired by the Taskly liquid-glass aesthetic. White canvas, electric-blue gradient glows, glassmorphism navbar, scroll-reveal motion. All content built in — activate and go.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: soltech-taskly
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg:#ffffff;
  --ink:#0b1220;
  --ink-soft:#3c4658;
  --ink-mute:#6b7588;
  --blue:#0084ff;            /* Electric Brand Blue (Taskly CTA) */
  --blue-soft:#319aff;
  --blue-glow:#60b1ff;
  --violet:#7c5cff;
  --cyan:#00c2ff;
  --grad:linear-gradient(120deg,#0084ff 0%,#7c5cff 100%);
  --grad-text:linear-gradient(100deg,#0084ff 10%,#00c2ff 55%,#7c5cff 100%);
  --glass:rgba(255,255,255,.30);
  --stroke:rgba(0,0,0,.10);
  --radius:16px;
  --font-display:'Fustat',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --shadow-inset:inset 0 4px 4px 0 rgba(255,255,255,.25);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.wrap{max-width:1600px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.wrap{padding:0 64px}}

h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0}

/* ============================================================
   BACKGROUND GLOW (layered blurred ellipses, top-left)
   ============================================================ */
.bg-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-glow::before,.bg-glow::after,.bg-glow .glow-violet{
  content:"";position:absolute;border-radius:50%;filter:blur(120px);
}
.bg-glow::before{
  width:720px;height:560px;top:-180px;left:-160px;
  background:var(--blue-glow);opacity:.35;
}
.bg-glow::after{
  width:520px;height:420px;top:60px;left:160px;
  background:var(--blue-soft);opacity:.22;
}
.bg-glow .glow-violet{
  width:560px;height:460px;top:30%;right:-180px;
  background:var(--violet);opacity:.14;
}

/* ============================================================
   LIQUID GLASS NAVBAR
   ============================================================ */
.nav{
  position:sticky;top:30px;z-index:50;
  display:flex;justify-content:center;
  padding:0 16px;
}
.nav-inner{
  display:flex;align-items:center;gap:8px;
  width:fit-content;max-width:100%;
  padding:10px 12px 10px 18px;
  border-radius:var(--radius);
  background:var(--glass);
  -webkit-backdrop-filter:blur(50px);
  backdrop-filter:blur(50px);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow-inset),0 8px 32px rgba(11,18,32,.06);
}
.nav-logo{display:flex;align-items:center;margin-right:10px}
.nav-logo img{height:30px;width:auto;display:block}
.nav-links{display:none;gap:4px}
.nav-links a{
  font-size:15px;font-weight:500;color:var(--ink-soft);
  padding:8px 14px;border-radius:12px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav-links a:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;color:#fff;
  background:var(--grad);
  border:none;border-radius:var(--radius);
  padding:10px 18px;cursor:pointer;
  box-shadow:inset 0 4px 4px 0 rgba(255,255,255,.35),0 6px 18px rgba(64,98,255,.25);
  transition:transform .25s var(--ease),filter .25s var(--ease);
}
.nav-cta:hover{transform:scale(1.02);filter:brightness(1.08)}
@media(min-width:860px){.nav-links{display:flex}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:88px 0 64px}
.hero-grid{
  position:relative;z-index:10;
  display:grid;grid-template-columns:1fr;gap:48px;align-items:center;
}
@media(min-width:1024px){
  .hero{padding:120px 0 96px}
  .hero-grid{grid-template-columns:1.05fr .95fr}
}
.hero-badge{
  display:inline-flex;align-items:center;gap:12px;
  font-size:14px;font-weight:500;color:var(--ink-soft);
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--stroke);border-radius:999px;
  padding:9px 18px 9px 14px;margin-bottom:28px;
  box-shadow:var(--shadow-inset);
}
.hero-badge .badge-logos{display:inline-flex;align-items:center;gap:14px}
.hero-badge .badge-logos img{
  height:18px;width:auto;display:block;
  filter:brightness(0) saturate(100%);opacity:.6;
}
.hero h1{
  font-size:clamp(42px,6vw,75px);
  line-height:1.05;letter-spacing:-2px;
  margin-bottom:24px;
}
.hero h1 .accent{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.hero-sub{
  font-size:18px;letter-spacing:-.2px;color:var(--ink-soft);
  max-width:560px;margin:0 0 36px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn-primary{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-body);font-size:16px;font-weight:600;color:#fff;
  background:var(--grad);
  border:none;border-radius:var(--radius);
  padding:15px 24px;cursor:pointer;
  box-shadow:inset 0 4px 4px 0 rgba(255,255,255,.35),0 12px 28px rgba(64,98,255,.30);
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
.btn-primary:hover{transform:scale(1.02);filter:brightness(1.07)}
.btn-primary .arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:#fff;color:var(--blue);
  font-size:14px;line-height:1;
}
.btn-ghost{
  display:inline-flex;align-items:center;
  font-size:16px;font-weight:600;color:var(--ink);
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--stroke);border-radius:var(--radius);
  padding:15px 24px;box-shadow:var(--shadow-inset);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.btn-ghost:hover{transform:scale(1.02);background:rgba(255,255,255,.6)}

/* The orb — pure CSS liquid sphere, transparent by nature (no video asset) */
.orb-stage{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center}
.orb{position:relative;width:min(440px,80vw);aspect-ratio:1}
.orb-halo{
  position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,132,255,.30) 0%,rgba(124,92,255,.14) 50%,rgba(124,92,255,0) 72%);
  filter:blur(34px);
  animation:orb-pulse 6s ease-in-out infinite;
}
.orb-core{
  position:absolute;inset:4%;
  border-radius:46% 54% 52% 48%/44% 50% 50% 56%;
  background:
    radial-gradient(circle at 32% 26%,#dff0ff 0%,#7cc2ff 22%,#2fa0ff 46%,#0084ff 70%,#3d34d6 100%);
  box-shadow:
    inset -28px -34px 70px rgba(28,16,140,.40),
    inset 20px 26px 60px rgba(255,255,255,.45),
    0 30px 90px rgba(0,132,255,.30);
  animation:orb-morph 14s ease-in-out infinite,orb-float 8s ease-in-out infinite;
}
.orb-core::before{ /* glass highlight */
  content:"";position:absolute;top:10%;left:14%;width:42%;height:30%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 70%);
  filter:blur(6px);
}
.orb-ring{position:absolute;inset:0;display:block;overflow:visible;animation:orb-float 8s ease-in-out infinite}
.orb-orbit{
  position:absolute;inset:-6%;
  animation:orb-spin 11s linear infinite;
}
.orb-sat{
  position:absolute;top:50%;right:0;
  width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#bff0ff,#00c2ff 70%);
  box-shadow:0 0 16px rgba(0,194,255,.8);
}
@keyframes orb-morph{
  0%,100%{border-radius:46% 54% 52% 48%/44% 50% 50% 56%}
  33%{border-radius:54% 46% 44% 56%/52% 44% 56% 48%}
  66%{border-radius:48% 52% 56% 44%/46% 56% 44% 54%}
}
@keyframes orb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes orb-pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes orb-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:1023px){.orb-stage{min-height:320px}}

/* ============================================================
   TRUSTED-BY LOGO STRIP
   ============================================================ */
.clients{position:relative;z-index:10;padding:24px 0 72px}
.clients-label{
  text-align:center;font-size:14px;font-weight:500;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.12em;margin:0 0 32px;
}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:100px;width:max-content;animation:marquee 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track a{flex:none;display:flex;align-items:center}
.marquee-track img{
  height:44px;width:auto;
  filter:brightness(0) saturate(100%);opacity:.55;
  transition:filter .3s var(--ease),opacity .3s var(--ease);
}
.marquee-track a:hover img{
  filter:brightness(0) saturate(100%) invert(38%) sepia(97%) saturate(3100%) hue-rotate(199deg) brightness(101%) contrast(102%);
  opacity:1;
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{position:relative;padding:88px 0}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:600;color:var(--blue);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;
}
.section h2{
  font-size:clamp(32px,4vw,52px);
  line-height:1.1;letter-spacing:-1.5px;
  max-width:760px;margin-bottom:18px;
}
.section .lede{font-size:18px;color:var(--ink-soft);max-width:640px;margin:0 0 48px}

/* Services — glass cards */
.cards{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  border:1px solid var(--stroke);
  border-radius:20px;
  padding:32px;
  box-shadow:var(--shadow-inset),0 6px 24px rgba(11,18,32,.04);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  top:-110px;right:-110px;background:var(--blue-glow);opacity:0;
  filter:blur(70px);transition:opacity .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-inset),0 20px 48px rgba(64,98,255,.14)}
.card:hover::before{opacity:.5}
.card::after{ /* gradient hairline along the top */
  content:"";position:absolute;top:0;left:24px;right:24px;height:2px;
  background:var(--grad-text);border-radius:2px;
  opacity:0;transition:opacity .4s var(--ease);
}
.card:hover::after{opacity:1}
.card-icon{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;margin-bottom:20px;
  background:rgba(0,132,255,.10);color:var(--blue);
}
.card:nth-child(2) .card-icon{background:rgba(124,92,255,.10);color:var(--violet)}
.card:nth-child(3) .card-icon{background:rgba(0,194,255,.12);color:#0094c2}
.card:nth-child(4) .card-icon{background:rgba(13,170,120,.10);color:#0a9c6d}
.card-icon svg{width:24px;height:24px}
.card h3{font-size:21px;letter-spacing:-.4px;margin-bottom:10px;position:relative}
.card p{position:relative;font-size:16px;color:var(--ink-soft);margin:0}

/* Proof / trust band */
.proof{
  position:relative;
  background:
    radial-gradient(900px 420px at 12% 0%,rgba(96,177,255,.14),transparent 70%),
    radial-gradient(820px 400px at 92% 100%,rgba(124,92,255,.10),transparent 70%);
  border-top:1px solid rgba(0,0,0,.05);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.proof-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
@media(min-width:860px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
.proof-item{
  background:rgba(255,255,255,.6);
  border:1px solid var(--stroke);border-radius:18px;
  padding:26px;box-shadow:var(--shadow-inset);
}
.proof-item strong{display:block;font-family:var(--font-display);font-size:17px;letter-spacing:-.3px;margin-bottom:8px}
.proof-item span{font-size:15px;color:var(--ink-soft)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start;position:relative;z-index:10}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-mail{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;color:var(--blue);font-size:17px;
}
.form{
  background:var(--glass);
  -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);
  border:1px solid var(--stroke);border-radius:20px;
  padding:32px;box-shadow:var(--shadow-inset),0 12px 40px rgba(11,18,32,.06);
}
.form-row{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink-soft)}
.form input,.form textarea{
  width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.7);
  border:1px solid var(--stroke);border-radius:12px;
  padding:13px 15px;outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.form input:focus,.form textarea:focus{border-color:var(--blue-soft);box-shadow:0 0 0 4px rgba(0,132,255,.12)}
.form textarea{resize:vertical;min-height:120px}
.form .full{margin-bottom:16px}
.form-notice{margin-top:16px;font-size:15px;font-weight:500}
.form-notice.ok{color:#0a8a3a}
.form-notice.err{color:#c43030}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;
  border-top:1px solid rgba(0,0,0,.06);
  padding:40px 0;margin-top:40px;
}
.footer::before{
  content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;
  background:var(--grad-text);opacity:.5;
}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.footer img{height:24px;width:auto}
.footer p{margin:0;font-size:14px;color:var(--ink-mute)}
.footer a{color:var(--ink-soft);font-weight:500}
.footer a:hover{color:var(--blue)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* WordPress admin bar offset */
body.admin-bar .nav{top:62px}

/* Accessibility */
:focus-visible{outline:3px solid rgba(0,132,255,.5);outline-offset:2px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}