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

:root{
  --radius: 18px;
  --radius-sm: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #f8f9fa;
    color: #1a1a1a;
    overflow-x: hidden;
}

/* Background System Elements */
.wireframe-globe {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%231a1a1a' stroke-width='0.5' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3Ccircle cx='50%25' cy='50%25' r='45%25' fill='none' stroke='%231a1a1a' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    background-size: cover;
}

.crystalline-prism {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 150,150 50,150' fill='none' stroke='%23b8a47e' stroke-width='1' opacity='0.1'/%3E%3Cpolygon points='50,50 100,150 0,150' fill='none' stroke='%231a1a1a' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.architectural-grid {
    background-image: linear-gradient(to right, rgba(26,26,26,0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(26,26,26,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.bg-grid {
    background-image: linear-gradient(to right, rgba(26,26,26,0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(26,26,26,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
}

/* Glass Effects */
.glass-panel {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.2);
    border-radius: 1rem;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.05);
}

.glass-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.15);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 2px 10px rgba(0, 0, 0, 0.03);
}

.glass-card:hover {
    transform: translateY(-3px);
    border-color: rgba(184, 164, 126, 0.3);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 6px 24px rgba(0, 0, 0, 0.08);
}

/* Hero Sphere */
.glass-sphere {
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    border: 1px solid rgba(229, 231, 235, 0.3);
    backdrop-filter: blur(20px);
    box-shadow: 
        inset 0 0 40px rgba(255, 255, 255, 0.2),
        inset -20px -20px 40px rgba(0, 0, 0, 0.1),
        0 20px 60px rgba(0, 0, 0, 0.1);
}

.glow-effect {
    background: radial-gradient(circle, rgba(184, 164, 126, 0.1) 0%, rgba(184, 164, 126, 0) 70%);
    filter: blur(20px);
}

/* Navigation */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
    padding-bottom: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: rgba(184, 164, 126, 0.7);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Buttons */
.btn-primary {
    background-color: rgba(184, 164, 126, 0.9);
    color: #1a1a1a;
    border: 1px solid rgba(184, 164, 126, 0.8);
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    border-radius: 1rem;
}

.btn-primary:hover {
    background-color: rgba(184, 164, 126, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 164, 126, 0.2);
}

.btn-secondary {
    background-color: transparent;
    color: #1a1a1a;
    border: 1px solid rgba(26, 26, 26, 0.3);
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    border-radius: 1rem;
}

.btn-secondary:hover {
    border-color: rgba(184, 164, 126, 0.5);
    color: rgba(26, 26, 26, 0.8);
    transform: translateY(-1px);
}

/* Form Elements */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(229, 231, 235, 0.6);
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border-radius: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: rgba(184, 164, 126, 0.5);
    box-shadow: 0 0 0 2px rgba(184, 164, 126, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

/* Focus Items */
.focus-item {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(229, 231, 235, 0.3);
    transition: all 0.3s ease;
}

.focus-item:hover {
    border-bottom-color: rgba(184, 164, 126, 0.3);
    padding-left: 2rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .glass-panel, .glass-card {
        padding: 1.5rem;
    }
    
    h1 {
        font-size: 3.5rem !important;
    }
    
    .grid-cols-2, .grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(248, 249, 250, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(184, 164, 126, 0.3);
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 164, 126, 0.5);
}

/* =========================
   BRULIFE Hero Wireframe Sphere
   Clean single version
   ========================= */

.brulife-sphere {
  width: 360px;
  height: 360px;
  display: grid;
  place-items: center;
  opacity: 0.85;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.35));
  animation: brulife-spin 180s linear infinite;
  transform: translateZ(0);
}

@keyframes brulife-spin {
  from { transform: rotateX(18deg) rotateY(0deg); }
  to   { transform: rotateX(18deg) rotateY(360deg); }
}

.sphere {
  position: relative;
  width: 320px;
  height: 320px;
  transform-style: preserve-3d;
}

.sphere .meridian,
.sphere .latitude {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(248, 249, 250, 0.55);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Meridians: rotate around Y */
.sphere .meridian:nth-child(1)  { transform: rotateY(0deg); }
.sphere .meridian:nth-child(2)  { transform: rotateY(10deg); }
.sphere .meridian:nth-child(3)  { transform: rotateY(20deg); }
.sphere .meridian:nth-child(4)  { transform: rotateY(30deg); }
.sphere .meridian:nth-child(5)  { transform: rotateY(40deg); }
.sphere .meridian:nth-child(6)  { transform: rotateY(50deg); }
.sphere .meridian:nth-child(7)  { transform: rotateY(60deg); }
.sphere .meridian:nth-child(8)  { transform: rotateY(70deg); }
.sphere .meridian:nth-child(9)  { transform: rotateY(80deg); }
.sphere .meridian:nth-child(10) { transform: rotateY(90deg); }
.sphere .meridian:nth-child(11) { transform: rotateY(100deg); }
.sphere .meridian:nth-child(12) { transform: rotateY(110deg); }
.sphere .meridian:nth-child(13) { transform: rotateY(120deg); }
.sphere .meridian:nth-child(14) { transform: rotateY(130deg); }
.sphere .meridian:nth-child(15) { transform: rotateY(140deg); }
.sphere .meridian:nth-child(16) { transform: rotateY(150deg); }
.sphere .meridian:nth-child(17) { transform: rotateY(160deg); }
.sphere .meridian:nth-child(18) { transform: rotateY(170deg); }
.sphere .meridian:nth-child(19) { transform: rotateY(180deg); }
.sphere .meridian:nth-child(20) { transform: rotateY(190deg); }
.sphere .meridian:nth-child(21) { transform: rotateY(200deg); }
.sphere .meridian:nth-child(22) { transform: rotateY(210deg); }
.sphere .meridian:nth-child(23) { transform: rotateY(220deg); }
.sphere .meridian:nth-child(24) { transform: rotateY(230deg); }
.sphere .meridian:nth-child(25) { transform: rotateY(240deg); }
.sphere .meridian:nth-child(26) { transform: rotateY(250deg); }
.sphere .meridian:nth-child(27) { transform: rotateY(260deg); }
.sphere .meridian:nth-child(28) { transform: rotateY(270deg); }
.sphere .meridian:nth-child(29) { transform: rotateY(280deg); }
.sphere .meridian:nth-child(30) { transform: rotateY(290deg); }
.sphere .meridian:nth-child(31) { transform: rotateY(300deg); }
.sphere .meridian:nth-child(32) { transform: rotateY(310deg); }
.sphere .meridian:nth-child(33) { transform: rotateY(320deg); }
.sphere .meridian:nth-child(34) { transform: rotateY(330deg); }
.sphere .meridian:nth-child(35) { transform: rotateY(340deg); }
.sphere .meridian:nth-child(36) { transform: rotateY(350deg); }

/* Latitudes: rotate around X
   IMPORTANT: use nth-child offsets because your HTML has 36 meridians first
*/
.sphere .latitude:nth-child(37) { transform: rotateX(15deg); }
.sphere .latitude:nth-child(38) { transform: rotateX(30deg); }
.sphere .latitude:nth-child(39) { transform: rotateX(45deg); }
.sphere .latitude:nth-child(40) { transform: rotateX(60deg); }
.sphere .latitude:nth-child(41) { transform: rotateX(75deg); }
.sphere .latitude:nth-child(42) { transform: rotateX(90deg); }
.sphere .latitude:nth-child(43) { transform: rotateX(105deg); }
.sphere .latitude:nth-child(44) { transform: rotateX(120deg); }
.sphere .latitude:nth-child(45) { transform: rotateX(135deg); }
.sphere .latitude:nth-child(46) { transform: rotateX(150deg); }
.sphere .latitude:nth-child(47) { transform: rotateX(165deg); }
.sphere .latitude:nth-child(48) { transform: rotateX(0deg); }

/* Axis: you have TWO axis divs — render them as subtle crosshair */
.sphere .axis {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 1px;
  height: 120%;
  background: rgba(248, 249, 250, 0.45);
  transform: translateX(-50%);
}

.sphere .axis + .axis {
  width: 120%;
  height: 1px;
  left: -10%;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .brulife-sphere { width: 280px; height: 280px; opacity: 0.30; }
  .sphere { width: 240px; height: 240px; }
}