Redesign tech section with striking visual effects

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: rasca

app/globals.css

@@ -219,22 +219,81 @@ a { color: inherit; text-decoration: none; }
 .app-card.moldcord .status-badge { border-color: rgba(74, 202, 151, 0.3); color: var(--green); }
 .app-card.moderation .status-badge { border-color: rgba(188, 162, 255, 0.4); color: var(--purple); }
 
-.tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
+/* Tech section — full-width tinted background */
+#tech {
+  max-width: none;
+  padding: var(--space-8) var(--site-margin);
+  background: linear-gradient(180deg, #faf8ff 0%, #fff5f8 50%, #faf8ff 100%);
+  position: relative;
+  overflow: hidden;
+}
+#tech::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 900px;
+  height: 900px;
+  background: radial-gradient(circle, rgba(255, 48, 123, 0.06) 0%, rgba(188, 162, 255, 0.04) 40%, transparent 70%);
+  pointer-events: none;
+}
+#tech .section-header,
+#tech .tech-grid {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+#tech .section-header {
+  margin-bottom: var(--space-7);
+}
+#tech .section-header h2 {
+  font-size: var(--fs-h1);
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+}
+#tech .section-header p {
+  max-width: 600px;
+  font-size: clamp(1rem, 0.909rem + 0.455vw, 1.125rem);
+}
+
+.tech-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-5);
+  position: relative;
+  z-index: 1;
+}
 .tech-card {
-  background-color: var(--bg-card); border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-sm); padding: var(--space-5);
-  transition: border-color 0.3s ease, opacity 0.3s ease; position: relative;
+  background-color: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: var(--border-width) solid var(--border);
+  border-left: 3px solid var(--red);
+  border-radius: var(--radius-md);
+  padding: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              border-color 0.3s ease,
+              opacity 0.3s ease;
+  position: relative;
+}
+.tech-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(255, 48, 123, 0.3);
+  box-shadow: 0 8px 32px rgba(255, 48, 123, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
 }
-.tech-card:hover { border-color: #bbb; }
 .tech-grid:hover .tech-card:not(:hover) { opacity: 0.5; }
 .tech-icon {
-  width: 56px; height: 56px; border-radius: var(--radius-sm);
+  width: 64px; height: 64px; border-radius: var(--radius-md);
   display: flex; align-items: center; justify-content: center;
-  background-color: rgba(255, 48, 123, 0.06); color: var(--red);
+  background: linear-gradient(135deg, rgba(255, 48, 123, 0.1) 0%, rgba(188, 162, 255, 0.12) 100%);
+  color: var(--red);
   margin-bottom: var(--space-4);
 }
-.tech-card h4 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--space-2); letter-spacing: -0.01em; }
-.tech-card p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; }
+.tech-card h4 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--space-2); letter-spacing: -0.01em; }
+.tech-card p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.7; }
 
 .footer {
   border-top: var(--border-width) solid var(--border);

app/page.tsx

@@ -83,8 +83,6 @@ export default function Home() {
         </div>
       </section>
 
-      <hr className="section-divider" />
-
       <section className="section" id="tech">
         <div className="section-header">
           <div className="section-label">Trust Infrastructure</div>
@@ -95,7 +93,7 @@ export default function Home() {
         <div className="tech-grid">
           <div className="tech-card">
             <div className="tech-icon">
-              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M12 3v18" /><path d="M3 12h18" /><path d="M5.5 5.5l13 13" /><path d="M18.5 5.5l-13 13" /><circle cx="12" cy="12" r="9" />
               </svg>
             </div>
@@ -104,7 +102,7 @@ export default function Home() {
           </div>
           <div className="tech-card">
             <div className="tech-icon">
-              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M8 21h8" /><path d="M12 17v4" /><path d="M7 4h10" /><path d="M12 4v6" /><path d="M17 4l-3 6" /><path d="M7 4l3 6" /><circle cx="6" cy="13" r="3" /><circle cx="18" cy="13" r="3" />
               </svg>
             </div>
@@ -113,7 +111,7 @@ export default function Home() {
           </div>
           <div className="tech-card">
             <div className="tech-icon">
-              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="M9 12l2 2 4-4" />
               </svg>
             </div>
@@ -122,7 +120,7 @@ export default function Home() {
           </div>
           <div className="tech-card">
             <div className="tech-icon">
-              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                 <circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" />
               </svg>
             </div>