/*
 * PATASINDO Design System — for Astra + Elementor Pro.
 * All rules are scoped under body.patasindo so the rest of the site is untouched.
 */

/* ================= DESIGN TOKENS ================= */
:root {
  --background: 60 11% 97%;
  --foreground: 240 6% 4%;
  --card: 0 0% 100%;
  --card-foreground: 240 6% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 6% 4%;
  --primary: 220 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 94%;
  --secondary-foreground: 0 0% 7%;
  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 33%;
  --accent: 220 100% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 82%;
  --input: 0 0% 82%;
  --ring: 220 100% 50%;
  --radius: 0.125rem;
}
html.dark {
  --background: 0 0% 2%;
  --foreground: 240 5% 96%;
  --card: 0 0% 4%;
  --card-foreground: 240 5% 96%;
  --popover: 0 0% 4%;
  --popover-foreground: 240 5% 96%;
  --primary: 216 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 240 5% 96%;
  --muted: 0 0% 12%;
  --muted-foreground: 240 4% 65%;
  --accent: 216 100% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 4% 16%;
  --input: 240 4% 16%;
  --ring: 216 100% 60%;
}

/* ================= BASE (scoped) ================= */
body.patasindo {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}
body.patasindo h1, body.patasindo h2, body.patasindo h3, body.patasindo h4 {
  font-family: 'Cabinet Grotesk', sans-serif;
  margin: 0; line-height: 1.05; letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}
body.patasindo p { margin: 0; line-height: 1.65; color: hsl(var(--muted-foreground)); }
body.patasindo a { color: inherit; text-decoration: none; }
body.patasindo img { max-width: 100%; display: block; }
body.patasindo ::selection { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
body.patasindo a:focus-visible, body.patasindo button:focus-visible,
body.patasindo input:focus-visible, body.patasindo select:focus-visible, body.patasindo textarea:focus-visible {
  outline: 2px solid hsl(var(--ring)); outline-offset: 2px;
}

/* Film-grain noise overlay (pure CSS, no extra markup) */
body.patasindo::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.dark body.patasindo::after { opacity: .025; }

/* ================= ELEMENTOR NEUTRALIZATION ================= */
body.patasindo .elementor-widget { margin-bottom: 0; }
body.patasindo .elementor-column-gap-no > .elementor-column > .elementor-element-populated { padding: 0; }
body.patasindo .elementor-widget:not(.elementor-widget-form) .elementor-widget-container > *:first-child { margin-top: 0; }

/* ================= UTILITIES ================= */
body.patasindo .container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { body.patasindo .container { padding: 0 3rem; } }
body.patasindo .section-pad { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 768px) { body.patasindo .section-pad { padding-top: 9rem; padding-bottom: 9rem; } }
body.patasindo .grid-12 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { body.patasindo .grid-12 { grid-template-columns: repeat(12, 1fr); } }
body.patasindo .col-7 { grid-column: span 12; }
body.patasindo .col-5 { grid-column: span 12; }
body.patasindo .col-4 { grid-column: span 12; }
body.patasindo .col-8 { grid-column: span 12; }
@media (min-width: 768px) {
  body.patasindo .col-7 { grid-column: span 7; }
  body.patasindo .col-5 { grid-column: span 5; }
  body.patasindo .col-4 { grid-column: span 4; }
  body.patasindo .col-8 { grid-column: span 8; }
}
body.patasindo h2.display { font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-top: 1.5rem; }
@media (min-width: 768px) { body.patasindo h2.display { font-size: 3rem; } }
body.patasindo .flex-end-col { display: flex; flex-direction: column; justify-content: flex-end; }
body.patasindo .overline {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .75rem; line-height: 1; letter-spacing: .25em; text-transform: uppercase;
  font-weight: 700; color: hsl(var(--muted-foreground));
}
body.patasindo .section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 3rem; }
body.patasindo .all-services { display: none; }
@media (min-width: 768px) { body.patasindo .all-services { display: inline-flex; } }

/* ================= BUTTONS / LINKS ================= */
body.patasindo .btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.75rem; font-size: .875rem; font-weight: 600; font-family: inherit;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  user-select: none;
}
body.patasindo .btn:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); }
body.patasindo .btn:active { transform: scale(.95); }
body.patasindo .btn-outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--foreground)); }
body.patasindo .btn-outline:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); border-color: hsl(var(--foreground)); }
body.patasindo .btn-inverse { background: hsl(var(--background)); color: hsl(var(--foreground)); }
body.patasindo .btn-inverse:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); }
body.patasindo .btn .arr { transition: transform .3s ease; }
body.patasindo .btn:hover .arr { transform: translateX(2px); }
body.patasindo .text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; color: hsl(var(--primary));
  transition: gap .3s ease;
}
body.patasindo .text-link:hover { gap: .75rem; }

/* ================= IMG FRAME + GRID ================= */
body.patasindo .hero-grid {
  background-image:
    linear-gradient(to right, hsl(var(--border) / .55) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--border) / .55) 1px, transparent 1px);
  background-size: 76px 76px;
}
body.patasindo .img-frame { position: relative; }
body.patasindo .img-frame::after {
  content: ""; position: absolute; inset: 0; border: 1px solid hsl(var(--foreground) / .12);
  transform: translate(12px, 12px); pointer-events: none;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
body.patasindo .img-frame:hover::after { transform: translate(6px, 6px); }

/* ================= REVEAL / MASK / AMBIENT ================= */
html.patasindo-js body.patasindo [data-reveal] { opacity: 0; }
body.patasindo .mask-line { display: block; overflow: hidden; }
html.patasindo-js body.patasindo .mask-line > span { display: block; transform: translateY(115%); animation: patMaskUp 1.1s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--md, 0s); }
@keyframes patMaskUp { to { transform: translateY(0); } }
body.patasindo .spin-slow { animation: patSpin 60s linear infinite; }
body.patasindo .spin-slow-r { animation: patSpinR 50s linear infinite; }
@keyframes patSpin { to { transform: rotate(360deg); } }
@keyframes patSpinR { to { transform: rotate(-360deg); } }
body.patasindo .float-y { animation: patFloatY 1.8s ease-in-out infinite; }
@keyframes patFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
body.patasindo .pulse { animation: patPulse 6s ease-in-out infinite; }
@keyframes patPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-24px); } }
@keyframes patFadeIn { to { opacity: 1; } }

/* ================= HERO (Home) ================= */
body.patasindo .elementor-section.pat-hero {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 7rem; padding-bottom: 5rem;
}
body.patasindo .elementor-section.pat-hero > .elementor-container > .elementor-column { display: flex; }
body.patasindo .elementor-section.pat-hero > .elementor-container > .elementor-column > .elementor-widget-wrap {
  display: flex; flex-direction: column; justify-content: center;
}
body.patasindo .hero-content { position: relative; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; }
@media (min-width: 768px) { body.patasindo .hero-content { padding: 0 3rem; } }
body.patasindo .pat-hero h1 { font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; margin-top: 1.5rem; }
@media (min-width: 768px) { body.patasindo .pat-hero h1 { font-size: 4.5rem; } }
@media (min-width: 1024px) { body.patasindo .pat-hero h1 { font-size: 6rem; } }
body.patasindo .pat-hero h1 .primary { color: hsl(var(--primary)); }
body.patasindo .hero-sub { margin-top: 2rem; max-width: 36rem; font-size: 1rem; line-height: 1.7; }
@media (min-width: 768px) { body.patasindo .hero-sub { font-size: 1.125rem; } }
body.patasindo .hero-ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
body.patasindo .hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: hsl(var(--muted-foreground));
}
html.patasindo-js body.patasindo .hero-sub { opacity: 0; animation: patFadeIn .9s ease .85s forwards; }
html.patasindo-js body.patasindo .hero-ctas { opacity: 0; animation: patFadeIn .9s ease 1s forwards; }
html.patasindo-js body.patasindo .hero-scroll { opacity: 0; animation: patFadeIn 1s ease 1.6s forwards; }
body.patasindo .hero-scroll span { font-family: 'Cabinet Grotesk', sans-serif; font-size: .625rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; }
/* decorative hero shapes */
body.patasindo .hero-shapes { position: absolute; inset: 0; pointer-events: none; }
body.patasindo .hero-shapes .shape-1 {
  position: absolute; top: 18%; right: 12%; width: 10rem; height: 10rem;
  border: 1px solid hsl(var(--primary) / .4); animation: patSpin 60s linear infinite;
}
body.patasindo .hero-shapes .shape-2 {
  position: absolute; bottom: 22%; left: 6%; width: 6rem; height: 6rem;
  border-radius: 999px; border: 1px solid hsl(var(--foreground) / .2); animation: patSpinR 50s linear infinite;
}
body.patasindo .hero-shapes .shape-3 {
  position: absolute; top: 30%; left: 18%; width: .75rem; height: .75rem;
  background: hsl(var(--primary)); animation: patPulse 6s ease-in-out infinite;
}
body.patasindo .hero-shapes .shape-4 {
  position: absolute; bottom: 30%; right: 24%; width: 4rem; height: 4rem;
  border: 1px solid hsl(var(--foreground) / .15); transform: rotate(45deg);
}

/* ================= MARQUEE ================= */
body.patasindo .elementor-section.pat-marquee {
  overflow: hidden; padding: 1.5rem 0;
  border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
@media (min-width: 768px) { body.patasindo .elementor-section.pat-marquee { padding: 2rem 0; } }
body.patasindo .marquee-track { display: flex; width: max-content; animation: patMarquee 26s linear infinite; }
body.patasindo .elementor-section.pat-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes patMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.patasindo .marquee-track span {
  display: flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem;
  font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.25rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: -.02em; color: hsl(var(--foreground) / .6); white-space: nowrap;
}
@media (min-width: 768px) { body.patasindo .marquee-track span { font-size: 1.875rem; gap: 2.5rem; padding-right: 2.5rem; } }
body.patasindo .marquee-track span svg { color: hsl(var(--primary)); flex: none; }

/* ================= BENTO ================= */
body.patasindo .bento { display: grid; grid-template-columns: 1fr; gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); }
@media (min-width: 768px) { body.patasindo .bento { grid-template-columns: repeat(12, 1fr); } }
body.patasindo .bento a {
  background: hsl(var(--card)); padding: 2rem; min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background .5s ease, opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
body.patasindo .bento a:hover { background: hsl(var(--secondary)); }
body.patasindo .bento a.wide { grid-column: span 12; }
@media (min-width: 768px) { body.patasindo .bento a.wide { grid-column: span 6; } body.patasindo .bento a.narrow { grid-column: span 6; } }
@media (min-width: 1024px) { body.patasindo .bento a.narrow { grid-column: span 3; } }
body.patasindo .bento-head { display: flex; align-items: flex-start; justify-content: space-between; }
body.patasindo .bento-head .num { font-family: 'Cabinet Grotesk', sans-serif; font-size: .875rem; font-weight: 700; color: hsl(var(--muted-foreground)); }
body.patasindo .bento-body { margin-top: 3rem; }
body.patasindo .bento-body h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem; }
@media (min-width: 768px) { body.patasindo .bento-body h3 { font-size: 1.5rem; } }
body.patasindo .bento-body h3 svg { opacity: 0; transform: translate(-4px, 4px); transition: all .3s ease; color: hsl(var(--primary)); }
body.patasindo .bento a:hover .bento-body h3 svg { opacity: 1; transform: translate(0, 0); }
body.patasindo .bento-body p { margin-top: .5rem; font-size: .875rem; line-height: 1.6; }
body.patasindo .bento-body .ic { color: hsl(var(--primary)); }

/* ================= CARD SECTIONS (segments, approach) ================= */
body.patasindo .elementor-section.pat-card {
  border-top: 1px solid hsl(var(--border)); background: hsl(var(--card));
}

/* ================= CLIENT SEGMENTS ================= */
body.patasindo .seg-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { body.patasindo .seg-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
body.patasindo .seg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(35%); transition: filter .7s ease, transform .7s ease; }
body.patasindo .seg:hover img { filter: grayscale(0); transform: scale(1.05); }
body.patasindo .seg .img-frame { overflow: hidden; aspect-ratio: 4/3; }
body.patasindo .seg h3 { margin-top: 1.5rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 768px) { body.patasindo .seg h3 { font-size: 1.875rem; } }
body.patasindo .seg p { margin-top: .75rem; font-size: .875rem; line-height: 1.7; }
@media (min-width: 768px) { body.patasindo .seg p { font-size: 1rem; } }

/* ================= TECH VISUALS ================= */
body.patasindo .tech-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 768px) { body.patasindo .tech-grid { grid-template-columns: repeat(12, 1fr); gap: 3rem; } }
body.patasindo .tech-copy { grid-column: span 12; }
@media (min-width: 768px) { body.patasindo .tech-copy { grid-column: span 5; } }
body.patasindo .tech-visual { position: relative; height: 420px; grid-column: span 12; }
@media (min-width: 768px) { body.patasindo .tech-visual { grid-column: span 7; height: 520px; } }
body.patasindo .pv-a { position: absolute; left: 0; top: 0; width: 70%; aspect-ratio: 4/3; z-index: 10; }
body.patasindo .pv-b { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 1/1; }
body.patasindo .tech-badge {
  position: absolute; bottom: -1rem; left: 8%; z-index: 20;
  background: hsl(var(--card) / .8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--border)); padding: 1rem 1.25rem;
}
body.patasindo .tech-badge .t { font-family: 'Cabinet Grotesk', sans-serif; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: hsl(var(--muted-foreground)); }
body.patasindo .tech-badge .s { margin-top: .25rem; font-size: .875rem; font-weight: 500; color: hsl(var(--foreground)); }

/* ================= CTA BANNER ================= */
body.patasindo .elementor-section.pat-cta { background: hsl(var(--primary)); }
body.patasindo .pat-cta .cta-row h2 { color: hsl(var(--primary-foreground)); font-size: 2.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; }
@media (min-width: 768px) { body.patasindo .pat-cta .cta-row h2 { font-size: 3.75rem; } }
body.patasindo .cta-row { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 768px) { body.patasindo .cta-row { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

/* ================= PAGE HERO (About / Services / Contact) ================= */
body.patasindo .elementor-section.pat-page-hero { position: relative; overflow: hidden; padding-top: 10rem; padding-bottom: 5rem; }
@media (min-width: 768px) { body.patasindo .elementor-section.pat-page-hero { padding-top: 13rem; padding-bottom: 7rem; } }
body.patasindo .pat-page-hero h1 { font-size: 3rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; margin-top: 1.5rem; }
@media (min-width: 768px) { body.patasindo .pat-page-hero h1 { font-size: 4.5rem; } }
body.patasindo .pat-page-hero h1 .primary { color: hsl(var(--primary)); }

/* ================= ABOUT PAGE ================= */
body.patasindo .pat-vision {
  border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
body.patasindo .vision-statement {
  font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.875rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; color: hsl(var(--foreground));
  max-width: 56rem; margin-top: 2rem;
}
@media (min-width: 768px) { body.patasindo .vision-statement { font-size: 3rem; } }
body.patasindo .manifesto-sticky { position: static; }
@media (min-width: 768px) { body.patasindo .manifesto-sticky { position: sticky; top: 8rem; } }
body.patasindo .value-row {
  border-top: 1px solid hsl(var(--border)); padding: 2.5rem 0;
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 768px) { body.patasindo .value-row { grid-template-columns: repeat(12, 1fr); padding: 3.5rem 0; } }
body.patasindo .value-num { font-family: 'Cabinet Grotesk', sans-serif; font-size: 3rem; font-weight: 900; color: hsl(var(--primary) / .25); grid-column: span 12; }
@media (min-width: 768px) { body.patasindo .value-num { font-size: 3.75rem; grid-column: span 3; } }
body.patasindo .value-body { grid-column: span 12; }
@media (min-width: 768px) { body.patasindo .value-body { grid-column: span 9; } }
body.patasindo .value-body h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 768px) { body.patasindo .value-body h3 { font-size: 1.875rem; } }
body.patasindo .value-body p { margin-top: .75rem; line-height: 1.7; }
body.patasindo .approach-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); }
@media (min-width: 768px) { body.patasindo .approach-grid { grid-template-columns: repeat(4, 1fr); } }
body.patasindo .approach-card { background: hsl(var(--card)); padding: 2rem 2.5rem; }
body.patasindo .approach-card .step { font-family: 'Cabinet Grotesk', sans-serif; font-size: .875rem; font-weight: 700; color: hsl(var(--primary)); }
body.patasindo .approach-card h3 { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
body.patasindo .approach-card p { margin-top: .75rem; font-size: .875rem; line-height: 1.65; }

/* ================= SERVICES PAGE ================= */
body.patasindo .elementor-section.pat-service { border-top: 1px solid hsl(var(--border)); scroll-margin-top: 6rem; }
body.patasindo .service-inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 768px) { body.patasindo .service-inner { padding: 7rem 3rem; grid-template-columns: repeat(12, 1fr); gap: 3.5rem; } }
body.patasindo .svc-left { grid-column: span 12; }
body.patasindo .svc-right { grid-column: span 12; }
@media (min-width: 768px) { body.patasindo .svc-left { grid-column: span 5; } body.patasindo .svc-right { grid-column: span 7; } }
body.patasindo .svc-meta { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
body.patasindo .svc-meta .big-num { font-family: 'Cabinet Grotesk', sans-serif; font-size: 3rem; font-weight: 900; color: hsl(var(--primary) / .2); }
@media (min-width: 768px) { body.patasindo .svc-meta .big-num { font-size: 3.75rem; } }
body.patasindo .svc-left h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 768px) { body.patasindo .svc-left h2 { font-size: 2.25rem; } }
body.patasindo .svc-left .tagline { margin-top: .5rem; font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.125rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
body.patasindo .deliverables { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: hsl(var(--border)); border: 1px solid hsl(var(--border)); }
@media (min-width: 640px) { body.patasindo .deliverables { grid-template-columns: repeat(2, 1fr); } }
body.patasindo .deliverable { background: hsl(var(--card)); padding: 1.25rem; display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; font-weight: 500; color: hsl(var(--foreground)); }
body.patasindo .deliverable svg { color: hsl(var(--primary)); flex: none; margin-top: 2px; }

/* ================= CONTACT PAGE ================= */
body.patasindo .contact-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 6rem; }
@media (min-width: 768px) { body.patasindo .contact-grid { grid-template-columns: repeat(12, 1fr); gap: 3.5rem; padding-bottom: 9rem; } }
body.patasindo .contact-form-col { grid-column: span 12; }
body.patasindo .contact-info-col { grid-column: span 12; }
@media (min-width: 768px) { body.patasindo .contact-form-col { grid-column: span 7; } body.patasindo .contact-info-col { grid-column: span 5; } }
body.patasindo .form-card { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 2rem; }
@media (min-width: 768px) { body.patasindo .form-card { padding: 2.5rem; } }
body.patasindo .info-card { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 2rem; height: 100%; display: flex; flex-direction: column; }
@media (min-width: 768px) { body.patasindo .info-card { padding: 2.5rem; } }
body.patasindo .info-items { margin-top: 2rem; flex: 1; display: flex; flex-direction: column; gap: 2rem; }
body.patasindo .info-item { display: flex; align-items: flex-start; gap: 1rem; }
body.patasindo .info-item .ic { height: 2.5rem; width: 2.5rem; border: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: center; color: hsl(var(--primary)); flex: none; }
body.patasindo .info-item .l { font-family: 'Cabinet Grotesk', sans-serif; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: hsl(var(--muted-foreground)); }
body.patasindo .info-item .v { margin-top: .25rem; font-size: 1rem; font-weight: 500; color: hsl(var(--foreground)); }
body.patasindo .info-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); font-size: .75rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }

/* ================= ELEMENTOR FORM (Pro) — styled like the design ================= */
body.patasindo .pat-form { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 2rem; }
@media (min-width: 768px) { body.patasindo .pat-form { padding: 2.5rem; } }
body.patasindo .pat-form .elementor-form .elementor-field-group { margin-bottom: 1.25rem; }
body.patasindo .pat-form .elementor-form .elementor-field-group label { font-size: .875rem; font-weight: 500; color: hsl(var(--foreground)); }
body.patasindo .pat-form .elementor-field-textual,
body.patasindo .pat-form .elementor-field,
body.patasindo .pat-form select.elementor-field,
body.patasindo .pat-form textarea.elementor-field {
  background: transparent; border: 1px solid hsl(var(--input)); border-radius: 0;
  color: hsl(var(--foreground)); font-family: inherit; font-size: .875rem;
  padding: .625rem .75rem; box-shadow: none; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.patasindo .pat-form .elementor-field:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 1px hsl(var(--ring)); }
body.patasindo .pat-form .elementor-field option { background: hsl(var(--card)); color: hsl(var(--foreground)); }
body.patasindo .pat-form .elementor-button {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border-radius: 0; border: none; font-family: 'Cabinet Grotesk', sans-serif;
  font-size: .875rem; font-weight: 600; letter-spacing: .02em; padding: .875rem 1.75rem;
  transition: background .3s ease, color .3s ease;
}
body.patasindo .pat-form .elementor-button:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); }
body.patasindo .pat-form .elementor-message { margin-top: 1rem; font-size: .875rem; }

/* ================= FOOTER ================= */
body.patasindo .elementor-section.pat-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
body.patasindo .footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; padding: 4rem 0; }
@media (min-width: 768px) { body.patasindo .footer-grid { grid-template-columns: repeat(12, 1fr); padding: 5rem 0; } }
body.patasindo .footer-brand { grid-column: span 12; }
@media (min-width: 768px) { body.patasindo .footer-brand { grid-column: span 4; } body.patasindo .footer-col-2 { grid-column: span 2; } body.patasindo .footer-col-3 { grid-column: span 3; } }
body.patasindo .footer-brand p { margin-top: 1rem; font-size: .875rem; max-width: 20rem; }
body.patasindo .footer-logo { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; font-size: 1.5rem; letter-spacing: -.03em; text-transform: uppercase; }
body.patasindo .footer-logo em { font-style: normal; color: hsl(var(--primary)); }
body.patasindo .foot-h { font-family: 'Cabinet Grotesk', sans-serif; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: hsl(var(--muted-foreground)); }
body.patasindo .foot-links { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
body.patasindo .foot-links a { transition: color .3s ease; width: max-content; }
body.patasindo .foot-links a:hover { color: hsl(var(--primary)); }
body.patasindo .foot-links span { color: hsl(var(--muted-foreground)); }
body.patasindo .foot-bottom { border-top: 1px solid hsl(var(--border)); }
body.patasindo .foot-bottom-inner { max-width: 80rem; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; justify-content: space-between; font-size: .75rem; color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) { body.patasindo .foot-bottom-inner { flex-direction: row; align-items: center; padding: 1.5rem 3rem; } }

/* ================= THEME TOGGLE BUTTON ================= */
body.patasindo .pat-theme-toggle {
  height: 2.5rem; width: 2.5rem; flex: none;
  border: 1px solid hsl(var(--border)); background: transparent;
  color: hsl(var(--foreground));
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .3s ease, color .3s ease;
}
body.patasindo .pat-theme-toggle:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
body.patasindo .pat-theme-toggle svg { display: block; }
body.patasindo .pat-theme-toggle .pat-ic-sun { display: none; }
html.dark body.patasindo .pat-theme-toggle .pat-ic-moon { display: none; }
html.dark body.patasindo .pat-theme-toggle .pat-ic-sun { display: block; }
/* when injected into an Astra header (inline) */
body.patasindo .pat-t-inline { margin-left: .75rem; }
/* floating fallback when no header target is found */
body.patasindo .pat-t-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  height: 2.75rem; width: 2.75rem; border-radius: 999px;
  background: hsl(var(--card)); box-shadow: 0 12px 30px -12px hsl(var(--foreground) / .35);
}

/* ================= ASTRA INTEGRATION ================= */
body.patasindo #ast-desktop-header, body.patasindo #ast-mobile-header,
body.patasindo .main-header-bar, body.patasindo .ast-main-header-wrap {
  background: hsl(var(--background) / .75);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-color: hsl(var(--border));
}
body.patasindo #ast-desktop-header, body.patasindo #ast-mobile-header { position: sticky; top: 0; z-index: 9998; }
body.patasindo .site-title a, body.patasindo .ast-site-identity a {
  color: hsl(var(--foreground)); font-family: 'Cabinet Grotesk', sans-serif;
}
body.patasindo .main-header-menu .menu-link { color: hsl(var(--foreground) / .8); transition: color .3s ease; }
body.patasindo .main-header-menu .menu-link:hover, body.patasindo .main-header-menu .current-menu-item > .menu-link { color: hsl(var(--primary)); }
body.patasindo .ast-header-custom-item a { color: hsl(var(--foreground)); }
/* hide Astra's own footer when our template footer is present */
body.patasindo:has(.pat-footer) .site-footer { display: none; }
/* dark mode overrides for Astra parts (dark class lives on <html>) */
html.dark body.patasindo .site-title a, html.dark body.patasindo .ast-site-identity a,
html.dark body.patasindo .main-header-menu .menu-link { color: hsl(var(--foreground) / .85); }
html.dark body.patasindo .main-header-menu .menu-link:hover, html.dark body.patasindo .main-header-menu .current-menu-item > .menu-link { color: hsl(var(--primary)); }
html.dark body.patasindo #ast-mobile-header .menu-toggle, html.dark body.patasindo .ast-mobile-menu-trigger { color: hsl(var(--foreground)); }
/* hide default WordPress page title when our page heroes are used */
body.patasindo.page-template-elementor_header_footer .entry-header,
body.patasindo.page-template-elementor_canvas .entry-header { display: none; }

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  body.patasindo [data-reveal] { opacity: 1 !important; transform: none !important; }
  body.patasindo .mask-line > span { transform: none; animation: none; }
  body.patasindo .spin-slow, body.patasindo .spin-slow-r, body.patasindo .float-y,
  body.patasindo .marquee-track, body.patasindo .pulse, body.patasindo .hero-sub,
  body.patasindo .hero-ctas, body.patasindo .hero-scroll { animation: none !important; opacity: 1 !important; }
}