/*
Theme Name: Letters to Numbers
Theme URI: https://letterstonumbersconverter.com
Author: Letters to Numbers
Author URI: https://letterstonumbersconverter.com
Description: A fast, fully customizable WordPress theme for a letter-to-number converter site. Includes an instant A1Z26/A0Z25/reverse/ASCII converter, an editable alphabet chart, FAQ custom post type, standard blog support, and Customizer options for hero copy, stats, colors, and social links.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: letters-to-numbers
Tags: blog, e-commerce, education, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks

This theme, once activated, is distributed under the terms of the GNU GPL.
*/

/* =========================================================
   Letters to Numbers — Core Stylesheet
   Design system: indigo/violet gradient world, cipher-tile
   signature (letter over number), Space Grotesk + Inter + JetBrains Mono
   ========================================================= */

:root{
  /* --- Color tokens --- */
  --ink:        #1B1B2F;
  --ink-soft:   #524F6E;
  --ink-faint:  #8987A6;
  --paper:      #FBFAFF;
  --paper-alt:  #F2F0FC;
  --card:       #FFFFFF;
  --line:       #E5E2F7;
  --indigo:     #4F46E5;
  --indigo-dark:#3B32B8;
  --violet:     #7C3AED;
  --sky:        #2563EB;
  --mint:       #0E9F6E;
  --amber:      #F59E0B;

  --grad-brand: linear-gradient(135deg,#4F46E5 0%,#7C3AED 55%,#2563EB 100%);
  --grad-soft:  linear-gradient(135deg,#EEF0FF 0%,#F4EEFF 100%);

  /* --- Type --- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  /* --- Layout --- */
  --maxw: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(29,25,72,0.06);
  --shadow-md: 0 10px 30px rgba(29,25,72,0.10);
  --shadow-lg: 0 24px 60px rgba(29,25,72,0.16);
  --header-h: 76px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px);}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--indigo); text-decoration:none;}
a:hover{color:var(--violet);}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); line-height:1.15; margin:0 0 .5em;}
p{margin:0 0 1em;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
.section-alt{background:var(--paper-alt);}

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--indigo); color:#fff;
  padding:12px 20px; border-radius:0 0 10px 0; z-index:2000; font-weight:600;
}
.skip-link:focus{left:0;}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:3px solid var(--sky); outline-offset:2px; border-radius:6px;
}

/* --- Eyebrow / kicker --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--indigo); background:#EEF0FF; border:1px solid #DCDBFB;
  padding:6px 14px; border-radius:999px; margin-bottom:18px; font-weight:600;
}
.section-head{max-width:680px; margin:0 auto 48px; text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.section-head p{color:var(--ink-soft); font-size:1.05rem;}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:1000; height:var(--header-h);
  display:flex; align-items:center;
  background:#FBFAFF; backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{box-shadow:0 4px 20px rgba(29,25,72,0.08);}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; width:100%;}
.brand{
  display:flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:700; font-size:1.18rem; color:var(--ink);
}
.brand-mark{
  width:38px; height:38px; border-radius:11px; background:var(--grad-brand);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; flex-shrink:0;
}
.brand-mark span:first-child{display:block;}
.primary-nav{display:flex; align-items:center; gap:2px;}
.primary-nav a{
  display:block; padding:10px 14px; border-radius:8px; font-weight:500; font-size:.95rem;
  color:var(--ink-soft);
}
.primary-nav a:hover, .primary-nav a.active{color:var(--indigo); background:#EFEEFE;}
.header-actions{display:flex; align-items:center; gap:14px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:.95rem; padding:12px 22px; border-radius:12px;
  border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active{transform:translateY(1px) scale(.98);}
.btn-primary{background:var(--grad-brand); color:#fff; box-shadow:0 8px 20px rgba(79,70,229,.28);}
.btn-primary:hover{box-shadow:0 12px 26px rgba(79,70,229,.38); transform:translateY(-2px); color:#fff;}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--indigo); color:var(--indigo);}
.btn-sm{padding:9px 16px; font-size:.85rem; border-radius:10px;}
.btn-block{width:100%;}
.nav-cta{white-space:nowrap;}

.hamburger{
  display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line);
  background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.hamburger span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =========================================================
   BREADCRUMBS
   ========================================================= */
.breadcrumbs{padding:18px 0; border-bottom:1px solid var(--line); background:var(--paper-alt);}
.breadcrumbs ol{display:flex; flex-wrap:wrap; gap:6px; font-size:.86rem; color:var(--ink-faint);}
.breadcrumbs a{color:var(--ink-soft);}
.breadcrumbs li:not(:last-child)::after{content:"/"; margin-left:8px; color:var(--ink-faint);}
.breadcrumbs li{display:flex;}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden; padding:76px 0 60px;
  background:var(--grad-soft);
}
.hero::before, .hero::after{
  content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; z-index:0;
}
.hero::before{width:420px; height:420px; background:#C7C2FA; top:-160px; right:-120px; animation:float-a 16s ease-in-out infinite;}
.hero::after{width:340px; height:340px; background:#B9E1FF; bottom:-140px; left:-100px; animation:float-b 18s ease-in-out infinite;}
@keyframes float-a{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,30px);}}
@keyframes float-b{0%,100%{transform:translate(0,0);}50%{transform:translate(25px,-25px);}}

.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-copy h1{font-size:clamp(2.2rem,4.2vw,3.4rem); letter-spacing:-.01em;}
.hero-copy p.lead{font-size:1.13rem; color:var(--ink-soft); max-width:52ch;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 26px;}
.trust-points{display:flex; flex-wrap:wrap; gap:18px 26px;}
.trust-points li{display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--ink-soft); font-weight:500;}
.trust-points svg{flex-shrink:0; color:var(--mint);}

/* floating letters/numbers ambient layer inside hero visual */
.hero-visual{position:relative; min-height:360px;}
.float-glyph{
  position:absolute; font-family:var(--font-mono); font-weight:700; color:var(--indigo);
  opacity:.16; animation:drift 9s ease-in-out infinite;
}
.float-glyph:nth-child(2){color:var(--violet); animation-duration:11s;}
.float-glyph:nth-child(3){color:var(--sky); animation-duration:13s;}
.float-glyph:nth-child(4){color:var(--amber); animation-duration:10s;}
.float-glyph:nth-child(5){color:var(--indigo); animation-duration:14s;}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-18px) rotate(6deg);}}

/* =========================================================
   CIPHER TILE — signature component (letter over number)
   ========================================================= */
.tile-row{display:flex; flex-wrap:wrap; gap:10px;}
.tile{
  perspective:600px; width:56px; height:64px;
}
.tile-inner{
  width:100%; height:100%; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; overflow:hidden;
  animation:tile-in .5s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes tile-in{from{transform:rotateX(-90deg); opacity:0;} to{transform:rotateX(0); opacity:1;}}
.tile-letter, .tile-number{flex:1; display:flex; align-items:center; justify-content:center; font-weight:700;}
.tile-letter{font-family:var(--font-display); font-size:1.15rem; color:var(--ink); background:var(--paper-alt);}
.tile-number{font-family:var(--font-mono); font-size:1.02rem; color:var(--indigo); border-top:1px dashed var(--line);}
.tile-space{width:16px;}

/* =========================================================
   CONVERTER CARD
   ========================================================= */
.converter-card{
  position:relative; z-index:1; background:var(--card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--line); padding:32px; margin-top:-10px;
}
.converter-topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.mode-tabs{display:flex; gap:8px; flex-wrap:wrap;}
.mode-tab{
  padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:.82rem; font-weight:600; color:var(--ink-soft);
}
.mode-tab[aria-pressed="true"]{background:var(--grad-brand); color:#fff; border-color:transparent;}
.converter-field label{font-weight:600; font-size:.88rem; display:block; margin-bottom:8px;}
textarea#input-text{
  width:100%; min-height:150px; resize:vertical; padding:16px; border-radius:14px;
  border:1.5px solid var(--line); font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper-alt); transition:border-color .18s ease, box-shadow .18s ease;
}
textarea#input-text:focus{border-color:var(--indigo); box-shadow:0 0 0 4px rgba(79,70,229,.12); outline:none; background:#fff;}
.field-meta{display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-faint); margin-top:8px;}
.converter-options{display:flex; flex-wrap:wrap; gap:22px; margin:22px 0; padding:18px; background:var(--paper-alt); border-radius:14px;}
.opt-group label.opt-label{font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:8px;}
.chip-set{display:flex; gap:6px; flex-wrap:wrap;}
.chip{padding:7px 13px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:.82rem; font-weight:600; color:var(--ink-soft);}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.converter-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px;}
.result-panel{
  border-radius:14px; border:1.5px dashed var(--line); background:var(--paper-alt);
  padding:20px; min-height:100px;
}
.result-panel .result-label{font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; display:block;}
#result-output{
  font-family:var(--font-mono); font-size:1.15rem; color:var(--indigo-dark); word-break:break-word;
  min-height:28px; line-height:1.7;
}
#result-output .out-space{display:inline-block; width:.6em;}
.result-panel .empty-state{color:var(--ink-faint); font-family:var(--font-body); font-size:.95rem;}
@keyframes pop-in{from{opacity:.4; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
.reveal-pop{animation:pop-in .35s ease;}
.example-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.example-btn{
  padding:9px 15px; border-radius:10px; border:1px solid var(--line); background:#fff;
  font-size:.85rem; font-weight:600; color:var(--indigo);
}
.example-btn:hover{background:#EEF0FF; border-color:var(--indigo);}

/* Toast */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px); z-index:3000;
  background:var(--ink); color:#fff; padding:14px 22px; border-radius:12px; font-weight:600;
  display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg); opacity:0;
  transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.toast.is-visible{opacity:1; transform:translate(-50%,0);}
.toast svg{color:var(--mint);}

/* =========================================================
   CARD GRIDS (How it works / Features / Uses)
   ========================================================= */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}

.step-card, .feature-card, .use-card, .blog-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease;
}
.step-card:hover, .feature-card:hover, .use-card:hover, .blog-card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-md);
}
.step-tile{margin-bottom:16px;}
.step-card h3, .feature-card h3, .use-card h3{font-size:1.08rem; margin-bottom:8px;}
.step-card p, .feature-card p, .use-card p{color:var(--ink-soft); font-size:.93rem; margin:0;}

.feature-icon, .use-icon{
  width:46px; height:46px; border-radius:12px; background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}

/* =========================================================
   ALPHABET CHART
   ========================================================= */
.chart-controls{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:34px;}
.chart-grid{
  display:grid; grid-template-columns:repeat(13,1fr); gap:10px;
}
.chart-cell{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 4px;
  text-align:center; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chart-cell:hover{transform:translateY(-4px) scale(1.04); box-shadow:var(--shadow-md); border-color:var(--indigo);}
.chart-cell .cc-letter{display:block; font-family:var(--font-display); font-weight:700; font-size:1.1rem;}
.chart-cell .cc-num{display:block; font-family:var(--font-mono); color:var(--indigo); font-size:.86rem; margin-top:4px;}

/* =========================================================
   MANUAL GUIDE
   ========================================================= */
.guide-example{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-sm);
}
.guide-table{width:100%; border-collapse:collapse; margin:14px 0;}
.guide-table th, .guide-table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem;}
.guide-table th{font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; color:var(--ink-faint); letter-spacing:.05em;}
.guide-final{
  margin-top:14px; font-family:var(--font-mono); font-weight:700; color:var(--indigo-dark);
  background:var(--paper-alt); padding:14px 18px; border-radius:10px; display:inline-block;
}
.mini-examples{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px;}
.mini-example{background:var(--paper-alt); border-radius:12px; padding:16px; text-align:center;}
.mini-example .me-word{font-family:var(--font-display); font-weight:700; font-size:1.05rem;}
.mini-example .me-nums{font-family:var(--font-mono); color:var(--indigo); font-size:.92rem; margin-top:6px;}

/* =========================================================
   STATS
   ========================================================= */
.stats-section{background:var(--grad-brand); color:#fff;}
.stats-section .section-head h2, .stats-section .section-head p{color:#fff;}
.stats-section .section-head p{opacity:.85;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center;}
.stat-num{font-family:var(--font-display); font-size:clamp(2rem,4vw,2.7rem); font-weight:700;}
.stat-label{opacity:.85; font-size:.92rem; margin-top:6px;}

/* =========================================================
   BLOG
   ========================================================= */
.blog-thumb{
  height:150px; border-radius:12px; margin-bottom:16px; background:var(--grad-soft);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.blog-thumb::before{
  content:attr(data-glyph); font-family:var(--font-mono); font-weight:700; font-size:2.6rem;
  color:rgba(79,70,229,.18);
}
.blog-meta{display:flex; gap:10px; align-items:center; font-size:.78rem; color:var(--ink-faint); margin-bottom:10px;}
.blog-cat{
  background:#EEF0FF; color:var(--indigo); padding:3px 10px; border-radius:999px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; font-size:.7rem;
}
.blog-card h3{font-size:1.08rem;}
.read-more{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.88rem; margin-top:10px;}
.read-more svg{transition:transform .18s ease;}
.read-more:hover svg{transform:translateX(4px);}

/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between;
  font-weight:600; font-size:1rem; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-icon{
  width:26px; height:26px; border-radius:50%; background:var(--paper-alt); color:var(--indigo);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s ease;
}
.faq-item[open] summary .faq-icon{transform:rotate(45deg); background:var(--indigo); color:#fff;}
.faq-item .faq-body{padding:0 22px 20px; color:var(--ink-soft); font-size:.95rem;}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-field{margin-bottom:18px;}
.form-field.full{grid-column:1/-1;}
.form-field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:7px;}
.form-field input, .form-field textarea{
  width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid var(--line);
  font-family:inherit; font-size:.96rem; background:var(--paper-alt);
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--indigo); outline:none; background:#fff; box-shadow:0 0 0 4px rgba(79,70,229,.1);}
.field-error{color:#DC2626; font-size:.8rem; margin-top:6px; display:none;}
.form-field.has-error input, .form-field.has-error textarea{border-color:#DC2626;}
.form-field.has-error .field-error{display:block;}
.form-note{font-size:.82rem; color:var(--ink-faint); margin-top:10px;}
.form-success{
  display:none; background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46;
  padding:14px 18px; border-radius:12px; margin-bottom:20px; font-weight:600;
}
.form-success.is-visible{display:block;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:#151429; color:#C9C7E6; padding:64px 0 24px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand p{color:#9997C0; font-size:.9rem; max-width:34ch;}
.footer-col h4{color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px;}
.footer-col a{display:block; color:#B4B2D8; font-size:.9rem; padding:5px 0;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; flex-wrap:wrap; gap:14px;}
.footer-bottom p{margin:0; font-size:.85rem; color:#8886B3;}
.social-row{display:flex; gap:10px;}
.social-row a{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; color:#C9C7E6;
}
.social-row a:hover{background:var(--indigo); color:#fff;}

/* =========================================================
   GENERIC PAGE HERO (inner pages)
   ========================================================= */
.page-hero{padding:56px 0 40px; background:var(--grad-soft); text-align:center;}
.page-hero h1{font-size:clamp(1.9rem,3.6vw,2.6rem);}
.page-hero p{color:var(--ink-soft); max-width:640px; margin:0 auto;}
.prose{max-width:760px; margin:0 auto;}
.prose h2{margin-top:1.6em; font-size:1.5rem;}
.prose h3{margin-top:1.2em; font-size:1.15rem;}
.prose p{color:var(--ink-soft);}
.prose ul{margin:0 0 1em 1.2em; list-style:disc; color:var(--ink-soft);}
.prose li{margin-bottom:.4em;}
.prose blockquote{border-left:4px solid var(--indigo); margin:0 0 1em; padding:6px 0 6px 18px; color:var(--ink); font-style:italic; background:var(--paper-alt); border-radius:0 10px 10px 0;}
.article-meta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; color:var(--ink-faint); font-size:.85rem; margin-top:14px;}
.article-cta{
  margin-top:40px; background:var(--grad-brand); border-radius:18px; padding:34px; text-align:center; color:#fff;
}
.article-cta h3{color:#fff;}
.article-cta p{color:rgba(255,255,255,.85);}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* 404 */
.error-page{padding:110px 0; text-align:center;}
.error-code{font-family:var(--font-mono); font-size:clamp(4rem,12vw,7rem); font-weight:700; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}