/* Reset and Base Styles */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 line-height: 1.6;
 color: #333;
 background: #fff;
}

img {
 max-width: 100%;
 height: auto;
 display: block;
}

/* Container */
.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

/* Hero Section */
.hero {
 min-height: 100vh;
 position: relative;
 overflow: hidden;
}

.hero-video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: 0;
 display: block;
}

.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.4);
 z-index: 1;
 pointer-events: none;
}

.hero .container {
 display: flex;
 flex-direction: column;
 justify-content: center;
 min-height: 100vh;
 position: relative;
 z-index: 2;
 padding: 2rem 1.5rem;
}

.hero-grid {
 display: grid;
 gap: 2rem;
 align-items: stretch;
 padding: 2rem 0;
}

/* Mobile-first: stack vertically */
@media (min-width: 768px) {
 .hero-grid {
  grid-template-columns: 0.8fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
 }
}

/* Profile Section */
.profile {
 text-align: center;
}

@media (min-width: 768px) {
 .profile {
  text-align: left;
 }
}

.headshot-container {
 position: relative;
 width: 150px;
 height: 150px;
 margin: 0 auto 1.5rem;
 perspective: 1000px;
}

.headshot {
 position: absolute;
 width: 150px;
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
 border: 4px solid #fff;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 backface-visibility: hidden;
}

.headshot-1 {
 /* animation: flipInOut 4s infinite; */
}

.headshot-2 {
 /* animation: flipInOutReverse 4s infinite; */
}

/* Fancy flip animations (commented out) */
/*
@keyframes flipInOut {
 0% {
  opacity: 1;
  transform: rotateY(0deg);
 }
 40% {
  opacity: 1;
  transform: rotateY(0deg);
 }
 50% {
  opacity: 0;
  transform: rotateY(90deg);
 }
 60% {
  opacity: 0;
  transform: rotateY(90deg);
 }
 100% {
  opacity: 0;
  transform: rotateY(90deg);
 }
}

@keyframes flipInOutReverse {
 0% {
  opacity: 0;
  transform: rotateY(90deg);
 }
 40% {
  opacity: 0;
  transform: rotateY(90deg);
 }
 50% {
  opacity: 1;
  transform: rotateY(0deg);
 }
 60% {
  opacity: 1;
  transform: rotateY(0deg);
 }
 100% {
  opacity: 1;
  transform: rotateY(0deg);
 }
}
*/

@media (min-width: 768px) {
 .headshot-container {
  margin: 0 0 1.5rem 0;
 }
}

.profile h1 {
 font-size: 2rem;
 margin-bottom: 0.5rem;
 color: #fff;
}

.tagline {
 font-size: 1.1rem;
 color: #e5e7eb;
 margin-bottom: 1.5rem;
 line-height: 1.5;
}

.cta-buttons {
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
}

@media (min-width: 768px) {
 .cta-buttons {
  justify-content: flex-start;
 }
}

/* LinkedIn Link */
.linkedin-link {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.75rem 1.5rem;
 background: #0077b5;
 color: #fff;
 border-radius: 6px;
 text-decoration: none;
 font-weight: 600;
 transition: all 0.2s ease;
}

.linkedin-link:hover {
 background: #005f8d;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,119,181,0.3);
}

.linkedin-link svg {
 width: 20px;
 height: 20px;
}

/* Buttons */
.btn {
 display: inline-block;
 padding: 0.75rem 1.5rem;
 border-radius: 6px;
 text-decoration: none;
 font-weight: 600;
 transition: all 0.2s ease;
 text-align: center;
}

.btn-primary {
 background: #2563eb;
 color: #fff;
}

.btn-primary:hover {
 background: #1d4ed8;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.btn-secondary {
 background: #fff;
 color: #2563eb;
 border: 2px solid #2563eb;
}

.btn-secondary:hover {
 background: #2563eb;
 color: #fff;
 transform: translateY(-2px);
}

/* Demo Cards */
.demo-hero-card {
 position: relative;
}

@media (min-width: 768px) {
 .demo-hero-card {
  min-width: 400px;
 }
}

.demo-hero-card .demo-info p {
 white-space: nowrap;
 margin: 0;
 font-size: 0.85rem;
}

/* All demo card styling is now in the Demos Section below */

/* Scroll Cue */
.scroll-cue {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 text-align: center;
 color: #fff;
 font-size: 1.2rem;
 animation: bounce 2s infinite;
 cursor: pointer;
 user-select: none;
}

.scroll-chevrons {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: -0.5rem;
 margin-top: 0.5rem;
}

.scroll-chevrons span {
 font-size: 2rem;
 line-height: 0.6;
 animation: chevron-bounce 2s infinite;
}

.scroll-chevrons span:nth-child(2) {
 animation-delay: 0.2s;
}

@keyframes chevron-bounce {
 0%, 100% {
  transform: translateY(0);
  opacity: 1;
 }
 50% {
  transform: translateY(8px);
  opacity: 0.6;
 }
}

/* Video Play/Pause Button */
.hero-video-play-btn {
 position: fixed;
 bottom: 2rem;
 left: 2rem;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.2);
 border: 2px solid rgba(255, 255, 255, 0.4);
 color: #fff;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.3s ease;
 z-index: 9999;
 margin: 0;
 padding: 0;
}

.hero-video-play-btn:hover {
 background: rgba(255, 255, 255, 0.3);
 border-color: rgba(255, 255, 255, 0.6);
}

.hero-video-play-btn svg {
 width: 24px;
 height: 24px;
}

.play-triangle {
 width: 0;
 height: 0;
 border-left: 14px solid rgba(255, 255, 255, 0.8);
 border-top: 8px solid transparent;
 border-bottom: 8px solid transparent;
 margin-left: 3px;
}

.pause-bars {
 display: inline-flex;
 gap: 4px;
}

.pause-bars::before,
.pause-bars::after {
 content: '';
 width: 3px;
 height: 16px;
 background: rgba(255, 255, 255, 0.8);
 border-radius: 1px;
}

@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {
  transform: translateX(-50%) translateY(0);
 }
 40% {
  transform: translateX(-50%) translateY(-10px);
 }
 60% {
  transform: translateX(-50%) translateY(-5px);
 }
}

/* Main Content Sections */
main {
 background: #fff;
}

.content-section {
 padding: 4rem 0;
 border-bottom: 1px solid #e5e7eb;
}

.content-section:last-child {
 border-bottom: none;
}

.content-section h2 {
 font-size: 2rem;
 margin-bottom: 1.5rem;
 color: #1a1a1a;
}

.section-intro {
 font-size: 1.1rem;
 color: #666;
 margin-bottom: 2rem;
}

/* Feature List */
.feature-list {
 list-style: none;
 max-width: 800px;
}

.feature-list li {
 padding: 1rem 0 1rem 2rem;
 position: relative;
 font-size: 1.05rem;
 line-height: 1.6;
}

.feature-list li:before {
 content: "✓";
 position: absolute;
 left: 0;
 color: #2563eb;
 font-weight: bold;
 font-size: 1.2rem;
}

/* Demos Section */
.demos-container {
 display: flex;
 gap: 2rem;
 margin-bottom: 2rem;
 flex-wrap: wrap;
 justify-content: center;
}

.demo-card-wrapper {
 flex: 1 1 calc(50% - 1rem);
 min-width: 350px;
 max-width: 600px;
}

@media (max-width: 768px) {
 .demo-card-wrapper {
  flex: 1 1 100%;
  max-width: 100%;
 }
}

.demo-card-link {
 display: block;
 text-decoration: none;
 color: inherit;
 position: relative;
}

.demo-card {
 background: #fff;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 position: relative;
 display: flex;
 flex-direction: column;
 height: 100%;
}

.demo-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.demo-poster {
 width: 100%;
 aspect-ratio: 16 / 9;
 object-fit: cover;
 background: #e5e7eb;
}

.play-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.3);
 opacity: 0;
 transition: opacity 0.3s ease;
}

.demo-card:hover .play-overlay {
 opacity: 1;
}

.play-icon {
 font-size: 3rem;
 color: #fff;
 background: rgba(37,99,235,0.9);
 width: 80px;
 height: 80px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 padding-left: 8px;
}

.demo-info {
 padding: 1rem 1.25rem;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}

.demo-info h3 {
 font-size: 1.25rem;
 margin-bottom: 0.5rem;
 color: #1a1a1a;
}

.demo-info p {
 color: #666;
 font-size: 0.9rem;
 line-height: 1.4;
 margin: 0;
 display: inline;
}

/* Proof Grid */
.proof-grid {
 display: grid;
 gap: 2rem;
}

@media (min-width: 768px) {
 .proof-grid {
  grid-template-columns: repeat(3, 1fr);
 }
}

.proof-card {
 padding: 2rem;
 background: #f9fafb;
 border-radius: 8px;
 border: 1px solid #e5e7eb;
}

.proof-card h3 {
 font-size: 1.25rem;
 margin-bottom: 0.75rem;
 color: #1a1a1a;
}

.proof-card p {
 color: #666;
 line-height: 1.6;
}

/* Contact Section */
.contact-section {
 text-align: center;
}

.contact-options {
 margin-top: 1.5rem;
 display: flex;
 justify-content: center;
}

.contact-note {
 margin-top: 1rem;
 color: #666;
 font-size: 0.95rem;
}

/* Content Grid - Asymmetric 2x2 Layout */
.content-grid {
 display: flex;
 flex-direction: column;
 gap: 2rem;
 margin-bottom: 2rem;
}

.grid-row {
 display: grid;
 gap: 2rem;
 grid-template-columns: 1fr;
}

/* Desktop: Asymmetric layout */
@media (min-width: 768px) {
 /* Top row: About 70% + TED Talk 30% */
 .grid-row:first-child {
  grid-template-columns: 70% 30%;
 }
 
 /* Bottom row: Links 30% + Current Work 70% */
 .grid-row:last-child {
  grid-template-columns: 30% 70%;
 }
}

.info-card {
 background: #f9fafb;
 padding: 1.5rem;
 border-radius: 8px;
 border: 1px solid #e5e7eb;
 display: flex;
 flex-direction: column;
}

.info-card-large {
 background: #f9fafb;
 padding: 1.5rem;
 border-radius: 8px;
 border: 1px solid #e5e7eb;
}

/* Links card - no background */
.links-card {
 background: transparent;
 padding: 1.5rem;
 border-radius: 8px;
 border: none;
 display: flex;
 flex-direction: column;
}

.links-card h2 {
 margin-bottom: 1rem;
}

.link-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.link-list li {
 margin-bottom: 0.75rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.link-emoji {
 font-size: 1.2rem;
 display: inline-block;
 min-width: 1.5rem;
}

.link-list a {
 color: #2563eb;
 text-decoration: none;
 font-weight: 500;
}

.link-list a:hover {
 text-decoration: underline;
}

/* TEDx card - no background */
.tedtalk-card {
 background: transparent;
 padding: 0;
 border-radius: 8px;
 border: none;
 display: flex;
 flex-direction: column;
}

.tedtalk-card h2 {
 margin-bottom: 1rem;
 font-size: 1.2rem;
}

/* Better mobile padding and spacing */
@media (min-width: 768px) {
 .info-card {
  padding: 2rem;
 }
}

.info-card h2 {
 font-size: 1.25rem;
 margin-bottom: 1rem;
 color: #1a1a1a;
}

/* Larger heading on desktop */
@media (min-width: 1024px) {
 .info-card h2 {
  font-size: 1.5rem;
 }
}

.info-card p {
 color: #555;
 line-height: 1.8;
 flex-grow: 1;
 font-size: 0.95rem;
}

/* Better text size on desktop */
@media (min-width: 1024px) {
 .info-card p {
  font-size: 1rem;
 }
}

.link-list {
 list-style: none;
 padding: 0;
}

.link-list li {
 margin-bottom: 0.75rem;
}

.link-list a {
 color: #2563eb;
 text-decoration: none;
 font-weight: 500;
 transition: color 0.2s ease;
}

.link-list a:hover {
 color: #1d4ed8;
 text-decoration: underline;
}

/* Video Wrapper for YouTube Embed */
.video-wrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 aspect ratio */
 height: 0;
 overflow: hidden;
 border-radius: 8px;
 margin-top: auto;
}

.video-wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 8px;
}

/* Video Thumbnail Link (clickable YouTube thumbnail) */
.video-thumbnail-link {
 display: block;
 text-decoration: none;
 margin-top: auto;
}

.video-thumbnail {
 position: relative;
 border-radius: 8px;
 overflow: hidden;
 background: #000;
}

.video-thumbnail img {
 width: 100%;
 display: block;
 transition: opacity 0.2s ease;
}

.video-thumbnail:hover img {
 opacity: 0.85;
}

.video-play-btn {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 transition: transform 0.2s ease;
}

.video-thumbnail:hover .video-play-btn {
 transform: translate(-50%, -50%) scale(1.1);
}

/* Footer */
footer {
 background: #1a1a1a;
 color: #fff;
 padding: 2rem 0;
 text-align: center;
}

footer p {
 margin: 0;
 font-size: 0.9rem;
}

/* Demo Page Specific Styles */
.demo-page-header {
 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 padding: 3rem 0;
 text-align: center;
}

.demo-page-header h1 {
 font-size: 2.5rem;
 margin-bottom: 1rem;
 color: #1a1a1a;
}

.demo-page-header .breadcrumb {
 margin-bottom: 1rem;
}

.demo-page-header .breadcrumb a {
 color: #2563eb;
 text-decoration: none;
}

.demo-page-header .breadcrumb a:hover {
 text-decoration: underline;
}

.demo-content {
 padding: 4rem 0;
}

.demo-viewer {
 background: #fff;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 margin-bottom: 2rem;
}

.demo-viewer img {
 width: 100%;
 aspect-ratio: 16 / 9;
 object-fit: cover;
 background: #e5e7eb;
}

.demo-actions {
 padding: 2rem;
 text-align: center;
 background: #f9fafb;
 border-bottom: 1px solid #e5e7eb;
}

.demo-actions .btn {
 margin: 0.5rem;
 font-size: 1.1rem;
 padding: 1rem 2rem;
}

.mobile-fallback {
 text-align: center;
 color: #666;
 font-size: 0.95rem;
 margin-top: 1rem;
}

.mobile-fallback a {
 color: #2563eb;
 text-decoration: none;
}

.mobile-fallback a:hover {
 text-decoration: underline;
}

/* Responsive iframe wrapper for embedded viewers */
.iframe-wrapper {
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 border-radius: 0 0 12px 12px;
 background: #1a1a1a;
}

.iframe-wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: none;
}

/* Larger button variant */
.btn-large {
 font-size: 1.25rem;
 padding: 1.25rem 2.5rem;
}

.demo-description {
 max-width: 800px;
 margin: 0 auto;
 padding: 2rem;
 line-height: 1.8;
 color: #555;
}

/* Portfolio Grid Page */
.portfolio-header {
 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 padding: 4rem 0;
 text-align: center;
}

.portfolio-header h1 {
 font-size: 2.5rem;
 margin-bottom: 1rem;
 color: #1a1a1a;
}

.portfolio-header p {
 font-size: 1.1rem;
 color: #555;
 max-width: 600px;
 margin: 0 auto;
}

.portfolio-content {
 padding: 4rem 0;
}