/* Achiya Automation — extracted brand tokens (dark purple/cyan/teal, RTL, leaf-cards) */
@import url('https://fonts.googleapis.com/css2?family=Secular+One&family=Varela+Round&family=Rubik+Mono+One&display=swap');

:root {
  --bg: hsl(250 25% 7%);
  --bg-soft: hsl(250 22% 9%);
  --card: hsl(255 20% 11%);
  --card-2: hsl(255 22% 14%);
  --fg: hsl(210 30% 98%);
  --muted: hsl(220 25% 78%);
  --muted-2: hsl(220 18% 60%);

  --primary: hsl(270 90% 70%);     /* purple */
  --primary-soft: hsl(270 90% 78%);
  --secondary: hsl(215 85% 65%);   /* blue */
  --accent: hsl(175 90% 55%);      /* cyan/teal */
  --accent-soft: hsl(185 80% 60%);
  --warm: hsl(35 85% 60%);         /* amber for highlights/before */
  --danger: hsl(0 80% 65%);
  --good: hsl(150 70% 55%);

  --border: hsl(270 35% 30%);
  --grid: hsl(255 30% 18%);

  --gradient-hero:
    radial-gradient(ellipse 120% 90% at 90% 0%, hsl(270 90% 60% / .32) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 10% 100%, hsl(200 80% 50% / .22) 0%, transparent 50%),
    linear-gradient(135deg, #1d1429, hsl(255 20% 11%), hsl(250 25% 7%));

  --gradient-mixed:
    radial-gradient(ellipse 90% 70% at 5% 20%,  hsl(280 85% 55% / .28) 0%, transparent 50%),
    radial-gradient(ellipse 100% 80% at 95% 80%, hsl(175 90% 50% / .25) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 50%, hsl(220 75% 55% / .15) 0%, transparent 40%),
    linear-gradient(135deg, #1c1424, #131f20);

  --gradient-cyan:
    radial-gradient(ellipse 100% 90% at 110% 10%, hsl(175 90% 45% / .3) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at -10% 90%, hsl(190 85% 45% / .22) 0%, transparent 50%),
    linear-gradient(180deg, #122121, hsl(255 20% 11%), hsl(250 25% 7%));
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Varela Round', system-ui, sans-serif;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.7;
}

.font-display { font-family: 'Rubik Mono One', monospace; letter-spacing: -.01em; }
.font-heading { font-family: 'Secular One', sans-serif; letter-spacing: .005em; }
.font-body    { font-family: 'Varela Round', sans-serif; }
.font-mono    { font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, monospace; }

/* ---- Brutal / Leaf cards ---- */
.leaf-card {
  border: 3px solid var(--fg);
  border-radius: 3px 14px 4px 18px;
  box-shadow: 8px 8px 0 var(--primary);
  background: var(--card);
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.leaf-card.accent  { box-shadow: 8px 8px 0 var(--accent); }
.leaf-card.warm    { box-shadow: 8px 8px 0 var(--warm); }
.leaf-card.blue    { box-shadow: 8px 8px 0 var(--secondary); }
.leaf-card:hover { transform: translate(4px, -4px); box-shadow: 4px 4px 0 var(--primary); }
.leaf-card.accent:hover { box-shadow: 4px 4px 0 var(--accent); }

.leaf-card-sm {
  border: 2px solid var(--fg);
  border-radius: 3px 10px 4px 12px;
  box-shadow: 6px 6px 0 var(--primary);
  background: var(--card);
  padding: 1rem 1.25rem;
}
.leaf-card-sm.accent { box-shadow: 6px 6px 0 var(--accent); }
.leaf-card-sm.warm   { box-shadow: 6px 6px 0 var(--warm); }
.leaf-card-sm.blue   { box-shadow: 6px 6px 0 var(--secondary); }

/* Sticker label (rotated badge) */
.sticker {
  background: linear-gradient(142deg, var(--accent), hsl(175 90% 50%));
  color: hsl(250 30% 7%);
  transform: rotate(-2deg);
  padding: .45rem 1.1rem;
  font-family: 'Rubik Mono One', monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  border: 1.5px solid hsl(250 30% 7% / .65);
  border-radius: 2px 8px 3px 10px;
  display: inline-block;
  box-shadow: 0 4px 16px hsl(175 90% 50% / .35), inset 0 1px hsl(255 100% 100% / .15);
}
.sticker.alt {
  background: linear-gradient(138deg, var(--primary), hsl(270 90% 64%));
  color: hsl(250 30% 7%);
  transform: rotate(1.5deg);
  border-radius: 8px 3px 10px 2px;
}
.sticker.warm {
  background: linear-gradient(140deg, var(--warm), hsl(28 90% 62%));
  color: hsl(20 40% 10%);
  transform: rotate(-1deg);
}

/* Marker highlight on text (matches site’s underline-marker treatment) */
.marker {
  background: linear-gradient(176deg, transparent 42%, hsl(175 90% 55% / .32) 42%, hsl(175 90% 55% / .28) 88%, transparent 88%);
  padding: 0 .3em;
}
.marker.purple { background: linear-gradient(176deg, transparent 42%, hsl(270 90% 70% / .35) 42%, hsl(270 90% 70% / .3) 88%, transparent 88%); }
.marker.warm   { background: linear-gradient(176deg, transparent 42%, hsl(35 85% 60% / .35) 42%, hsl(35 85% 60% / .3) 88%, transparent 88%); }

/* Scribble underline */
.underline-scribble { position: relative; display: inline-block; }
.underline-scribble::after {
  content:""; position:absolute; bottom:-.4em; left:-4%; width:108%; height:.7em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2,6 Q15,2 30,7 T60,5 T90,8 T118,4' stroke='%23a76ef7' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  opacity: .9;
}
.underline-scribble.cyan::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2,6 Q15,2 30,7 T60,5 T90,8 T118,4' stroke='%2326e0d6' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, hsl(270 90% 75%), hsl(175 90% 60%), hsl(270 90% 70%));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 8s ease infinite;
}
@keyframes gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Grid background */
.grid-bg {
  background-image:
    linear-gradient(hsl(255 30% 18% / .35) 1px, transparent 1px),
    linear-gradient(90deg, hsl(255 30% 18% / .35) 1px, transparent 1px);
  background-size: 32px 32px;
}
.dot-bg {
  background-image: radial-gradient(hsl(255 30% 22% / .55) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Subtle paper grain */
.grain::before {
  content: ""; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 50; opacity: .35; mix-blend-mode: overlay;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem;
  border: 2px solid var(--fg);
  background: var(--primary);
  color: hsl(250 30% 7%);
  font-family: 'Secular One', sans-serif;
  font-size: 1rem;
  border-radius: 3px 12px 4px 14px;
  box-shadow: 5px 5px 0 var(--fg);
  cursor: pointer;
  transition: all .25s ease;
  text-decoration: none;
}
.btn:hover { transform: translate(2px, -2px); box-shadow: 3px 3px 0 var(--fg); }
.btn.accent { background: var(--accent); }
.btn.ghost  { background: transparent; color: var(--fg); }

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid hsl(270 35% 35%);
  background: hsl(255 22% 14% / .8);
  font-size: .8rem;
  color: var(--muted);
}
.pill.live { border-color: hsl(150 70% 55% / .6); color: hsl(150 70% 70%); }
.pill.live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: hsl(150 70% 55%); box-shadow: 0 0 8px hsl(150 70% 55%);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Section gradient backgrounds */
.bg-hero  { background: var(--gradient-hero); }
.bg-mixed { background: var(--gradient-mixed); }
.bg-cyan  { background: var(--gradient-cyan); }

/* Glow pulse */
@keyframes soft-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.soft-pulse { animation: soft-pulse 2.4s ease-in-out infinite; }