/* ============================================ CSS Custom Properties (Design Tokens) ============================================ */:root{--indra-graphite:#35383D;--indra-muted-blue:#6F89A8;--indra-dusty-violet:#8E85A2;--indra-pale-gold:#D5C69A;--indra-cloud:#F2F4F6;--indra-electric-white:#FFFFFF;--indra-stroke:3px;--indra-radius:12px;--indra-focus:0 0 0 2px var(--indra-pale-gold);--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-size-xs:0.875rem;--font-size-sm:1rem;--font-size-base:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:2.5rem;--font-size-4xl:3rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--space-24:6rem;--space-32:8rem;--max-width:1200px;--max-width-text:720px;}/* ============================================ Base Resets & Typography ============================================ */*{margin:0;padding:0;box-sizing:border-box;}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}body{font-family:var(--font-body);font-size:var(--font-size-base);font-weight:400;line-height:1.7;color:var(--indra-graphite);background-color:var(--indra-electric-white);}/* ============================================ Typography Elements ============================================ */h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.2;margin-bottom:var(--space-4);}h1{font-size:var(--font-size-4xl);font-weight:500;}h2{font-size:var(--font-size-3xl);}h3{font-size:var(--font-size-2xl);}h4{font-size:var(--font-size-xl);}p{margin-bottom:var(--space-6);max-width:var(--max-width-text);}a{color:var(--indra-muted-blue);text-decoration:none;transition:color 0.2s ease;}a:hover{color:var(--indra-graphite);}a:focus-visible{outline:none;box-shadow:var(--indra-focus);border-radius:2px;}/* ============================================ Layout Containers ============================================ */.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-6);}.section{padding:var(--space-16) 0;}.section-large{padding:var(--space-24) 0;}/* ============================================ Navigation Header ============================================ */.header{position:sticky;top:0;z-index:100;background-color:var(--indra-electric-white);border-bottom:1px solid var(--indra-cloud);backdrop-filter:blur(8px);background-color:rgba(255,255,255,0.95);}.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);max-width:var(--max-width);margin:0 auto;}.nav-logo{display:flex;align-items:center;gap:var(--space-3);font-weight:500;}.nav-logo-symbol{width:32px;height:32px;}.nav-wordmark{font-size:var(--font-size-lg);letter-spacing:0.05em;text-transform:uppercase;color:var(--indra-graphite);}.nav-links{display:flex;gap:var(--space-8);list-style:none;}.nav-link{font-size:var(--font-size-sm);font-weight:500;color:var(--indra-graphite);transition:color 0.2s ease;}.nav-link:hover{color:var(--indra-muted-blue);}.nav-toggle{display:none;}@media (max-width:768px){.nav-links{display:none;}.nav-toggle{display:block;}.nav-links.active{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background-color:var(--indra-electric-white);border-bottom:1px solid var(--indra-cloud);padding:var(--space-4);gap:var(--space-4);}}/* ============================================ Buttons ============================================ */.btn{display:inline-flex;gap:var(--space-2);align-items:center;padding:0.6rem 0.9rem;border:1px solid var(--indra-muted-blue);border-radius:var(--indra-radius);background:var(--indra-electric-white);color:var(--indra-graphite);font-size:var(--font-size-sm);font-weight:500;font-family:var(--font-body);cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-decoration:none;position:relative;overflow:hidden;}.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(111,137,168,0.2);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;}.btn:hover::after{width:300px;height:300px;}.btn:hover{background:var(--indra-cloud);transform:translateY(-2px);box-shadow:0 4px 12px rgba(53,56,61,0.1);}.btn:active{transform:translateY(0);}.btn:focus-visible{box-shadow:var(--indra-focus);outline:none;}.btn-primary{background:var(--indra-muted-blue);color:var(--indra-electric-white);border-color:var(--indra-muted-blue);}.btn-primary::after{background:rgba(255,255,255,0.2);}.btn-primary:hover{background:var(--indra-graphite);border-color:var(--indra-graphite);box-shadow:0 6px 20px rgba(53,56,61,0.25);}.btn-quiet{border:none;background:transparent;color:var(--indra-muted-blue);}.btn-quiet:hover{background:var(--indra-cloud);}/* ============================================ Cards ============================================ */.card{background:var(--indra-electric-white);border:1px solid var(--indra-cloud);border-radius:var(--indra-radius);padding:var(--space-8);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--indra-pale-gold),var(--indra-dusty-violet),var(--indra-muted-blue));transform:translateY(-3px);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);}.card:hover{background:var(--indra-cloud);transform:translateY(-4px);box-shadow:0 8px 24px rgba(53,56,61,0.12);}.card:hover::before{transform:translateY(0);}.card h3{margin-bottom:var(--space-3);color:var(--indra-graphite);transition:color 0.3s ease;}.card:hover h3{color:var(--indra-muted-blue);}.card p{font-size:var(--font-size-sm);line-height:1.6;color:var(--indra-graphite);margin-bottom:0;}/* ============================================ Forms ============================================ */.form-group{margin-bottom:var(--space-6);}.form-label{display:block;font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-2);color:var(--indra-graphite);}.form-input,.form-textarea{width:100%;padding:var(--space-3);border:1px solid var(--indra-cloud);border-radius:var(--indra-radius);font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--indra-graphite);background:var(--indra-electric-white);transition:all 0.2s ease;}.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--indra-muted-blue);box-shadow:var(--indra-focus);}.form-textarea{min-height:120px;resize:vertical;}/* ============================================ Hero Section ============================================ */.hero{text-align:center;padding:var(--space-24) 0 var(--space-16);}.hero-logo{margin:0 auto var(--space-8);width:200px;height:200px;}.hero-title{font-size:var(--font-size-4xl);font-weight:500;margin-bottom:var(--space-4);color:var(--indra-graphite);}.hero-subtitle{font-size:var(--font-size-lg);color:var(--indra-muted-blue);max-width:600px;margin:0 auto var(--space-8);line-height:1.6;}.hero-cta{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;}/* ============================================ Feature Grid ============================================ */.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-8);margin-top:var(--space-8);}.feature-grid-four{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);margin-top:var(--space-8);}@media (max-width:768px){.feature-grid-four{grid-template-columns:1fr;}}.feature-item{text-align:center;}.feature-icon{width:48px;height:48px;margin:0 auto var(--space-4);color:var(--indra-muted-blue);}.feature-title{font-size:var(--font-size-xl);font-weight:500;margin-bottom:var(--space-3);}.feature-description{font-size:var(--font-size-sm);color:var(--indra-graphite);line-height:1.6;}/* ============================================ Tabs (for Conference/Festival switcher) ============================================ */.tabs{margin-bottom:var(--space-8);}.tab-list{display:flex;gap:var(--space-2);border-bottom:1px solid var(--indra-cloud);list-style:none;justify-content:center;}.tab-button{padding:var(--space-4) var(--space-6);border:none;background:transparent;color:var(--indra-graphite);font-family:var(--font-body);font-size:var(--font-size-base);font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s ease;}.tab-button:hover{color:var(--indra-muted-blue);}.tab-button.active{color:var(--indra-muted-blue);border-bottom-color:var(--indra-muted-blue);}.tab-content{display:none;padding-top:var(--space-8);}.tab-content.active{display:block;}/* ============================================ Footer ============================================ */.footer{background-color:var(--indra-cloud);padding:var(--space-16) 0 var(--space-8);margin-top:var(--space-24);}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-8);margin-bottom:var(--space-8);}.footer-section h4{font-size:var(--font-size-lg);margin-bottom:var(--space-4);}.footer-links{list-style:none;}.footer-links li{margin-bottom:var(--space-2);}.footer-bottom{text-align:center;padding-top:var(--space-8);border-top:1px solid var(--indra-dusty-violet);font-size:var(--font-size-xs);color:var(--indra-graphite);}/* ============================================ Utility Classes ============================================ */.text-center{text-align:center;}.text-muted{color:var(--indra-muted-blue);}.mt-8{margin-top:var(--space-8);}.mb-8{margin-bottom:var(--space-8);}/* ============================================ Product Screenshot Placeholders ============================================ */.screenshot-placeholder{background:linear-gradient(135deg,rgba(111,137,168,0.1) 0%,rgba(142,133,162,0.1) 100%);border:2px dashed rgba(111,137,168,0.3);border-radius:var(--indra-radius);padding:var(--space-12);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;position:relative;overflow:hidden;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);}.screenshot-placeholder::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(213,198,154,0.1),transparent);transition:left 3s ease-in-out infinite;}.screenshot-placeholder:hover::before{animation:shimmer 2s ease-in-out infinite;}@keyframes shimmer{0%{left:-100%;}100%{left:100%;}}.screenshot-placeholder:hover{border-color:rgba(111,137,168,0.5);background:linear-gradient(135deg,rgba(111,137,168,0.15) 0%,rgba(142,133,162,0.15) 100%);transform:scale(1.02);}.screenshot-icon{width:80px;height:80px;margin-bottom:var(--space-4);opacity:0.4;color:var(--indra-muted-blue);}.screenshot-label{font-size:var(--font-size-lg);font-weight:500;color:var(--indra-muted-blue);margin-bottom:var(--space-2);text-align:center;}.screenshot-description{font-size:var(--font-size-sm);color:var(--indra-dusty-violet);text-align:center;max-width:400px;margin:0;}.screenshot-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);margin:var(--space-8) 0;}.screenshot-grid-two{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);margin:var(--space-8) 0;}@media (max-width:768px){.screenshot-grid-two{grid-template-columns:1fr;}}/* ============================================ Enhanced Feature Items ============================================ */.feature-item{position:relative;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}.feature-item:hover{transform:translateY(-4px);}.feature-icon{animation:float 3s ease-in-out infinite;}.feature-item:nth-child(1) .feature-icon{animation-delay:0s;}.feature-item:nth-child(2) .feature-icon{animation-delay:0.5s;}.feature-item:nth-child(3) .feature-icon{animation-delay:1s;}.feature-item:nth-child(4) .feature-icon{animation-delay:1.5s;}@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-8px);}}/* ============================================ Hero Enhancements ============================================ */.hero-logo svg{animation:fadeInScale 1s ease-out;}@keyframes fadeInScale{0%{opacity:0;transform:scale(0.9);}100%{opacity:1;transform:scale(1);}}.hero-title{animation:fadeInUp 0.8s ease-out 0.2s both;}.hero-subtitle{animation:fadeInUp 0.8s ease-out 0.4s both;}.hero-cta{animation:fadeInUp 0.8s ease-out 0.6s both;}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}/* ============================================ Section Dividers & Visual Interest ============================================ */.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--indra-cloud),transparent);margin:var(--space-16) 0;}.accent-line{width:60px;height:4px;background:linear-gradient(90deg,var(--indra-pale-gold),var(--indra-muted-blue));margin:0 auto var(--space-6);border-radius:2px;}.text-center .accent-line{margin-left:auto;margin-right:auto;}/* ============================================ Responsive Typography ============================================ */@media (max-width:768px){:root{--font-size-4xl:2rem;--font-size-3xl:1.75rem;--font-size-2xl:1.5rem;}.hero-title{font-size:var(--font-size-3xl);}.section{padding:var(--space-12) 0;}.section-large{padding:var(--space-16) 0;}.screenshot-placeholder{min-height:200px;padding:var(--space-8);}}