@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  background-color: #f8fafc; /* Tailwind slate-50 */
  color: #0f172a; /* Tailwind slate-900 */
}

/* Grainy Paper Texture */
.paper-texture {
  position: relative;
  background: linear-gradient(135deg, #f3f2ef 0%, #fef5f0 50%, #fcf9f7 100%);
  overflow: hidden;
}

@keyframes grain-shift {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  30% { transform:translate(3%, -15%) }
  50% { transform:translate(12%, 9%) }
  70% { transform:translate(-3%, 4%) }
  90% { transform:translate(2%, 1%) }
}

.paper-grain {
  position: absolute;
  inset: -100%;
  width: 300%;
  height: 300%;
  pointer-events: none;
  z-index: 2; /* Lowered from 40 */
  opacity: 0.15;
  mix-blend-mode: multiply;
  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
  animation: grain-shift 8s steps(10) infinite;
}

.paper-pattern {
  position: absolute;
  inset: 0;
  opacity: 1; /* Made more visible */
  pointer-events: none;
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
  z-index: 1; /* Lowered from 10 */
}

.paper-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
  opacity: 0.15;
  mix-blend-mode: overlay;
}

/* Gradients & Utilities */
.text-gradient {
  background: linear-gradient(to right, #ec4899, #8b5cf6, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-mesh {
  background-color: #f8fafc;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,100%,96%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,100%,96%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,100%,96%,1) 0, transparent 50%);
}

.glass-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #e2e8f0; /* slate-200 */
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #cbd5e1; /* slate-300 */
}

/* Animations */
@keyframes reveal-up {
  from {
    transform: translateY(30px);
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }
  to {
    transform: translateY(0);
    opacity: 1;
    clip-path: inset(0% 0 0 0);
  }
}

.animate-reveal {
  animation: reveal-up 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Button hover effects */
.btn-primary {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.iframe-container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.iframebg {
  border-radius: 20px;
  width: 100%;
  height: 459px; /* Requested height */
  border: none;
}

.headline-huge {
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1; /* Fixed clipping */
  letter-spacing: -0.04em;
  font-weight: 900;
  padding-bottom: 0.15em; /* extra space for descenders */
}

.logo-circle {
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fdfbf7;
  margin-bottom: 2rem;
  outline: 1px solid #e2e8f0;
}

.logo-circle img {
  width: 70%;
  height: auto;
}

.floating-icon {
  position: absolute;
  z-index: 5; /* Pushed above grain and pattern */
  color: #E96025; /* Orangish theme */
  opacity: 0.5; /* Even higher opacity */
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

.char-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.2em; /* Added safe room for descenders */
  margin-bottom: -0.2em;
}

.architect-line {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 1.5rem 0;
  transform-origin: left;
}

/* Button Magnet Utility */
.magnetic-wrap {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.icon-1 { top: 5%; left: 5%; animation-delay: 0s; }
.icon-2 { top: 15%; right: 5%; animation-delay: 1.5s; }
.icon-3 { bottom: 10%; left: 10%; animation-delay: 3s; }
.icon-4 { bottom: 15%; right: 10%; animation-delay: 4.5s; }
.icon-5 { top: 40%; left: 2%; animation-delay: 1s; }
.icon-6 { top: 45%; right: 3%; animation-delay: 2s; }
/* Shine Border Effect - Thicker and Color Coded */
.shine-border {
  position: relative;
  background: white;
  z-index: 0;
}

.shine-border::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px; /* Thicker inset */
  padding: 3px; /* Thicker padding for the border */
  border-radius: inherit;
  background-size: 200% 200%;
  animation: shine-animation 4s linear infinite;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  opacity: 0.3;
}

.shine-indigo::before {
  background-image: linear-gradient(
    45deg,
    transparent 20%,
    rgba(79, 70, 229, 0.8) 50%,
    transparent 80%
  );
}

.shine-orange::before {
  background-image: linear-gradient(
    45deg,
    transparent 20%,
    rgba(233, 96, 37, 0.8) 50%,
    transparent 80%
  );
}

.shine-pink::before {
  background-image: linear-gradient(
    45deg,
    transparent 20%,
    rgba(236, 72, 153, 0.8) 50%,
    transparent 80%
  );
}

@keyframes shine-animation {
  0% { background-position: 200% 0%; }
  100% { background-position: -200% 0%; }
}

.shine-border:hover::before {
  opacity: 0.8;
  animation-duration: 2s;
}

.diagonal-fade-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(45deg, transparent 49%, rgba(233, 96, 37, 0.15) 49%, rgba(233, 96, 37, 0.15) 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(233, 96, 37, 0.15) 49%, rgba(233, 96, 37, 0.15) 51%, transparent 51%);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%);
    mask-image: radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%);
    z-index: 1;
}

/* Atmospheric Bottom Fade Grid */
.bottom-fade-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: 
        linear-gradient(to right, rgba(233, 96, 37, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(233, 96, 37, 0.1) 1px, transparent 1px);
    background-size: 20px 32px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000 60%, transparent 100%);
    pointer-events: none;
}

.diagonal-electric-grid {
    position: absolute;
    inset: 0;
    background-color: #fafafa;
    background-image: 
        repeating-linear-gradient(45deg, rgba(233, 96, 37, 0.1) 0, rgba(233, 96, 37, 0.1) 1px, transparent 1px, transparent 20px),
        repeating-linear-gradient(-45deg, rgba(233, 96, 37, 0.1) 0, rgba(233, 96, 37, 0.1) 1px, transparent 1px, transparent 20px);
    background-size: 40px 40px;
    z-index: 1;
}

.magenta-orb-grid {
    position: absolute;
    inset: 0;
    background-color: white;
    background-image: 
        linear-gradient(to right, rgba(71, 85, 105, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(71, 85, 105, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 50% 60%, rgba(233, 96, 37, 0.1) 0%, rgba(233, 96, 37, 0.05) 40%, transparent 70%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    z-index: 1;
}

.dot-pattern {
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: radial-gradient(rgba(233, 96, 37, 0.15) 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    z-index: 1;
}

@keyframes waveMove {
    0% { background-position-x: 0; }
    100% { background-position-x: 100px; }
}

.animate-wave {
    animation: waveMove 12s linear infinite;
}

/* Badge Reveal */
.badge-reveal {
    filter: brightness(0) opacity(0.2);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.group:hover .badge-reveal {
    filter: brightness(1) opacity(1);
    transform: scale(1.1);
}